/* SeedsZen homepage hero / announcement / category-rail / trust-rail.
   These classes had no base (non-media-query) styling anywhere in the linked
   CSS, so .sz-hero__actions, .sz-trust-rail etc. fell back to block-level
   stacking instead of the intended flex/grid layout on every screen size.
   This file supplies just that missing base + its responsive variants.
   Intentionally excludes header, product-card, button, form and
   story-journey rules — those already have working styling in
   seedszen-header-footer.css and are left alone to avoid regressions. */

:root{--sz-forest:#263c20;--sz-olive:#81906b;--sz-cream:#f8f6ef;--sz-gold:#b88b31;--sz-ink:#282c26}
.sz-announcement{height:43px;background:linear-gradient(90deg,#203419,#304729);color:#fff;font-size:11px;text-transform:uppercase;letter-spacing:.035em}.sz-announcement__inner{display:flex;height:100%;align-items:center;justify-content:space-between}.sz-announcement i{margin-right:7px;font-size:14px}.sz-announcement__links{display:flex;align-items:center;gap:17px;text-transform:none}.sz-announcement__links>span{width:1px;height:15px;background:rgba(255,255,255,.35)}.sz-announcement a{color:#fff}
.sz-hero{overflow:hidden;padding:0 0 42px;background:#fff}.sz-hero__stage{position:relative;display:grid;grid-template-columns:45% 55%;min-height:510px;overflow:hidden;background:radial-gradient(circle at 70% 40%,#fff 0,#f8f7f2 43%,#fdfcf9 72%)}.sz-hero__copy{position:relative;z-index:3;padding:67px 0 35px 30px}.sz-kicker{display:inline-flex;align-items:center;gap:7px;margin-bottom:20px;padding:7px 14px;border-radius:99px;background:#eef1e8;color:#56634a;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase}.sz-hero h1{margin:0;color:#292d27;font-family:'Playfair Display',Georgia,serif!important;font-size:clamp(43px,4.15vw,65px)!important;font-weight:500!important;line-height:1.05;letter-spacing:-.035em}.sz-hero h1 em{color:#7f8e69;font-weight:500}.sz-title-flourish{display:flex;width:96px;align-items:center;gap:7px;margin:18px 0;color:var(--sz-gold)}.sz-title-flourish span{display:block;width:76px;height:2px;background:var(--sz-gold)}.sz-hero__copy>p{max-width:510px;margin:0 0 25px;color:#63675f;font-size:13px!important;line-height:1.8}.sz-hero__proofs{display:grid;grid-template-columns:repeat(4,1fr);max-width:600px;gap:12px;margin-bottom:27px}.sz-hero__proofs>div{display:flex;align-items:center;gap:8px}.sz-hero__proofs i{display:flex;width:34px;height:34px;flex:0 0 34px;align-items:center;justify-content:center;border-radius:50%;background:#edf0e5;color:#586c49;font-size:19px}.sz-hero__proofs span,.sz-story-btn span{display:flex;flex-direction:column}.sz-hero__proofs strong{color:#3e443b;font-size:9px;line-height:1.3}.sz-hero__proofs small{color:#777c73;font-size:8px}.sz-hero__actions{display:flex;align-items:center;gap:27px}.sz-primary-btn{display:inline-flex;height:48px;align-items:center;gap:20px;padding:0 28px;border-radius:99px;background:var(--sz-forest);color:#fff!important;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 22px rgba(37,57,31,.17)}.sz-primary-btn:hover{background:#152710;transform:translateY(-2px)}.sz-story-btn{display:flex;align-items:center;gap:11px;border:1px solid transparent;border-radius:99px;background:none;padding:6px 12px;color:#333831;cursor:pointer;transition:border-color .2s ease,background-color .2s ease}
.sz-story-btn:hover,.sz-story-btn:focus-visible,.sz-story-btn:active{border-color:#9da696;background:rgba(154,166,150,.12)}.sz-story-btn>i{display:flex;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid #9da696;border-radius:50%;color:var(--sz-forest)}.sz-story-btn strong{font-size:10px;text-transform:uppercase;letter-spacing:.04em}.sz-story-btn small{color:#8a8e87;font-size:9px}
.sz-hero__visual{position:relative;min-height:510px}.sz-hero__halo{position:absolute;width:520px;height:520px;left:49%;top:49%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.94),rgba(238,235,224,.72) 56%,transparent 57%);transform:translate(-50%,-50%)}.sz-hero__product{position:absolute;z-index:3;width:52%;height:83%;left:48%;bottom:5%;object-fit:contain;filter:drop-shadow(0 20px 18px rgba(44,50,38,.18));transform:translateX(-50%)}.sz-hero__leaves{position:absolute;z-index:1;left:2%;bottom:10%;color:#627b4d;font-size:150px;opacity:.65;transform:rotate(-28deg)}.sz-hero__leaves i:nth-child(2){display:inline-block;margin-left:-80px;font-size:100px;transform:rotate(48deg)}.sz-hero__leaves i:nth-child(3){display:inline-block;margin-left:-80px;font-size:80px;transform:rotate(86deg)}.sz-nutrition-seal{position:absolute;z-index:4;display:flex;width:104px;height:104px;right:7%;top:19%;flex-direction:column;align-items:center;justify-content:center;border:2px solid #31462d;border-radius:50%;color:#30432c;font-size:9px;line-height:1.4;text-align:center;text-transform:uppercase;transform:rotate(-10deg)}.sz-nutrition-seal i{font-size:28px}.sz-hero__benefits{position:absolute;z-index:4;right:1%;top:48%;margin:0;padding:0;list-style:none}.sz-hero__benefits li{padding:7px 0;color:#3f443c;font-size:10px;border-bottom:1px solid #ecece7}.sz-hero__benefits i{margin-right:7px;color:#6f845a}
.sz-category-rail{position:relative;z-index:6;display:grid;grid-template-columns:repeat(5,1fr) 125px;margin:-8px 28px 0;padding:18px 20px;border:1px solid #eaebe6;border-radius:28px 28px 0 0;background:rgba(255,255,255,.97);box-shadow:0 -10px 35px rgba(43,52,39,.06)}.sz-category-chip{display:flex;min-width:0;align-items:center;gap:11px;padding:0 14px;border-right:1px solid #e5e6e1;color:#30362d}.sz-category-chip__image{display:flex;width:48px;height:48px;flex:0 0 48px;align-items:center;justify-content:center;overflow:hidden;border-radius:50%;background:#f1efe8}.sz-category-chip img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.sz-category-chip>span:last-child,.sz-view-all span{display:flex;min-width:0;flex-direction:column}.sz-category-chip strong,.sz-view-all strong{overflow:hidden;color:#33382f;font-size:9px;text-transform:uppercase;text-overflow:ellipsis;white-space:nowrap}.sz-category-chip small,.sz-view-all small{color:#777c74;font-size:8px;white-space:nowrap}.sz-view-all{display:flex;align-items:center;justify-content:center;gap:9px;margin-left:12px;border-radius:15px;background:#f0f2e9;color:#33442e}.sz-view-all>i{font-size:22px}.sz-trust-rail{display:grid;grid-template-columns:repeat(4,1fr);margin:0 28px;padding:20px 46px;background:linear-gradient(90deg,#213719,#2f4a27);color:#fff}.sz-trust-rail>div{display:flex;align-items:center;justify-content:center;gap:13px}.sz-trust-rail i{font-size:28px;opacity:.85}.sz-trust-rail span{display:flex;flex-direction:column}.sz-trust-rail strong{font-size:10px;text-transform:uppercase;letter-spacing:.04em}.sz-trust-rail small{color:rgba(255,255,255,.72);font-size:8px}

@media(max-width:1199.98px){.sz-announcement{display:none}.sz-hero__stage{grid-template-columns:50% 50%}.sz-hero__copy{padding-left:20px}.sz-hero__benefits,.sz-nutrition-seal{display:none}.sz-category-rail{grid-template-columns:repeat(3,1fr);row-gap:18px}}
@media(max-width:767.98px){.sz-hero__stage{display:flex;flex-direction:column}.sz-hero__copy{padding:42px 18px 12px;text-align:center}.sz-hero h1{font-size:42px!important}.sz-title-flourish{margin-left:auto;margin-right:auto}.sz-hero__copy>p{margin-left:auto;margin-right:auto}.sz-hero__proofs{grid-template-columns:repeat(2,1fr);text-align:left}.sz-hero__actions{justify-content:center}.sz-hero__visual{min-height:360px}.sz-hero__product{height:92%}.sz-category-rail{display:flex;margin:0 12px;padding:15px;overflow-x:auto;border-radius:20px 20px 0 0}.sz-category-chip{min-width:190px}.sz-view-all{min-width:120px;padding:10px}.sz-trust-rail{grid-template-columns:repeat(2,1fr);gap:20px;margin:0 12px;padding:22px 14px}}

/* Final supplied hero artwork: content occupies the intentionally blank left
   side while the product composition remains untouched on the right. */
.sz-hero__stage{
    min-height:0;
    aspect-ratio:1934/813;
    background-color:#f7f3eb;
    background-image:url('../img/hero-home-background.png');
    background-repeat:no-repeat;
    background-position:center center;
    background-size:100% 100%;
}
.sz-hero>.container,
.sz-hero>.container-xl{
    width:100%;
    max-width:100%!important;
    padding-left:0!important;
    padding-right:0!important;
}
.sz-hero{padding-bottom:0}
.sz-category-rail{
    grid-template-columns:repeat(var(--sz-product-count,5),minmax(0,1fr));
    width:calc(100% - 48px);
    margin-left:24px;
    margin-right:24px;
    border-left:1px solid #eaebe6;
    border-right:1px solid #eaebe6;
    border-radius:24px 24px 0 0;
    align-items:center;
    padding-top:20px;
    padding-bottom:20px;
}
.sz-category-chip{
    justify-content:center;
    min-height:58px;
    padding-left:24px;
    padding-right:24px;
}
.sz-category-chip:last-child{border-right:0}
.sz-category-chip__image{width:56px;height:56px;flex-basis:56px}
.sz-category-chip>span:last-child{max-width:145px}
.sz-category-chip strong{font-size:10px;line-height:1.35}
.sz-category-chip small{margin-top:3px;font-size:9px}
.sz-trust-rail{
    width:calc(100% - 48px);
    margin-left:24px;
    margin-right:24px;
    border-radius:0 0 24px 24px;
}
.sz-hero__stage:before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0 auto 0 0;
    width:51%;
    pointer-events:none;
    background:linear-gradient(90deg,rgba(249,247,241,.97) 0%,rgba(249,247,241,.79) 69%,rgba(249,247,241,0) 100%);
}
.sz-hero__copy{padding-top:72px;padding-bottom:55px}
.sz-hero__visual{min-height:0;pointer-events:none}
.sz-hero__visual>*{display:none!important}

@media(max-width:1199.98px){
    .sz-hero__stage{
        display:block;
        min-height:940px;
        aspect-ratio:auto;
        background-position:center bottom;
        background-size:100% auto;
    }
    .sz-hero__stage:before{
        width:100%;
        height:540px;
        background:linear-gradient(180deg,#f9f7f1 0%,rgba(249,247,241,.98) 82%,rgba(249,247,241,0) 100%);
    }
    .sz-hero__copy{max-width:720px;padding:52px 32px 470px}
    .sz-hero__visual{display:none}
}
@media(max-width:767.98px){
    .sz-hero__stage{
        display:block;
        min-height:0;
        background-position:center bottom;
        background-size:100% auto;
    }
    .sz-hero__stage:before{
        width:100%;
        height:520px;
        background:linear-gradient(180deg,#f9f7f1 0%,rgba(249,247,241,.98) 80%,rgba(249,247,241,0) 100%);
    }
    .sz-hero__copy{padding:40px 18px 205px}
    .sz-hero__visual{display:none}
    .sz-category-rail{width:calc(100% - 24px);margin-left:12px;margin-right:12px}
    .sz-trust-rail{width:calc(100% - 24px);margin-left:12px;margin-right:12px;border-radius:0 0 18px 18px}
}
@media(min-width:768px) and (max-width:1199.98px){
    .sz-hero__stage{
        height:calc(100svh - 76px);
        min-height:760px;
        max-height:1050px;
        aspect-ratio:auto;
        background-color:#f7f3eb;
        background-position:center center;
        background-size:auto 100%;
    }
    .sz-hero__copy{padding:6% 5% 4%}
    .sz-hero__actions{margin-bottom:0}
}

/* Dedicated portrait artwork and reduced content for tablet/mobile. */
@media(max-width:1199.98px){
    .sz-hero__stage{
        position:relative;
        display:block;
        width:100%;
        min-height:0;
        aspect-ratio:2/3;
        background-image:url('../img/hero-mobile-background.png');
        background-position:center center;
        background-size:100% 100%;
        background-repeat:no-repeat;
    }
    .sz-hero__stage:before{
        width:100%;
        height:43%;
        background:linear-gradient(180deg,rgba(249,247,241,.9) 0%,rgba(249,247,241,.54) 70%,rgba(249,247,241,0) 100%);
    }
    .sz-hero__copy{
        position:absolute;
        z-index:3;
        inset:0;
        display:flex;
        width:100%;
        max-width:none;
        height:100%;
        flex-direction:column;
        align-items:flex-start;
        padding:7.5% 6% 4.5%;
        text-align:left;
    }
    .sz-kicker{margin-bottom:18px}
    .sz-hero h1{max-width:680px;font-size:clamp(44px,6.3vw,72px)!important}
    .sz-title-flourish,
    .sz-hero__copy>p,
    .sz-hero__proofs{display:none!important}
    .sz-hero__actions{
        width:auto;
        margin-top:auto;
        padding:11px 14px;
        border:1px solid rgba(255,255,255,.72);
        border-radius:22px;
        background:rgba(255,254,250,.82);
        box-shadow:0 10px 28px rgba(35,48,31,.12);
        -webkit-backdrop-filter:blur(8px);
        backdrop-filter:blur(8px);
    }
}
@media(max-width:767.98px){
    .sz-hero__copy{padding:8% 5% 5%;text-align:left}
    .sz-kicker{align-self:flex-start;margin-bottom:14px;font-size:8px}
    .sz-hero h1{max-width:94%;font-size:clamp(34px,10.5vw,48px)!important;line-height:1.02}
    .sz-hero__actions{width:100%;justify-content:center;gap:10px;padding:9px}
    .sz-primary-btn{height:43px;gap:12px;padding:0 18px;font-size:9px}
    .sz-story-btn{gap:8px}
    .sz-story-btn>i{width:35px;height:35px}
    .sz-story-btn strong{font-size:8px}
    .sz-story-btn small{font-size:7px}
}

/* Keep this after the general portrait rule so tablet sizing wins. */
@media(min-width:768px) and (max-width:1199.98px){
    .sz-hero__stage{
        height:calc(100svh - 76px);
        min-height:760px;
        max-height:1050px;
        aspect-ratio:auto;
        background-position:center center;
        background-size:auto 100%;
    }
    .sz-hero__copy{padding:6% 5% 4%}
}

/* Instant add-to-cart celebration */
.cart-icon a.is-adding,
[onclick^="quickAddToCart"].is-adding {
    pointer-events: none;
    opacity: .65;
    transform: scale(.92);
}

.cart-celebration {
    position: absolute;
    z-index: 10080;
    top: auto;
    right: 18px;
    bottom: 18px;
    left: 18px;
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 12px 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 16px;
    color: #fff;
    background: rgba(32, 60, 29, .96);
    box-shadow: 0 16px 45px rgba(24, 40, 21, .25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px) scale(.94);
    transition: opacity .28s ease, transform .38s cubic-bezier(.2,.8,.2,1.15);
}

.cart-celebration.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.cart-celebration__check { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #294425; background: #f1e4b8; font-size: 21px; }
.cart-celebration strong, .cart-celebration small { display: block; line-height: 1.2; }
.cart-celebration strong { font-family: Georgia, "Times New Roman", serif; font-size: 19px; }
.cart-celebration small { margin-top: 3px; color: rgba(255,255,255,.82); font-size: 13px; }

.cart-confetti-layer { position: absolute; z-index: 10070; inset: 0; overflow: hidden; pointer-events: none; }
.cart-confetti-layer i {
    position: absolute;
    top: -18px;
    left: var(--x);
    width: 8px;
    height: 13px;
    border-radius: 2px;
    background: var(--color);
    box-shadow: 0 0 0 1px rgba(0,0,0,.03);
    animation: seedszen-confetti var(--duration) cubic-bezier(.16,.72,.36,1) var(--delay) forwards;
}

@keyframes seedszen-confetti {
    0% { opacity: 0; transform: translate3d(0, -20px, 0) rotate(0); }
    10% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--drift), 105vh, 0) rotate(var(--rotate)); }
}

@media (max-width: 575.98px) {
    .cart-celebration { right: 12px; bottom: 12px; left: 12px; padding: 10px 14px; }
    .cart-confetti-layer i { width: 6px; height: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cart-confetti-layer { display: none; }
    .cart-celebration { transition: opacity .15s linear; transform: translateY(0); }
}

@media (min-width: 1200px) {
    .sz-announcement { font-size: 13px; }
    .sz-hero__copy { padding-top: 34px; padding-left: 5rem; }
}

.sz-kicker {
    margin-bottom: 16px;
    padding: 8px 16px;
    font-size: 12px;
}

.sz-kicker i { font-size: 16px; }

.sz-hero__copy > p {
    font-size: 16px !important;
    line-height: 1.7;
}

.sz-hero__proofs {
    gap: 18px;
}

.sz-hero__proofs > div {
    gap: 11px;
}

.sz-hero__proofs i {
    width: 44px;
    height: 44px;
    flex-basis: 44px;
    font-size: 24px;
}

.sz-hero__proofs strong {
    font-size: 12px;
}

.sz-hero__proofs small {
    font-size: 10px;
}

.sz-primary-btn { font-size: 13px; }
.sz-story-btn strong { font-size: 12px; }
.sz-story-btn small { font-size: 10px; }
.sz-story-btn > i {
    width: 44px;
    height: 44px;
    font-size: 17px;
}