/* WSDE Category Archives — matches wsde-product-feed (All Products) one-to-one.
   Sidebar, cards, grid, filter button and search input are styled by
   product-feed.css (enqueued on archives); this file only adds the hero,
   pagination, and product-page styles. Brand maroon #862835. */

/* ---------- Hero: boxed like the Elementor All Products hero ---------- */
body.tax-wsde_product_category {
    background-color: #B3ABA9; /* brand secondary: page backdrop like All Products */
}
.wsde-hero {
    background-color: #B3ABA9; /* fallback while hero image loads */
    background-position: center center;
    background-size: cover;
    position: relative;
    max-width: 1140px;
    margin: 10px auto 0; /* exact gap below header, matches All Products section padding */
    border-radius: 6px;
    overflow: hidden;
}
.wsde-hero::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(0,0,0,0.5); /* matches Elementor overlay opacity 0.5 */
}
.wsde-hero-inner {
    position: relative;
    min-height: 454px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding: 10px 10px 10px 24px;
}
.wsde-hero-title {
    font-family: 'Lora', serif;
    font-weight: 700;
    font-size: 71px;
    line-height: 1.1;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}
@media (max-width: 768px) {
    .wsde-hero-title { font-size: 46px; }
}

/* Search input: same values as #wsde-product-search in product-feed.css */
.wsde-hero .wsde-search-container {
    position: relative;
    width: 50%;
    max-width: 50%;
    margin: 0 auto;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    .wsde-hero .wsde-search-container { width: 300px; max-width: 300px; }
}
#wsde-archive-search {
    width: 100% !important;
    height: 55px;
    padding: 0 20px 0 55px;
    border: 2px solid #862835;
    border-radius: 12px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    box-sizing: border-box;
    transition: box-shadow 0.3s ease;
    background-color: #fff;
    color: #333;
    display: block;
}
#wsde-archive-search:focus { outline: none; box-shadow: 0 0 0 4px rgba(134, 40, 53, 0.2); }
.wsde-hero .wsde-search-container::before {
    content: ''; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23862835' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat; background-size: contain; pointer-events: none; opacity: 0.9; z-index: 2;
}

/* ---------- Archive body ---------- */
.wsde-category-archive {
    max-width: 1140px;
    margin: 0 auto;
    padding: 2rem 1rem 4rem;
}
/* All Products renders 3 columns at desktop widths; pin the archive grid
   to the same so card dimensions match exactly (auto-fill wavers on ~30px). */
@media (min-width: 1024px) {
    .wsde-category-archive .product-grid { grid-template-columns: repeat(3, 1fr); }
}
.wsde-category-intro {
    font-family: 'Montserrat', sans-serif;
    color: #5a6a7a;
    line-height: 1.6;
    margin: 0 0 1.5rem;
}

/* ---------- Category guide: collapsed by default ----------
   Term descriptions are split by the template: the opening paragraph stays
   above the grid; the Q&A/detail sections render here, beneath the grid and
   pagination, behind a single toggle (Tractor Supply pattern). All copy is
   server-rendered in the DOM for SEO; the toggle is a pure visibility
   switch, never fetch-on-click. */
.wsde-category-guide {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #d8d2cc;
    max-width: 860px;
}
.wsde-category-guide .wsde-guide-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    border-width: 2px;
    border-style: solid;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    font-family: 'Lora', serif;
    font-size: 1.3rem;
    line-height: 1.3;
    cursor: pointer;
    text-align: left;
}
.wsde-category-guide .wsde-guide-toggle,
.wsde-category-guide .wsde-guide-toggle:hover,
.wsde-category-guide .wsde-guide-toggle:focus,
.wsde-category-guide .wsde-guide-toggle:active,
.wsde-category-guide .wsde-guide-toggle[aria-expanded="true"],
.wsde-category-guide .wsde-guide-toggle[aria-expanded="false"] {
    background: #862835 !important;
    background-color: #862835 !important;
    border-color: #862835 !important;
    color: #fff !important;
    opacity: 1 !important;
    filter: none !important;
}
.wsde-category-guide .wsde-guide-toggle:hover {
    background: #6d1f2b !important;
    background-color: #6d1f2b !important;
    border-color: #6d1f2b !important;
}
.wsde-category-guide .wsde-guide-toggle:focus-visible {
    outline: 2px solid #862835;
    outline-offset: 2px;
}
.wsde-guide-icon {
    flex: none;
    font-size: 1.6rem;
    line-height: 1;
    color: #fff;
    transition: transform 0.2s ease;
}
.wsde-guide-toggle[aria-expanded="true"] .wsde-guide-icon { transform: rotate(45deg); }
.wsde-guide-content {
    font-family: 'Montserrat', sans-serif;
    color: #5a6a7a;
    line-height: 1.65;
    padding-top: 1.5rem;
}
.wsde-guide-content[hidden] { display: none; }
.wsde-guide-content h3 {
    font-family: 'Lora', serif;
    font-size: 1.25rem;
    line-height: 1.35;
    color: #2b2b2b;
    margin: 1.8rem 0 0.7rem;
}
.wsde-guide-content h3:first-child { margin-top: 0; }
.wsde-guide-content p { margin: 0 0 1rem; }
.wsde-guide-content ul {
    margin: 0 0 1.2rem 1.2rem;
    padding: 0;
    list-style: disc;
}
.wsde-guide-content li { margin-bottom: 0.4rem; }
.wsde-guide-content table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 1.4rem;
    font-size: 0.92rem;
    background: #fff;
    border: 1px solid #e3d5d5;
    border-radius: 8px;
    overflow: hidden;
}
.wsde-guide-content th,
.wsde-guide-content td {
    text-align: left;
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid #e8e2dc;
    border-left: 1px solid #e8e2dc;
}
.wsde-guide-content th:first-child,
.wsde-guide-content td:first-child { border-left: none; }
.wsde-guide-content th {
    background: #f4ecec;
    color: #862835;
    font-weight: 700;
}
.wsde-guide-content tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
    .wsde-guide-toggle { font-size: 1.1rem; padding: 0.9rem 1rem; }
    .wsde-guide-content table { font-size: 0.82rem; }
    .wsde-guide-content th,
    .wsde-guide-content td { padding: 0.5rem 0.6rem; }
}

/* ---------- Pagination: brand maroon, never the theme default ---------- */
.wsde-category-archive .pagination {
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    margin: 2.5rem auto 0;
}
.wsde-category-archive .page-numbers {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #862835 !important;
    text-decoration: none !important;
    padding: 0.4rem 0.7rem;
    border-radius: 6px;
}
.wsde-category-archive .page-numbers:hover { background: #f7f0f0; }
.wsde-category-archive .page-numbers.current { color: #2c3e50 !important; }

/* Keyboard affordance on the accordion headers */
.wsde-category-archive .category-parent:focus-visible {
    outline: 2px solid #862835;
    outline-offset: 2px;
    border-radius: 6px;
}

/* ---------- Product detail page (PDP) ---------- */
.wsde-pdp { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3.5rem; font-family: 'Montserrat', sans-serif; color: #2b2b2b; }
.wsde-breadcrumb { font-size: 0.88rem; color: #77716a; margin-bottom: 1.4rem; }
.wsde-breadcrumb a { color: #862835; text-decoration: none; }
.wsde-breadcrumb a:hover { text-decoration: underline; }
.wsde-crumb-sep { margin: 0 0.4rem; color: #bbb; }
.wsde-crumb-current { color: #55534f; }

.wsde-pdp-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
@media (max-width: 820px) { .wsde-pdp-layout { grid-template-columns: 1fr; } }

.wsde-pdp-media img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
    background: #f4f1ed;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(60, 20, 20, 0.12);
    display: block;
}
.wsde-pdp-title { font-family: 'Lora', serif; font-size: 2.1rem; line-height: 1.15; margin: 0 0 0.8rem; color: #2b2b2b; }
.wsde-pdp-cats { margin-bottom: 1rem; }
.wsde-chip {
    display: inline-block;
    background: #f4ecec;
    color: #862835 !important;
    border: 1px solid #e3d5d5;
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    margin: 0 0.4rem 0.4rem 0;
    text-decoration: none !important;
}
.wsde-chip:hover { background: #862835; color: #fff !important; }
.wsde-pdp-lede { font-size: 1.05rem; line-height: 1.55; color: #4c4944; }
.wsde-pdp-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.4rem 0 0.8rem; }
.wsde-btn {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    padding: 0.85rem 1.4rem;
    border-radius: 10px;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.wsde-btn-primary { background: #862835; color: #fff !important; }
.wsde-btn-primary:hover { background: #6d1f2b; }
.wsde-btn-outline { background: #fff; color: #862835 !important; border: 2px solid #862835; }
.wsde-btn-outline:hover { background: #862835; color: #fff !important; }
.wsde-pdp-note { font-size: 0.9rem; color: #77716a; }

.wsde-pdp-description { margin-top: 3rem; max-width: 860px; line-height: 1.65; }
.wsde-pdp-description h2, .wsde-pdp-related h2 { font-family: 'Lora', serif; color: #2b2b2b; margin-bottom: 1rem; }

/* ---------- PDP "More in ..." related cards: same values as product-feed.css
   (feed.css is not enqueued on single product pages, so these are explicit) ---------- */
.wsde-pdp-related .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1.5rem; justify-content: start; }
.wsde-pdp-related .product-card { display: flex; flex-direction: column; width: 100%; box-sizing: border-box; background-color: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.wsde-pdp-related .product-card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0,0,0,0.1); }
.wsde-pdp-related .product-card img { width: 100%; height: 180px; object-fit: cover; object-position: center; display: block; background-color: #f0f0f0; }
.wsde-pdp-related .product-card h3 { font-family: 'Lora', serif; font-size: 0.9rem; line-height: 1.4; font-weight: 400; color: #2c3e50; margin: 1rem; flex-grow: 1; }
.wsde-pdp-related .product-card .btn { display: block; width: calc(100% - 2rem); font-family: 'Montserrat', sans-serif; font-size: 1rem; background-color: #862835; color: #fff; text-align: center; padding: 0.75rem; text-decoration: none; font-weight: 700; margin: 0 1rem 1rem 1rem; border-radius: 5px; cursor: pointer; margin-top: auto; transition: background-color 0.2s ease, color 0.2s ease; border: none; box-sizing: border-box; }
.wsde-pdp-related .product-card .btn:hover { background-color: #6a1d22; color: #000; }