/* ==========================================================================
   GenZNutri brand layer
   Light editorial storefront: white canvas, heavy geometric display type,
   gold accent, red discount badges. Loaded after the compiled theme CSS.
   ========================================================================== */

/* --- Self-hosted webfonts (no third-party CDN) --------------------------- */
@font-face { font-family: 'GenzDisplay'; src: url('/genz/fonts/poppins-800.woff2') format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'GenzDisplay'; src: url('/genz/fonts/poppins-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'GenzDisplay'; src: url('/genz/fonts/poppins-600.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'GenzText'; src: url('/genz/fonts/dm-sans-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'GenzText'; src: url('/genz/fonts/dm-sans-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'GenzText'; src: url('/genz/fonts/dm-sans-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
    --gz-ink:      #101114;
    --gz-body:     #5b6069;
    --gz-line:     #e8e8ea;
    --gz-surface:  #ffffff;
    --gz-wash:     #f7f7f8;
    /* Whisky gold - richer/deeper than the launch theme's bright yellow-gold,
       matched to the amber colourway of the real logo art. */
    --gz-gold:     #C8862E;
    --gz-gold-ink: #241505;
    --gz-red:      #e01e27;
    --gz-green:    #16a34a;
    --gz-r-card:   14px;
    --gz-r-pill:   999px;
    --gz-shell:    1360px;
}

/* --- Typography ---------------------------------------------------------- */
body,
body input,
body button,
body select,
body textarea {
    font-family: 'GenzText', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Section shell
   -------------------------------------------------------------------------- */
.gz {
    background: var(--gz-surface);
    color: var(--gz-ink);
}

.gz-wrap {
    max-width: var(--gz-shell);
    margin: 0 auto;
    padding: 0 40px;
}

.gz-sec { padding: 76px 0 0; }
.gz-sec--tight { padding-top: 46px; }

/* Eyebrow: gold dash + number + label ------------------------------------- */
.gz-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'GenzText', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #6f747d;
    margin-bottom: 14px;
}

.gz-eyebrow::before {
    content: "";
    width: 30px;
    height: 3px;
    border-radius: 2px;
    background: var(--gz-gold);
    flex: none;
}

.gz-eyebrow b {
    color: var(--gz-ink);
    font-weight: 700;
}

/* Headline with the signature gold full stop ------------------------------ */
.gz-h2 {
    font-family: 'GenzDisplay', sans-serif;
    font-weight: 800;
    font-size: clamp(30px, 4.1vw, 54px);
    line-height: 1.04;
    letter-spacing: -.03em;
    color: var(--gz-ink);
    margin: 0;
}

.gz-h2 i {
    font-style: normal;
    color: var(--gz-gold);
}

.gz-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.gz-head__copy { max-width: 620px; }

.gz-sub {
    margin: 14px 0 0;
    font-size: 15.5px;
    line-height: 1.62;
    color: var(--gz-body);
}

/* Pill button with gold circular arrow ------------------------------------ */
.gz-pill {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 7px 7px 7px 22px;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-pill);
    background: var(--gz-surface);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gz-ink);
    white-space: nowrap;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.gz-pill:hover {
    border-color: #cfd2d6;
    box-shadow: 0 6px 18px rgba(16, 17, 20, .07);
}

.gz-pill::after {
    content: "→";
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gz-gold);
    color: var(--gz-gold-ink);
    font-size: 15px;
    font-weight: 700;
    flex: none;
}

.gz-pill--dark {
    background: var(--gz-ink);
    border-color: var(--gz-ink);
    color: #fff;
}

/* --------------------------------------------------------------------------
   Announcement marquee
   -------------------------------------------------------------------------- */
.gz-ticker {
    background: #0c0d10;
    overflow: hidden;
    white-space: nowrap;
}

.gz-ticker__row {
    display: inline-flex;
    gap: 44px;
    padding: 10px 0;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--gz-gold);
    animation: gz-marquee var(--gz-ticker-speed, 32s) linear infinite;
}

.gz-ticker__row span::before {
    content: "·";
    margin-right: 44px;
    opacity: .5;
}

@keyframes gz-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .gz-ticker__row { animation: none; }
}

/* --------------------------------------------------------------------------
   01 — Shop by goal: poster cards
   -------------------------------------------------------------------------- */
.gz-goals {
    display: grid;
    grid-template-columns: repeat(var(--gz-cols, 6), 1fr);
    gap: 18px;
}

.gz-goal {
    display: block;
    position: relative;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    overflow: hidden;
    background: var(--gz-surface);
    transition: transform .2s ease, box-shadow .2s ease;
}

/* Uniform moody tint across every poster - also quietly subdues any
   AI-generated headline still baked into a source photo's tub label,
   so the tile reads as atmosphere rather than as leftover marketing copy. */
.gz-goal::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(12,13,16,.55) 0%, rgba(12,13,16,.5) 45%, rgba(12,13,16,.88) 100%); mix-blend-mode: multiply;
    pointer-events: none;
}

.gz-goal:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 34px rgba(16, 17, 20, .13);
}

.gz-goal__label {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 46px;
    z-index: 2;
    color: #fff;
    font-family: 'GenzDisplay', sans-serif;
    font-weight: 800;
    font-size: 15px;
    line-height: 1.15;
    letter-spacing: -.01em;
    text-shadow: 0 2px 10px rgba(0,0,0,.5);
}

.gz-goal__art {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: #0c0d10;
}

.gz-goal__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 10px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--gz-ink);
}

.gz-goal:hover .gz-goal__foot { color: #000; }

.gz-goal__foot::after {
    content: "→";
    font-size: 14px;
    transition: transform .18s ease;
}

.gz-goal:hover .gz-goal__foot::after { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Expert help strip
   -------------------------------------------------------------------------- */
.gz-expert {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 42px;
    padding: 20px 24px;
    border: 1px solid var(--gz-line);
    border-radius: 18px;
    background: var(--gz-surface);
}

.gz-expert__pic {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gz-gold);
    flex: none;
}

.gz-expert__copy { flex: 1 1 380px; }

.gz-expert__kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8b9098;
}

.gz-expert__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 5px 0 4px;
    font-family: 'GenzDisplay', sans-serif;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--gz-ink);
}

.gz-tag {
    display: inline-block;
    padding: 4px 11px;
    border-radius: var(--gz-r-pill);
    background: #e7f6ec;
    color: #12703a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.gz-expert__note {
    margin: 0;
    font-size: 14.5px;
    color: var(--gz-body);
}

.gz-wa {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: var(--gz-r-pill);
    background: var(--gz-ink);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.gz-wa:hover { background: #000; color: #fff; }

/* --------------------------------------------------------------------------
   Trust ribbon under the Top Performers headline
   -------------------------------------------------------------------------- */
.gz-ribbon {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 16px 22px;
    margin-bottom: 26px;
    border: 1px solid var(--gz-line);
    border-radius: 16px;
}

.gz-ribbon__star {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--gz-gold);
    color: var(--gz-gold-ink);
    font-size: 20px;
    flex: none;
}

.gz-ribbon__main { flex: 1 1 420px; }

.gz-ribbon__rate {
    font-size: 13.5px;
    color: var(--gz-ink);
    font-weight: 600;
}

.gz-ribbon__rate em {
    font-style: normal;
    color: var(--gz-gold);
    letter-spacing: 1px;
}

.gz-ribbon__quote {
    margin: 3px 0 0;
    font-size: 13.5px;
    font-style: italic;
    color: var(--gz-body);
}

.gz-ribbon__marks {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--gz-ink);
}

.gz-ribbon__marks span::before {
    content: "✓";
    color: var(--gz-gold);
    font-weight: 700;
    margin-right: 7px;
}

/* --------------------------------------------------------------------------
   04 — Trending deals
   -------------------------------------------------------------------------- */
.gz-deals {
    display: grid;
    grid-template-columns: repeat(var(--gz-cols, 4), 1fr);
    gap: 18px;
}

.gz-deal {
    display: block;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease;
}

.gz-deal:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16, 17, 20, .12);
}

.gz-deal img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
   Brand strip
   -------------------------------------------------------------------------- */
.gz-brands {
    margin-top: 64px;
    border-top: 1px solid var(--gz-line);
    border-bottom: 1px solid var(--gz-line);
    padding: 26px 0;
}

.gz-brands__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
}

.gz-brands__row span {
    font-family: 'GenzDisplay', sans-serif;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: .04em;
    color: #b7bbc1;
    text-transform: uppercase;
    transition: color .18s ease;
}

.gz-brands__row span:hover { color: var(--gz-ink); }

/* --------------------------------------------------------------------------
   05 — Real customers
   -------------------------------------------------------------------------- */
.gz-wash { background: var(--gz-wash); }

.gz-stats {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
}

.gz-stat {
    display: flex;
    align-items: center;
    gap: 12px;
}

.gz-stat__icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--gz-gold);
    color: var(--gz-gold-ink);
    font-size: 16px;
    flex: none;
}

.gz-stat__num {
    font-family: 'GenzDisplay', sans-serif;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--gz-ink);
}

.gz-stat__num small {
    font-size: 12.5px;
    font-weight: 600;
    color: #9aa0a8;
}

.gz-stat__lbl {
    font-size: 12.5px;
    color: var(--gz-body);
}

.gz-reviews {
    display: grid;
    grid-template-columns: repeat(var(--gz-cols, 3), 1fr);
    gap: 18px;
    padding-bottom: 8px;
}

.gz-review {
    background: var(--gz-surface);
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    padding: 24px;
}

.gz-review__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.gz-review__stars {
    color: var(--gz-gold);
    font-size: 14px;
    letter-spacing: 2px;
}

.gz-review__ok {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: var(--gz-r-pill);
    background: #e7f6ec;
    color: #12703a;
    font-size: 11px;
    font-weight: 700;
}

.gz-review__ok::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--gz-green);
}

.gz-review h3 {
    font-family: 'GenzDisplay', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--gz-ink);
    margin: 0 0 9px;
}

.gz-review p {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--gz-body);
}

.gz-review__by {
    display: flex;
    align-items: center;
    gap: 11px;
    padding-top: 15px;
    border-top: 1px solid var(--gz-line);
}

.gz-review__av {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--gz-ink);
    color: var(--gz-gold);
    font-size: 13px;
    font-weight: 700;
    flex: none;
}

.gz-review__who {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gz-ink);
}

.gz-review__loc {
    font-size: 12px;
    color: #8b9098;
}

.gz-review__times {
    margin-left: auto;
    padding: 4px 10px;
    border-radius: var(--gz-r-pill);
    background: #fff6dd;
    color: #7a5900;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

/* Service bar ------------------------------------------------------------- */
.gz-svc {
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid var(--gz-line);
    border-radius: 16px;
    background: var(--gz-surface);
}

.gz-svc__item { flex: 1 1 165px; }

.gz-svc__t {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--gz-ink);
}

.gz-svc__d {
    font-size: 12.5px;
    color: var(--gz-body);
}

/* --------------------------------------------------------------------------
   06 — Knowledge bar
   -------------------------------------------------------------------------- */
.gz-reads {
    display: grid;
    grid-template-columns: repeat(var(--gz-cols, 3), 1fr);
    gap: 18px;
}

.gz-read {
    display: block;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    overflow: hidden;
    background: var(--gz-surface);
    transition: transform .2s ease, box-shadow .2s ease;
}

.gz-read:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(16, 17, 20, .12);
}

.gz-read img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.gz-read__body { padding: 20px 22px 24px; }

.gz-read__meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8b9098;
}

.gz-read h3 {
    font-family: 'GenzDisplay', sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.32;
    letter-spacing: -.01em;
    color: var(--gz-ink);
    margin: 9px 0 8px;
}

.gz-read p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--gz-body);
}

/* --------------------------------------------------------------------------
   Closing band
   -------------------------------------------------------------------------- */
.gz-band {
    margin-top: 76px;
    background: #0c0d10;
    padding: 58px 0;
    text-align: center;
}

.gz-band h2 {
    font-family: 'GenzDisplay', sans-serif;
    font-size: clamp(26px, 3.6vw, 46px);
    font-weight: 800;
    letter-spacing: -.03em;
    color: #fff;
    margin: 0 0 10px;
}

.gz-band h2 i { font-style: normal; color: var(--gz-gold); }

.gz-band p {
    margin: 0 0 24px;
    color: #a7adb6;
    font-size: 15px;
}

.gz-band .gz-pill {
    background: transparent;
    border-color: #33363d;
    color: #fff;
}

/* --------------------------------------------------------------------------
   Light-touch alignment of Bagisto's own components
   (kept deliberately narrow — the default shop theme is already light)
   -------------------------------------------------------------------------- */
main h1, main h2, main h3,
footer h3, footer h4 {
    font-family: 'GenzDisplay', sans-serif;
    letter-spacing: -.01em;
}

/* Product carousel headings sit on white — match the section rhythm */
main .container > .mb-10 > .text-3xl,
main .text-3xl.font-medium {
    font-family: 'GenzDisplay', sans-serif;
    font-weight: 800;
    letter-spacing: -.02em;
}

/* Sale flag -> discount chip */
.product-card .bg-red-500,
main .bg-red-500 {
    background: var(--gz-red) !important;
    border-radius: 6px !important;
    font-weight: 700;
    letter-spacing: .02em;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
    .gz-wrap  { padding: 0 26px; }
    .gz-goals { grid-template-columns: repeat(4, 1fr); }
    .gz-deals { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .gz-sec     { padding-top: 52px; }
    .gz-goals   { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .gz-reviews { grid-template-columns: 1fr; }
    .gz-reads   { grid-template-columns: 1fr; }
    .gz-head    { align-items: flex-start; }
}

@media (max-width: 560px) {
    .gz-wrap  { padding: 0 16px; }
    .gz-goals { grid-template-columns: repeat(2, 1fr); }
    .gz-deals { grid-template-columns: 1fr; }
    .gz-stats { gap: 18px; }
}


/* --------------------------------------------------------------------------
   Fixes against the live render
   -------------------------------------------------------------------------- */

/* Hero carousel: the theme frames slides at 2.743/1 and sizes them with
   w-screen, which overflows by the scrollbar width and crops the artwork.
   Constrain to the container and use a ratio that suits the banner art. */
/* NOTE: do NOT override the slide width here. The carousel translates the
   track by whole viewport widths, so shrinking `w-screen` to 100% of a
   narrower container desynchronises the transform and blanks the slider.
   Only the frame ratio is adjusted, which is purely vertical. */
main img.select-none.object-cover,
main .aspect-\[2\.743\/1\] {
    aspect-ratio: 2.35 / 1 !important;
    object-fit: cover;
    object-position: center;
}

/* The seeded slides are not all cut to the same ratio (one is close to
   square), so a wide `cover` box crops well over half of that artwork away
   — worst on phones, where it is also the only ratio anyone sees since
   there is no separate mobile crop per slide. Below the ratio's own
   breakpoint, stop cropping altogether: show the whole slide letterboxed
   on the brand's own ink, at a taller box so the letterboxing stays modest
   for the wide slides too. Width still has to stay 100vw (see note above),
   only the box's height and how the image fills it change here. */
@media (max-width: 767px) {
    main img.select-none.object-cover,
    main .aspect-\[2\.743\/1\] {
        aspect-ratio: 4 / 3 !important;
        object-fit: contain !important;
        background: var(--gz-ink);
    }
}

/* Stat blocks: number and label are both inline, so they ran together
   ("4.7 / 528,447 reviews"). Stack them. */
.gz-stat__num,
.gz-stat__lbl { display: block; }

.gz-stat__num small { margin-left: 3px; }

/* Header logo sits on white. The theme hard-codes width="131" height="29" on
   the <img>, which crops the wider wordmark, so give it an explicit box. */
/* Customer sign-in page - standalone stacked lockup above the form. */
.gz-login-mark {
    display: block;
    width: 300px !important;
    height: auto !important;
    margin: 0 auto 4px !important;
}

header img[alt="GenZNutri"],
header a[href$="/"] > img,
footer img[alt="GenZNutri"] {
    width: 216px !important;
    height: auto !important;
    max-height: 40px !important;
    object-fit: contain !important;
    object-position: left center;
}

/* ==========================================================================
   Builder-driven sections
   Layouts the Homepage Builder can produce that the seeded page does not use.
   ========================================================================== */

/* A stat row placed as a section of its own, rather than inside a header. */
.gz-stats--row {
    justify-content: space-between;
    gap: 26px;
    padding: 26px 30px;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    background: var(--gz-surface);
}

.gz-stats--row .gz-stat { flex: 1 1 200px; }

/* Free text kept inside the theme's typographic scale. */
.gz-prose { max-width: 74ch; color: var(--gz-body); font-size: 15.5px; line-height: 1.72; }
.gz-prose h2 { font-family: 'GenzDisplay', sans-serif; font-weight: 800; font-size: 28px; color: var(--gz-ink); margin: 34px 0 12px; letter-spacing: -.02em; }
.gz-prose h3 { font-family: 'GenzDisplay', sans-serif; font-weight: 700; font-size: 20px; color: var(--gz-ink); margin: 26px 0 10px; }
.gz-prose h4 { font-weight: 700; font-size: 16px; color: var(--gz-ink); margin: 22px 0 8px; }
.gz-prose p { margin: 0 0 15px; }
.gz-prose ul, .gz-prose ol { margin: 0 0 15px; padding-left: 22px; }
.gz-prose li { margin-bottom: 7px; }
.gz-prose a { color: var(--gz-ink); text-decoration: underline; text-decoration-color: var(--gz-gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gz-prose a:hover { color: #000; }
.gz-prose strong { color: var(--gz-ink); font-weight: 700; }
.gz-prose blockquote { margin: 20px 0; padding-left: 18px; border-left: 3px solid var(--gz-gold); font-size: 17px; color: var(--gz-ink); }
.gz-prose hr { border: 0; border-top: 1px solid var(--gz-line); margin: 30px 0; }

/* ==========================================================================
   Hover motion
   One shared language: the card lifts, its artwork pushes in past the frame,
   and a gold edge wipes in. Durations stay under 500ms so browsing never
   feels like it is waiting for an animation to finish.
   ========================================================================== */

:root {
    --gz-ease: cubic-bezier(.22, .68, .3, 1);
    --gz-lift: 0 18px 38px rgba(16, 17, 20, .14);
}

/* --- product cards ------------------------------------------------------- */
.gz-card {
    transition: transform .3s var(--gz-ease), box-shadow .3s var(--gz-ease);
    will-change: transform;
}

.gz-card:hover { transform: translateY(-6px); box-shadow: var(--gz-lift); }

.gz-card__media {
    border-radius: 12px;
    /* The gold edge is painted on the frame, so it survives the image scaling. */
    position: relative;
}

.gz-card__media::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--gz-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform .34s var(--gz-ease);
    z-index: 2;
}

.gz-card:hover .gz-card__media::after { transform: scaleX(1); }

.gz-card__media img {
    transition: transform .55s var(--gz-ease);
}

/* Overrides the theme's own group-hover:scale-105 with a slower, deeper push. */
.gz-card:hover .gz-card__media img { transform: scale(1.08); }

/* --- poster, banner and article cards ------------------------------------ */
.gz-goal,
.gz-deal,
.gz-read {
    transition: transform .3s var(--gz-ease), box-shadow .3s var(--gz-ease), border-color .3s var(--gz-ease);
}

.gz-goal:hover,
.gz-deal:hover,
.gz-read:hover {
    transform: translateY(-6px);
    box-shadow: var(--gz-lift);
    border-color: #d9dade;
}

.gz-goal__art,
.gz-deal img,
.gz-read img {
    transition: transform .6s var(--gz-ease);
}

.gz-goal:hover .gz-goal__art,
.gz-deal:hover img,
.gz-read:hover img {
    transform: scale(1.06);
}

/* The poster foot fills gold on hover — the strongest single brand cue. */
.gz-goal__foot {
    position: relative;
    transition: background .28s var(--gz-ease), color .28s var(--gz-ease);
}

.gz-goal:hover .gz-goal__foot {
    background: var(--gz-gold);
    color: var(--gz-gold-ink);
}

.gz-read h3 { transition: color .22s var(--gz-ease); }
.gz-read:hover h3 { color: #000; }

/* --- pills --------------------------------------------------------------- */
.gz-pill { transition: background .22s var(--gz-ease), color .22s var(--gz-ease), border-color .22s var(--gz-ease), transform .22s var(--gz-ease); }
.gz-pill:hover { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .gz-card,
    .gz-card__media img,
    .gz-card__media::after,
    .gz-goal, .gz-deal, .gz-read,
    .gz-goal__art, .gz-deal img, .gz-read img,
    .gz-goal__foot, .gz-read h3, .gz-pill {
        transition: none !important;
    }

    .gz-card:hover,
    .gz-goal:hover, .gz-deal:hover, .gz-read:hover, .gz-pill:hover {
        transform: none;
    }

    .gz-card:hover .gz-card__media img,
    .gz-goal:hover .gz-goal__art,
    .gz-deal:hover img,
    .gz-read:hover img {
        transform: none;
    }
}

/* ==========================================================================
   Brand intro
   A plate covers the page, the dumbbell mark strikes, and the wordmark wipes
   in behind it before the whole plate lifts away. Shown once per session.
   The markup is injected by /genz/intro.js.
   ========================================================================== */

.gz-intro {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: grid;
    place-items: center;
    background: #0c0d10;
    /* Clipped away rather than faded, so the storefront is never seen through it. */
    clip-path: inset(0 0 0 0);
    transition: clip-path .72s cubic-bezier(.76, 0, .24, 1);
}

.gz-intro__mark {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 24px;
    max-width: 100%;
}

.gz-intro__icon {
    width: 74px;
    height: 74px;
    flex: none;
    opacity: 0;
    transform: scale(.55) rotate(-16deg);
    animation: gz-intro-strike .62s cubic-bezier(.2, 1.5, .35, 1) .06s forwards;
}

/* The wordmark is revealed by a wipe rather than a fade, matching the way the
   gold rule under the section eyebrows draws in. */
.gz-intro__word {
    height: 56px;
    width: auto;
    max-width: min(62vw, 560px);
    clip-path: inset(0 100% 0 0);
    animation: gz-intro-wipe .68s cubic-bezier(.76, 0, .24, 1) .42s forwards;
}

.gz-intro__flash {
    position: absolute;
    inset: 0;
    background: var(--gz-gold);
    opacity: 0;
    pointer-events: none;
    animation: gz-intro-flash .5s ease-out .18s;
}

.gz-intro.is-leaving { clip-path: inset(0 0 100% 0); }

@keyframes gz-intro-strike {
    0%   { opacity: 0; transform: scale(.55) rotate(-16deg); }
    60%  { opacity: 1; transform: scale(1.12) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes gz-intro-wipe {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

@keyframes gz-intro-flash {
    0%   { opacity: 0; }
    22%  { opacity: .5; }
    100% { opacity: 0; }
}

/* Keeps the page still while the plate is up. */
html.gz-intro-open,
html.gz-intro-open body { overflow: hidden; }

@media (max-width: 640px) {
    .gz-intro__icon { width: 46px; height: 46px; }
    .gz-intro__word { height: 32px; }
    .gz-intro__mark { gap: 14px; }
}

/* ==========================================================================
   Product page: GSTIN / FSSAI / secure-payment strip
   Settings > Configuration > General > Content > Compliance & Trust Badges.
   A quiet 3-column card - flat icons, no per-item fill, hairline dividers
   instead of nested boxes, so it reads as one calm line, not a cluster.
   ========================================================================== */
.gz-compliance {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 18px;
    padding: 4px 16px;
    border: 1px solid var(--gz-line);
    border-radius: var(--gz-r-card);
    background: var(--gz-surface);
}

.gz-compliance__row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 13px 16px;
}

.gz-compliance__row + .gz-compliance__row {
    border-left: 1px solid var(--gz-line);
}

.gz-compliance__icon {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    color: var(--gz-body);
}

.gz-compliance__icon svg { width: 100%; height: 100%; }

.gz-compliance__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.4;
}

.gz-compliance__key {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--gz-body);
}

.gz-compliance__val {
    font-size: 13px;
    font-weight: 700;
    color: var(--gz-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 640px) {
    .gz-compliance { grid-template-columns: 1fr; padding: 2px 16px; }

    .gz-compliance__row {
        padding: 11px 0;
    }

    .gz-compliance__row + .gz-compliance__row {
        border-left: 0;
        border-top: 1px solid var(--gz-line);
    }
}