@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@500;600;700&display=swap'); /* ── Tokens ──────────────────────────────────────────────── */ :root { --font-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Base surfaces */ --bg: #FAF6EE; --surface: #FFFFFF; --text: #0B1411; --muted: #42524A; /* Brand system */ --brand: #0B2F22; /* deep green = brand */ --brand2: #062016; /* deeper green for emphasis */ --brand-rgb: 11, 47, 34; /* Accent system (used sparingly as “signal”) */ --accent: #E01E2F; /* drop red = action */ --accent2: #B81422; --accent-rgb: 224, 30, 47; /* Neutral UI */ --rating: #D39A1D; /* warm rating gold */ --border: rgba(11,20,17,.09); --shadow: 0 4px 24px rgba(11,20,17,.07); --shadow-lg:0 12px 40px rgba(11,20,17,.11); --r: 16px; --r-lg: 22px; --r-xl: 28px; --btn-r: 12px; } [data-theme="drop"]{ /* Campaign mode: keep layout same, flip primary brand to red */ --brand: var(--accent); --brand2: var(--accent2); --brand-rgb: var(--accent-rgb); } /* ── Reset ───────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;overflow-x:hidden} body{font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} /* ── Container ───────────────────────────────────────────── */ .container{width:100%;max-width:1160px;margin-inline:auto;padding-inline:clamp(16px,3vw,32px)} /* ── Header ──────────────────────────────────────────────── */ .header{background:rgba(250,246,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100} .header__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;height:84px;padding:0 4px} .brand{display:flex;align-items:center;flex-shrink:0;line-height:0;padding:0;background:none;border:none} .brand__logo{height:52px;width:auto;display:block} /* Text fallback if SVG/PNG fails */ .brand__wordmark{font-size:13px;font-weight:900;color:var(--brand2);letter-spacing:-.02em;display:none} .nav{display:flex;align-items:center;gap:4px;margin-left:auto} .nav a{padding:8px 14px;border-radius:var(--btn-r);font-size:14px;font-weight:700;color:var(--muted);transition:background .15s,color .15s;white-space:nowrap} .nav a:hover{background:rgba(var(--brand-rgb),.08);color:var(--brand2)} /* Active state via data-page on */ [data-page="home"] .nav a[href="/"], [data-page="products"].nav a[href="/products/"], [data-page="vacuum"] .nav a[href="/why-vacuum-fried/"], [data-page="where"] .nav a[href="/where-to-buy/"], [data-page="contact"] .nav a[href="/contact/"]{color:var(--brand2);background:rgba(var(--brand-rgb),.12)} .header__cta{margin-left:12px;flex-shrink:0} .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:36px;height:36px;background:none;border:none;cursor:pointer;margin-left:auto;flex-shrink:0} .nav-toggle span{display:block;height:2px;background:var(--text);border-radius:2px;transition:transform .2s,opacity .2s} .nav-drawer{display:none;flex-direction:column;gap:4px;padding:12px 0 16px;border-top:1px solid var(--border);background:rgba(250,246,238,.98)} .nav-drawer a{padding:10px 0;font-size:15px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--border)} .nav-drawer a:last-child{border-bottom:none} .nav-drawer.is-open{display:flex} .nav-accordion{border-bottom:1px solid var(--border)} .nav-accordion__summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;font-size:15px;font-weight:800;color:var(--text);cursor:pointer} .nav-accordion__summary::-webkit-details-marker{display:none} .nav-accordion__links{display:grid;padding:0 0 6px} .nav-accordion__links a{padding:10px 0 10px 12px;font-size:14px} .nav-accordion__chev{font-size:12px;opacity:.7;transition:transform .18s ease} .nav-accordion[open] .nav-accordion__chev{transform:rotate(180deg)} body.nav-open{overflow:hidden} [data-page="home"] .nav-drawer a[href="/"], [data-page="products"].nav-drawer a[href="/products/"], [data-page="vacuum"] .nav-drawer a[href="/why-vacuum-fried/"], [data-page="where"] .nav-drawer a[href="/where-to-buy/"], [data-page="contact"] .nav-drawer a[href="/contact/"]{color:var(--brand)} @media(max-width:860px){.nav{display:none}.header__cta{display:none}.nav-toggle{display:flex}.nav-drawer{position:fixed;top:0;left:0;width:min(92vw,420px);max-width:100vw;height:100dvh;margin:0;padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));border-top:none;border-right:1px solid var(--border);background:rgba(250,246,238,.99);box-shadow:var(--shadow-lg);overflow:auto;transform:translateX(-100%);transition:transform .18s ease;z-index:205;box-sizing:border-box}.nav-drawer.is-open{display:flex;transform:translateX(0)}} /* ── Buttons ─────────────────────────────────────────────── */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:0 24px;height:48px;border-radius:var(--btn-r);font-size:14px;font-weight:800;cursor:pointer;border:2px solid transparent;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap;text-decoration:none} .btn--primary{background:var(--brand);color:#fff;border-color:var(--brand)} .btn--primary:hover{background:var(--brand2);border-color:var(--brand2);transform:translateY(-1px);box-shadow:0 6px 20px rgba(var(--brand-rgb),.25)} .btn--secondary{background:transparent;color:var(--text);border-color:rgba(11,20,17,.15)} .btn--secondary:hover{background:rgba(11,20,17,.05);transform:translateY(-1px)} .btn--sm{height:40px;padding:0 18px;font-size:13px} /* ── Main ────────────────────────────────────────────────── */ .main{padding-bottom:80px} /* ── Sections ────────────────────────────────────────────── */ .section{padding:56px 0} .section--sm{padding:32px 0} .section-header{margin-bottom:32px} /* ── Typography ──────────────────────────────────────────── */ .kicker{font-family:var(--font-display);font-size:11px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px} .h1{font-family:var(--font-display);font-size:clamp(36px,5.5vw,68px);font-weight:900;letter-spacing:-.03em;line-height:1.05} .h2{font-family:var(--font-display);font-size:clamp(26px,3.8vw,44px);font-weight:900;letter-spacing:-.03em;line-height:1.1} .lead{font-size:clamp(15px,1.6vw,18px);color:var(--muted);font-weight:600;line-height:1.7;margin-top:12px;max-width:56ch} /* ── Card ────────────────────────────────────────────────── */ .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)} /* ── Hero ────────────────────────────────────────────────── */ .hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:72px 0 56px} .hero__panel{display:flex;flex-direction:column;align-items:flex-start} .hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero__brandline{font-size:13px;color:var(--muted);font-weight:600;margin-top:16px} .hero__media.card{background:transparent;border:none;box-shadow:none} .hero__media{overflow:hidden;border-radius:var(--r-xl);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;padding:0;background:none} .hero__media img{width:100%;height:100%;object-fit:contain;object-position:center;transform:none} @media(max-width:760px){.hero{grid-template-columns:1fr;padding:48px 0 40px}.hero__media{aspect-ratio:16/9}} /* ── Trust grid ──────────────────────────────────────────── */ .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .trust-card{padding:24px;border-radius:var(--r)} .trust-card__title{font-weight:900;font-size:14px;letter-spacing:-.01em;line-height:1.3} .trust-card__desc{color:var(--muted);font-size:13px;font-weight:600;margin-top:8px;line-height:1.65} @media(max-width:860px){.trust-grid{grid-template-columns:1fr 1fr}} @media(max-width:500px){.trust-grid{grid-template-columns:1fr}} /* ── Range banner ────────────────────────────────────────── */ .range-banner{overflow:hidden;border-radius:var(--r-lg);background:#0b2f22;padding:0} .range-img{width:100%;height:100%;display:block;aspect-ratio:21/6;object-fit:contain;object-position:center} /* ── Chips ───────────────────────────────────────────────── */ .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px} .chip{display:inline-flex;align-items:center;padding:6px 14px;border-radius:var(--btn-r);border:1px solid rgba(11,20,17,.10);background:rgba(255,255,255,.9);font-weight:700;font-size:12px;color:#23312a;white-space:nowrap} .chip--green{background:rgba(var(--brand-rgb),.08);border-color:rgba(var(--brand-rgb),.18);color:var(--brand2)} /* ── Home product grid ───────────────────────────────────── */ .product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px} .product-tile{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);transition:transform .18s,box-shadow .2s;text-decoration:none} .product-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)} /* Premium tall image area - fills 65% of card */ .product-tile__img{background:radial-gradient(ellipse at 50% 20%,rgba(var(--brand-rgb),.13),transparent 65%);padding:0;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:3/4;position:relative} .product-tile__img img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .3s ease} .product-tile:hover .product-tile__img img{transform:scale(1.04)} .product-tile__body{padding:18px 18px 22px;flex:1;display:flex;flex-direction:column;background:var(--surface)} .product-tile__name{font-weight:900;font-size:15px;letter-spacing:-.02em} .product-tile__note{color:var(--muted);font-size:13px;font-weight:600;margin-top:5px;flex:1;line-height:1.55} .product-tile__price{font-size:17px;font-weight:900;color:var(--brand2);margin-top:12px;letter-spacing:-.01em} .product-tile__mrp{font-size:12px;font-weight:600;color:var(--muted);margin-left:5px} @media(max-width:860px){.product-grid{grid-template-columns:1fr 1fr}} @media(max-width:500px){.product-grid{grid-template-columns:1fr}} /* ── Product page list ───────────────────────────────────── */ .product-list{display:flex;flex-direction:column;gap:16px;margin-top:8px} .product-card{display:grid;grid-template-columns:300px 1fr;overflow:hidden;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);transition:box-shadow .2s} .product-card:hover{box-shadow:var(--shadow-lg)} .product-card__img{background:radial-gradient(ellipse at 50% 30%,rgba(var(--brand-rgb),.10),transparent 70%);border-right:1px solid var(--border);display:flex;align-items:center;justify-content:center;padding:24px;align-self:stretch} .product-card__img img{width:100%;max-height:260px;object-fit:contain} .product-card__img .img-placeholder{width:100%;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--brand);opacity:.4;font-size:12px;font-weight:700;letter-spacing:.06em;text-align:center} .product-card__body{padding:32px 32px 32px 28px;display:flex;flex-direction:column} .product-card__title{font-weight:900;font-size:clamp(20px,2.2vw,26px);letter-spacing:-.03em;line-height:1.1} .product-card__note{color:var(--muted);font-weight:600;margin-top:10px;line-height:1.7;font-size:15px} .product-card__weight{display:inline-flex;align-items:center;font-size:11px;font-weight:700;color:var(--muted);background:rgba(11,20,17,.05);border:1px solid var(--border);border-radius:var(--btn-r);padding:3px 10px;margin-top:12px;align-self:flex-start} .product-card__price{display:flex;align-items:baseline;gap:10px;margin-top:10px} .product-card__price-val{font-size:26px;font-weight:900;letter-spacing:-.03em;color:var(--brand2)} .product-card__price-label{font-size:11px;font-weight:600;color:var(--muted);line-height:1.4;max-width:16ch} .product-card__actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px} @media(max-width:760px){.product-card{grid-template-columns:1fr}.product-card__img{border-right:none;border-bottom:1px solid var(--border)}.product-card__body{padding:24px}} /* ── Combos ──────────────────────────────────────────────── */ .combos-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:stretch} .combo-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:32px 28px;display:flex;flex-direction:column;position:relative;overflow:hidden;transition:transform .18s,box-shadow .2s;height:100%} .combo-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)} .combo-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--brand),var(--brand2))} .combo-card--featured{background:linear-gradient(150deg,rgba(var(--brand-rgb),.06) 0%,var(--surface) 60%);border-color:rgba(var(--brand-rgb),.22)} .combo-card__badge{display:inline-flex;align-self:flex-start;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.18);border-radius:var(--btn-r);padding:4px 11px;margin-bottom:12px} .combo-card__name{font-weight:900;font-size:clamp(18px,2vw,22px);letter-spacing:-.03em;line-height:1.1} .combo-card__tagline{font-size:11px;font-weight:700;color:var(--muted);margin-top:4px;letter-spacing:.02em} .combo-card__desc{color:var(--muted);font-weight:600;font-size:13px;line-height:1.65;margin-top:10px;min-height:3.3em} /* Fixed height chip zone — 2 rows of chips always reserved */ .combo-includes{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;min-height:70px;align-content:flex-start} /* Pack image strip — larger for a more premium feel */ .combo-imgs{ display:flex; height:124px; min-height:124px; max-height:124px; overflow:hidden; margin-top:16px; margin-bottom:4px; align-items:center; flex-shrink:0; } .combo-imgs__item{ width:92px; height:112px; border-radius:10px; overflow:hidden; border:2px solid var(--surface); box-shadow:0 2px 10px rgba(11,20,17,.14); background:rgba(var(--brand-rgb),.07); flex-shrink:0; margin-left:-16px; transition:transform .15s; } .combo-imgs__item:first-child{margin-left:0} .combo-card:hover .combo-imgs__item{transform:translateY(-2px)} .combo-imgs__item img{width:100%;height:100%;object-fit:cover;display:block} .combo-pricing{display:flex;align-items:baseline;gap:10px;margin-top:18px;flex-wrap:wrap} .combo-price{font-size:30px;font-weight:900;letter-spacing:-.04em;color:var(--brand2);line-height:1} .combo-mrp{font-size:14px;font-weight:600;color:var(--muted);text-decoration:line-through;line-height:1} .combo-save{font-size:12px;font-weight:800;color:var(--accent2);background:rgba(var(--accent-rgb),.10);padding:4px 10px;border-radius:var(--btn-r);white-space:nowrap} .combo-per-pack{font-size:12px;font-weight:700;color:var(--muted);margin-top:6px} .combo-dots{display:inline-flex;gap:3px;vertical-align:middle;margin-right:4px} .combo-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.55;display:inline-block} .combo-card__action{margin-top:auto;padding-top:22px} .combo-card__action .btn{width:100%;justify-content:center} @media(max-width:640px){ .combos-grid{grid-template-columns:1fr} .combo-imgs{height:104px;min-height:104px;max-height:104px} .combo-imgs__item{width:78px;height:96px;margin-left:-14px} } /* Bundle hero (clean overlap strip) */ .combo-hero{ display:flex; align-items:flex-end; gap:0; height:150px; margin-top:16px; margin-bottom:12px; padding:6px 2px; } .combo-hero__img{ width:140px; height:140px; object-fit:cover; /* your current assets include backgrounds */ object-position:center; border-radius:18px; border:1px solid rgba(var(--brand-rgb),.10); box-shadow:0 10px 26px rgba(11,20,17,.16); background:rgba(255,255,255,.55); backdrop-filter:saturate(140%) blur(8px); } .combo-hero__img + .combo-hero__img{margin-left:-28px;} .combo-hero[data-count="4"] .combo-hero__img{width:120px;height:128px;border-radius:16px;} .combo-hero[data-count="4"] .combo-hero__img + .combo-hero__img{margin-left:-22px;} /* Subtle depth, no wonky rotations */ .combo-hero__img--1{transform:translateY(6px); z-index:1; opacity:.96} .combo-hero__img--2{transform:translateY(2px); z-index:2} .combo-hero__img--3{transform:translateY(0px); z-index:3} .combo-hero__img--4{transform:translateY(3px); z-index:4; opacity:.98} .combo-card:hover .combo-hero__img{transform:translateY(-2px)} /* Responsive */ @media (max-width: 900px){ .combo-hero{height:140px} .combo-hero__img{width:128px;height:128px} .combo-hero[data-count="4"] .combo-hero__img{width:110px;height:120px} } @media (max-width: 520px){ .combo-hero{height:132px} .combo-hero__img{width:120px;height:120px} .combo-hero__img + .combo-hero__img{margin-left:-20px} .combo-hero[data-count="4"] .combo-hero__img{width:98px;height:110px} .combo-hero[data-count="4"] .combo-hero__img + .combo-hero__img{margin-left:-18px} } /* ── Store cards ─────────────────────────────────────────── */ .stores-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .store-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:24px;display:flex;flex-direction:column} .store-card__name{font-weight:900;font-size:17px;letter-spacing:-.02em} .store-card__meta{color:var(--brand);font-weight:700;font-size:13px;margin-top:4px} .store-card__note{color:var(--muted);font-weight:600;font-size:13px;line-height:1.65;margin-top:10px;flex:1} .store-card__actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px} @media(max-width:640px){.stores-grid{grid-template-columns:1fr}} /* ── Store pills (home) ──────────────────────────────────── */ .store-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px} .store-pill{padding:12px 18px;background:var(--surface);border:1px solid var(--border);border-radius:var(--btn-r);box-shadow:0 2px 8px rgba(11,20,17,.05)} .store-pill__name{font-weight:900;font-size:13px} .store-pill__meta{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px} /* ── Panel CTA ───────────────────────────────────────────── */ .panel{padding:40px 48px} .panel__kicker{margin-bottom:10px} .panel__title{font-weight:900;font-size:clamp(20px,2.2vw,28px);letter-spacing:-.03em;line-height:1.15;margin-top:8px} .panel__desc{color:var(--muted);font-weight:600;line-height:1.7;margin-top:12px;max-width:56ch} .panel__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} @media(max-width:640px){.panel{padding:28px 20px}} /* ── Footer ──────────────────────────────────────────────── */ .footer{padding:56px 0 64px;border-top:1px solid var(--border);background:rgba(255,255,255,.5);margin-top:40px} .footer__inner{display:grid;grid-template-columns:1.1fr 1.4fr .7fr;gap:32px;align-items:start} .footer__brand{font-weight:900;font-size:16px;letter-spacing:-.02em} .footer__tag{color:var(--muted);font-size:13px;font-weight:600;margin-top:4px} .footer__small{color:var(--muted);font-size:11px;font-weight:600;margin-top:16px} .footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .footer__col{display:flex;flex-direction:column;gap:8px} .footer__label{font-size:10px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px} .footer__col a{font-size:13px;font-weight:600;color:var(--text);opacity:.75;transition:opacity .15s} .footer__col a:hover{opacity:1} .footer__right{display:flex;flex-direction:column;gap:10px;align-items:flex-start} .footer__note{font-size:11px;color:var(--muted);font-weight:600;margin-top:4px} @media(max-width:860px){.footer__inner{grid-template-columns:1fr}.footer__cols{grid-template-columns:repeat(3,1fr)}} @media(max-width:500px){.footer__cols{grid-template-columns:1fr 1fr}} /* ── WhatsApp float ──────────────────────────────────────── */ .wa-float{position:fixed;bottom:24px;right:24px;z-index:200;display:flex;align-items:center;gap:8px;background:#25d366;color:#fff;font-size:13px;font-weight:800;padding:12px 20px;border-radius:var(--btn-r);box-shadow:0 4px 20px rgba(37,211,102,.35);text-decoration:none;transition:transform .15s,box-shadow .15s} .wa-float:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(37,211,102,.45)} .wa-dot{width:8px;height:8px;border-radius:50%;background:#fff;flex-shrink:0;animation:pulse 2s infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}} @media(max-width:760px){.wa-float{bottom:16px;right:16px;padding:10px 16px}} /* ── Utilities ───────────────────────────────────────────── */ .mt-4{margin-top:4px}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}.mt-32{margin-top:32px} @media(max-width:760px){ .brand__logo{height:48px} .header__inner{height:72px} .range-banner{padding:12px} .range-img{max-height:240px} } /* Range lineup banner polish */ .range-banner{position:relative} .range-banner:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);pointer-events:none} @media(max-width:760px){ .range-img{aspect-ratio:21/8} } /* Combo hero image (single premium asset) */ .combo-hero-img{ margin-top:16px; margin-bottom:12px; border-radius:18px; overflow:hidden; background:rgba(var(--brand-rgb),.06); border:1px solid rgba(var(--brand-rgb),.10); box-shadow:0 14px 34px rgba(11,20,17,.14); aspect-ratio:16/9; } .combo-hero-img img{ width:100%; height:100%; display:block; object-fit:cover; object-position:center; transform:scale(1.01); transition:transform .18s ease; } .combo-card:hover .combo-hero-img img{ transform:scale(1.03); } @media (max-width: 520px){ .combo-hero-img{border-radius:16px} } @media(max-width:760px){.brand__logo{height:40px}.header__inner{height:70px}} @media(max-width:760px){.brand__logo{height:42px}} /* Announcement bar */ .announce{position:sticky;top:0;z-index:50;background:rgba(var(--accent-rgb),.92);color:#fff;padding:10px 16px;text-align:center;font-weight:800;letter-spacing:.01em} @media(max-width:760px){.announce{position:sticky;top:0;z-index:50;background:rgba(var(--accent-rgb),.92);color:#fff;padding:10px 16px;text-align:center;font-weight:800;letter-spacing:.01em}} /* Steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .step{padding:18px} .step__num{font-weight:900;color:var(--brand2);letter-spacing:.02em} .step__title{font-weight:900;font-size:18px;margin-top:10px} .step__desc{color:var(--muted);margin-top:8px;line-height:1.5} @media(max-width:900px){.steps{grid-template-columns:1fr}} /* Quotes */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .quote{padding:18px} .quote__text{font-weight:800;font-size:16px;line-height:1.45} .quote__by{margin-top:10px;color:var(--muted);font-weight:700} .small-note{color:var(--muted);font-weight:700} @media(max-width:900px){.quotes{grid-template-columns:1fr}} /* FAQ */ .faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .faq__item{border:1px solid rgba(var(--brand-rgb),.10);border-radius:14px;background:rgba(255,255,255,.7);padding:12px 14px} .faq__item summary{cursor:pointer;font-weight:900} .faq__body{margin-top:10px;color:var(--muted);line-height:1.55;font-weight:650} @media(max-width:900px){.faq{grid-template-columns:1fr}} /* Info grid */ .info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .info{padding:18px} .info__title{font-weight:900} .info__desc{margin-top:8px;color:var(--muted);line-height:1.55} @media(max-width:900px){.info-grid{grid-template-columns:1fr}} /* Footer links */ .footer-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px} .footer-links a{color:var(--muted);font-weight:800;text-decoration:none} .footer-links a:hover{text-decoration:underline} /* ───────────────────────────────────────────────────────── Storefront (Cart + PDP + Checkout) Added Feb 2026 ────────────────────────────────────────────────────────── */ .header__actions{display:flex;align-items:center;gap:10px;flex-shrink:0} .cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 12px;border-radius:var(--btn-r);border:1px solid rgba(11,20,17,.15);background:#fff;cursor:pointer;box-shadow:0 4px 18px rgba(11,20,17,.06)} .cart-btn__icon{font-size:16px;line-height:1} .cart-btn__count{min-width:20px;height:20px;border-radius:var(--btn-r);background:var(--accent);color:#fff;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;padding:0 6px} .icon-btn{width:36px;height:36px;border-radius:12px;border:1px solid rgba(11,20,17,.12);background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .icon-btn:hover{background:rgba(11,20,17,.04)} .no-scroll{overflow:hidden} .cart-overlay{position:fixed;inset:0;background:rgba(11,20,17,.38);backdrop-filter:blur(3px);z-index:199} .cart-drawer{position:fixed;top:0;right:0;height:100%;width:min(420px, 92vw);background:#fff;border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transform:translateX(110%);transition:transform .18s ease;z-index:200;display:flex;flex-direction:column} .cart-drawer.is-open{transform:translateX(0)} .cart-drawer__header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 10px;border-bottom:1px solid var(--border)} .cart-drawer__title{font-weight:900;font-size:16px;letter-spacing:-.01em} .cart-drawer__sub{color:var(--muted);font-weight:700;font-size:12px;margin-top:2px} .cart-drawer__body{padding:14px 18px;overflow:auto;flex:1;display:flex;flex-direction:column;gap:12px} .cart-drawer__footer{padding:14px 18px;border-top:1px solid var(--border)} .free-ship{margin-top:12px;font-weight:900;font-size:13px;color:var(--brand2);background:rgba(var(--brand-rgb),.08);border:1px solid rgba(var(--brand-rgb),.18);padding:10px 12px;border-radius:14px} .cart-empty{border:1px dashed rgba(11,20,17,.16);border-radius:18px;padding:18px;text-align:left;background:linear-gradient(180deg,#fbfcfb,#f4f7f5)} .cart-empty__title{font-weight:900;font-size:16px} .cart-empty__desc{color:var(--muted);font-weight:600;margin-top:6px} .cart-row{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:stretch;border:1px solid var(--border);border-radius:18px;padding:12px;background:#fff} .cart-row__img{border-radius:14px;background:#f4f7f5;display:flex;align-items:center;justify-content:center;overflow:hidden} .cart-row__img img{width:100%;height:100%;object-fit:contain} .cart-row__body{display:flex;flex-direction:column;gap:10px} .cart-row__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cart-row__name{font-weight:900;letter-spacing:-.01em} .cart-row__meta{color:var(--muted);font-weight:700;font-size:12px;margin-top:2px} .cart-row__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px} .cart-row__price{font-weight:900} .qty{display:inline-flex;align-items:center;border:1px solid rgba(11,20,17,.14);border-radius:var(--btn-r);overflow:hidden;height:36px;background:#fff} .qty__btn{width:36px;height:36px;border:none;background:transparent;cursor:pointer;font-size:18px;font-weight:900} .qty__btn:hover{background:rgba(11,20,17,.05)} .qty__input{width:44px;height:36px;border:none;text-align:center;font-weight:800;font-size:14px;outline:none} .cart-totals{display:grid;gap:10px} .cart-totals__row{display:flex;align-items:center;justify-content:space-between;font-weight:800} .cart-totals__muted{color:var(--muted);font-weight:700;font-size:13px} .cart-actions{display:flex;gap:10px;margin-top:14px} .cart-actions .btn{flex:1} /* Home + Shop product cards */ .product-card{overflow:hidden} .product-card__img{background:#f4f7f5;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .product-card__img img{width:100%;height:100%;object-fit:contain} .product-card__body{padding:14px} .product-card__name{font-weight:900} .product-card__meta{color:var(--muted);font-weight:700;font-size:12px;margin-top:6px} .product-card__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .product-card__price{font-weight:900} .product-tile2{overflow:hidden;display:flex;flex-direction:column} .product-tile2__img{background:#f4f7f5;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .product-tile2__img img{width:100%;height:100%;object-fit:contain} .product-tile2__body{padding:14px} .product-tile2__name{font-weight:900} .product-tile2__meta{color:var(--muted);font-weight:700;font-size:12px;margin-top:6px} .product-tile2__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px} .product-tile2__price{font-weight:900} /* PDP */ .pdp{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;padding:28px 0 0} .pdp__hero{background:#f4f7f5;border-radius:var(--r-xl);border:1px solid var(--border);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;overflow:hidden} .pdp__hero img{width:100%;height:100%;object-fit:contain} .pdp__thumbs{display:flex;gap:10px;margin-top:12px;overflow:auto;padding-bottom:4px} .thumb{border:1px solid rgba(11,20,17,.12);background:#fff;border-radius:14px;flex:0 0 72px;height:72px;overflow:hidden;cursor:pointer} .thumb img{width:100%;height:100%;object-fit:contain;background:#f4f7f5} .pdp__price-row{display:flex;align-items:center;justify-content:space-between;gap:12px} .pdp__price{font-weight:900;font-size:26px;letter-spacing:-.02em} .pdp__deliver{padding:14px;border-radius:18px} .pdp__deliver-row{font-weight:800;color:#23312a} .pdp__block{padding:16px;border-radius:18px} .pdp__block-title{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;font-size:16px} .pdp__block-desc{margin-top:10px;color:var(--muted);font-weight:600;line-height:1.7;font-size:14px} .pdp__mini{margin-top:10px} .pdp__info .quotes{grid-template-columns:1fr;gap:12px} /* Sticky add-to-cart (mobile) */ .pdp-sticky{position:fixed;left:0;right:0;bottom:0;z-index:220;background:rgba(250,246,238,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:12px 16px;display:none;align-items:center;justify-content:space-between;gap:12px} .pdp-sticky__price{font-family:var(--font-display);font-weight:900;font-size:18px;letter-spacing:-.02em} @media(max-width:900px){.pdp-sticky{display:flex}} .nutri-table{margin-top:10px;border:1px solid var(--border);border-radius:14px;overflow:hidden} .nutri-table table{width:100%;border-collapse:collapse} .nutri-table th,.nutri-table td{padding:10px;border-bottom:1px solid var(--border);font-size:13px;text-align:left} .nutri-table th{background:#f8fbf9} .nutri-table tr:last-child td{border-bottom:none} .pdp__upsell-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px} .upsell{overflow:hidden} .upsell__img{background:#f4f7f5;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .upsell__img img{width:100%;height:100%;object-fit:contain} .upsell__body{padding:12px} .upsell__name{font-weight:900} .upsell__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px} .upsell__price{font-weight:900} @media(max-width:900px){.pdp{grid-template-columns:1fr}.pdp__upsell-grid{grid-template-columns:1fr 1fr}} /* Cart page */ .cart-page{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;padding:28px 0} .cart-page__list{padding:16px;border-radius:var(--r-xl)} .cart-page__summary{padding:16px;border-radius:var(--r-xl);position:sticky;top:96px;height:fit-content} .cart-row--page{margin-top:12px} .cart-page-empty{padding:18px;border-radius:var(--r-xl)} @media(max-width:980px){.cart-page{grid-template-columns:1fr}.cart-page__summary{position:static}} /* Checkout */ .checkout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;padding:28px 0} .form-card{padding:16px;border-radius:var(--r-xl)} .form-grid{display:grid;gap:12px;margin-top:12px} .field label{display:block;font-weight:800;font-size:13px;margin-bottom:6px} .field input,.field select,.field textarea{width:100%;height:44px;border-radius:14px;border:1px solid rgba(11,20,17,.14);padding:0 12px;font-family:inherit;font-weight:700;outline:none;background:#fff} .field textarea{height:auto;min-height:90px;padding:10px 12px;resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{border-color:rgba(var(--brand-rgb),.45);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.10)} .field__error{margin-top:6px;font-size:12px;font-weight:800;color:var(--accent2);line-height:1.35} .field input[aria-invalid="true"],.field select[aria-invalid="true"]{border-color:rgba(var(--accent-rgb),.42);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.08)} .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} .order-card{padding:16px;border-radius:var(--r-xl);position:sticky;top:96px;height:fit-content} .order-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)} .order-row:last-child{border-bottom:none} .order-row__name{font-weight:900} .alert{border:1px solid rgba(122,22,51,.18);background:#fff1f3;border-radius:14px;padding:12px;font-weight:700} @media(max-width:980px){.checkout{grid-template-columns:1fr}.order-card{position:static}} /* Home layout additions */ .trust-bar{display:flex;gap:10px;overflow:auto;padding-bottom:6px} .trust-pill{flex:0 0 auto;border:1px solid rgba(11,20,17,.12);background:#fff;border-radius:var(--btn-r);padding:10px 14px;font-weight:800;font-size:13px;color:#23312a;box-shadow:0 4px 18px rgba(11,20,17,.05)} .combo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .combo-card__media{background:#0b2f22;border-radius:18px;overflow:hidden;aspect-ratio:16/9;margin-top:10px} .combo-card__media img{width:100%;height:100%;object-fit:contain} @media(max-width:760px){.combo-grid{grid-template-columns:1fr}} .home-products-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:860px){.home-products-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.home-products-grid{grid-template-columns:1fr}} .review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .review{padding:18px;border-radius:var(--r-xl)} .review__quote{font-weight:900;letter-spacing:-.01em} .review__by{color:var(--muted);font-weight:700;font-size:13px;margin-top:10px} @media(max-width:860px){.review-grid{grid-template-columns:1fr}} .reassure-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .reassure{padding:18px;border-radius:var(--r-xl)} .reassure__title{font-weight:900} .reassure__desc{color:var(--muted);font-weight:700;font-size:13px;margin-top:6px} @media(max-width:860px){.reassure-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.reassure-grid{grid-template-columns:1fr}} .faq{display:grid;gap:10px;margin-top:16px} .faq-item{border:1px solid var(--border);border-radius:18px;background:#fff;overflow:hidden} .faq-q{width:100%;text-align:left;padding:14px 14px;background:#fff;border:none;font-weight:900;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px} .faq-q::after{content:'+';font-weight:900;color:var(--muted)} .faq-item.is-open .faq-q::after{content:'–'} .faq-a{display:none;padding:0 14px 14px;color:#25312b} .faq-item.is-open .faq-a{display:block} .cta{padding:22px;border-radius:var(--r-xl)} .shop-bar{display:flex;gap:10px;align-items:center} .shop-search{flex:1;height:44px;border-radius:var(--btn-r);border:1px solid rgba(11,20,17,.14);padding:0 14px;font-weight:700} .shop-search:focus{outline:none;border-color:rgba(var(--brand-rgb),.45);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.10)} .shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} @media(max-width:860px){.shop-grid{grid-template-columns:1fr 1fr}} @media(max-width:520px){.shop-grid{grid-template-columns:1fr}.shop-bar{flex-direction:column;align-items:stretch}} /* ───────────────────────────────────────────────────────── UI density + richer surfaces (refactor after feedback) Goal: reduce "bare" feel without making it busy. ────────────────────────────────────────────────────────── */ /* Slightly tighter vertical rhythm */ .section{padding:48px 0} .section--sm{padding:26px 0} .section-header{margin-bottom:28px} @media(max-width:760px){.section{padding:40px 0}.section--sm{padding:22px 0}.section-header{margin-bottom:22px}} .center{text-align:center} /* Full-width section accents (works only when container is nested inside section) */ .section--alt{background:linear-gradient(180deg, rgba(var(--brand-rgb),.045), rgba(250,246,238,0) 70%);border-top:1px solid var(--border);border-bottom:1px solid var(--border)} .hero-section{background: radial-gradient(900px 520px at 10% 0%, rgba(var(--brand-rgb),.13), rgba(250,246,238,0) 60%), radial-gradient(720px 440px at 92% 6%, rgba(var(--brand-rgb),.08), rgba(250,246,238,0) 58%); } /* Hero: give the pack a premium surface so it doesn't float on blank background */ .hero--tight{padding:56px 0 40px} @media(max-width:760px){.hero--tight{padding:42px 0 26px}} .hero__media{overflow:hidden;border-radius:var(--r-xl);aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;background:rgba(var(--brand-rgb),.04);border:1px solid var(--border)} .hero__media img{width:100%;height:100%;object-fit:contain;object-position:center} /* Photo hero (matches reference: big background + left content card) */ .hero--photo{ position:relative; display:flex; align-items:center; min-height:540px; padding:34px; border-radius:var(--r-xl); border:1px solid var(--border); overflow:hidden; background-image:url('/assets/img/hero/beetroot-hero.webp'), url('/assets/img/hero/beetroot-hero.jpg'); background-size:cover; background-position:70% 50%; background-repeat:no-repeat; } .hero--photo::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(250,246,238,.94) 0%, rgba(250,246,238,.88) 42%, rgba(250,246,238,0) 78%); } .hero__panel--card{ position:relative; max-width:560px; background:rgba(250,246,238,.88); backdrop-filter:saturate(120%) blur(8px); border:1px solid rgba(11,20,17,.12); border-radius:var(--r-xl); padding:26px; box-shadow:var(--shadow-lg); } @media(max-width:860px){ .hero--photo{min-height:480px;background-position:78% 50%} } @media(max-width:760px){ .hero--photo{min-height:520px;padding:18px;background-position:60% 20%} .hero--photo::before{background:linear-gradient(180deg, rgba(250,246,238,.94) 0%, rgba(250,246,238,.86) 52%, rgba(250,246,238,0) 92%)} .hero__panel--card{max-width:100%;padding:20px} } /* Trust cards (icons added) */ .trust-grid--compact{grid-template-columns:repeat(4,1fr);gap:14px} .trust-card{display:flex;flex-direction:column;gap:8px} .trust-card__icon{font-size:22px;line-height:1;color:var(--brand2)} .trust-card__icon img{width:22px;height:22px;display:block} .trust-card__title{font-weight:900;font-size:15px;letter-spacing:-.01em} .trust-card__desc{color:var(--muted);font-size:13px;font-weight:650;line-height:1.55} @media(max-width:860px){.trust-grid--compact{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.trust-grid--compact{grid-template-columns:1fr}} /* Why grid: denser, more "designed" */ .why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .why-card{padding:18px} .why-card__title{font-weight:900;font-size:15px;letter-spacing:-.01em} .why-card__desc{margin-top:8px;color:var(--muted);font-weight:650;font-size:13px;line-height:1.6} @media(max-width:860px){.why-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.why-grid{grid-template-columns:1fr}} /* Panel variant */ .panel--brand{background:linear-gradient(135deg, rgba(var(--brand-rgb),.06), rgba(var(--brand-rgb),.018));border-color:rgba(var(--brand-rgb),.18)} /* Final CTA: make it feel less empty with a subtle media column */ .final-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;overflow:hidden;border-radius:var(--r-xl)} .final-cta__body{padding:26px} .final-cta__media{ background-image: radial-gradient(240px 240px at 30% 30%, rgba(var(--brand-rgb),.10), transparent 60%), radial-gradient(280px 260px at 70% 60%, rgba(var(--brand-rgb),.08), transparent 62%), linear-gradient(135deg, rgba(11,63,46,.06), rgba(250,246,238,0)), url('/assets/img/og-cover.jpg'); background-size: auto, auto, auto, cover; background-position: 30% 30%, 70% 60%, center, center; background-repeat: no-repeat; border-left:1px solid var(--border); } @media(max-width:860px){.final-cta{grid-template-columns:1fr}.final-cta__media{min-height:160px;border-left:none;border-top:1px solid var(--border)}} /* FAQ details: bigger tap target */ .faq__item{transition:background .15s,border-color .15s} .faq__item[open]{background:#fff} .faq__q{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:900;font-size:14px;cursor:pointer} .faq__q::-webkit-details-marker{display:none} .faq__q::after{content:'+';font-size:18px;font-weight:900;color:var(--brand);transition:transform .2s} .faq__item[open] .faq__q::after{transform:rotate(45deg)} /* Nav active state (JS sets aria-current) */ .nav a[aria-current="page"]{background:rgba(var(--brand-rgb),.12);color:var(--brand2)} .nav-drawer a[aria-current="page"]{color:var(--brand)} /* Product tile row (price + quick add) */ .product-tile__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px} /* Smaller chips for tight spaces */ .chip--sm{font-size:11px;padding:4px 10px} /* Header cart icon (replaces emoji cart button) */ .cart-icon{position:relative;display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:var(--btn-r);border:1px solid rgba(11,20,17,.14);background:#fff;box-shadow:0 4px 18px rgba(11,20,17,.06);cursor:pointer;transition:transform .15s,background .15s} .cart-icon:hover{transform:translateY(-1px);background:rgba(11,20,17,.03)} .cart-badge{position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;border-radius:var(--btn-r);background:var(--accent);color:#fff;font-size:11px;font-weight:900;display:flex;align-items:center;justify-content:center;padding:0 6px;border:2px solid var(--bg)} /* Shop hero subtle background */ .shop-hero{background:linear-gradient(180deg, rgba(var(--brand-rgb),.04), rgba(250,246,238,0) 70%);border-bottom:1px solid var(--border)} /* Reduce internal card whitespace a touch */ .combo-card{padding:26px 22px} .product-tile__body{padding:16px 16px 18px} .panel{padding:34px 36px} @media(max-width:640px){.combo-card{padding:22px 18px}.panel{padding:26px 20px}} /* ── Social proof (homepage + reviews page) ───────────────── */ .social-proof{display:flex;align-items:stretch;justify-content:space-between;gap:18px;padding:18px;border-radius:var(--r-xl)} .social-proof__left{min-width:140px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .social-proof__score{font-family:var(--font-display);font-weight:900;font-size:40px;letter-spacing:-.03em;line-height:1} .social-proof__small{font-size:16px;color:var(--muted);font-weight:800;margin-left:2px} .social-proof__stars{color:var(--rating);font-weight:900;letter-spacing:2px;margin-top:6px} .social-proof__meta{color:var(--muted);font-weight:700;font-size:12px;margin-top:6px} .social-proof__right{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:flex-end;flex:1} .proof-chip{padding:8px 12px;border-radius:var(--btn-r);border:1px solid rgba(11,20,17,.10);background:rgba(255,255,255,.9);font-weight:800;font-size:13px;color:#23312a} @media(max-width:760px){.social-proof{flex-direction:column;align-items:flex-start}.social-proof__right{justify-content:flex-start}} /* ── Ingredient transparency ─────────────────────────────── */ .transparency{display:grid;grid-template-columns:1fr 1fr;gap:16px} .transparency__card{padding:18px;border-radius:var(--r-xl)} .transparency__title{font-family:var(--font-display);font-weight:900;font-size:16px;letter-spacing:-.01em} .transparency__chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px} @media(max-width:760px){.transparency{grid-template-columns:1fr}} /* ── Process cards ───────────────────────────────────────── */ .process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .process-card{padding:20px;border-radius:var(--r-xl);position:relative;overflow:hidden} .process-card__step{width:32px;height:32px;border-radius:var(--btn-r);background:rgba(var(--brand-rgb),.12);color:var(--brand2);display:flex;align-items:center;justify-content:center;font-weight:900} .process-card__title{margin-top:12px;font-family:var(--font-display);font-weight:900;font-size:16px;letter-spacing:-.01em} .process-card__desc{margin-top:8px;color:var(--muted);font-weight:600;font-size:14px;line-height:1.65} @media(max-width:900px){.process-grid{grid-template-columns:1fr}} /* ── Quotes grid (reviews page) ──────────────────────────── */ .quotes--grid{grid-template-columns:repeat(3,1fr)} @media(max-width:980px){.quotes--grid{grid-template-columns:1fr 1fr}} @media(max-width:680px){.quotes--grid{grid-template-columns:1fr}} /* ── SuperYou-style modules ──────────────────────────────── */ .super-head{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:-.02em; font-size:clamp(28px,4vw,54px); color:var(--brand); text-align:center; margin-bottom:22px; } .benefit-strip{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow); overflow:auto; } .benefit-item{ min-width:140px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; } .benefit-icon{ width:56px;height:56px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(var(--brand-rgb),.10); border:1px solid rgba(var(--brand-rgb),.20); font-size:24px; } .benefit-label{ font-family:var(--font-display); font-weight:900; font-size:12px; letter-spacing:.04em; text-align:center; text-transform:uppercase; color:#111; } .benefit-divider{ width:1px; height:48px; background:rgba(11,20,17,.18); flex:0 0 auto; } .review-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; } .review-card{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); padding:18px 16px; min-height:170px; display:flex; flex-direction:column; justify-content:flex-start; gap:10px; } .review-stars{font-size:16px;letter-spacing:.08em;color:#f2b705} .review-title{ font-family:var(--font-display); font-weight:900; text-transform:uppercase; font-size:14px; letter-spacing:-.01em; line-height:1.2; } .review-text{color:var(--muted);font-weight:600;font-size:13px;line-height:1.6} @media(max-width:900px){.review-row{grid-template-columns:1fr 1fr}} @media(max-width:520px){.review-row{grid-template-columns:1fr}} /* Product card meta row (stars) */ .prod-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:700;font-size:13px;margin-bottom:10px;flex-wrap:wrap} .prod-stars{color:#f2b705;letter-spacing:.12em} .prod-sep{opacity:.5} .shop-lineup-banner{ margin: 18px 0 6px; border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); position: relative; background: #f3efe6; } .shop-lineup-banner img{ width: 100%; height: clamp(220px, 26vw, 360px); object-fit: cover; object-position: center; display: block; } .shop-lineup-badge{ position:absolute; top:14px; right:14px; padding:10px 12px; border-radius:999px; background: rgba(var(--accent-rgb), .92); color:#fff; font-weight: 950; letter-spacing: .06em; font-size: 12px; text-transform: uppercase; box-shadow: 0 10px 24px rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(6px); } @media(max-width:560px){ .shop-lineup-badge{top:10px;right:10px;font-size:11px;padding:9px 11px} } .learn-hero-media { margin: 14px 0 22px; } .learn-media-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .learn-media{ border-radius: 18px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.08); background: #f3efe6; } .learn-media img{ width: 100%; height: 320px; object-fit: cover; display: block; } @media (max-width: 860px){ .learn-media-grid{ grid-template-columns: 1fr; } .learn-media img{ height: auto; } } /* Marquee strip */ .marquee{ background:var(--brand); color:#fff; font-family:var(--font-display); font-weight:900; text-transform:uppercase; letter-spacing:.08em; font-size:12px; overflow:hidden; border-top:1px solid rgba(255,255,255,.18); border-bottom:1px solid rgba(255,255,255,.18); } .marquee__inner{ display:flex; gap:32px; white-space:nowrap; padding:12px 0; animation:marquee 16s linear infinite; } @keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* PDP Super layout */ .pdp-super{display:grid;grid-template-columns:1fr 1.25fr;gap:24px;align-items:start;padding-top:18px} .pdp-super__info{padding:18px 0} .pdp-super__kicker{font-family:var(--font-display);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:#111;font-size:11px} .pdp-super__title{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;line-height:1.05;font-size:clamp(30px,4vw,52px);margin-top:10px} .pdp-super__rating{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--muted);font-weight:800;font-size:13px;flex-wrap:wrap} .pdp-super__rating .stars{color:#f2b705;letter-spacing:.12em} .pdp-super__desc{margin-top:14px;color:#111;font-weight:600;line-height:1.8;max-width:60ch} .pdp-super__pricebox{margin-top:18px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap} .pdp-super__price{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;font-size:34px;color:#111;line-height:1} .pdp-super__sub{color:var(--muted);font-weight:700;font-size:13px;margin-top:6px} .pay-strip{margin-top:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;color:var(--muted);font-weight:800;font-size:12px} .pay-pill{padding:8px 12px;border-radius:999px;border:1px solid var(--border);background:rgba(255,255,255,.7)} .pdp-super__media{display:grid;grid-template-columns:1fr 220px;gap:14px} .pdp-super__image{background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center} .pdp-super__image img{width:100%;height:100%;object-fit:contain} .pdp-super__side{display:flex;flex-direction:column;gap:14px} .pdp-super__poster{border-radius:var(--r-xl);border:1px solid var(--border);background:linear-gradient(180deg,rgba(var(--brand-rgb),.10),rgba(255,255,255,.75));min-height:220px;display:flex;align-items:flex-end;padding:16px} .pdp-super__poster .poster-text{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:20px;line-height:1.05;color:#111} .pdp-super__poster .poster-sub{margin-top:8px;color:var(--muted);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase} @media(max-width:980px){.pdp-super{grid-template-columns:1fr}.pdp-super__media{grid-template-columns:1fr}} .fbt{background:rgba(255,255,255,.65);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--shadow);padding:18px} .fbt__grid{display:grid;grid-template-columns:1fr 1fr 1fr 260px;gap:12px;align-items:stretch;margin-top:14px} .fbt-item{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column} .fbt-item__top{display:flex;align-items:flex-start;gap:10px;padding:12px} .fbt-item__check{margin-top:4px} .fbt-item__img{width:74px;height:74px;border-radius:12px;background:rgba(var(--brand-rgb),.06);border:1px solid rgba(11,20,17,.08);display:flex;align-items:center;justify-content:center;overflow:hidden} .fbt-item__img img{width:100%;height:100%;object-fit:cover} .fbt-item__name{font-weight:900;letter-spacing:-.02em} .fbt-item__price{color:var(--muted);font-weight:800;font-size:13px;margin-top:2px} .fbt__summary{background:rgba(var(--brand-rgb),.06);border:1px solid rgba(var(--brand-rgb),.16);border-radius:14px;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:10px} .fbt__sum-title{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:12px;color:#111} .fbt__sum-total{font-family:var(--font-display);font-weight:900;letter-spacing:-.03em;font-size:26px;color:#111} @media(max-width:980px){.fbt__grid{grid-template-columns:1fr;}.fbt__summary{order:5}} /* Layout helpers added for SuperYou-style PDP */ .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} @media(max-width:900px){.grid-2{grid-template-columns:1fr}} .pdp-block{padding:18px;border-radius:var(--r-xl)} .pdp-block__title{font-family:var(--font-display);font-weight:900;letter-spacing:-.02em;font-size:18px} .pdp-block__desc{margin-top:12px;color:var(--muted);font-weight:600;line-height:1.75;font-size:14px} .pdp-block__mini{margin-top:10px} .faq-split{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch} .faq-split__left{padding:10px 0} .faq-visual{position:relative;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);min-height:420px;background:linear-gradient(180deg,rgba(var(--brand-rgb),.12),rgba(255,255,255,.6));display:flex;align-items:center;justify-content:center} .faq-visual img{width:100%;height:100%;object-fit:cover;opacity:.55;filter:saturate(1.1) contrast(1.05)} .faq-visual__text{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px} .faq-visual__big{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:-.04em;font-size:clamp(34px,5vw,66px);line-height:.9;color:var(--brand);text-shadow:0 10px 30px rgba(0,0,0,.18)} .faq-visual__small{margin-top:14px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;font-size:12px;color:#111;background:rgba(255,255,255,.8);border:1px solid rgba(11,20,17,.10);padding:10px 14px;border-radius:999px} @media(max-width:980px){.faq-split{grid-template-columns:1fr}.faq-visual{min-height:320px}} .link{text-decoration:underline;text-underline-offset:3px} /* PDP accordions */ .pdp-acc{border:1px solid var(--border);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow-sm);overflow:hidden} .pdp-acc + .pdp-acc{margin-top:14px} .grid-2 .pdp-acc + .pdp-acc{margin-top:0} .pdp-acc--full{grid-column:1 / -1; margin-top:14px} .pdp-acc__summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-weight:900} .pdp-acc__summary::-webkit-details-marker{display:none} .pdp-acc__icon{width:28px;height:28px;border-radius:999px;border:1px solid var(--border);display:grid;place-items:center;font-weight:900} .pdp-acc[open] .pdp-acc__icon{transform:rotate(45deg)} .pdp-acc__body{padding:0 18px 16px} .pdp-acc__mini{padding:0 18px 16px} .h1,.h2{letter-spacing:-0.02em} [id]{scroll-margin-top:96px} .benefit-icon img{width:22px;height:22px;display:block} .announce{overflow:hidden} .announce__track{display:flex;gap:48px;align-items:center;width:max-content;animation:announce-marquee 18s linear infinite} .announce__item{white-space:nowrap} @keyframes announce-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.announce__track{animation:none}} .toast{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;display:flex;justify-content:center} .toast__inner{max-width:780px;width:100%;background:#111;color:#fff;border-radius:16px;padding:12px 14px;display:flex;gap:10px;align-items:center;box-shadow:0 12px 30px rgba(0,0,0,.25)} .toast__msg{flex:1;font-weight:800} .toast__action{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:999px;padding:8px 12px;font-weight:900} .toast__close{background:transparent;border:0;color:#fff;font-size:22px;line-height:1;padding:4px 8px;opacity:.8} /* ── SEO / Authority pages helpers ───────────────────────────────────────── */ .seo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .seo-grid--single{grid-template-columns:minmax(0,520px);justify-content:start} .seo-product{text-decoration:none;color:inherit;display:flex;flex-direction:column;overflow:hidden} .seo-product__img{background:radial-gradient(ellipse at 50% 30%,rgba(var(--brand-rgb),.10),transparent 70%);padding:18px;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1} .seo-product__img img{width:100%;height:100%;object-fit:contain} .seo-product__body{padding:14px 16px} .seo-product__name{font-weight:900;letter-spacing:-.02em} .seo-product__meta{margin-top:6px;color:var(--muted);font-weight:700;font-size:12px} @media(max-width:900px){.seo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){.seo-grid{grid-template-columns:1fr}} /* ── Learn dropdown ─────────────────────────────────────────────────────── */ .nav-dropdown{position:relative;display:inline-flex;align-items:center} /* Match regular nav link styling (so only one item isn't "bold") */ .nav-dropdown__toggle{background:transparent;border:0;font:inherit;color:var(--muted);font-weight:700;cursor:pointer;padding:8px 14px;border-radius:var(--btn-r);display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:background .15s,color .15s} .nav-dropdown__toggle:hover{background:rgba(var(--brand-rgb),.08);color:var(--brand2)} .nav-dropdown__toggle[aria-current="page"]{background:rgba(var(--brand-rgb),.12);color:var(--brand2)} .nav-dropdown__menu{position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;display:none;z-index:60} .nav-dropdown__menu a{display:block;padding:10px 12px;border-radius:10px;font-weight:700} .nav-dropdown__menu a:hover{background:rgba(11,20,17,.06)} .nav-dropdown.is-open .nav-dropdown__menu{display:block} .nav-dropdown__chev{font-size:12px;opacity:.7} @media(max-width:820px){.nav-dropdown{display:none}} .nav-drawer__label{margin-top:10px;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} /* ── SEO / Longform helpers ─────────────────────────────────────────────── */ .seo-ul{margin:10px 0 0;padding-left:20px} .seo-ul li{margin:6px 0} .pdp-rich p{margin:10px 0;max-width:78ch} .pdp-rich a{font-weight:900} .quote__stars{font-size:14px;letter-spacing:2px;color:#c9a227;margin-bottom:8px} .share-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .share-row a{font-weight:900} /* ── Live polish v2 ───────────────────────────────────────── */ .header__actions .btn{display:none} .pay-toggle{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pay-toggle__btn{border:1px solid rgba(11,20,17,.12);background:#fff;border-radius:16px;padding:12px 14px;text-align:left;font-weight:900;cursor:pointer;transition:transform .14s ease,border-color .14s ease,box-shadow .14s ease,background .14s ease;color:#111} .pay-toggle__btn span{display:block;color:var(--muted);font-size:12px;font-weight:800;margin-top:2px} .pay-toggle__btn.is-active{border-color:rgba(var(--brand-rgb),.36);background:rgba(var(--brand-rgb),.07);box-shadow:0 8px 24px rgba(var(--brand-rgb),.12)} .pay-toggle__btn:active{transform:scale(.99)} .field--compact span{display:block;font-weight:800;font-size:13px;margin-bottom:6px} .cart-checker input{height:42px} .serviceability{border:1px solid rgba(var(--brand-rgb),.14);background:rgba(var(--brand-rgb),.05);border-radius:16px;padding:12px 14px;display:grid;gap:6px} .serviceability__item{font-weight:800;font-size:13px;color:#1c2d25} .serviceability__hint{font-weight:800;font-size:13px;color:var(--muted)} .cart-trustline{color:var(--muted);font-weight:800;font-size:12px;line-height:1.5} .cart-totals__row--total{padding-top:8px;border-top:1px solid var(--border);font-size:16px} .cart-page__head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px} .cart-page__count{border:1px solid rgba(11,20,17,.1);background:#fff;border-radius:999px;padding:8px 12px;font-weight:900;font-size:12px;white-space:nowrap} .order-row__save{margin-top:6px;color:var(--brand2);font-weight:900;font-size:12px} .order-row--bundle .order-row__name{color:var(--brand2)} .fbt__sum-save{line-height:1.45} .nutri-table{overflow-x:auto;-webkit-overflow-scrolling:touch} .nutri-table table{min-width:520px} img[loading="lazy"]{content-visibility:auto} .cart-row,.combo-card,.product-card--shop,.review-card,.fbt-item,.pay-toggle__btn,.cart-icon,.btn{transition:transform .14s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease} .btn:active,.cart-icon:active,.pay-toggle__btn:active{transform:translateY(1px)} @media(max-width:980px){ .checkout{gap:14px;padding:18px 0 28px} .cart-page{gap:14px;padding:18px 0 28px} .order-card{order:-1} } @media(max-width:760px){ .header__inner{gap:10px} .header__actions{margin-left:auto} .cart-drawer{width:min(420px,100vw)} .cart-drawer__header{padding:16px 14px 10px} .cart-drawer__body{padding:12px 14px} .cart-drawer__footer{padding:12px 14px 18px} .cart-row{grid-template-columns:64px 1fr;padding:10px;border-radius:16px} .cart-row__img{border-radius:12px} .qty{height:34px} .qty__btn{width:34px;height:34px} .qty__input{height:34px} .cart-actions{position:sticky;bottom:0;background:linear-gradient(180deg,rgba(250,246,238,0),rgba(250,246,238,.96) 24%);padding-top:10px} .cart-page__summary,.cart-page__list,.form-card,.order-card{padding:14px} .cart-page__head{flex-direction:column} .pay-toggle{grid-template-columns:1fr} .grid-2{grid-template-columns:1fr} .serviceability,.free-ship{font-size:12px} } @media(prefers-reduced-motion:reduce){ .cart-row,.combo-card,.product-card--shop,.review-card,.fbt-item,.pay-toggle__btn,.cart-icon,.btn{transition:none} } /* Safe CRO polish patch */ .combo-card__decision{margin:0 0 6px;font-size:12px;font-weight:800;color:var(--brand2)} .pdp-super__taste{margin-top:8px;font-size:13px;font-weight:700;color:var(--muted);line-height:1.5} .pdp-super__cta-wrap{display:grid;gap:8px;justify-items:start} .cta-microcopy{font-size:12px;font-weight:800;color:var(--muted);line-height:1.4} .pdp-shipline{margin-top:14px;font-size:13px;font-weight:800;color:var(--muted)} .cart-fee-note{font-size:12px;font-weight:800;color:var(--muted);line-height:1.4} .cart-truststrip{font-size:12px;font-weight:800;color:var(--muted);line-height:1.5} .cart-truststrip--pdp{margin-top:10px} .cart-totals__row--total strong{font-size:20px;letter-spacing:-.02em} .pdp-sticky{padding:10px 16px calc(10px + env(safe-area-inset-bottom));align-items:flex-start} .pdp-sticky__meta{display:grid;gap:2px;min-width:0} .pdp-sticky__copy,.pdp-sticky__free{font-size:11px;font-weight:800;line-height:1.35;color:var(--muted)} .pdp-sticky__free{color:var(--brand2)} .combo-hero-img,.product-tile__img,.product-card__img,.cart-row__img,.fbt-item__img{aspect-ratio:1/1} .combo-hero-img img,.product-tile__img img,.product-card__img img,.cart-row__img img,.fbt-item__img img{width:100%;height:100%;object-fit:contain} .footer__review-link{font-size:12px;font-weight:800;color:var(--brand2)} @media(max-width:640px){ .hero__actions .btn{width:100%;justify-content:center} .cart-totals__row--total strong{font-size:22px} .pdp-sticky .btn{min-width:132px} } /* Safe mobile-first polish patch v2 */ .checkout .btn--primary{box-shadow:0 8px 24px rgba(var(--brand-rgb),.16)} .checkout-stickybar{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:140;display:none;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--border);border-radius:18px;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 16px 38px rgba(11,20,17,.16)} .checkout-stickybar__meta{display:grid;gap:2px;min-width:0} .checkout-stickybar__label{font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .checkout-stickybar__total{font-size:22px;font-weight:900;letter-spacing:-.03em;color:var(--brand2);line-height:1} .checkout-stickybar .btn{flex-shrink:0;min-width:156px} [data-page="content"] .main{overflow-x:hidden} [data-page="content"] .card{max-width:100%} [data-page="content"] .card[style], [data-page="content"] .lead[style]{max-width:100%} [data-page="content"] ul{padding-left:18px} [data-page="content"] .share-row{row-gap:10px} @media(max-width:760px){ [data-page="checkout"] .main{padding-bottom:132px} .checkout-stickybar{display:flex} .checkout .order-card{position:static} .checkout .form-card{padding-bottom:12px} [data-page="content"] .section .card{padding:18px !important} [data-page="content"] p,[data-page="content"] li{overflow-wrap:anywhere} } @media(max-width:420px){ .checkout-stickybar{left:10px;right:10px;padding:10px 12px} .checkout-stickybar__total{font-size:20px} .checkout-stickybar .btn{min-width:138px;padding:0 16px} .nav-drawer{width:min(92vw,380px)} } /* Bundle cart row alignment fix */ .cart-row--bundle{grid-template-columns:84px minmax(0,1fr);align-items:start} .cart-row--bundle .cart-row__body{min-width:0} .cart-row--bundle .cart-row__img{align-self:start} .cart-row--bundle .cart-row__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start} .cart-row--bundle .cart-row__name{line-height:1.15} .cart-row--bundle .cart-row__meta{margin-top:4px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .cart-row--bundle .icon-btn{width:32px;height:32px;flex:0 0 32px} .cart-row--bundle .cart-row__bottom{align-items:flex-end;flex-wrap:wrap} .cart-row--bundle .cart-row__price{white-space:nowrap} .cart-row__save{margin-top:6px;color:var(--brand2);font-weight:900;font-size:12px;line-height:1.3} @media(max-width:760px){ .cart-row--bundle{grid-template-columns:76px minmax(0,1fr)} .cart-row--bundle .cart-row__top{gap:6px} .cart-row--bundle .cart-row__name{font-size:15px} .cart-row--bundle .cart-row__meta{font-size:11px;-webkit-line-clamp:2} } /* Mobile PDP media containment fix */ @media (max-width: 860px){ .pdp-super, .pdp-super__info, .pdp-super__media, .pdp-super__image, .pdp__thumbs, .section, .container, .main{min-width:0;max-width:100%;} .pdp-super{gap:16px;} .pdp-super__media{ display:grid; grid-template-columns:1fr; gap:10px; overflow:hidden; margin-inline:auto; width:100%; } .pdp-super__media > div:first-child{min-width:0;} .pdp-super__image{ aspect-ratio:auto; height:clamp(220px, 38vh, 300px); max-height:300px; padding:12px; border-radius:18px; background:#fff; } .pdp-super__image img{ width:auto; height:100%; max-width:min(100%, 320px); max-height:100%; object-fit:contain; object-position:center center; display:block; margin:0 auto; } .pdp__thumbs{ width:100%; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:0 0 2px; scrollbar-width:none; gap:8px; } .pdp__thumbs::-webkit-scrollbar{display:none;} .thumb{flex:0 0 72px;width:72px;height:72px;border-radius:16px;} .pdp-super__side{display:none;} } @media (max-width: 420px){ .pdp-super__image{height:min(34vh, 260px);padding:10px;} .pdp-super__image img{max-width:min(100%, 280px);} .thumb{flex-basis:64px;width:64px;height:64px;} } /* Mobile PDP image hard-fix v4 */ @media (max-width: 860px){ .pdp-super, .pdp-super__media, .pdp-super__media > div:first-child, .pdp-super__image, .pdp__thumbs{width:100%;max-width:100%;min-width:0;box-sizing:border-box;} .pdp-super__media{grid-template-columns:1fr !important;gap:10px;overflow:visible;} .pdp-super__side{display:none !important;} .pdp-super__image{ display:flex !important; align-items:center !important; justify-content:center !important; height:260px !important; max-height:260px !important; min-height:260px !important; padding:12px !important; background:#fff !important; border-radius:18px; overflow:hidden; } .pdp-super__image img, .pdp-super__image [data-hero-img]{ display:block !important; width:auto !important; height:auto !important; max-width:100% !important; max-height:100% !important; margin:auto !important; object-fit:unset !important; object-position:center center !important; } .pdp__thumbs{ display:flex; gap:8px; overflow-x:auto; overflow-y:hidden; padding-bottom:2px; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .pdp__thumbs::-webkit-scrollbar{display:none;} .thumb{flex:0 0 64px !important;width:64px !important;height:64px !important;} .thumb img{width:100%;height:100%;object-fit:contain;background:#f4f7f5;} } @media (max-width: 420px){ .pdp-super__image{ height:220px !important; max-height:220px !important; min-height:220px !important; padding:10px !important; } } .header__checkout-link{display:inline-flex !important;align-items:center;justify-content:center;white-space:nowrap} .header__checkout-link[hidden]{display:none !important} @media(max-width:860px){ .header__actions{gap:8px} .header__checkout-link{padding:0 12px;height:40px;font-size:14px} } .prod-flag{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:.02em;text-transform:uppercase;line-height:1;white-space:nowrap} .prod-flag--bestseller{background:rgba(184,65,32,.10);border:1px solid rgba(184,65,32,.16);color:#a84725} .product-card__title-row,.product-tile__name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:2px} .product-tile__name-row .product-tile__name,.product-card__title-row .product-card__title{margin:0} /* Mobile cart drawer refinement patch */ .cart-drawer{overflow:hidden} .cart-drawer__body, .cart-drawer__footer{-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .cart-drawer__footer{background:#fff} @media(max-width:760px){ .cart-drawer{width:100vw;max-width:100vw;border-left:none;border-radius:20px 20px 0 0} .cart-drawer__header{padding:14px 14px 10px;position:sticky;top:0;z-index:2;background:#fff} .cart-drawer__title{font-size:14px} .cart-drawer__sub{font-size:11px} .cart-drawer__body{padding:10px 14px 8px;gap:10px;min-height:110px} .cart-drawer__footer{padding:10px 14px calc(14px + env(safe-area-inset-bottom));max-height:52dvh;overflow:auto;border-top:1px solid var(--border);box-shadow:0 -10px 30px rgba(11,20,17,.06)} .cart-row{grid-template-columns:58px minmax(0,1fr);gap:10px;padding:10px 10px;border-radius:14px} .cart-row__body{gap:8px} .cart-row__name{font-size:14px;line-height:1.15} .cart-row__meta{font-size:11px} .cart-row__price{font-size:14px} .icon-btn{width:32px;height:32px;border-radius:10px} .qty{height:32px;border-radius:12px} .qty__btn{width:32px;height:32px;font-size:16px} .qty__input{width:38px;height:32px;font-size:13px} .pay-toggle{grid-template-columns:1fr 1fr !important;gap:8px} .pay-toggle__btn{padding:10px 12px;border-radius:14px;font-size:13px} .pay-toggle__btn span{font-size:11px;margin-top:1px} .cart-checker span{font-size:12px} .cart-checker input{height:40px;border-radius:12px;font-size:14px} .serviceability{padding:10px 12px;border-radius:14px;gap:4px} .serviceability__item{font-size:12px;line-height:1.35} .cart-totals{gap:8px;margin-top:8px} .cart-totals__row{font-size:13px} .cart-totals__row strong{font-size:14px} .cart-totals__row--total{padding-top:8px;border-top:1px solid var(--border)} .cart-totals__row--total strong{font-size:18px} .free-ship{margin-top:8px;padding:9px 11px;border-radius:12px;font-size:12px;line-height:1.35} .cart-fee-note,.cart-trustline,.cart-truststrip{font-size:11px;line-height:1.45} .cart-actions{position:sticky;bottom:0;margin-top:10px;padding-top:10px;padding-bottom:calc(env(safe-area-inset-bottom));background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 20%,#fff 55%);gap:8px} .cart-actions .btn{height:46px;padding:0 14px;font-size:14px;border-radius:14px} .cart-row--bundle{grid-template-columns:64px minmax(0,1fr)} .cart-row--bundle .cart-row__name{font-size:14px} .cart-row--bundle .cart-row__meta{font-size:11px;-webkit-line-clamp:2} .cart-row__save{font-size:11px;margin-top:4px} } @media(max-width:420px){ .cart-drawer__footer{max-height:50dvh} .cart-actions .btn{font-size:13px} .cart-totals__row{font-size:12.5px} } .checkout-actions{display:grid;gap:10px} .btn--tertiary{padding:0;height:auto;justify-content:flex-start;background:none;border:none;color:var(--muted);font-size:13px;font-weight:900;text-decoration:underline;text-underline-offset:2px} .btn--tertiary:hover{background:none;color:var(--text);transform:none;box-shadow:none} .btn[disabled]{opacity:.58;cursor:not-allowed;transform:none !important;box-shadow:none !important} .payment-status{border-radius:14px;padding:12px 14px;font-weight:800;font-size:13px;line-height:1.45} .payment-status.is-success{border:1px solid rgba(17,106,67,.16);background:#eef9f3;color:#155a3f} .payment-status.is-error{border:1px solid rgba(122,22,51,.14);background:#fff1f3;color:#7a1633} .payment-status.is-info{border:1px solid rgba(var(--brand-rgb),.14);background:rgba(var(--brand-rgb),.06);color:#1c2d25} @media(max-width:760px){ .checkout-actions{gap:8px} .btn--tertiary{font-size:12px} } .thankyou-page{padding-block:24px 56px} .thankyou-card{max-width:720px;margin:0 auto;padding:24px;border-radius:24px} .thankyou-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(17,106,67,.10);color:#155a3f;font-weight:900;font-size:12px;letter-spacing:.02em} .thankyou-lead{max-width:none} .thankyou-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .thankyou-meta__item{padding:14px 16px;border:1px solid var(--border);border-radius:18px;background:#f8fbf9} .thankyou-meta__label{display:block;font-size:12px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .thankyou-meta__value{display:block;margin-top:8px;font-size:16px;font-weight:900;letter-spacing:-.02em;word-break:break-word} .thankyou-actions{display:grid;gap:10px} .thankyou-actions .btn{width:100%;justify-content:center} .thankyou-note{font-size:13px;font-weight:700} @media(min-width:640px){.thankyou-card{padding:32px}.thankyou-actions{grid-template-columns:1fr 1fr}} @media(max-width:639px){.thankyou-meta{grid-template-columns:1fr}.thankyou-meta__value{font-size:15px}}