/* ============================================================
   GAARA EXPORT – Products page  (Gaara Products template)
   Shares the homepage design language: same tokens, same card
   treatment, same CTA. Self-contained — loads only on this
   template, so nothing here can affect other pages.
============================================================ */

:root {
    --g-dark:       #1a3a27;
    --g-green:      #3a6e3a;
    --g-mid:        #4e8a4e;
    --g-cream:      #f5f0e6;
    --g-cream2:     #faf8f3;
    --g-border:     #e8e2d8;
    --g-text:       #2c2c2c;
    --g-muted:      #6b6b6b;
    --g-white:      #ffffff;
    --g-shadow:     0 4px 24px rgba(26,58,39,.08);
    --g-radius:     10px;
    --g-radius-lg:  16px;
    --g-transition: .25s ease;

    --fs-h1:      clamp(2.1rem, 4vw, 3rem);
    --fs-h2:      clamp(1.15rem, 1.6vw, 1.3rem);
    --fs-body:    1rem;
    --fs-sm:      .9rem;
    --fs-eyebrow: .85rem;
    --sp-section: 80px;
}

.gaara-shop-page * { box-sizing: border-box; }
.gaara-shop-page {
    font-family: var(--gaara-font, "IBM Plex Sans Arabic", system-ui, -apple-system, sans-serif);
    color: var(--g-text);
    /* clip, NOT hidden: `overflow-x: hidden` makes this a scroll
       container, and position:sticky never engages inside one — that is
       why the category sidebar refused to follow the scroll. `clip`
       contains overflow without creating that scroll container. */
    overflow-x: clip;
    background: var(--g-white);
}
.gaara-shop-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
}
.gaara-shop-eyebrow {
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--g-green);
    margin: 0 0 10px;
}

/* ── PAGE HEADER ──────────────────────────────────────────────
   A photo band rather than a flat colour block, matching the way the
   homepage opens. The gradient keeps the breadcrumb and subtitle
   legible over the image at every crop. */
.gaara-shop-header {
    position: relative;
    /* Top padding clears the fixed site header. */
    padding: 185px 0 72px;
    color: #fff;
    background-color: var(--g-dark);
    background-image: url("https://gaaraexport.com/wp-content/uploads/2025/04/grape-farm.jpg");
    background-size: cover;
    background-position: center 38%;
    overflow: hidden;
}
.gaara-shop-header-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(12,28,19,.78) 0%, rgba(12,28,19,.62) 45%, rgba(26,58,39,.88) 100%);
}
.gaara-shop-header-inner { position: relative; z-index: 1; }
.gaara-shop-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-sm);
    margin-bottom: 16px;
}
.gaara-shop-breadcrumb a { color: rgba(255,255,255,.62); text-decoration: none; }
.gaara-shop-breadcrumb a:hover { color: #fff; text-decoration: none; }
.gaara-shop-breadcrumb span { color: rgba(255,255,255,.38); }
.gaara-shop-breadcrumb [aria-current] { color: rgba(255,255,255,.9); font-weight: 600; }
.gaara-shop-title {
    font-size: var(--fs-h1);
    font-weight: 800;
    color: #fff;
    margin: 0 0 14px;
    letter-spacing: -.02em;
    line-height: 1.12;
    text-shadow: 0 2px 18px rgba(0,0,0,.28);
}
.gaara-shop-subtitle {
    font-size: 1.05rem;
    color: rgba(255,255,255,.82);
    max-width: 620px;
    line-height: 1.7;
    margin: 0;
}
/* The subtitle is a container now (the term description is real HTML),
   so style the paragraphs inside it rather than the element itself. */
.gaara-shop-subtitle p { margin: 0 0 10px; color: inherit; font-size: inherit; line-height: inherit; }
.gaara-shop-subtitle p:last-child { margin-bottom: 0; }
.gaara-shop-subtitle b, .gaara-shop-subtitle strong { color: #fff; font-weight: 700; }


/* ── LAYOUT ───────────────────────────────────────────────── */
/* Fades from the tinted grid area into the white section below
   instead of meeting it on a hard horizontal line. */
.gaara-shop-body {
    padding: 52px 0 var(--sp-section);
    background: linear-gradient(180deg,
        var(--g-cream2) 0%,
        var(--g-cream2) 55%,
        var(--g-white) 100%);
}
.gaara-shop-layout {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 32px;
    align-items: start;
}
/* Sticky, and scrollable inside itself: with 10 categories the box can
   be taller than the viewport, and a sticky element taller than the
   screen never actually sticks. */
.gaara-shop-sidebar {
    position: sticky;
    top: 110px;
    max-height: calc(100vh - 130px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.gaara-cat-box {
    background: var(--g-white);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    padding: 22px 20px;
    box-shadow: var(--g-shadow);
}
/* Desktop: a plain heading. It is a <button> so the same element can
   become the dropdown toggle under 1024px without duplicate markup. */
.gaara-shop-page .gaara-cat-box-title {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    display: block;
    text-align: start;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--g-border);
    border-radius: 0;
    box-shadow: none;
    cursor: default;
    font-family: inherit;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--g-dark);
    margin: 0 0 14px;
    padding: 0 0 14px;
}
.gaara-cat-current,
.gaara-cat-chevron { display: none; }
.gaara-cat-list { list-style: none; margin: 0; padding: 0; }
.gaara-cat-list li { margin: 0 0 4px; }
/* These are <button>s, so the UA's default chrome (grey background,
   border, shrink-to-fit width) has to be reset explicitly — that
   default is what made the list render as mismatched grey pills. */
/* The entries are <button> on /products/ and <a> on category archives —
   both must look identical. */
.gaara-shop-page a.gaara-cat-link { text-decoration: none; }
.gaara-shop-page .gaara-cat-link {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    border: 0 !important;
    background: none;
    background-color: transparent;
    box-shadow: none;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--g-text);
    text-decoration: none;
    transition: all var(--g-transition);
}
.gaara-shop-page .gaara-cat-link:hover { background-color: var(--g-cream); color: var(--g-dark); text-decoration: none; }
.gaara-shop-page .gaara-cat-link.active { background-color: var(--g-dark); color: #fff; }
.gaara-cat-count {
    flex-shrink: 0;
    min-width: 26px;
    height: 24px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .78rem;
    font-weight: 700;
    border-radius: 20px;
    background: var(--g-cream);
    color: var(--g-green);
}
.gaara-shop-page .gaara-cat-link:hover .gaara-cat-count { background: #fff; }
.gaara-shop-page .gaara-cat-link.active .gaara-cat-count { background: rgba(255,255,255,.18); color: #fff; }

/* ── PRODUCT GRID ─────────────────────────────────────────── */
.gaara-shop-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}
.gaara-shop-card {
    display: flex;
    flex-direction: column;
    background: var(--g-white);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    box-shadow: var(--g-shadow);
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.gaara-shop-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(26,58,39,.13);
}
/* Fixed 4:3 box via a padding pseudo-element, NOT aspect-ratio.
   aspect-ratio yields to content that is taller than the ratio, so a
   portrait product photo stretched its own card and pushed that card's
   title and button out of line with the rest of the row. The padding
   technique plus an absolutely positioned image makes every box
   identical regardless of the photo's shape. */
.gaara-shop-card-img {
    --card-pad: 18px;
    display: block;
    position: relative;
    background: var(--g-white);
}
.gaara-shop-card-img::before {
    content: "";
    display: block;
    padding-top: 75%;      /* 4:3 */
}
.gaara-shop-page .gaara-shop-card-img img {
    position: absolute;
    inset: var(--card-pad);
    width: calc(100% - (var(--card-pad) * 2)) !important;
    height: calc(100% - (var(--card-pad) * 2)) !important;
    object-fit: contain;
    display: block;
    transition: transform .4s ease;
}
.gaara-shop-card:hover .gaara-shop-card-img img { transform: scale(1.05); }
.gaara-shop-card-noimg {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c4ccc4;
    background: var(--g-cream);
    border-radius: var(--g-radius);
}

/* Flex column + auto margin keeps every card's buttons on one line
   across a row, whether the product name runs to one line or two. */
.gaara-shop-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 4px 16px 20px;
    text-align: center;
}
.gaara-shop-card-title {
    font-size: var(--fs-h2);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 12px;
    min-height: 2.7em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gaara-shop-card-title a { color: var(--g-dark); text-decoration: none; }
.gaara-shop-card-title a:hover { color: var(--g-green); text-decoration: none; }

.gaara-shop-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.gaara-shop-page .gaara-shop-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: .82rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--g-transition);
}
.gaara-shop-page .gaara-shop-btn-solid {
    background: var(--g-dark);
    color: #fff;
    border: 1.5px solid var(--g-dark);
}
.gaara-shop-page .gaara-shop-btn-solid:hover {
    background: var(--g-green); border-color: var(--g-green); color: #fff; text-decoration: none;
}
.gaara-shop-page .gaara-shop-btn-ghost {
    background: var(--g-cream2);
    color: var(--g-green);
    border: 1.5px solid transparent;
}
.gaara-shop-page .gaara-shop-btn-ghost:hover {
    border-color: var(--g-green); background: var(--g-cream); color: var(--g-green); text-decoration: none;
}

/* ── PAGINATION ───────────────────────────────────────────── */
.gaara-shop-pagination { margin-top: 44px; text-align: center; }
.gaara-shop-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    margin: 0 3px;
    border-radius: 10px;
    border: 1px solid var(--g-border);
    background: var(--g-white);
    color: var(--g-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: .88rem;
    transition: all var(--g-transition);
}
.gaara-shop-pagination .page-numbers:hover,
.gaara-shop-pagination .page-numbers.current {
    background: var(--g-dark); border-color: var(--g-dark); color: #fff; text-decoration: none;
}
.gaara-shop-pagination .page-numbers.dots { border: none; background: none; }

/* ── EMPTY STATE ──────────────────────────────────────────── */
.gaara-shop-empty { text-align: center; padding: 70px 20px; color: var(--g-muted); }
.gaara-shop-empty svg { color: #ccc; }
.gaara-shop-empty h2 { font-size: 1.35rem; color: var(--g-dark); margin: 16px 0 8px; }
.gaara-shop-empty a { color: var(--g-green); }

/* Shown when a filter matches nothing. */
.gaara-shop-noresults {
    text-align: center;
    padding: 48px 20px;
    color: var(--g-muted);
    font-size: 1.05rem;
}
.gaara-shop-card[hidden] { display: none; }

/* ── CERTIFICATIONS ───────────────────────────────────────────
   Plain row, no cards: the logos are JPEGs on white, so framing them
   on a white section only produces empty boxes (learned on the
   homepage — do not re-add borders here). */
.gaara-shop-certs { padding: var(--sp-section) 0; background: var(--g-white); }
.gaara-shop-section-header { text-align: center; max-width: 700px; margin: 0 auto 44px; }
.gaara-shop-certs-title {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--g-dark);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.gaara-shop-certs-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(40px, 8vw, 110px);
}
.gaara-shop-page .gaara-shop-certs-grid img {
    height: 110px !important;
    width: auto !important;
    max-width: 220px;
    object-fit: contain;
    /* Blends each logo's own white ground into the white section. */
    mix-blend-mode: multiply;
    transition: transform var(--g-transition);
}
.gaara-shop-certs-grid img:hover { transform: scale(1.05); }

/* ── CONTACT CTA (matches the homepage component) ─────────── */
.gaara-post-cta-section { padding: var(--sp-section) 0; background: var(--g-white); }
.gaara-post-cta {
    display: flex;
    align-items: center;
    gap: 48px;
    background: #e8efe9;
    border-radius: 16px;
    padding: 56px;
}
.gaara-cta-left { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.gaara-cta-heading {
    font-size: clamp(1.6rem, 2.6vw, 2.1rem);
    font-weight: 800;
    color: var(--g-dark);
    margin: 0;
    line-height: 1.25;
    letter-spacing: -.02em;
}
.gaara-cta-desc { font-size: var(--fs-body); color: var(--g-muted); margin: 0; line-height: 1.8; }
.gaara-cta-details { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.gaara-cta-details li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); color: var(--g-text); }
.gaara-cta-details li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--g-green); }
.gaara-cta-details li a { color: inherit; text-decoration: none; }
.gaara-cta-details li a:hover { color: var(--g-green); }
.gaara-cta-right { flex: 0 0 250px; display: flex; flex-direction: column; gap: 14px; }
.gaara-shop-page .gaara-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 22px;
    border-radius: 50px;
    font-size: .94rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--g-transition), box-shadow var(--g-transition), background var(--g-transition), color var(--g-transition);
}
.gaara-shop-page .gaara-cta-btn svg { width: 19px; height: 19px; flex-shrink: 0; }
.gaara-shop-page .gaara-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(26,58,39,.16); text-decoration: none; }
.gaara-shop-page .gaara-cta-whatsapp { background: #25d366; color: #fff; }
.gaara-shop-page .gaara-cta-whatsapp:hover { background: #1db954; color: #fff; }
.gaara-shop-page .gaara-cta-email { background: transparent; color: var(--g-dark); border: 2px solid var(--g-dark); }
.gaara-shop-page .gaara-cta-email:hover { background: var(--g-dark); color: #fff; }

/* ── RTL ──────────────────────────────────────────────────────
   direction:rtl alone mirrors flex/grid; no row-reverse on top of
   it anywhere, or the two cancel out (see post.css FAQ note). */
.gaara-shop-page.gaara-rtl { direction: rtl; }
.gaara-shop-page.gaara-rtl .gaara-shop-title,
.gaara-shop-page.gaara-rtl .gaara-shop-subtitle { text-align: right; }
.gaara-shop-page.gaara-rtl .gaara-cta-details li a[href^="tel:"],
.gaara-shop-page.gaara-rtl .gaara-cta-details li a[href^="mailto:"] { unicode-bidi: isolate; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .gaara-shop-layout { grid-template-columns: 1fr; gap: 24px; }
    .gaara-shop-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .gaara-cat-box { padding: 0; overflow: hidden; }

    /* ── Categories as a dropdown ── */
    .gaara-shop-page .gaara-cat-box-title {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 16px 18px;
        border-bottom: 0;
        cursor: pointer;
    }
    .gaara-cat-current {
        display: block;
        margin-inline-start: auto;
        font-size: .9rem;
        font-weight: 600;
        color: var(--g-green);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 48%;
    }
    .gaara-cat-chevron {
        display: block;
        width: 18px;
        height: 18px;
        flex-shrink: 0;
        color: var(--g-green);
        transition: transform var(--g-transition);
    }
    .gaara-cat-box-title[aria-expanded="true"] .gaara-cat-chevron { transform: rotate(180deg); }

    .gaara-cat-list {
        display: none;
        padding: 6px 12px 14px;
        border-top: 1px solid var(--g-border);
    }
    .gaara-cat-box-title[aria-expanded="true"] + .gaara-cat-list { display: block; }
    .gaara-cat-list li { margin: 0 0 2px; }
    .gaara-shop-page .gaara-cat-link { width: 100%; }

    .gaara-shop-header { padding: 165px 0 56px; }
}

@media (max-width: 768px) {
    :root { --sp-section: 56px; }
    .gaara-shop-container { padding: 0 20px; }
    .gaara-shop-header { padding: 130px 0 44px; }
    .gaara-shop-certs { padding: 48px 0; }
    .gaara-shop-page .gaara-shop-certs-grid img { height: 74px !important; max-width: 150px; }
    .gaara-shop-certs-grid { gap: 32px; }
    .gaara-shop-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .gaara-shop-card-img { --card-pad: 12px; }
    .gaara-shop-card-body { padding: 4px 10px 16px; }
    .gaara-shop-card-actions { flex-direction: column; }
    .gaara-shop-page .gaara-shop-btn { width: 100%; font-size: .78rem; padding: 8px 10px; }
    .gaara-post-cta { flex-direction: column; align-items: stretch; gap: 26px; padding: 32px 24px; }
    .gaara-cta-right { flex: none; flex-direction: row; }
    .gaara-shop-page .gaara-cta-btn { flex: 1; }
}

@media (max-width: 480px) {
    .gaara-shop-header { padding: 112px 0 36px; }
    .gaara-shop-page .gaara-shop-certs-grid img { height: 62px !important; max-width: 120px; }
    .gaara-shop-grid { grid-template-columns: 1fr; }
    .gaara-shop-card-actions { flex-direction: row; }
    .gaara-shop-page .gaara-shop-btn { width: auto; font-size: .82rem; padding: 8px 16px; }
    .gaara-cta-right { flex-direction: column; }
}