/* ============================================================
   GAARA EXPORT – Product Page Styles  v1.1
============================================================ */

: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;
}

/* ── Base ─────────────────────────────────────────────────── */
.gaara-product-page * { box-sizing: border-box; }

/* ── Product page ─────────────────────────────────────────── */
.gaara-product-page {
    padding-top: 0;
}

.gaara-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
}

/* shared section header */
.gaara-section-header {
    text-align: center;
    margin-bottom: 44px;
}
.gaara-section-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--g-dark);
    margin: 0 0 12px;
    letter-spacing: -.02em;
}
.gaara-section-divider {
    width: 48px;
    height: 3px;
    background: var(--g-green);
    border-radius: 2px;
    margin: 0 auto 14px;
}
.gaara-section-subtitle {
    font-size: .97rem;
    color: var(--g-muted);
    margin: 0;
}

/* ── Breadcrumb (inside hero) ─────────────────────────────── */
/* The header now sits OVER this page (gaara_header_is_overlay returns true
   for single products), so the hero paints its own dark band behind the bar.
   Two jobs: the white menu stays readable before any scrolling, and the page
   stops being the only one on the site whose header starts solid and never
   changes. The band ends just under the breadcrumb, which sits on it. */
.gaara-product-hero::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    /* Exactly the header's height — the band is the header's backdrop and
       nothing else belongs on it. Taller than this and the breadcrumb ends
       up sitting inside the menu bar. */
    height: 118px;
    background: #1a3a27;
    pointer-events: none;
}
.gaara-product-hero > * { position: relative; z-index: 1; }

.gaara-breadcrumb-bar {
    background: transparent;
    padding: 11px 0;
    margin-top: 0;
}



.gaara-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: .83rem;
    margin-bottom: 20px;
}
.gaara-breadcrumb a {
    color: var(--g-muted);
    text-decoration: none;
    transition: color var(--g-transition);
}
.gaara-breadcrumb a:hover { color: var(--g-dark); }
.gaara-bc-sep     { color: var(--g-border); }
.gaara-bc-current { color: var(--g-dark); font-weight: 600; }

/* ── HERO ─────────────────────────────────────────────────── */
.gaara-product-hero {
    position: relative;
    background: var(--g-white);
    /* Top padding, NOT a margin on the breadcrumb inside: with no top
       padding or border here, a child's top margin collapsed through this
       element and dragged the whole section — dark band included — down the
       page, leaving the fixed header on bare white with its white menu text
       invisible. It must also live on THIS rule: an earlier declaration was
       silently reset by the `padding` shorthand below.
       118px is the band/header height; the extra 30px is breathing room
       between the bar and the breadcrumb. */
    padding: 148px 0 60px;
}
.gaara-hero-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Gallery column */
.gaara-gallery-col { position: relative; }

.gaara-main-image-wrap {
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-cream2);
    position: relative;
}
/* Square frame to match the square product photos (no empty bands) */
.gaara-main-image-wrap::before {
    content: '';
    display: block;
    padding-top: 100%;
}
.gaara-main-image {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain;
    opacity: 0;
    transition: opacity .18s ease;
}
.gaara-main-image.active {
    opacity: 1;
}

.gaara-cert-badges {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.gaara-cert-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--g-border);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gaara-cert-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
}

.gaara-thumbnails {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.gaara-thumb-item {
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color var(--g-transition);
    aspect-ratio: 1;
}
.gaara-thumb-item:hover,
.gaara-thumb-item.active { border-color: var(--g-green); }
.gaara-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Info column */
.gaara-info-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.gaara-product-category-tag {
    display: inline-block;
    background: rgba(58,110,58,.1);
    color: var(--g-green);
    border: 1px solid rgba(58,110,58,.2);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 20px;
    width: fit-content;
}
.gaara-product-title {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--g-dark);
    line-height: 1.15;
    margin: 0;
    letter-spacing: -.03em;
}
.gaara-product-excerpt {
    font-size: 1rem;
    color: var(--g-muted);
    line-height: 1.7;
    margin: 0;
}

/* ── SPECS: clean list style (no borders, no backgrounds) ─── */
.gaara-specs-wrap { margin-top: 4px; }

.gaara-specs-title { display: none; } /* hidden — title is implicit */

.gaara-specs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.gaara-specs-table tr {
    border-bottom: 1px solid rgba(0,0,0,.07);
}
.gaara-specs-table tr:last-child { border-bottom: none; }
.gaara-specs-table th {
    width: 42%;
    padding: 9px 0;
    text-align: left;
    font-weight: 500;
    color: var(--g-muted);
    background: transparent;
    font-size: .88rem;
    white-space: nowrap;
    padding-right: 12px;
}
.gaara-specs-table td {
    padding: 9px 0;
    color: var(--g-dark);
    font-weight: 600;
    background: transparent;
}

/* CTA Buttons */
.gaara-cta-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.gaara-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--g-dark);
    color: #fff;
    padding: 13px 26px;
    border-radius: var(--g-radius);
    font-weight: 700;
    font-size: .97rem;
    text-decoration: none;
    transition: background var(--g-transition), transform var(--g-transition), box-shadow var(--g-transition);
    box-shadow: 0 4px 14px rgba(26,58,39,.25);
}
.gaara-btn-primary:hover {
    background: var(--g-green);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.gaara-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--g-dark);
    border: 2px solid var(--g-dark);
    padding: 11px 22px;
    border-radius: var(--g-radius);
    font-weight: 600;
    font-size: .97rem;
    text-decoration: none;
    transition: all var(--g-transition);
}
.gaara-btn-outline:hover {
    background: var(--g-dark);
    color: #fff;
    text-decoration: none;
}

/* WhatsApp CTA — icon-only, brand green */
.gaara-btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #25D366;
    color: #fff;
    border-radius: var(--g-radius);
    text-decoration: none;
    transition: background var(--g-transition), transform var(--g-transition),
                box-shadow var(--g-transition);
    box-shadow: 0 4px 14px rgba(37,211,102,.32);
    flex-shrink: 0;
}
.gaara-btn-wa svg {
    width: 24px;
    height: 24px;
    display: block;
}
.gaara-btn-wa:hover {
    background: #1ebe5d;
    color: #fff;
    transform: translateY(-2px);
    text-decoration: none;
}

/* Trust Bar */
.gaara-trust-bar {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    padding: 13px 0;
    border-top: 1px solid var(--g-border);
}
.gaara-trust-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .83rem;
    font-weight: 600;
    color: var(--g-dark);
}
.gaara-trust-item svg { color: var(--g-green); flex-shrink: 0; }

/* ── Hero Videos (below thumbnails, no title) ─────────────── */
.gaara-hero-videos {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gaara-hero-video-item {
    border-radius: var(--g-radius);
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
}
.gaara-hero-video-item iframe,
.gaara-hero-video-item video {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── ALL MIDDLE SECTIONS: unified background, no hard borders ─ */
/* Flat fill, never a gradient. A white→cream→white gradient was used here
   and removed: the two colours sit only a few RGB steps apart, so the
   browser dithers the fade into visible horizontal bands and the point
   where it stops reads as a harder edge than the plain seam it was hiding.
   Same decision as the About/Contact pages. Do NOT reintroduce one. */
.gaara-product-description,
.gaara-product-media,
.gaara-container-loading,
.gaara-certifications,
.gaara-faqs-section {
    border-top: none;
    padding: 80px 0;
    background: var(--g-cream2);
}

/* Subtle visual separator — just spacing, no line */
.gaara-product-description { padding-top: 80px; }

/* ── DESCRIPTION ──────────────────────────────────────────── */
.gaara-description-content {
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.03rem;
    line-height: 1.85;
    color: var(--g-text);
}
.gaara-description-content h2,
.gaara-description-content h3 {
    color: var(--g-dark);
    margin-top: 2em;
}
.gaara-description-content p { margin-bottom: 1.4em; }

/* ── GALLERY & VIDEOS ─────────────────────────────────────── */
.gaara-media-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 28px;
    justify-content: center;
}
.gaara-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 22px;
    border-radius: 30px;
    border: 2px solid var(--g-border);
    background: transparent;
    color: var(--g-muted);
    font-weight: 600;
    font-size: .9rem;
    cursor: pointer;
    transition: all var(--g-transition);
}
.gaara-tab-btn:hover { border-color: var(--g-green); color: var(--g-green); }
.gaara-tab-btn.active { background: var(--g-dark); border-color: var(--g-dark); color: #fff; }

.gaara-tab-panel { display: none; }
.gaara-tab-panel.active { display: block; }

.gaara-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 14px;
}
.gaara-media-item {
    border-radius: var(--g-radius);
    overflow: hidden;
    aspect-ratio: 4/3;
    position: relative;
    background: var(--g-cream);
}
.gaara-media-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.gaara-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
.gaara-media-item:hover img { transform: scale(1.06); }
.gaara-media-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,58,39,.42);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--g-transition);
}
.gaara-media-item:hover .gaara-media-overlay { opacity: 1; }

.gaara-videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 22px;
}
.gaara-video-embed {
    aspect-ratio: 16/9;
    border-radius: var(--g-radius);
    overflow: hidden;
    background: #000;
}
.gaara-video-embed iframe { width: 100%; height: 100%; display: block; }

/* ── CONTAINER LOADING ────────────────────────────────────── */
.gaara-container-loading { padding-bottom: 80px; }

.gaara-table-wrap {
    overflow-x: auto;
    border-radius: var(--g-radius);
    /* No drop shadow: every other block on this page is flat now, and a
       floating card was the thing that read as heavy. A hairline border
       holds the table together instead. */
    border: 1px solid var(--g-border);
    max-width: 720px;
    margin: 0 auto;
}
.gaara-loading-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--g-white);
    font-size: .9rem;
    min-width: 400px;
}
.gaara-loading-table thead { background: var(--g-dark); color: #fff; }
.gaara-loading-table thead th {
    padding: 11px 20px;
    text-align: left;
    font-weight: 600;
    font-size: .82rem;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.gaara-loading-table tbody tr { border-bottom: 1px solid var(--g-border); }
.gaara-loading-table tbody tr:last-child { border-bottom: none; }
.gaara-loading-table tbody tr:nth-child(even) { background: var(--g-cream2); }
.gaara-loading-table tbody tr:hover { background: rgba(58,110,58,.05); }
.gaara-loading-table tbody td {
    padding: 10px 20px;
    color: var(--g-text);
    font-size: .88rem;
}
.gaara-loading-table tbody td:first-child {
    color: var(--g-dark);
    font-weight: 500;
}
.gaara-loading-table tbody td:last-child { font-weight: 700; }

.gaara-container-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px auto 0;
    max-width: 720px;
    padding: 12px 16px;
    background: rgba(58,110,58,.07);
    border: 1px solid rgba(58,110,58,.18);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--g-dark);
}
.gaara-container-note svg { color: var(--g-green); flex-shrink: 0; margin-top: 2px; }
.gaara-container-note p { margin: 0; }

/* ── CERTIFICATIONS ─────────────────────────────────────────
   Plain row, no cards. The logos are JPEGs on a white ground, so a
   white card on a light section just frames an empty box around a tiny
   mark — the same mistake was made and reverted on the homepage.
   Do NOT re-add borders/cards here. */
.gaara-certs-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(36px, 7vw, 90px);
}
.gaara-cert-card {
    background: none;
    border: 0;
    padding: 0;
    width: auto;
    max-width: 210px;
    text-align: center;
    transition: transform var(--g-transition);
}
.gaara-cert-card:hover { transform: scale(1.04); box-shadow: none; }
.gaara-cert-img-wrap {
    width: auto;
    height: 96px;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gaara-product-page .gaara-cert-img-wrap img {
    height: 96px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    /* Blends each logo's own white ground into the section. */
    mix-blend-mode: multiply;
}
.gaara-cert-name {
    font-size: .84rem;
    font-weight: 600;
    color: var(--g-muted);
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 767px) {
    .gaara-certs-grid { gap: 28px; }
    .gaara-cert-img-wrap { height: 66px; }
    .gaara-product-page .gaara-cert-img-wrap img { height: 66px; max-width: 140px; }
    .gaara-cert-name { font-size: .76rem; }
}

/* ── FAQs ACCORDION ───────────────────────────────────────── */
.gaara-accordion {
    max-width: 760px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.gaara-accordion-item {
    background: var(--g-white);
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    overflow: hidden;
    transition: box-shadow var(--g-transition);
}
.gaara-accordion-item.active {
    box-shadow: 0 4px 18px rgba(26,58,39,.1);
    border-color: rgba(58,110,58,.3);
}
.gaara-accordion-trigger {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 17px 20px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
}
.gaara-accordion-trigger:hover { background: rgba(250,248,243,.8); }
.gaara-accordion-question {
    font-size: .97rem;
    font-weight: 600;
    color: var(--g-dark);
    flex: 1;
}
.gaara-accordion-icon {
    flex-shrink: 0;
    color: var(--g-green);
    transition: transform var(--g-transition);
}
.gaara-accordion-item.active .gaara-accordion-icon { transform: rotate(180deg); }
.gaara-accordion-panel {
    display: none;
    border-top: 1px solid var(--g-border);
}
.gaara-accordion-answer {
    padding: 16px 20px;
    font-size: .93rem;
    color: var(--g-muted);
    line-height: 1.75;
}

/* ── QUOTE FORM ───────────────────────────────────────────── */
/* Flat fill, never a gradient. A white→cream→white gradient was used here
   and removed: the two colours sit only a few RGB steps apart, so the
   browser dithers the fade into visible horizontal bands and the point
   where it stops reads as a harder edge than the plain seam it was hiding.
   Same decision as the About/Contact pages. Do NOT reintroduce one. */
.gaara-quote-section {
    border-top: none;
    padding: 80px 0;
    background: var(--g-cream2);
}
.gaara-quote-inner {
    display: grid;
    grid-template-columns: 340px 1fr;
    max-width: 960px;
    margin: 0 auto;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(26,58,39,.13);
}

/* Contact panel */
.gaara-quote-contact {
    background: var(--g-dark);
    color: #fff;
    padding: 52px 44px;
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.gaara-quote-contact h2 {
    font-size: clamp(1.7rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}
.gaara-quote-tagline {
    font-size: .97rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    margin: 0;
}
.gaara-contact-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}
.gaara-contact-item {
    display: flex;
    gap: 13px;
    align-items: flex-start;
}
.gaara-contact-icon {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gaara-contact-icon svg { color: rgba(255,255,255,.8); }
.gaara-contact-item strong {
    display: block;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(255,255,255,.5);
    margin-bottom: 2px;
}
.gaara-contact-item p {
    margin: 0;
    font-size: .92rem;
    color: rgba(255,255,255,.88);
    line-height: 1.5;
}
.gaara-contact-item a {
    color: rgba(255,255,255,.88);
    text-decoration: none;
}
.gaara-contact-item a:hover { color: #fff; text-decoration: underline; }

.gaara-btn-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: #25d366;
    color: #fff;
    padding: 12px 22px;
    border-radius: var(--g-radius);
    font-weight: 700;
    font-size: .92rem;
    text-decoration: none;
    transition: background var(--g-transition), transform var(--g-transition);
    width: fit-content;
}
.gaara-btn-whatsapp:hover {
    background: #1da851;
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}

/* Form panel */
.gaara-quote-form-wrap {
    background: var(--g-cream);
    padding: 52px 48px;
}
.gaara-form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.gaara-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.gaara-form-group label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--g-dark);
}
.gaara-form-group .required { color: #c0392b; }
.gaara-form-group input,
.gaara-form-group textarea {
    width: 100%;
    padding: 11px 15px;
    border: 1.5px solid var(--g-border);
    border-radius: 8px;
    background: var(--g-white);
    font-size: .95rem;
    color: var(--g-text);
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    font-family: inherit;
    outline: none;
}
.gaara-form-group input:focus,
.gaara-form-group textarea:focus {
    border-color: var(--g-green);
    box-shadow: 0 0 0 3px rgba(58,110,58,.12);
}
.gaara-form-group textarea { resize: vertical; min-height: 100px; }

/* ── Phone field with country code ──────────────────────────── */
.gaara-phone-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    border: 1.5px solid var(--g-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--g-white);
    transition: border-color var(--g-transition), box-shadow var(--g-transition);
    width: 100%;
}
.gaara-phone-wrap:focus-within {
    border-color: var(--g-green);
    box-shadow: 0 0 0 3px rgba(58,110,58,.12);
}

/* Select — country code */
.gaara-phone-code {
    flex: 0 0 auto;
    width: auto;
    border: none !important;
    border-right: 1.5px solid var(--g-border) !important;
    border-radius: 0 !important;
    background: var(--g-cream2);
    padding: 10px 28px 10px 10px;
    font-size: .88rem;
    font-family: inherit;
    color: var(--g-dark);
    font-weight: 600;
    cursor: pointer;
    outline: none;
    box-shadow: none !important;
    height: 100%;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6b6b'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.gaara-phone-code:focus { background-color: #edf7ed; }

/* Number input */
.gaara-phone-wrap .gaara-phone-number,
.gaara-phone-wrap input.gaara-phone-number {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 11px 14px !important;
    font-size: .95rem;
    margin: 0 !important;
}

.gaara-btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--g-dark);
    color: #fff;
    border: none;
    border-radius: var(--g-radius);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--g-transition), transform var(--g-transition);
    letter-spacing: .01em;
}
.gaara-btn-submit:hover:not(:disabled) {
    background: var(--g-green);
    transform: translateY(-1px);
}
.gaara-btn-submit:disabled { opacity: .65; cursor: not-allowed; }

.gaara-form-notice {
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: 8px;
    font-size: .9rem;
    font-weight: 500;
    line-height: 1.5;
}
.gaara-form-notice.success {
    background: rgba(58,110,58,.09);
    border: 1px solid rgba(58,110,58,.25);
    color: var(--g-dark);
}
.gaara-form-notice.error {
    background: rgba(192,57,43,.07);
    border: 1px solid rgba(192,57,43,.22);
    color: #922b21;
}

/* ── LIGHTBOX ─────────────────────────────────────────────── */
.gaara-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.gaara-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.88);
    cursor: pointer;
}
.gaara-lightbox-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 14px;
}
.gaara-lightbox-content img {
    max-width: 88vw;
    max-height: 85vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
}
.gaara-lightbox-close {
    position: fixed;
    top: 18px;
    right: 22px;
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--g-transition);
    line-height: 1;
}
.gaara-lightbox-close:hover { background: rgba(255,255,255,.25); }
.gaara-lightbox-prev,
.gaara-lightbox-next {
    background: rgba(255,255,255,.12);
    border: none;
    color: #fff;
    font-size: 2.2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background var(--g-transition);
    line-height: 1;
}
.gaara-lightbox-prev:hover,
.gaara-lightbox-next:hover { background: rgba(255,255,255,.25); }

/* ── ARCHIVE PAGE ─────────────────────────────────────────── */
.gaara-archive-header {
    background: var(--g-dark);
    padding: 52px 0 44px;
    color: #fff;
}
.gaara-archive-header .gaara-breadcrumb a { color: rgba(255,255,255,.6); }
.gaara-archive-header .gaara-breadcrumb a:hover { color: #fff; }
.gaara-archive-header .gaara-bc-sep { color: rgba(255,255,255,.3); }
.gaara-archive-header .gaara-bc-current { color: rgba(255,255,255,.85); }
.gaara-archive-title {
    font-size: clamp(1.9rem, 3.5vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    margin: 14px 0 10px;
    letter-spacing: -.03em;
}
.gaara-archive-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,.68);
    max-width: 580px;
    line-height: 1.65;
    margin: 0;
}

/* ── Two-column shop layout (sidebar + grid) ── */
.gaara-shop-layout {
    display: grid;
    grid-template-columns: 268px 1fr;
    gap: 32px;
    align-items: start;
}
.gaara-shop-sidebar { position: sticky; top: 96px; }
.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);
}
.gaara-cat-box-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--g-dark);
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--g-border);
}
.gaara-cat-list { list-style: none; margin: 0; padding: 0; }
.gaara-cat-list li { margin: 0 0 4px; }
.gaara-cat-link {
    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-cat-link:hover {
    background: var(--g-cream);
    color: var(--g-dark);
    text-decoration: none;
}
.gaara-cat-link.active {
    background: 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-cat-link:hover .gaara-cat-count { background: #fff; }
.gaara-cat-link.active .gaara-cat-count { background: rgba(255,255,255,.18); color: #fff; }

.gaara-archive-body {
    padding: 52px 0 68px;
    background: var(--g-cream2);
    min-height: 400px;
}
.gaara-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 24px;
}

.gaara-product-card {
    background: var(--g-white);
    border-radius: var(--g-radius-lg);
    border: 1px solid var(--g-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--g-shadow);
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.gaara-product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px rgba(26,58,39,.13);
}
.gaara-card-img-link { display: block; }
.gaara-card-img {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--g-white);
    padding: 22px;
    position: relative;
}
.gaara-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .4s ease;
}
.gaara-product-card:hover .gaara-card-img img { transform: scale(1.05); }
.gaara-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--g-cream);
    border-radius: var(--g-radius);
}
.gaara-card-body {
    padding: 6px 20px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    gap: 16px;
    border-top: 1px solid var(--g-border);
}
.gaara-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 14px 0 0;
    line-height: 1.35;
    text-align: center;
}
.gaara-card-title a {
    color: var(--g-dark);
    text-decoration: none;
    transition: color var(--g-transition);
}
.gaara-card-title a:hover { color: var(--g-green); }
.gaara-card-btn {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 26px;
    border: 1.5px solid var(--g-green);
    border-radius: 30px;
    font-size: .9rem;
    font-weight: 700;
    color: var(--g-green);
    background: transparent;
    text-decoration: none;
    transition: all var(--g-transition);
}
.gaara-card-btn:hover {
    background: var(--g-green);
    color: #fff;
    text-decoration: none;
}

.gaara-pagination {
    margin-top: 44px;
    text-align: center;
}
.gaara-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 2px;
    border-radius: 8px;
    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-pagination .page-numbers:hover,
.gaara-pagination .page-numbers.current {
    background: var(--g-dark);
    border-color: var(--g-dark);
    color: #fff;
}
.gaara-pagination .page-numbers.dots {
    border: none;
    background: none;
    width: auto;
}

.gaara-no-products {
    text-align: center;
    padding: 80px 20px;
    color: var(--g-muted);
}
.gaara-no-products h3 {
    font-size: 1.4rem;
    color: var(--g-dark);
    margin: 18px 0 8px;
}
.gaara-no-products a { color: var(--g-green); }

/* ── ARCHIVE RTL (Arabic) ─────────────────────────────────── */
.gaara-archive-page.gaara-rtl { direction: rtl; }
.gaara-archive-page.gaara-rtl .gaara-archive-title,
.gaara-archive-page.gaara-rtl .gaara-archive-subtitle { text-align: right; }


/* ══════════════════════════════════════════════════════════
   STICKY ENQUIRY PILL
   Same component as the article template — it scrolls to the
   on-page quote form rather than opening a modal, since the form
   already lives on this page.
══════════════════════════════════════════════════════════ */
.gaara-prod-sticky-cta {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    z-index: 9500;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 7px 7px 26px;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    border-radius: 50px;
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: saturate(160%) blur(14px);
    backdrop-filter: saturate(160%) blur(14px);
    color: var(--g-dark);
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 10px 34px rgba(26, 58, 39, .22);
    transition: transform var(--g-transition), background var(--g-transition),
                box-shadow var(--g-transition), opacity .3s ease, visibility .3s ease;
}
.gaara-prod-sticky-cta:hover {
    background: #fff;
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 16px 40px rgba(26, 58, 39, .3);
}
.gaara-prod-sticky-cta.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(14px);
    pointer-events: none;
}
.gaara-prod-sticky-label { white-space: nowrap; }
.gaara-prod-sticky-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--g-dark);
    color: #fff;
    flex-shrink: 0;
    transition: background var(--g-transition), transform var(--g-transition);
}
.gaara-prod-sticky-arrow svg { width: 18px; height: 18px; }
.gaara-prod-sticky-cta:hover .gaara-prod-sticky-arrow { background: var(--g-green); transform: translateX(2px); }
.gaara-rtl .gaara-prod-sticky-cta { padding: 7px 26px 7px 7px; }
.gaara-rtl .gaara-prod-sticky-cta:hover .gaara-prod-sticky-arrow { transform: translateX(-2px); }

@media (max-width: 767px) {
    /* Clears the floating WhatsApp bubble. */
    .gaara-prod-sticky-cta {
        bottom: 88px;
        padding: 6px 6px 6px 20px;
        font-size: .86rem;
        gap: 11px;
    }
    .gaara-rtl .gaara-prod-sticky-cta { padding: 6px 20px 6px 6px; }
    .gaara-prod-sticky-arrow { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .gaara-prod-sticky-cta { transition: none; }
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .gaara-hero-inner { grid-template-columns: 1fr; gap: 32px; }
    .gaara-gallery-col { max-width: 520px; margin: 0 auto; width: 100%; }
    .gaara-quote-inner { grid-template-columns: 1fr; }
    .gaara-quote-contact { padding: 44px 32px; }
    .gaara-quote-form-wrap { padding: 44px 32px; }

    /* Shop: sidebar stacks above the grid */
    .gaara-shop-layout { grid-template-columns: 1fr; gap: 24px; }
    .gaara-shop-sidebar { position: static; top: auto; }
    .gaara-cat-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .gaara-cat-list li { margin: 0; }
    .gaara-cat-box-title { margin-bottom: 12px; padding-bottom: 12px; }
    .gaara-cat-link { border: 1px solid var(--g-border); }
}

@media (max-width: 768px) {
    .gaara-container { padding: 0 20px; }
    /* 96px clears the fixed header — the header overlays this page, so
       anything less puts the breadcrumb behind the bar. */
    .gaara-product-hero { padding: 120px 0 44px; }
    .gaara-product-hero::before { height: 96px; }
    .gaara-form-row-2 { grid-template-columns: 1fr; }
    .gaara-cta-buttons { flex-direction: column; }
    .gaara-btn-primary,
    .gaara-btn-outline { justify-content: center; }
    .gaara-trust-bar { flex-direction: column; gap: 10px; }
    .gaara-media-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .gaara-videos-grid { grid-template-columns: 1fr; }
    .gaara-products-grid { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: 16px; }
    .gaara-card-img { padding: 16px; }
    .gaara-card-body { padding: 4px 14px 18px; gap: 12px; }
    .gaara-card-title { font-size: 1rem; }
    .gaara-quote-contact { padding: 36px 22px; }
    .gaara-quote-form-wrap { padding: 36px 22px; }
    .gaara-lightbox-prev,
    .gaara-lightbox-next { display: none; }
    .gaara-product-description,
    .gaara-product-media,
    .gaara-container-loading,
    .gaara-certifications,
    .gaara-faqs-section { padding: 48px 0; }
}

@media (max-width: 480px) {
    .gaara-product-title { font-size: 1.6rem; }
    .gaara-accordion-trigger { padding: 14px 15px; }
    .gaara-accordion-answer { padding: 14px 15px; }
}

/* ════════════════════════════════════════════════════════════
   SITE FONT (IBM Plex Sans Arabic) — covers product template
════════════════════════════════════════════════════════════ */
.gaara-product-page,
.gaara-product-page h1,
.gaara-product-page h2,
.gaara-product-page h3,
.gaara-product-page h4,
.gaara-product-page p,
.gaara-product-page a,
.gaara-product-page span,
.gaara-product-page li,
.gaara-product-page td,
.gaara-product-page th,
.gaara-product-page strong,
.gaara-product-page label,
.gaara-product-page input,
.gaara-product-page select,
.gaara-product-page textarea,
.gaara-product-page button {
    font-family: "IBM Plex Sans Arabic", system-ui, -apple-system,
                 "Segoe UI", Tahoma, "Helvetica Neue", Arial,
                 "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
                 sans-serif;
}

/* ════════════════════════════════════════════════════════════
   RTL / ARABIC  (.gaara-product-page.gaara-rtl)
════════════════════════════════════════════════════════════ */
.gaara-product-page.gaara-rtl { direction: rtl; }

/* Mixed Arabic + Latin/number text renders per-segment correctly */
.gaara-rtl .gaara-product-excerpt,
.gaara-rtl .gaara-description-content,
.gaara-rtl .gaara-description-content p,
.gaara-rtl .gaara-description-content li,
.gaara-rtl .gaara-accordion-answer,
.gaara-rtl .gaara-specs-table td,
.gaara-rtl .gaara-loading-table td,
.gaara-rtl .gaara-container-note p {
    unicode-bidi: plaintext;
    text-align: right;
}

/* Breadcrumb flows right-to-left */
.gaara-rtl .gaara-breadcrumb { direction: rtl; }

/* Title / excerpt / category */
.gaara-rtl .gaara-product-title,
.gaara-rtl .gaara-product-excerpt,
.gaara-rtl .gaara-product-category-tag { text-align: right; }

/* SPECS TABLE — the key fix from the screenshot */
.gaara-rtl .gaara-specs-table th {
    text-align: right;
    padding-right: 0;
    padding-left: 12px;
}
.gaara-rtl .gaara-specs-table td { text-align: right; }

/* Container-loading table */
.gaara-rtl .gaara-loading-table th,
.gaara-rtl .gaara-loading-table td { text-align: right; }

/* Section headers / dividers stay centered (no change needed) */

/* CTA + trust bar: flex auto-reverses with direction:rtl;
   just keep icons and text tidy */
.gaara-rtl .gaara-cta-buttons,
.gaara-rtl .gaara-trust-bar,
.gaara-rtl .gaara-contact-item,
.gaara-rtl .gaara-btn-primary,
.gaara-rtl .gaara-btn-outline,
.gaara-rtl .gaara-btn-whatsapp,
.gaara-rtl .gaara-btn-submit { direction: rtl; }

/* Contact details block */
.gaara-rtl .gaara-contact-item > div { text-align: right; }
.gaara-rtl .gaara-contact-item p,
.gaara-rtl .gaara-contact-item strong { text-align: right; }
/* phone & email values must stay LTR (dir="ltr" set in markup too) */
.gaara-rtl .gaara-contact-item a[href^="tel:"],
.gaara-rtl .gaara-contact-item a[href^="mailto:"] {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* Quote tagline */
.gaara-rtl .gaara-quote-tagline { text-align: right; }

/* FORM — labels & fields right-aligned, inputs RTL */
.gaara-rtl .gaara-form-group { text-align: right; }
.gaara-rtl .gaara-form-group label { text-align: right; display: block; }
.gaara-rtl .gaara-form-group input,
.gaara-rtl .gaara-form-group textarea {
    text-align: right;
    direction: rtl;
}
/* email / phone inputs stay LTR */
.gaara-rtl #gaara-email,
.gaara-rtl .gaara-phone-number {
    text-align: left;
    direction: ltr;
}
.gaara-rtl .gaara-phone-wrap { direction: ltr; }
.gaara-rtl .required { margin-right: 2px; }

/* Accordion question alignment */
.gaara-rtl .gaara-accordion-trigger { text-align: right; }
.gaara-rtl .gaara-accordion-question { text-align: right; }

/* Repeated spec labels (three "Sizes", two "Package"…) are grouped into a
   single row by the template; their values stack as a plain list. */
.gaara-product-page .gaara-spec-values {
    list-style: none;
    margin: 0;
    padding: 0;
}
.gaara-product-page .gaara-spec-values li {
    margin: 0 0 5px;
    padding-inline-start: 13px;
    position: relative;
}
.gaara-product-page .gaara-spec-values li:last-child { margin-bottom: 0; }
.gaara-product-page .gaara-spec-values li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .62em;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--g-green);
}


/* ============================================================
   GALLERY-COLUMN ASIDE BLOCKS
   Container loading + accreditations used to be two full-width
   bands below the fold. The gallery column runs out of content
   long before the spec list beside it does, so they live in that
   gap now — the page loses two whole sections of height and the
   buyer sees loading figures without scrolling.
============================================================ */
.gaara-product-page .gaara-aside-block {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--g-border);
}
.gaara-product-page .gaara-aside-certs .gaara-aside-title { text-align: center; }
.gaara-product-page .gaara-aside-title {
    font-size: .82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--g-muted);
    margin: 0 0 14px;
}
/* Accreditation logos: a small identifying strip, not a feature block.
   The name sits in the title attribute — at this size the wordmark in
   each logo is already legible and a caption under every one just
   rebuilt the card look that was rejected. */
.gaara-product-page .gaara-aside-certs .gaara-certs-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: clamp(22px, 4vw, 44px);
}
.gaara-product-page .gaara-aside-certs .gaara-cert-card {
    max-width: none;
    width: auto;
}
.gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap {
    height: 70px;
    margin: 0;
}
.gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img {
    height: 70px;
    max-width: 150px;
    width: auto;
    object-fit: contain;
    mix-blend-mode: multiply;
}

@media (max-width: 767px) {
    .gaara-product-page .gaara-aside-block { margin-top: 22px; padding-top: 20px; }
    .gaara-product-page .gaara-aside-block .gaara-loading-table { font-size: .82rem; }
    .gaara-product-page .gaara-aside-certs .gaara-certs-grid { gap: 20px; }
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap,
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { height: 52px; }
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { max-width: 112px; }
}

/* ══════════════════════════════════════════════════════════════════
   VARIETY CONTEXT — season calendar + comparison
   Both are generated from the same spec rows the page already shows,
   so they cannot drift from the product record.
   ══════════════════════════════════════════════════════════════════ */
.gaara-variety-context {
    padding: 80px 0;
    background: var(--g-cream2);
}
.gaara-variety-intro {
    max-width: 620px;
    margin: 0 auto 30px;
    text-align: center;
    font-size: .95rem;
    color: var(--g-muted);
    line-height: 1.7;
}
.gaara-compare-header { margin-top: 62px; }

/* ── Season strip ─────────────────────────────────────────────── */
.gaara-season-grid {
    max-width: 880px;
    margin: 0 auto;
    min-width: 620px;
}
/* One continuous bar per season instead of twelve separate cells, and no
   near-black anywhere: the current variety is the mid green, its siblings a
   lighter tint of the same hue. */
.gaara-season-row {
    display: grid;
    grid-template-columns: 186px minmax(0, 1fr);
    gap: 0 0;
    align-items: center;
    padding: 0;
}
.gaara-season-row + .gaara-season-row { margin-top: 7px; }
.gaara-season-head { padding-bottom: 4px; }
.gaara-season-months {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 5px;
}
.gaara-season-name {
    font-size: .84rem;
    line-height: 1.25;
    padding-inline-end: 14px;
    text-align: end;
    overflow-wrap: break-word;
}
.gaara-season-name a { color: var(--g-text); text-decoration: none; }
.gaara-season-name a:hover { color: var(--g-green); text-decoration: underline; }
.gaara-season-row.is-self .gaara-season-name strong { color: var(--g-mid); }

.gaara-season-track {
    position: relative;
    display: block;
    height: 26px;
}
.gaara-season-ticks {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 0 5px;
}
.gaara-season-ticks i {
    background: var(--g-border);
    border-radius: 3px;
}
.gaara-season-bar {
    position: absolute;
    top: 3px;
    bottom: 3px;
    border-radius: 999px;
    background: #8FB88F;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gaara-season-row.is-self .gaara-season-bar { background: var(--g-mid); }
.gaara-season-bar em {
    font-style: normal;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
    white-space: nowrap;
    padding: 0 8px;
}
.gaara-season-label {
    text-align: center;
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-muted);
}

/* ── Comparison table ─────────────────────────────────────────── */
.gaara-compare-table {
    width: 100%;
    max-width: 820px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: .9rem;
    min-width: 520px;
}
.gaara-compare-table th {
    text-align: start;
    padding: 10px 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--g-muted);
    border-bottom: 1px solid var(--g-border);
}
.gaara-compare-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--g-border);
    vertical-align: top;
    color: var(--g-text);
}
.gaara-compare-table tr:last-child td { border-bottom: 0; }
.gaara-compare-table tr.is-self td { background: #eef3ef; }
.gaara-compare-table td a { color: var(--g-dark); font-weight: 600; text-decoration: none; }
.gaara-compare-table td a:hover { color: var(--g-green); text-decoration: underline; }
.gaara-compare-you {
    display: inline-block;
    margin-inline-start: 8px;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--g-green);
}

@media (max-width: 767px) {
    .gaara-variety-context { padding: 56px 0; }
    .gaara-compare-header { margin-top: 44px; }
    .gaara-season-row { grid-template-columns: 124px minmax(0, 1fr); }
    .gaara-season-head { grid-template-columns: 124px minmax(0, 1fr); }
    .gaara-season-name { font-size: .76rem; padding-inline-end: 9px; }
    .gaara-season-label { font-size: .58rem; letter-spacing: .02em; }
    .gaara-season-track { height: 22px; }
    .gaara-season-bar em { font-size: .6rem; padding: 0 5px; }
    .gaara-compare-table { font-size: .84rem; }
}

/* ═══ Videos as gallery slides ═══════════════════════════════════
   They used to stack as full-width players under the thumbnails,
   which pushed the spec table off the first screen. Now a video is
   a slide in the same frame as the images, reached from the same
   thumbnail strip. */
.gaara-main-video {
    /* Absolutely positioned inside .gaara-main-image-wrap, exactly like the
       images. The wrap makes its square with a ::before spacer, so a video
       left in normal flow stacks BELOW that spacer and doubles the frame
       height the moment it is shown. */
    position: absolute;
    inset: 0;
    display: none;
    background: #0E140F;
}
.gaara-main-video.active { display: block; }
.gaara-main-video video { cursor: pointer; }
.gaara-main-video video,
.gaara-main-video iframe {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    object-fit: contain;
    background: #0E140F;
}
.gaara-thumb-item.is-video { position: relative; background: #0E140F; }
.gaara-thumb-item.is-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
}
.gaara-thumb-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.gaara-thumb-play svg {
    width: 26px;
    height: 26px;
    color: #fff;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}
.gaara-thumb-item.is-video.active .gaara-thumb-play svg { color: #fff; }

/* ═══ Container loading, moved under the certifications ══════════
   It used to be a full-width section after the season calendar.
   Sitting in the gallery column instead keeps the left side busy
   for as long as the spec list on the right. */
.gaara-product-page .gaara-aside-loading .gaara-aside-head { margin-bottom: 12px; }
.gaara-product-page .gaara-aside-loading .gaara-loading-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table th {
    text-align: start;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--g-muted);
    padding: 0 10px 8px 0;
    border-bottom: 1px solid var(--g-border);
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table td {
    padding: 9px 10px 9px 0;
    border-bottom: 1px solid var(--g-border);
    vertical-align: top;
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table tr:last-child td { border-bottom: 0; }
.gaara-product-page .gaara-aside-loading .gaara-loading-table td:first-child { color: var(--g-muted); }
.gaara-product-page .gaara-aside-loading .gaara-loading-table td:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.gaara-product-page .gaara-aside-loading .gaara-container-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    font-size: .8rem;
    color: var(--g-muted);
}
.gaara-product-page .gaara-aside-loading .gaara-container-note p { margin: 0; }

/* ═══ Certifications: always one row ══════════════════════════════
   Four logos at 70px plus gaps came to ~534px in a 518px column and
   wrapped. Slightly shorter logos, no wrapping, and cards allowed to
   shrink keep all four on one line down to phone width. No card
   frames — plain logos only. */
.gaara-product-page .gaara-aside-certs .gaara-certs-grid {
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(12px, 3vw, 28px);
}
.gaara-product-page .gaara-aside-certs .gaara-cert-card {
    flex: 0 1 auto;
    min-width: 0;
}
.gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap,
.gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { height: 60px; }
.gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { max-width: min(140px, 100%); }
@media (max-width: 600px) {
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap,
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { height: 42px; }
    .gaara-product-page .gaara-aside-certs .gaara-cert-img-wrap img { max-width: min(96px, 100%); }
}

/* ═══ Container table in the gallery column — light, with room ═══
   The base .gaara-loading-table rule paints the header dark green;
   the muted label colour set for this block sat on that dark fill and
   disappeared. The header is light here, and every cell gets padding
   on both sides so text no longer touches the frame. */
.gaara-product-page .gaara-aside-loading .gaara-table-wrap {
    border: 1px solid var(--g-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table thead {
    background: var(--g-cream2);
    color: var(--g-muted);
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table thead th {
    background: var(--g-cream2);
    color: var(--g-muted);
    padding: 11px 16px;
    font-size: .66rem;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--g-border);
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table tbody td {
    padding: 11px 16px;
    font-size: .86rem;
    border-bottom: 1px solid var(--g-border);
}
.gaara-product-page .gaara-aside-loading .gaara-loading-table tbody tr:nth-child(even) { background: #FBFAF6; }
.gaara-product-page .gaara-aside-loading .gaara-loading-table tbody tr:last-child td { border-bottom: 0; }
.gaara-product-page .gaara-aside-loading .gaara-loading-table tbody td:first-child { color: var(--g-muted); font-weight: 500; }
.gaara-product-page .gaara-aside-loading .gaara-loading-table tbody td:last-child { color: var(--g-text); font-weight: 600; }

/* ═══ Season calendar, now in the info column under the trust bar ═══
   The column is ~518px, so the grid drops its 620px minimum and the
   variety labels get a narrower track. */
.gaara-product-page .gaara-aside-season { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--g-border); }
.gaara-product-page .gaara-aside-season-intro {
    font-size: .82rem;
    color: var(--g-muted);
    margin: 0 0 14px;
    line-height: 1.5;
}
.gaara-product-page .gaara-aside-season .gaara-table-wrap {
    border: 0;
    background: none;
    overflow: visible;
    padding: 0;
    box-shadow: none;
}
.gaara-product-page .gaara-aside-season .gaara-season-grid { min-width: 0; max-width: none; margin: 0; }
.gaara-product-page .gaara-aside-season .gaara-season-row { grid-template-columns: 132px minmax(0, 1fr); }
.gaara-product-page .gaara-aside-season .gaara-season-name { font-size: .78rem; padding-inline-end: 10px; }
.gaara-product-page .gaara-aside-season .gaara-season-label { font-size: .56rem; letter-spacing: .02em; }
.gaara-product-page .gaara-aside-season .gaara-season-months,
.gaara-product-page .gaara-aside-season .gaara-season-ticks { gap: 0 3px; }
.gaara-product-page .gaara-aside-season .gaara-season-track { height: 24px; }
.gaara-product-page .gaara-aside-season .gaara-season-bar em { font-size: .6rem; padding: 0 5px; }
@media (max-width: 600px) {
    .gaara-product-page .gaara-aside-season .gaara-season-row { grid-template-columns: 104px minmax(0, 1fr); }
    .gaara-product-page .gaara-aside-season .gaara-season-label { font-size: .5rem; }
}