/* ============================================================
   GAARA EXPORT – Blog Post Styles  v1.0
   Covers: AR / TR / EN / ZH  |  RTL-aware
============================================================ */

/* ── Design tokens (mirrors product.css) ──────────────────── */
.gaara-post-page {
    --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;
}
.gaara-post-page * { box-sizing: border-box;
}
/* ── Site font: IBM Plex Sans Arabic (Arabic + Latin) ──────── */
.gaara-post-page,
.gaara-post-page p,
.gaara-post-page a,
.gaara-post-page span,
.gaara-post-page li,
.gaara-post-page td,
.gaara-post-page th,
.gaara-post-page button,
.gaara-post-page input,
.gaara-post-page blockquote,
.gaara-post-page figcaption,
.gaara-post-page h1,
.gaara-post-page h2,
.gaara-post-page h3,
.gaara-post-page h4,
.gaara-post-page h5,
.gaara-post-page h6,
.gaara-post-page .gaara-post-body,
.gaara-post-page .gaara-post-body * {
    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;
}

/* ══════════════════════════════════════════════════════════════════
   ARTICLE PAGE — LAYOUT A: one column, one width
   ──────────────────────────────────────────────────────────────────
   Breadcrumb, headline, featured image, contents list, body and tags
   all sit in the same measure, set once here as --measure. The page
   has no sidebar and no second container.

   The version this replaces used two: an 820px wrapper for the
   headline and a 1580px grid for the body plus a sticky sidebar. Two
   widths on one page is why the text and the contents list ran wider
   than the title above them, and why fixing one of them kept
   breaking the other.
   ══════════════════════════════════════════════════════════════════ */

.gaara-article {
    --measure: 1080px;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 24px 72px;
}

/* ── Header ──────────────────────────────────────────────────────── */
.gaara-article-head { padding-top: 26px; }

.gaara-post-page .gaara-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: .8rem;
}
.gaara-post-page .gaara-breadcrumb a { color: var(--g-muted); text-decoration: none; }
.gaara-post-page .gaara-breadcrumb a:hover { color: var(--g-green); }
.gaara-post-page .gaara-bc-sep { color: var(--g-border); }
.gaara-post-page .gaara-bc-current,
.gaara-post-page .gaara-breadcrumb .breadcrumb_last { color: var(--g-dark); font-weight: 600; }

.gaara-article-readtime {
    margin: 0 0 10px;
    font-size: .84rem;
    font-weight: 600;
    color: var(--g-muted);
}

.gaara-article-title {
    margin: 0 0 16px;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -.022em;
    color: var(--g-dark);
    text-wrap: balance;
}

.gaara-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
    font-size: .84rem;
    color: var(--g-muted);
}
.gaara-article-cat {
    background: #e8efe9;
    color: var(--g-green);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 100px;
}
.gaara-article-cat:hover { background: var(--g-dark); color: #fff; }

/* ── Featured image ──────────────────────────────────────────────────
   No fixed frame. `cover` cropped the top and bottom off portrait
   photos; a fixed box with `contain` left the picture marooned in
   empty space. The library mixes portrait cut-outs with landscape
   farm shots, so the image keeps its own proportions and is only
   capped in height. */
.gaara-article-figure {
    margin: 0 0 36px;
    padding: 0;
    line-height: 0;
    text-align: center;
}
.gaara-post-page .gaara-article-image {
    width: auto;
    max-width: 100%;
    height: auto;
    /* Raised from 380px: a landscape photo hit the height cap long before it
       reached the measure, so it sat narrower than the headline above it. */
    max-height: 500px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 14px;
}

/* ── Contents ────────────────────────────────────────────────────────
   A block above the body, in the same measure. Open by default on
   every screen; the toggle is there for readers who want it out of
   the way, not as a mobile-only affordance. */
/* The block does not take the full measure. At 1080px it stretched into a
   wide green banner with four short links floating in it — an index reads as
   an index when it is only as wide as its longest entry. */
.gaara-contents {
    width: fit-content;
    min-width: 320px;
    max-width: min(100%, 460px);
    margin: 0 0 40px;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    overflow: hidden;
    background: var(--g-cream2);
}
.gaara-contents-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: var(--g-dark);
    border: 0;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}
.gaara-contents-title {
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #fff;
}
.gaara-contents-chevron {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: rgba(255,255,255,.75);
    transition: transform var(--g-transition);
}
.gaara-contents.is-closed .gaara-contents-chevron { transform: rotate(-90deg); }
.gaara-rtl .gaara-contents.is-closed .gaara-contents-chevron { transform: rotate(90deg); }
.gaara-contents.is-closed .gaara-contents-list { display: none; }

.gaara-contents-list {
    margin: 0;
    padding: 6px 0;
    list-style: none;
}
.gaara-contents-item { margin: 0; }
.gaara-contents-link {
    display: block;
    padding: 8px 18px;
    font-size: .9rem;
    color: var(--g-dark);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
}
.gaara-contents-h2 > .gaara-contents-link { font-weight: 400; }
.gaara-contents-h3 > .gaara-contents-link {
    padding-inline-start: 32px;
    font-size: .85rem;
    font-weight: 400;
    color: var(--g-text);
}
.gaara-contents-link:hover {
    color: var(--g-green);
    border-inline-start-color: var(--g-green);
    background: #fff;
}

/* The section the reader is currently in. The marker is the rule on the
   inline edge plus a white ground — colour alone would be too close to the
   hover state to read as position rather than pointer. */
.gaara-contents-link.is-active {
    color: var(--g-dark);
    font-weight: 600;
    background: #fff;
    border-inline-start-color: var(--g-dark);
}
.gaara-contents-h3 > .gaara-contents-link.is-active { font-weight: 600; }

/* ── Tags ───────────────────────────────────────────────────────────── */
.gaara-article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--g-border);
}

/* ── Wide screens: contents beside the body ──────────────────────────
   Still ONE container — the same 1080px measure — split into two
   columns inside it, so nothing gains a second width. The body takes
   roughly 80% and the contents list the rest, where it sticks while
   you read. Column order is logical, so on the Arabic pages the list
   lands on the visual right automatically.
   Below this width the two stack and the list sits above the body. */
@media (min-width: 1000px) {
    .gaara-article {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 300px;
        column-gap: 40px;
        align-items: start;
    }
    .gaara-article-head   { grid-column: 1 / -1; grid-row: 1; }
    .gaara-post-body      { grid-column: 1; grid-row: 2; }
    .gaara-article-tags   { grid-column: 1; grid-row: 3; }
    .gaara-contents {
        grid-column: 2;
        grid-row: 2;
        position: sticky;
        top: 120px;
        max-height: calc(100vh - 150px);
        overflow-y: auto;
        width: auto;
        min-width: 0;
        max-width: none;
        margin: 0;
    }
}

/* ── Small screens ──────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .gaara-article { padding: 0 18px 52px; }
    .gaara-article-head { padding-top: 18px; }
    .gaara-article-meta { margin-bottom: 22px; }
    .gaara-article-figure { margin-bottom: 28px; }
    .gaara-post-page .gaara-article-image { max-height: 300px; }
    .gaara-contents { margin-bottom: 30px; }
}

/* ── Container ────────────────────────────────────────────── */
.gaara-post-page .gaara-container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 32px;
}
@media (max-width: 767px) {
    .gaara-post-page .gaara-container { padding: 0 16px;
    }
}
/* ══════════════════════════════════════════════════════════════════
   ARTICLE PAGE — HERO + LAYOUT
   Single source of truth. These rules previously existed in three
   separate places in this file, each added on top of the last, so
   editing one had no visible effect. Everything for the header and the
   two-column layout now lives here, in one order.
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. Breadcrumb ─────────────────────────────────────────────────
   A navigation aid: quiet trail, current page carries the contrast. */
.gaara-post-page .gaara-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: .8rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.gaara-post-page .gaara-breadcrumb a,
.gaara-post-page .gaara-breadcrumb span {
    color: var(--g-muted);
    text-decoration: none;
    transition: color var(--g-transition);
}
.gaara-post-page .gaara-breadcrumb a:hover { color: var(--g-green);
}
/* Yoast outputs .breadcrumb_last for current page */
.gaara-post-page .gaara-breadcrumb .breadcrumb_last,
.gaara-post-page .gaara-bc-current {
    color: var(--g-dark);
    font-weight: 500;
}
.gaara-post-page .gaara-bc-sep { color: var(--g-border);
}
/* Yoast separator span */
.gaara-post-page .gaara-breadcrumb > span > span.sep { color: var(--g-border);
}
/* RTL breadcrumb — flow right-to-left (works with Yoast markup too) */
.gaara-post-page.gaara-rtl .gaara-breadcrumb {
    direction: rtl;
    justify-content: flex-start;
    text-align: right;
}
.gaara-post-page.gaara-rtl .gaara-breadcrumb * { direction: rtl;
}
/* With a TOC → content + sticky sidebar on desktop.
   Three columns, not two: an empty left gutter the same width as the
   sidebar. With `1fr 288px` the grid was centred but the TEXT column was
   not — it sat 170px left of the page centre while the hero title above it
   was centred, so the article read as visibly off-axis. A mirror gutter
   puts the text column back on the page's centre line and the sidebar
   keeps its own space. */
/* ══════════════════════════════════════════════════════════
   RTL / ARABIC BIDI FIXES
   (numbers, phones, mixed Latin+Arabic content)
══════════════════════════════════════════════════════════ */
/* Per-paragraph auto direction — fixes mangled phone/numbers
   when Arabic text and Latin numbers are mixed in one line */
.gaara-post-page.gaara-rtl .gaara-post-body p,
.gaara-post-page.gaara-rtl .gaara-post-body li,
.gaara-post-page.gaara-rtl .gaara-post-body td,
.gaara-post-page.gaara-rtl .gaara-post-body th,
.gaara-post-page.gaara-rtl .gaara-post-body h1,
.gaara-post-page.gaara-rtl .gaara-post-body h2,
.gaara-post-page.gaara-rtl .gaara-post-body h3,
.gaara-post-page.gaara-rtl .gaara-post-body h4,
.gaara-post-page.gaara-rtl .gaara-post-body h5,
.gaara-post-page.gaara-rtl .gaara-post-body h6,
.gaara-post-page.gaara-rtl .gaara-post-body blockquote,
.gaara-post-page.gaara-rtl .gaara-post-body figcaption {
    unicode-bidi: plaintext;
    text-align: start;
}
/* Phone / tel / numeric runs: keep them LTR and isolated so
   "+20 105 003 3060" never gets reversed inside Arabic text */
.gaara-post-page.gaara-rtl a[href^="tel:"],
.gaara-post-page.gaara-rtl .gaara-cta-details a[href^="tel:"],
.gaara-post-page.gaara-rtl .gaara-cta-details a[href^="mailto:"],
.gaara-post-page .gaara-bidi-num {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}
.gaara-post-body {
    color: var(--g-text);
    font-size: 1rem;
    line-height: 1.75;
}
.gaara-post-body > * + * { margin-top: 1.35em;
}
/* Headings */
.gaara-post-body h1,
.gaara-post-body h2,
.gaara-post-body h3,
.gaara-post-body h4,
.gaara-post-body h5 {
    color: var(--g-dark);
    font-weight: 700;
    line-height: 1.3;
    margin-top: 2.1em;
    margin-bottom: .5em;
}
/* Deliberately plain: every H2 previously carried a green bar AND a
   2px rule, which stacked up over a long article and made the page
   read as heavy. Weight and spacing do the work instead. */
.gaara-post-body h2 {
    font-size: 1.4rem;
    letter-spacing: -.01em;
}
.gaara-post-body h3 {
    font-size: 1.12rem;
    color: var(--g-dark);
    margin-top: 1.9em;
}
.gaara-post-body h4 { font-size: 1.1rem;
}
.gaara-post-body h5 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--g-muted);
}
/* Links */
.gaara-post-body a {
    color: var(--g-green);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--g-transition);
}
.gaara-post-body a:hover { color: var(--g-dark);
}
/* Paragraphs */
.gaara-post-body p { margin: 0 0 1.15em;
}
/* Strong / Em */
.gaara-post-body strong { color: var(--g-dark); font-weight: 700;
}
/* Blockquote */
.gaara-post-body blockquote {
    border-inline-start: 4px solid var(--g-green);
    padding: 14px 22px;
    margin: 1.8em 0;
    background: var(--g-cream2);
    border-radius: 0 var(--g-radius) var(--g-radius) 0;
    font-style: italic;
    color: var(--g-muted);
}
.gaara-rtl .gaara-post-body blockquote {
    border-radius: var(--g-radius) 0 0 var(--g-radius);
}
.gaara-post-body blockquote p { margin: 0;
}
/* Code */
.gaara-post-body code {
    background: var(--g-cream);
    border: 1px solid var(--g-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: .9em;
    font-family: ui-monospace, monospace;
    color: var(--g-dark);
}
.gaara-post-body pre {
    background: var(--g-dark);
    color: #e8f5e9;
    border-radius: var(--g-radius);
    padding: 20px 24px;
    overflow-x: auto;
    font-size: .9rem;
    line-height: 1.6;
    margin: 1.6em 0;
}
.gaara-post-body pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
}
/* Horizontal rule */
.gaara-post-body hr {
    border: none;
    border-top: 2px solid var(--g-border);
    margin: 2.4em 0;
}
/* ══════════════════════════════════════════════════════════
   UNORDERED LISTS
══════════════════════════════════════════════════════════ */
.gaara-post-body ul {
    list-style: none;
    padding: 0;
    margin: 1.2em 0 1.3em;
}
.gaara-post-body ul li {
    padding-inline-start: 28px;
    position: relative;
    margin-bottom: .55em;
}
.gaara-post-body ul li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: .62em;
    width: 9px;
    height: 9px;
    background: var(--g-green);
    border-radius: 50%;
}
/* Second-level bullets */
.gaara-post-body ul ul li::before {
    background: transparent;
    border: 2px solid var(--g-green);
    width: 7px;
    height: 7px;
    top: .65em;
}
/* Third-level: dash */
.gaara-post-body ul ul ul li::before {
    background: var(--g-mid);
    border: none;
    width: 6px;
    height: 2px;
    border-radius: 1px;
    top: .82em;
}
/* ══════════════════════════════════════════════════════════
   ORDERED LISTS
══════════════════════════════════════════════════════════ */
.gaara-post-body ol {
    list-style: none;
    counter-reset: gaara-ol;
    padding: 0;
    margin: 1.2em 0 1.3em;
}
.gaara-post-body ol li {
    counter-increment: gaara-ol;
    padding-inline-start: 38px;
    position: relative;
    margin-bottom: .55em;
}
.gaara-post-body ol li::before {
    content: counter(gaara-ol);
    position: absolute;
    inset-inline-start: 0;
    top: .12em;
    width: 26px;
    height: 26px;
    background: var(--g-green);
    color: #fff;
    border-radius: 50%;
    font-size: .76rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
/* Second-level ordered: outlined */
.gaara-post-body ol ol li::before {
    background: transparent;
    border: 2px solid var(--g-green);
    color: var(--g-green);
}
/* ══════════════════════════════════════════════════════════
   TABLES
══════════════════════════════════════════════════════════ */
/* Scroll wrapper — keeps the table inside a rounded, bordered box */
.gaara-post-page .gaara-post-body .wp-block-table,
.gaara-post-page .gaara-post-body .gaara-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.8em 0;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    box-shadow: var(--g-shadow);
    background: var(--g-white);
}
.gaara-post-page .gaara-post-body table,
.gaara-post-page .gaara-post-body .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    min-width: 560px;          /* forces horizontal scroll instead of squishing */
    margin: 0;
    font-size: .95rem;
    background: transparent;
}
/* ── Header row — force WHITE text over dark-green, beating Divi ── */
.gaara-post-page .gaara-post-body table thead,
.gaara-post-page .gaara-post-body table thead tr,
.gaara-post-page .gaara-post-body table thead th,
.gaara-post-page .gaara-post-body table thead td,
.gaara-post-page .gaara-post-body table tr:first-child th,
.gaara-post-page .gaara-post-body .wp-block-table thead th {
    background-color: var(--g-dark) !important;
    background-image: none !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.12) !important;
}
/* any inner element inside a header cell (strong / span / a / p) */
.gaara-post-page .gaara-post-body table thead th *,
.gaara-post-page .gaara-post-body table thead td *,
.gaara-post-page .gaara-post-body table tr:first-child th * {
    color: #fff !important;
    background: transparent !important;
}
.gaara-post-page .gaara-post-body table thead th,
.gaara-post-page .gaara-post-body table thead td,
.gaara-post-page .gaara-post-body table tr:first-child th {
    padding: 14px 18px;
    text-align: start;
    font-weight: 700;
    font-size: .88rem;
    letter-spacing: .025em;
    border-bottom: none !important;
    white-space: nowrap;
}
/* ── Body cells ── */
.gaara-post-page .gaara-post-body table td {
    padding: 12px 18px;
    border-bottom: 1px solid var(--g-border);
    color: var(--g-text);
    vertical-align: top;
    line-height: 1.55;
}
.gaara-post-page .gaara-post-body table tbody tr:last-child td {
    border-bottom: none;       /* outer wrapper border supplies the bottom edge */
}
.gaara-post-page .gaara-post-body table tbody tr:nth-child(even) { background: var(--g-cream2);
}
.gaara-post-page .gaara-post-body table tbody tr:hover { background: rgba(58,110,58,.05); transition: background .15s;
}
/* ── Mobile ── */
@media (max-width: 767px) {
    .gaara-post-page .gaara-post-body table { font-size: .88rem; min-width: 520px; }
    .gaara-post-page .gaara-post-body table thead th,
    .gaara-post-page .gaara-post-body table thead td,
    .gaara-post-page .gaara-post-body table tr:first-child th,
    .gaara-post-page .gaara-post-body table td { padding: 11px 14px; }
    /* subtle inset shadow on the right edge = "swipe me" hint, no content fade */
    .gaara-post-page .gaara-post-body .wp-block-table,
    .gaara-post-page .gaara-post-body .gaara-table-wrap {
        background:
            linear-gradient(to right, var(--g-white) 30%, rgba(255,255,255,0)) left   / 24px 100% no-repeat,
            linear-gradient(to left,  var(--g-white) 30%, rgba(255,255,255,0)) right  / 24px 100% no-repeat,
            radial-gradient(farthest-side at 0   50%, rgba(26,58,39,.16), rgba(0,0,0,0)) left  / 12px 100% no-repeat,
            radial-gradient(farthest-side at 100% 50%, rgba(26,58,39,.16), rgba(0,0,0,0)) right / 12px 100% no-repeat;
        background-attachment: local, local, scroll, scroll;
    }
}
/* ══════════════════════════════════════════════════════════
   IMAGES IN CONTENT
══════════════════════════════════════════════════════════ */
.gaara-post-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--g-radius);
    display: block;
    margin: 1.5em auto;
    box-shadow: var(--g-shadow);
}
.gaara-post-body figure { margin: 2em 0;
}
.gaara-post-body figure img { margin: 0;
}
.gaara-post-body figcaption {
    text-align: center;
    font-size: .84rem;
    color: var(--g-muted);
    margin-top: 8px;
    font-style: italic;
}
/* Alignment classes */
.gaara-post-body .aligncenter { display: block; margin-left: auto; margin-right: auto;
}
.gaara-post-body .alignleft {
    float: left;
    margin: 0 26px 16px 0;
    max-width: 46%;
}
.gaara-post-body .alignright {
    float: right;
    margin: 0 0 16px 26px;
    max-width: 46%;
}
.gaara-rtl .gaara-post-body .alignleft {
    float: right;
    margin: 0 0 16px 26px;
}
.gaara-rtl .gaara-post-body .alignright {
    float: left;
    margin: 0 26px 16px 0;
}
.gaara-post-body .alignwide,
.gaara-post-body .alignfull {
    width: calc(100% + 64px);
    margin-inline: -32px;
    max-width: none;
    border-radius: 0;
}
@media (max-width: 767px) {
    .gaara-post-body .alignleft,
    .gaara-post-body .alignright {
        float: none;
        max-width: 100%;
        margin: 1em 0;
    }
    .gaara-post-body .alignwide,
    .gaara-post-body .alignfull {
        width: calc(100% + 32px);
        margin-inline: -16px;
    }
}
/* ══════════════════════════════════════════════════════════
   YOAST FAQ BLOCK (inside article content)
══════════════════════════════════════════════════════════ */
.gaara-post-body .schema-faq {
    background: var(--g-cream2);
    border-radius: var(--g-radius-lg);
    padding: 28px 32px 24px;
    margin: 2.2em 0;
    border: 1px solid var(--g-border);
}
.gaara-faq-content-badge {
    margin-bottom: 20px;
}
.gaara-post-body .schema-faq-section {
    padding: 18px 0;
    border-bottom: 1px solid var(--g-border);
}
.gaara-post-body .schema-faq-section:last-child { border-bottom: none; padding-bottom: 0;
}
.gaara-post-body .schema-faq-question {
    display: block;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--g-dark);
    margin-bottom: 9px;
}
.gaara-post-body .schema-faq-question::before {
    content: 'Q. ';
    color: var(--g-green);
    font-weight: 800;
}
.gaara-post-body .schema-faq-answer {
    color: var(--g-muted);
    font-size: .96rem;
    line-height: 1.72;
    padding-inline-start: 18px;
    border-inline-start: 3px solid var(--g-border);
    margin: 0;
}
@media (max-width: 480px) {
    .gaara-post-body .schema-faq { padding: 20px 18px;
    }
}
/* ══════════════════════════════════════════════════════════
   FAQ TAG BADGE (reused in both Yoast and custom FAQs)
══════════════════════════════════════════════════════════ */
.gaara-faq-tag {
    display: inline-block;
    background: var(--g-green);
    color: #fff;
    padding: 4px 15px;
    border-radius: 20px;
    font-size: .77rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* ══════════════════════════════════════════════════════════
   CUSTOM FAQ ACCORDION SECTION (below article)
══════════════════════════════════════════════════════════ */
.gaara-post-faqs-section {
    background: var(--g-cream2);
    padding: 60px 0;
    border-top: 1px solid var(--g-border);
    border-bottom: 1px solid var(--g-border);
}
.gaara-post-faqs-header {
    text-align: center;
    margin-bottom: 38px;
}
.gaara-faqs-heading {
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    font-weight: 800;
    color: var(--g-dark);
    margin: 0;
    letter-spacing: -.02em;
}
.gaara-faq-accordion {
    max-width: 820px;
    margin: 0 auto;
}
.gaara-faq-item {
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius);
    margin-bottom: 10px;
    background: var(--g-white);
    overflow: hidden;
    transition: box-shadow var(--g-transition);
}
.gaara-faq-item:hover { box-shadow: var(--g-shadow);
}
.gaara-faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    text-align: start;
    font-size: 1rem;
    font-weight: 600;
    color: var(--g-dark);
    font-family: inherit;
    line-height: 1.4;
    transition: color var(--g-transition);
}
.gaara-faq-question:hover { color: var(--g-green);
}
.gaara-faq-question[aria-expanded="true"] { color: var(--g-green);
}
.gaara-faq-question[aria-expanded="true"] .gaara-faq-chevron { transform: rotate(180deg);
}
.gaara-faq-chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--g-green);
    transition: transform var(--g-transition);
}
.gaara-faq-answer {
    border-top: 1px solid var(--g-border);
    padding: 0 22px 20px;
    color: var(--g-muted);
    font-size: .97rem;
    line-height: 1.76;
}
.gaara-faq-answer[hidden] { display: none;
}
.gaara-faq-answer-inner { padding-top: 16px;
}
/* ── RTL FAQ (Arabic): questions + answers right-to-left ──
   `direction: rtl` is inherited from .gaara-faq-item/.gaara-faq-accordion
   down into .gaara-faq-question (direction is an inherited CSS property).
   That alone already flips the flex main-start edge to the right, so
   .gaara-faq-question must NOT also set flex-direction: row-reverse —
   doing both cancels out (double negation) and puts the question text
   back on the left with the chevron on the right. */
.gaara-rtl .gaara-faq-accordion,
.gaara-rtl .gaara-faq-item,
.gaara-rtl .gaara-faq-answer,
.gaara-rtl .gaara-faq-answer-inner {
    direction: rtl;
}
.gaara-rtl .gaara-faq-question {
    text-align: right;
}
.gaara-rtl .gaara-faq-question > span { text-align: right;
}
.gaara-rtl .gaara-faq-answer,
.gaara-rtl .gaara-faq-answer-inner { text-align: right;
}
.gaara-rtl .gaara-faq-answer-inner ul,
.gaara-rtl .gaara-faq-answer-inner ol { padding-right: 22px; padding-left: 0;
}
.gaara-post-tag {
    display: inline-block;
    background: var(--g-cream);
    color: var(--g-muted);
    font-size: .82rem;
    padding: 5px 13px;
    border-radius: 20px;
    text-decoration: none;
    border: 1px solid var(--g-border);
    transition: background var(--g-transition), color var(--g-transition), border-color var(--g-transition);
}
.gaara-post-tag:hover {
    background: var(--g-green);
    color: #fff;
    border-color: var(--g-green);
}
/* ══════════════════════════════════════════════════════════
   SHARED SECTION HEADER
══════════════════════════════════════════════════════════ */
.gaara-post-page .gaara-section-header {
    text-align: center;
    margin-bottom: 42px;
}
.gaara-post-page .gaara-section-divider {
    width: 48px;
    height: 3px;
    background: var(--g-green);
    border-radius: 2px;
    margin: 0 auto 16px;
}
.gaara-post-page .gaara-section-title {
    font-size: clamp(1.4rem, 2.5vw, 1.95rem);
    font-weight: 800;
    color: var(--g-dark);
    margin: 0;
    letter-spacing: -.02em;
}
/* ══════════════════════════════════════════════════════════
   RELATED PRODUCTS SECTION
══════════════════════════════════════════════════════════ */
.gaara-related-products-section {
    padding: 72px 0 80px;
    background: var(--g-dark);
    border-top: none;
}
/* ── Section header ─────────────────────────────────────── */
.gaara-rp-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}
.gaara-rp-eyebrow {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--g-mid);
    margin-bottom: 8px;
}
.gaara-rp-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #fff;
    margin: 0;
    letter-spacing: -.025em;
    line-height: 1.15;
}
.gaara-rp-all-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .88rem;
    font-weight: 700;
    color: var(--g-mid);
    text-decoration: none;
    white-space: nowrap;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--g-mid);
    transition: color var(--g-transition), border-color var(--g-transition);
    flex-shrink: 0;
}
.gaara-rp-all-link:hover {
    color: #fff;
    border-color: #fff;
}
/* ── Grid ───────────────────────────────────────────────── */
.gaara-products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
@media (max-width: 900px) {
    .gaara-products-grid { grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 540px) {
    .gaara-products-grid { grid-template-columns: 1fr;
    }
}
/* ── Card ───────────────────────────────────────────────── */
.gaara-product-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    transition: transform var(--g-transition), border-color var(--g-transition), box-shadow var(--g-transition);
}
.gaara-product-card:hover {
    transform: translateY(-6px);
    border-color: var(--g-mid);
    box-shadow: 0 16px 48px rgba(0,0,0,.35);
}
/* Image */
.gaara-product-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: rgba(255,255,255,.04);
    flex-shrink: 0;
}
.gaara-product-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.gaara-product-card:hover .gaara-product-card-media img { transform: scale(1.07);
}
.gaara-product-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,.02) 100%);
}
/* Category badge on image */
.gaara-product-card-badge {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    background: var(--g-green);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 1;
    line-height: 1.4;
}
/* Subtle bottom-gradient overlay on image */
.gaara-product-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,58,39,.55) 0%, transparent 50%);
    pointer-events: none;
    transition: opacity var(--g-transition);
    opacity: .7;
}
.gaara-product-card:hover .gaara-product-card-overlay { opacity: 1;
}
/* Body */
.gaara-product-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}
.gaara-product-card-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaara-product-card-excerpt {
    font-size: .85rem;
    color: rgba(255,255,255,.55);
    margin: 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}
.gaara-product-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--g-mid);
    transition: color var(--g-transition), gap var(--g-transition);
}
.gaara-product-card-cta svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    transition: transform var(--g-transition);
}
.gaara-product-card:hover .gaara-product-card-cta {
    color: #fff;
    gap: 10px;
}
.gaara-product-card:hover .gaara-product-card-cta svg { transform: translateX(3px);
}
/* RTL arrow flip */
.gaara-rtl .gaara-product-card-cta svg { transform: scaleX(-1);
}
.gaara-rtl .gaara-product-card:hover .gaara-product-card-cta svg { transform: scaleX(-1) translateX(-3px);
}
.gaara-rtl .gaara-rp-header { flex-direction: row-reverse;
}
.gaara-rtl .gaara-product-card-badge { inset-inline-start: 12px;
}
/* ══════════════════════════════════════════════════════════
   CONTACT CTA SECTION
══════════════════════════════════════════════════════════ */
.gaara-post-cta-section {
    padding: 56px 0 72px;
    background: var(--g-white);
}
.gaara-post-cta {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--g-border);
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    box-shadow: 0 4px 28px rgba(26, 58, 39, .08);
}
/* Left panel — dark green */
.gaara-cta-left {
    flex: 1 1 58%;
    background: var(--g-dark);
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.gaara-cta-heading {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--g-white);
    margin: 0;
    line-height: 1.3;
}
.gaara-cta-desc {
    font-size: .97rem;
    color: rgba(255, 255, 255, .7);
    margin: 0;
    line-height: 1.7;
}
.gaara-cta-details {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}
.gaara-cta-details li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .78);
    line-height: 1.5;
}
.gaara-cta-details li svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--g-mid);
}
.gaara-cta-details li a {
    color: inherit;
    text-decoration: none;
    transition: color var(--g-transition);
}
.gaara-cta-details li a:hover { color: #fff;
}
/* Right panel — cream, action-focused */
.gaara-cta-right {
    flex: 0 0 260px;
    background: var(--g-cream);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    padding: 48px 36px;
}
/* Buttons */
.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;
    transition: transform var(--g-transition), box-shadow var(--g-transition), background var(--g-transition), color var(--g-transition);
    white-space: nowrap;
}
.gaara-cta-btn svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}
.gaara-cta-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(26, 58, 39, .16);
}
.gaara-cta-whatsapp {
    background: #25d366;
    color: #fff;
}
.gaara-cta-whatsapp:hover { background: #1db954;
}
.gaara-cta-email {
    background: transparent;
    color: var(--g-dark);
    border: 2px solid var(--g-dark);
}
.gaara-cta-email:hover {
    background: var(--g-dark);
    color: #fff;
}
/* RTL */
.gaara-rtl .gaara-cta-details li { flex-direction: row-reverse;
}
.gaara-rtl .gaara-cta-btn { flex-direction: row-reverse;
}
/* Responsive */
@media (max-width: 900px) {
    .gaara-post-cta { flex-direction: column; }
    .gaara-cta-left  { padding: 40px 32px; }
    .gaara-cta-right {
        flex: none;
        flex-direction: row;
        padding: 28px 32px;
        gap: 14px;
    }
    .gaara-cta-btn { flex: 1; }
}
@media (max-width: 560px) {
    .gaara-cta-left { padding: 32px 20px;
    }
    .gaara-cta-right { flex-direction: column; padding: 24px 20px;
    }
    .gaara-cta-heading { font-size: 1.25rem;
    }
}
/* ══════════════════════════════════════════════════════════
   RELATED ARTICLES SECTION
══════════════════════════════════════════════════════════ */
.gaara-related-articles-section {
    padding: 64px 0 88px;
    background: var(--g-cream2);
    border-top: 1px solid var(--g-border);
}
.gaara-articles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
@media (max-width: 1023px) {
    .gaara-articles-grid { grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .gaara-articles-grid { grid-template-columns: 1fr;
    }
}
.gaara-article-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: var(--g-radius-lg);
    overflow: hidden;
    background: var(--g-white);
    border: 1px solid var(--g-border);
    transition: transform var(--g-transition), box-shadow var(--g-transition);
}
.gaara-article-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(26, 58, 39, .13);
}
.gaara-article-card-img {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--g-cream);
    flex-shrink: 0;
}
.gaara-article-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}
.gaara-article-card:hover .gaara-article-card-img img { transform: scale(1.06);
}
.gaara-article-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--g-cream) 0%, var(--g-border) 100%);
}
.gaara-article-card-body {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}
.gaara-article-card-cat {
    font-size: .76rem;
    color: var(--g-green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.gaara-article-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--g-dark);
    margin: 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gaara-article-card-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: .82rem;
    color: var(--g-muted);
    margin-top: auto;
    padding-top: 8px;
}
.gaara-article-card-more {
    font-size: .88rem;
    color: var(--g-green);
    font-weight: 700;
}
.gaara-rtl .gaara-article-card-meta { flex-direction: row-reverse;
}
/* ── CITATION MARKERS ─────────────────────────────────────────
   Sources render as .gaara-stat-ref > sup. Left unstyled the browser
   draws them at near body size with the link underline, so they read
   as part of the sentence instead of a reference. */
.gaara-post-body .gaara-stat-ref {
    text-decoration: none;
    border-bottom: 0;
    background: none;
}
.gaara-post-body .gaara-stat-ref sup {
    font-size: .62em;
    line-height: 0;
    font-weight: 600;
    color: var(--g-green);
    vertical-align: super;
    margin-inline-start: 1px;
    padding: 0 1px;
    transition: color var(--g-transition);
}
.gaara-post-body .gaara-stat-ref:hover sup { color: var(--g-dark);
}
@media (max-width: 767px) {
    /* The WhatsApp bubble is capped at 54px in header.css and sits bottom-left,
       so the pill can drop back down to the same line instead of floating
       above it. Both now share one baseline. */
    
}
@media (max-width: 900px) {
    .gaara-post-hero-grid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 22px;
        padding-bottom: 38px;
    }
}
/* ══════════════════════════════════════════════════════════
   QUOTE MODAL (opened by the sticky button)
   Mirrors the product page's Request-a-Quote panel: dark contact
   column + form, posting to the same AJAX action.
══════════════════════════════════════════════════════════ */
.gaara-quote-modal[hidden] { display: none;
}
.gaara-quote-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.gaara-quote-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 22, 15, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.gaara-quote-modal-box {
    position: relative;
    display: grid;
    grid-template-columns: 340px 1fr;
    width: min(980px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--g-cream);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
}
.gaara-quote-modal-close {
    position: absolute;
    inset-inline-end: 12px;
    top: 10px;
    z-index: 2;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.gaara-quote-modal-close:hover { background: rgba(255, 255, 255, .3);
}
.gaara-quote-modal-aside {
    background: var(--g-dark);
    color: #fff;
    padding: 40px 32px;
}
.gaara-quote-modal-aside h2 { font-size: 1.6rem; font-weight: 800; color: #fff; margin: 0 0 14px; line-height: 1.25;
}
.gaara-quote-modal-aside > p { font-size: .93rem; color: rgba(255,255,255,.72); line-height: 1.7; margin: 0 0 22px;
}
.gaara-quote-modal-aside ul { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 12px;
}
.gaara-quote-modal-aside li { display: flex; align-items: center; gap: 10px; font-size: .9rem;
}
.gaara-quote-modal-aside li svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--g-mid);
}
.gaara-quote-modal-aside a { color: rgba(255,255,255,.85); text-decoration: none;
}
.gaara-quote-modal-aside a:hover { color: #fff;
}
.gaara-quote-modal-wa {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    padding: 12px 20px; border-radius: 50px;
    background: #25d366; color: #fff !important;
    font-size: .9rem; font-weight: 700; text-decoration: none;
}
.gaara-quote-modal-wa:hover { background: #1db954;
}
.gaara-quote-modal-wa svg { width: 18px; height: 18px;
}
.gaara-quote-modal-form { padding: 40px 32px;
}
.gaara-qm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.gaara-qm-group { margin-bottom: 16px;
}
.gaara-qm-group label {
    display: block; font-size: .85rem; font-weight: 600;
    color: var(--g-dark); margin-bottom: 6px;
}
.gaara-qm-group label span { color: #c0392b;
}
.gaara-qm-group input,
.gaara-qm-group textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--g-border);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: .93rem;
    color: var(--g-text);
}
.gaara-qm-group input:focus,
.gaara-qm-group textarea:focus { outline: 2px solid var(--g-green); outline-offset: 1px; border-color: transparent;
}
.gaara-qm-submit {
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 50px;
    background: var(--g-dark);
    color: #fff;
    font-family: inherit;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--g-transition);
}
.gaara-qm-submit:hover:not(:disabled) { background: var(--g-green);
}
.gaara-qm-submit:disabled { opacity: .7; cursor: default;
}
.gaara-qm-notice { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; font-size: .9rem;
}
.gaara-qm-notice.is-ok { background: #e8efe9; color: var(--g-dark);
}
.gaara-qm-notice.is-err { background: #fbeaea; color: #a03028;
}
@media (max-width: 860px) {
    .gaara-quote-modal { padding: 0; align-items: flex-end;
    }
    .gaara-quote-modal-box {
        grid-template-columns: 1fr;
        max-height: 92vh;
        border-radius: 18px 18px 0 0;
    }
    /* Contact column drops below the form on a phone — the form is
       what the reader came for. */
    .gaara-quote-modal-aside { order: 2; padding: 28px 22px;
    }
    .gaara-quote-modal-form { order: 1; padding: 34px 22px 22px;
    }
    .gaara-quote-modal-close { background: rgba(26,58,39,.12); color: var(--g-dark);
    }
    .gaara-qm-row { grid-template-columns: 1fr; gap: 0;
    }
}
/* ══════════════════════════════════════════════════════════
   GLOBAL RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .gaara-post-page .gaara-breadcrumb { font-size: .74rem; }
    .gaara-post-featured-wrap { padding-bottom: 28px; }
    .gaara-post-body { font-size: 1rem; line-height: 1.78; }
    .gaara-post-body h2 { font-size: 1.3rem; }
    .gaara-post-body h3 { font-size: 1.15rem; }
    .gaara-post-faqs-section { padding: 44px 0; }
    .gaara-post-cta-section { padding: 0 0 52px; }
    .gaara-related-articles-section { padding: 44px 0 60px; }
    .gaara-articles-grid { gap: 20px; }
}

/* ═══════════════════════════════════════════════════════════════
   RELATED PRODUCTS on a post — driven by the _gaara_post_related_product_ids
   meta box. The meta box shipped long before any template rendered it;
   this is the block that finally displays it.
   Flat backgrounds only — no gradients anywhere in this theme.
   ═══════════════════════════════════════════════════════════════ */
.gaara-post-products-section {
    background: var(--g-cream2, #f7f5ef);
    padding: 64px 0;
}
.gaara-post-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 24px;
    margin-top: 32px;
}
.gaara-post-product-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .18s ease, transform .18s ease;
}
.gaara-post-product-card:hover {
    border-color: var(--g-dark, #1a3a27);
    transform: translateY(-3px);
}
.gaara-post-product-img {
    aspect-ratio: 4 / 3;
    background: var(--g-cream2, #f7f5ef);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gaara-post-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.gaara-post-product-body {
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.gaara-post-product-cat {
    font-size: .74rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--g-mid, #3a6e3a);
    font-weight: 600;
}
.gaara-post-product-title {
    font-size: 1.02rem;
    line-height: 1.35;
    margin: 0;
    color: var(--g-dark, #1a3a27);
}
.gaara-post-product-more {
    margin-top: auto;
    padding-top: 10px;
    font-size: .86rem;
    font-weight: 600;
    color: var(--g-mid, #3a6e3a);
}
@media (max-width: 600px) {
    .gaara-post-products-section { padding: 44px 0; }
    .gaara-post-products-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
}