/* ========================================================================= RJ Parfums — boutique storefront Brand palette: gold #D6B13D · cream #F0E6C6 Every colour the page paints comes from a token below, so the whole site can be re-lit by swapping one block. `:root` is the boutique in daylight; `[data-theme="dark"]` further down is the same room after hours. The distinction that keeps both honest: a token named for a ROLE ("the deep gold a badge is filled with") holds its value across themes, while a token named for a SURFACE or for TEXT flips. Hence --gold-fill vs --gold-dark, and --fill-dark vs --ink. ========================================================================= */ :root{ color-scheme:light; /* --- brand ---------------------------------------------------------- */ --gold:#D6B13D; /* brand gold — fills, stars, decoration */ --gold-deep:#B08F27; /* gradients, borders, large type */ --gold-dark:#8A6D14; /* antique gold as TEXT — lifts on a dark page */ --gold-fill:#8A6D14; /* antique gold as a FILL — deep in both themes */ --on-gold:#241F16; /* text laid on a gold fill */ --on-dark:#ffffff; /* text laid on gold, ink or green chrome */ --cream:#F0E6C6; /* brand cream — panels, chips, soft fills */ --cream-light:#FCF8EC; /* lightest wash — section backgrounds */ --cream-deep:#E4D3A4; /* deeper cream — gradients, rings */ /* --- surfaces ------------------------------------------------------- */ --surface:#ffffff; /* the page, cards, drawers */ --surface-2:#FFFDF6; /* a tile raised off the surface */ --surface-3:#F7EFDC; /* the deeper end of a card wash */ --white:var(--surface); /* kept as an alias — reads better in places */ --glass:rgba(255,255,255,.94); /* sticky bars, behind a blur */ --chip:rgba(255,255,255,.95); /* a chip floating over artwork */ --veil:rgba(255,255,255,.55); /* a light wash over a tinted block */ --veil-2:rgba(255,255,255,.7); --veil-3:rgba(255,255,255,.9); --scrim:rgba(36,31,22,.46); /* the blocks that are dark on purpose — newsletter, toast, checkout */ --fill-dark:#241F16; --fill-dark-2:#3A3220; --on-fill:#F0E6C6; /* --- text & rules ---------------------------------------------------- */ --ink:#241F16; --ink-2:#3A3220; --body:#6B6250; --muted:#9C9179; --line:#F0E7D0; --line-2:#E4D6AC; /* --- state ----------------------------------------------------------- */ --ok:#3E9E6B; --ok-soft:#8FD6AC; --ok-bg:#F0F7F2; --ok-border:#CDE6D8; --ok-ink:#2F6B4C; --bad:#B3261E; --bad-bg:#FCF4F2; --bad-border:#F0D9D2; --bad-ink:#8A3A2E; --bad-ico:#B4553A; --danger:#9A4032; --star-off:#E7DFC8; --stat-ship-ink:#6B520A; --stop-bg:#FCF7F5; /* a delivery that stopped — cancelled/refunded */ --stop-line:#F0DED9; --stop-dot:#C6BCAB; --stop-rail:#DCD2C3; --shadow-sm:0 2px 10px rgba(120,98,40,.07); --shadow-md:0 10px 30px rgba(120,98,40,.12); --shadow-lg:0 24px 60px rgba(96,78,32,.20); --r-sm:10px; --r-md:16px; --r-lg:26px; --r-pill:999px; --serif:'Didot','Bodoni MT','Playfair Display','Noto Serif Display',Georgia,'Times New Roman',serif; --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --pad:clamp(16px,4vw,48px); --header-h:78px; } /* ========================================================================= Dark mode Set on by the inline snippet in includes/header.php before the first paint, so a reader who chose dark never sees a white flash. Only tokens are restated here — the handful of rules underneath are the cases a colour on its own cannot fix (a logo that was drawn on white, a veil that has to change direction). ========================================================================= */ [data-theme="dark"]{ color-scheme:dark; /* gold reads darker against black, so the text weights are lifted while the fills — which carry their own contrast — stay where they were */ --gold:#DFBC55; --gold-deep:#C4A03A; --gold-dark:#E6C86B; /* cream is a light FILL in daylight; after hours it is a warm dark one */ --cream:#262119; --cream-light:#1B1815; --cream-deep:#332D22; --surface:#0F0E0C; --surface-2:#1B1814; --surface-3:#241F18; --glass:rgba(15,14,12,.88); --chip:rgba(32,28,22,.92); --veil:rgba(255,255,255,.06); --veil-2:rgba(255,255,255,.10); --veil-3:rgba(255,255,255,.16); --scrim:rgba(0,0,0,.66); /* raised rather than sunken, so the newsletter and the toast still read as blocks of their own against a page that is already dark */ --fill-dark:#2E2820; --fill-dark-2:#403829; --ink:#F5F1E6; --ink-2:#DED7C6; --body:#B4AC9A; --muted:#8A8271; --line:#2A251E; --line-2:#3C352A; --ok:#4BB37C; --ok-bg:#152A1F; --ok-border:#2A6247; --ok-ink:#7FD3A5; --bad:#F0857A; --bad-bg:#2B1714; --bad-border:#6B3227; --bad-ink:#F0A091; --bad-ico:#E58A75; --danger:#F09080; --star-off:#3C352A; --stat-ship-ink:#F0D68A; --stop-bg:#241816; --stop-line:#4A2E28; --stop-dot:#5A5045; --stop-rail:#4A423A; /* a brown shadow is invisible on black — depth has to come from real dark */ --shadow-sm:0 2px 10px rgba(0,0,0,.50); --shadow-md:0 10px 30px rgba(0,0,0,.55); --shadow-lg:0 24px 60px rgba(0,0,0,.68); } /* The mark is gold artwork drawn on an opaque white square. `multiply` is what drops that square out on a light page; on a dark one it would swallow the logo instead. Inverting turns the white to black and hue-rotating puts the gold back where it started, and `screen` then drops the black. */ [data-theme="dark"] .brand img{mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg)} /* A cream wash over video is a spotlight in daylight and a glare after hours. */ [data-theme="dark"] .hero-frame::after{ background:linear-gradient(200deg,rgba(240,230,198,.10),transparent 45%,rgba(0,0,0,.45)); } /* The outlined echo behind the bottle is drawn in cream — it needs more of itself to stay legible once the window it stands in has gone dark. */ [data-theme="dark"] .pdp-ghost{opacity:.85} /* Placeholder text borrows the rule colour, which is far too quiet on black. */ [data-theme="dark"] .search input::placeholder{color:var(--muted)} *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} /* hidden wins over any display the component sets (wishlist filtering, badges) */ [hidden]{display:none !important} html{scroll-behavior:smooth;scroll-padding-top:120px;-webkit-text-size-adjust:100%} body{ font-family:var(--sans); font-size:15px; line-height:1.65; color:var(--body); background:var(--white); overflow-x:hidden; -webkit-font-smoothing:antialiased; } body.is-locked{overflow:hidden} img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;cursor:pointer} ul{list-style:none} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:400;line-height:1.15} ::selection{background:var(--cream);color:var(--ink)} :focus-visible{outline:2px solid var(--gold-dark);outline-offset:3px;border-radius:4px} .wrap{max-width:1280px;margin-inline:auto;padding-inline:var(--pad)} .ico{width:20px;height:20px;flex:none} /* ---------- shared type ------------------------------------------------- */ .eyebrow{ font-size:11px;letter-spacing:.22em;text-transform:uppercase; color:var(--gold-dark);font-weight:600; } .section-head{ display:flex;align-items:center;justify-content:space-between; gap:20px;margin-bottom:26px; } .section-head h2{ font-size:13px;letter-spacing:.2em;text-transform:uppercase; font-family:var(--sans);font-weight:700;color:var(--ink); } .section-head .link{ display:inline-flex;align-items:center;gap:7px; font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:600; color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-pill); padding:8px 16px;background:var(--white);transition:.25s; } .section-head .link:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .section-head .link .ico{width:14px;height:14px} /* ---------- buttons ----------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:14px 30px;border-radius:var(--r-sm); font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; transition:transform .25s,box-shadow .25s,background .25s,color .25s,border-color .25s; white-space:nowrap; } .btn--primary{ background:linear-gradient(135deg,var(--gold),var(--gold-deep)); color:var(--on-gold);box-shadow:0 8px 22px rgba(176,143,39,.32); } .btn--primary:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(176,143,39,.42)} .btn--ghost{background:var(--white);color:var(--ink);border:1px solid var(--line-2)} .btn--ghost:hover{border-color:var(--gold);color:var(--gold-dark);transform:translateY(-2px)} .btn--light{background:var(--surface);color:var(--gold-dark)} .btn--light:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)} .btn--block{width:100%} /* ---------- stars ------------------------------------------------------- */ .stars{display:inline-flex;gap:1.5px;align-items:center} .stars .star{width:13px;height:13px;fill:var(--gold)} .stars .star--off{fill:var(--star-off)} /* ========================================================================= Announcement bar ========================================================================= */ .announce{ background:linear-gradient(90deg,var(--cream),var(--cream-deep),var(--cream)); color:var(--ink);font-size:11.5px;letter-spacing:.06em; } .announce .wrap{ display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px; min-height:38px; } .announce span{display:inline-flex;align-items:center;gap:7px} .announce .a-mid{justify-self:center;font-weight:600} .announce .a-end{justify-self:end} .announce .ico{width:14px;height:14px;color:var(--gold-dark)} .announce b{color:var(--gold-dark);letter-spacing:.1em} /* ========================================================================= Header ========================================================================= */ .header{ position:sticky;top:0;z-index:80;background:var(--glass); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--line); transition:box-shadow .3s; } .header.is-stuck{box-shadow:var(--shadow-sm)} .header .wrap{ display:flex;align-items:center;gap:22px; height:var(--header-h); } .brand{display:flex;align-items:center;gap:11px;flex:none} .brand img{height:44px;width:auto;mix-blend-mode:multiply} .brand-name{font-family:var(--serif);font-size:19px;letter-spacing:.16em;color:var(--ink);line-height:1} .brand-sub{ display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.34em; color:var(--gold-dark);margin-top:4px; } .nav{display:flex;gap:26px;margin-inline:auto} .nav a{ position:relative;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:600;color:var(--ink);padding:6px 0;transition:color .25s; } .nav a::after{ content:'';position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--gold);transform:scaleX(0);transform-origin:left; transition:transform .28s; } .nav a:hover{color:var(--gold-dark)} .nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)} .nav a.is-active{color:var(--gold-dark)} .tools{display:flex;align-items:center;gap:6px;flex:none} .tool{ position:relative;display:grid;place-items:center;width:40px;height:40px; border-radius:50%;color:var(--ink);transition:.25s; } .tool:hover{background:var(--cream-light);color:var(--gold-dark)} .tool .ico{width:19px;height:19px} .tool .count{ position:absolute;top:2px;right:2px;min-width:17px;height:17px;padding:0 4px; border-radius:var(--r-pill);background:var(--gold-fill);color:var(--on-dark); font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1; border:2px solid var(--surface); } .tool .count[hidden]{display:none} .burger{display:none} /* ========================================================================= Hero ========================================================================= */ .hero{ position:relative;overflow:hidden; background: radial-gradient(120% 90% at 88% 10%,var(--cream-deep) 0%,transparent 60%), linear-gradient(160deg,var(--cream) 0%,var(--surface-2) 55%,var(--cream) 100%); } .hero::after{ content:'';position:absolute;inset:auto 0 -1px 0;height:70px; background:linear-gradient(to top,var(--surface),transparent);pointer-events:none; } .hero .wrap{ display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px; padding-block:clamp(40px,6vw,74px); } .hero-copy{position:relative;z-index:2;max-width:560px} .hero h1{ font-size:clamp(38px,5.4vw,62px);letter-spacing:-.5px;margin:16px 0 18px; } .hero h1 em{font-style:italic;color:var(--gold-dark)} .hero p.lead{font-size:16px;max-width:430px;margin-bottom:28px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:36px} .assurance{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px; padding-top:26px;border-top:1px solid var(--line-2); } .assurance li{display:flex;gap:9px;align-items:flex-start} .assurance .ico{width:19px;height:19px;color:var(--gold-dark);margin-top:2px} .assurance b{display:block;font-size:11px;letter-spacing:.05em;color:var(--ink);font-weight:700} .assurance span{font-size:11px;color:var(--muted);line-height:1.35} /* hero media ------------------------------------------------------------- */ .hero-media{position:relative} .hero-frame{ position:relative;border-radius:var(--r-lg);overflow:hidden; aspect-ratio:4/3.4;background:var(--cream);box-shadow:var(--shadow-lg); } .hero-frame video,.hero-frame img{width:100%;height:100%;object-fit:cover} .hero-frame::after{ content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(200deg,rgba(252,248,236,.32),transparent 45%,rgba(138,109,20,.24)); } .hero-bottle{ position:absolute;right:-14px;bottom:-24px;width:min(40%,190px); filter:drop-shadow(0 18px 26px rgba(96,78,32,.32)); animation:floaty 6s ease-in-out infinite;z-index:3; } @keyframes floaty{50%{transform:translateY(-12px)}} .hero-chip{ position:absolute;z-index:4;background:var(--chip); backdrop-filter:blur(6px);border-radius:14px;padding:11px 15px; box-shadow:var(--shadow-md);display:flex;align-items:center;gap:11px; } .hero-chip--rating{top:22px;left:-14px} .hero-chip--stock{bottom:26px;left:-16px} .hero-chip b{display:block;font-size:13px;color:var(--ink);font-family:var(--serif)} .hero-chip small{font-size:10.5px;color:var(--muted);letter-spacing:.04em} .hero-chip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(62,158,107,.16)} /* ========================================================================= Category strip ========================================================================= */ .cats{position:relative;z-index:5;margin-top:-42px} .cats-inner{ background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-md); padding:22px 18px;display:grid;grid-auto-flow:column; grid-auto-columns:minmax(90px,1fr);gap:8px;overflow-x:auto; scrollbar-width:none; } .cats-inner::-webkit-scrollbar{display:none} .cat{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 4px;border-radius:var(--r-md);transition:.25s} .cat:hover{background:var(--cream-light)} .cat-ring{ width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(150deg,var(--cream-light),var(--cream-deep)); color:var(--gold-dark);transition:.3s; } .cat:hover .cat-ring{transform:translateY(-4px) scale(1.05);box-shadow:0 10px 20px rgba(176,143,39,.30)} .cat-ring .ico{width:26px;height:26px} .cat--accent .cat-ring{background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:var(--on-gold)} .cat span{ font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:700; color:var(--ink);text-align:center; } /* ========================================================================= Product cards ========================================================================= */ .section{padding-block:clamp(48px,6vw,76px)} .section--soft{background:linear-gradient(180deg,var(--surface),var(--cream-light) 40%,var(--surface))} .p-grid{display:grid;gap:18px;grid-template-columns:repeat(5,1fr)} .p-grid--shop{grid-template-columns:repeat(4,1fr);gap:20px} /* The card is a tinted block with the art floating on a rounded tile inside it. Reading order below the tile is price, then what the piece is, then its name: the figure is what a shopper scans a grid for, and the name is what they read once something has caught the eye. */ .card{ position:relative;border:1px solid var(--line); background:linear-gradient(170deg,var(--cream-light),var(--surface-3)); border-radius:var(--r-lg);padding:10px; transition:transform .3s,box-shadow .3s,border-color .3s; display:flex;flex-direction:column; } .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .card-media{ position:relative;aspect-ratio:1/1;display:grid;place-items:center; border-radius:20px;overflow:hidden;container-type:size; /* The artwork carries its own shadow at the very foot of its viewBox, so the tile keeps a little more floor than ceiling. */ padding:14px 16px 20px; background:var(--surface-2); } /* The artwork is an SVG carrying a ratio but no intrinsic size, and the tile's height comes from aspect-ratio — which percentages cannot resolve against, so height:100% silently fell back to the 300px default for replaced elements and the bottle was cropped. Container units do resolve, so the tile becomes a size container and the art is bounded in cqh. */ .card-media .art{ position:relative;z-index:1; width:auto;height:auto;max-width:100%;max-height:100cqh; transition:transform .45s ease; } .card:hover .card-media .art{transform:translateY(-6px) scale(1.05)} /* An organic blob rather than a circle, so the tile reads as a set piece the bottle is standing on instead of a spotlight behind it. */ .card-media::before{ content:'';position:absolute;width:78%;aspect-ratio:1/1; background:linear-gradient(150deg,var(--cream),var(--cream-deep)); border-radius:62% 38% 46% 54% / 43% 60% 40% 57%; opacity:.75;transition:transform .6s ease; } .card:hover .card-media::before{transform:rotate(-8deg) scale(1.04)} .badge{ position:absolute;top:10px;left:10px;z-index:2; background:var(--chip);color:var(--gold-dark); font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700; padding:5px 10px;border-radius:var(--r-pill);box-shadow:var(--shadow-sm); } /* A saving speaks louder than "bestseller", so it takes the corner when set. */ .badge--off{background:var(--gold-fill);color:var(--on-dark);letter-spacing:.1em} .card-body{padding:14px 8px 4px;display:flex;flex-direction:column;gap:5px;flex:1} .card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px} .card-price{display:flex;flex-direction:column;min-width:0} .card-was{ font-size:12px;color:var(--muted);white-space:nowrap; text-decoration-line:line-through;text-decoration-thickness:1.5px; } .card-now{ font-family:var(--serif);font-size:19px;font-weight:400;white-space:nowrap; color:var(--ink);letter-spacing:.01em;line-height:1.3; } .card-from{font-style:normal;font-size:10.5px;letter-spacing:.08em;color:var(--muted);font-family:var(--sans)} .card-rate{ display:inline-flex;align-items:center;gap:4px;flex:none; font-size:12.5px;font-weight:600;color:var(--body);padding-top:1px; } .card-star{width:13px;height:13px;fill:var(--gold);flex:none} .card-tag{font-size:11px;color:var(--muted);line-height:1.4;letter-spacing:.02em} .card-foot{ display:flex;align-items:flex-end;justify-content:space-between; gap:10px;margin-top:auto;padding-top:10px; } .card-name{font-size:16px;letter-spacing:.01em;line-height:1.25;min-width:0} .card-actions{display:flex;align-items:center;gap:7px;flex:none} .add{ display:grid;place-items:center;width:34px;height:34px;border-radius:50%; background:var(--cream);color:var(--gold-dark);transition:.25s;flex:none; } .add:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-2px)} .add.is-added{background:var(--ok);color:var(--on-dark)} .add[disabled]{opacity:.4;cursor:not-allowed;transform:none;background:var(--line)} .add .ico{width:16px;height:16px} /* ========================================================================= Benefits strip ========================================================================= */ .benefits{ background:linear-gradient(90deg,var(--cream-light),var(--cream)); border-radius:var(--r-md);padding:22px clamp(16px,3vw,30px); display:grid;grid-template-columns:repeat(4,1fr);gap:18px; } .benefit{display:flex;align-items:center;gap:12px} .benefit .ico{width:26px;height:26px;color:var(--gold-dark);flex:none} .benefit b{display:block;font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink);font-weight:700} .benefit span{font-size:11.5px;color:var(--body)} /* ========================================================================= About ========================================================================= */ .about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center} .about h2{font-size:clamp(28px,3.6vw,42px);margin:14px 0 18px} .about p{margin-bottom:16px;max-width:520px} .about .stat-row{display:flex;gap:34px;margin:26px 0 28px;flex-wrap:wrap} .about .stat b{font-family:var(--serif);font-size:30px;color:var(--gold-dark);display:block;line-height:1} .about .stat span{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .about-media{ position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1; box-shadow:var(--shadow-lg);background:var(--cream);cursor:pointer; } .about-media video{width:100%;height:100%;object-fit:cover} .play{ position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%; background:var(--chip);color:var(--gold-dark);display:grid;place-items:center; box-shadow:var(--shadow-md);transition:.3s; } .play .ico{width:26px;height:26px;fill:currentColor;stroke:none;margin-left:4px} .about-media:hover .play{transform:scale(1.08);background:var(--gold);color:var(--on-gold)} .about-media.is-playing .play{opacity:0;pointer-events:none} /* ========================================================================= Product reviews — the read-and-write block at the foot of a product page ========================================================================= */ .review{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); padding:22px;transition:transform .3s,box-shadow .3s; } .review:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)} .review-top{display:flex;align-items:center;gap:12px;margin-bottom:13px} .avatar{ width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--cream),var(--cream-deep)); font-family:var(--serif);font-size:16px;color:var(--gold-dark); } .review-top b{display:block;font-size:13px;color:var(--ink)} .review-top .verified{ display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--gold-dark); letter-spacing:.06em; } .review-top .verified .ico{width:11px;height:11px;stroke-width:2.6} .review p{font-size:14px;color:var(--body);font-style:italic;line-height:1.6} .rv-title{display:block;margin:9px 0 5px;font-size:13.5px;color:var(--ink);font-style:normal} /* ---------- summary: the mean on the left, the star spread on the right --- */ .rv-summary{ display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,4vw,54px);align-items:center; background:var(--cream-light);border:1px solid var(--line);border-radius:var(--r-md); padding:22px clamp(20px,3vw,30px);margin-bottom:20px; } .rv-score{display:grid;justify-items:center;gap:5px;min-width:104px} .rv-score b{font-family:var(--serif);font-size:42px;color:var(--ink);line-height:1} .rv-score small{font-size:11px;letter-spacing:.08em;color:var(--muted)} .rv-bars{display:grid;gap:6px} .rv-bars li{display:grid;grid-template-columns:26px 1fr 26px;align-items:center;gap:10px} .rv-bar-label,.rv-bar-n{font-size:11px;color:var(--muted)} .rv-bar-n{text-align:right} .rv-bar{height:6px;border-radius:var(--r-pill);background:var(--line);overflow:hidden} .rv-bar i{ display:block;height:100%;border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-deep)); } .rv-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px} .rv-empty{ padding:26px;text-align:center;color:var(--muted);font-size:13.5px; border:1px dashed var(--line-2);border-radius:var(--r-md); } .rv-note{ display:flex;align-items:center;gap:8px;margin-bottom:16px;padding:12px 16px; border-radius:var(--r-sm);background:var(--cream);color:var(--gold-dark); font-size:12.5px;font-weight:600; } .rv-note .ico{width:15px;height:15px;stroke-width:2.4;flex:none} .rv-note--soft{background:var(--cream-light);font-weight:500;color:var(--body)} .rv-error{margin-top:-4px;font-size:11.5px;color:var(--bad)} .rv-error--form{margin:0 0 14px;font-weight:600} /* ---------- the form ------------------------------------------------------ */ .rv-form{ display:grid;gap:14px;justify-items:start;margin-top:26px;padding:clamp(20px,3vw,30px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md); box-shadow:var(--shadow-sm); } .rv-form h3{font-size:20px} .rv-field{display:grid;gap:6px;width:100%} .rv-field>span{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--ink); } .rv-field>span i{font-style:normal;font-weight:500;color:var(--muted);letter-spacing:.04em} .rv-field input,.rv-field textarea{ width:100%;font:inherit;font-size:14px;color:var(--ink); padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm); background:var(--cream-light);transition:border-color .2s,background .2s; } .rv-field textarea{resize:vertical;min-height:110px;line-height:1.6} .rv-field input:focus,.rv-field textarea:focus{ outline:none;border-color:var(--gold);background:var(--surface); } .rv-field ::placeholder{color:var(--muted)} /* The radios are painted over by their labels. Source order runs 5→1 and the row is reversed, so one star reads left-to-right as 1…5 while "checked or hovered, plus every later sibling" is exactly the run to its left. */ .rv-stars{border:none} .rv-stars legend{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase; font-weight:700;color:var(--ink);margin-bottom:6px; } .rv-stars-row{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:2px} .rv-stars input{position:absolute;opacity:0;pointer-events:none} .rv-stars label{cursor:pointer;padding:2px;line-height:0} .rv-stars svg{width:28px;height:28px;fill:var(--star-off);transition:fill .15s} .rv-stars input:checked~label svg{fill:var(--gold)} /* On a pointer device the cursor preview wins over the current choice: wipe the row back to grey, then light it up to wherever the cursor sits. Each rule is deliberately specific enough to beat the one above it. Touch devices skip all of this — there a tap is the choice, and a sticky :hover would only lie. */ @media (hover:hover){ .rv-stars-row:hover input~label svg{fill:var(--star-off)} .rv-stars-row:hover label:hover svg, .rv-stars-row:hover label:hover~label svg{fill:var(--gold)} } .rv-stars input:focus-visible+label svg{outline:2px solid var(--gold-dark);outline-offset:2px} .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* ========================================================================= Promo banner ========================================================================= */ .promo{ position:relative;overflow:hidden;border-radius:var(--r-lg); background: radial-gradient(90% 120% at 12% 50%,var(--cream-deep),transparent 62%), linear-gradient(120deg,var(--cream),var(--cream-light) 55%,var(--cream-deep)); display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:20px; padding:clamp(26px,4vw,44px); } .promo-art{display:flex;align-items:flex-end;justify-content:center;gap:6px;min-height:190px} .promo-art .art{height:150px;width:auto;filter:drop-shadow(0 14px 20px rgba(96,78,32,.26))} .promo-art .art:nth-child(2){height:196px} .promo-copy{text-align:center;max-width:520px;margin-inline:auto} .promo-copy h2{font-size:clamp(28px,3.8vw,44px);margin:12px 0 6px} .promo-copy h2 b{color:var(--gold-dark);font-weight:400} .promo-code{ display:inline-block;background:var(--surface);border:1px dashed var(--gold); border-radius:var(--r-pill);padding:9px 22px;margin:16px 0 20px; font-size:12px;letter-spacing:.12em;color:var(--ink); } .promo-code b{color:var(--gold-dark);letter-spacing:.18em} /* ========================================================================= Newsletter + footer ========================================================================= */ .news{ background:linear-gradient(120deg,var(--fill-dark),var(--fill-dark-2));color:var(--on-fill); border-radius:var(--r-lg);padding:clamp(26px,4vw,44px); display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center; } .news h2{color:var(--on-dark);font-size:clamp(24px,3vw,34px);margin-bottom:8px} .news p{font-size:14px;color:#C6BA96;max-width:400px} .news form{display:flex;gap:10px;flex-wrap:wrap} .news input{ flex:1;min-width:190px;padding:14px 18px;border-radius:var(--r-sm); border:1px solid rgba(240,230,198,.22);background:rgba(240,230,198,.08); color:var(--on-dark);font-size:14px;font-family:var(--sans); } .news input::placeholder{color:#B2A783} .news input:focus{outline:none;border-color:var(--gold);background:rgba(240,230,198,.14)} .news .note{font-size:11px;color:#A2977A;margin-top:10px} .footer{background:var(--surface);border-top:1px solid var(--line);margin-top:clamp(48px,6vw,76px)} .footer-grid{ display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px; padding-block:clamp(38px,5vw,58px); } .footer h4{ font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--ink);margin-bottom:16px; } .footer li+li{margin-top:9px} .footer a{font-size:13.5px;color:var(--body);transition:.22s} .footer a:hover{color:var(--gold-dark)} .footer .brand{margin-bottom:14px} .footer .about-text{font-size:13.5px;max-width:300px;margin-bottom:16px} .footer .contact li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px} .footer .contact .ico{width:16px;height:16px;color:var(--gold-dark);margin-top:3px;flex:none} .socials{display:flex;gap:9px;margin-top:16px} .socials a{ width:36px;height:36px;border-radius:50%;display:grid;place-items:center; background:var(--cream-light);color:var(--gold-dark);transition:.25s; } .socials a:hover{background:var(--gold);color:var(--on-gold);transform:translateY(-2px)} .socials .ico{width:17px;height:17px} .footer-bottom{ border-top:1px solid var(--line);padding-block:18px; display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; font-size:11.5px;color:var(--muted);letter-spacing:.04em; } .pay{display:flex;gap:7px;align-items:center} .pay span{ border:1px solid var(--line-2);border-radius:5px;padding:4px 9px; font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body); } /* ========================================================================= Cart drawer / search / mobile nav ========================================================================= */ .scrim{ position:fixed;inset:0;background:var(--scrim);backdrop-filter:blur(3px); opacity:0;visibility:hidden;transition:.3s;z-index:90; } .scrim.is-open{opacity:1;visibility:visible} .panel{ position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw); background:var(--surface);z-index:95;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .36s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg); } .panel.is-open{transform:none} .panel-head{ display:flex;align-items:center;justify-content:space-between; padding:20px 22px;border-bottom:1px solid var(--line); } .panel-head h3{font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-family:var(--sans);font-weight:700} .panel-close{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;transition:.25s} .panel-close:hover{background:var(--cream-light);color:var(--gold-dark)} .panel-body{flex:1;overflow-y:auto;padding:18px 22px} .panel-foot{border-top:1px solid var(--line);padding:20px 22px;background:var(--cream-light)} .cart-empty{text-align:center;padding:56px 10px;color:var(--muted);font-size:14px} .cart-empty .ico{width:44px;height:44px;margin:0 auto 14px;color:var(--line-2)} .cart-row{display:flex;gap:13px;padding:14px 0;border-bottom:1px solid var(--line)} .cart-thumb{ width:64px;height:64px;border-radius:11px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,var(--cream-light),var(--cream));padding:6px; } .cart-thumb .art{height:100%;width:auto} .cart-info{flex:1;min-width:0} .cart-info b{display:block;font-family:var(--serif);font-size:14.5px;color:var(--ink)} .cart-info small{font-size:11px;color:var(--muted)} .cart-info .price{font-size:13px;color:var(--gold-dark);font-weight:600;margin-top:4px;display:block} .qty{display:inline-flex;align-items:center;gap:2px;margin-top:7px;border:1px solid var(--line-2);border-radius:var(--r-pill);padding:2px} .qty button{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink);line-height:1} .qty button:hover{background:var(--cream);color:var(--gold-dark)} .qty i{font-style:normal;min-width:22px;text-align:center;font-size:12.5px;font-weight:600;color:var(--ink)} .cart-del{align-self:flex-start;color:var(--muted);padding:4px;border-radius:6px;transition:.2s} .cart-del:hover{color:var(--gold-dark);background:var(--cream-light)} .cart-del .ico{width:15px;height:15px} .cart-line{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px} .cart-line--total{ font-size:16px;color:var(--ink);font-weight:700;padding-top:10px; border-top:1px solid var(--line-2);margin-top:12px; } .cart-line--total b{font-family:var(--serif);font-weight:400;font-size:19px} /* search ----------------------------------------------------------------- */ .search{ position:fixed;top:0;left:0;right:0;z-index:95;background:var(--surface); border-bottom:1px solid var(--line);padding:26px 0; transform:translateY(-105%);transition:transform .34s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-md); } .search.is-open{transform:none} .search form{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line-2);padding-bottom:12px} .search .ico{color:var(--gold-dark);width:22px;height:22px} .search input{ flex:1;border:none;background:none;font-family:var(--serif);font-size:clamp(20px,3vw,30px); color:var(--ink); } .search input:focus{outline:none} .search input::placeholder{color:var(--line-2)} .search .hint{margin-top:12px;font-size:11.5px;color:var(--muted);letter-spacing:.05em} /* mobile nav ------------------------------------------------------------- */ .mnav{ position:fixed;top:0;left:0;height:100dvh;width:min(330px,86vw);background:var(--surface); z-index:95;transform:translateX(-100%);transition:transform .36s cubic-bezier(.4,0,.2,1); box-shadow:var(--shadow-lg);display:flex;flex-direction:column; } .mnav.is-open{transform:none} .mnav-links{padding:14px 22px;flex:1;overflow-y:auto} .mnav-links a{ display:flex;align-items:center;justify-content:space-between; padding:15px 0;border-bottom:1px solid var(--line); font-size:13px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;color:var(--ink); } .mnav-links a .ico{width:15px;height:15px;color:var(--gold)} .mnav-foot{padding:22px;border-top:1px solid var(--line);background:var(--cream-light)} /* toast ------------------------------------------------------------------ */ .toast{ /* parked well clear of the bottom edge, whatever `bottom` the layout sets */ position:fixed;left:50%;bottom:26px;z-index:120;transform:translate(-50%,calc(100% + 120px)); background:var(--fill-dark);color:var(--on-fill);border-radius:18px; padding:13px 20px;font-size:12.5px;letter-spacing:.05em;line-height:1.45; max-width:min(88vw,340px); display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg); /* hidden outright while parked, so a wrong offset can never leave it on screen */ opacity:0;visibility:hidden;pointer-events:none; transition:transform .38s cubic-bezier(.34,1.4,.64,1),opacity .24s ease,visibility .38s; } .toast.is-open{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto} .toast .ico{width:16px;height:16px;color:var(--ok-soft);stroke-width:2.6} /* ========================================================================= Shop page ========================================================================= */ .page-head{ background:linear-gradient(160deg,var(--cream),var(--surface-2) 60%,var(--cream)); padding-block:clamp(34px,5vw,58px);text-align:center; } .page-head h1{font-size:clamp(30px,4.4vw,50px);margin:12px 0 10px} .page-head p{max-width:520px;margin-inline:auto;font-size:15px} .crumbs{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .crumbs a:hover{color:var(--gold-dark)} .toolbar{ display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between; padding:16px 0 24px;border-bottom:1px solid var(--line);margin-bottom:26px; } .filters{display:flex;flex-wrap:wrap;gap:8px} .filters--dept{gap:10px;margin-bottom:4px;padding-top:4px} .filters--dept a{ padding:11px 26px;font-size:11.5px;letter-spacing:.16em; border-color:var(--line-2);background:var(--cream-light); } .filters--dept a.is-active{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .filters a{ padding:9px 17px;border-radius:var(--r-pill);border:1px solid var(--line-2); font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; color:var(--ink);transition:.25s;background:var(--surface); } .filters a:hover{border-color:var(--gold);color:var(--gold-dark)} .filters a.is-active{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .sorter{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .sorter select{ font-family:var(--sans);font-size:12px;color:var(--ink);padding:9px 14px; border:1px solid var(--line-2);border-radius:var(--r-pill);background:var(--surface);cursor:pointer; } .sorter select:focus{outline:none;border-color:var(--gold)} .result-count{font-size:12px;color:var(--muted);margin-bottom:18px} .empty{text-align:center;padding:70px 20px;color:var(--muted)} .empty h3{font-size:24px;margin-bottom:10px} /* ========================================================================= Journal (blog) ========================================================================= */ .j-art-ico{ width:44px;height:44px;color:var(--on-dark);opacity:.9; filter:drop-shadow(0 4px 12px rgba(0,0,0,.28)); } .j-meta{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} /* Lead story ---------------------------------------------------------------- */ .j-lead{ display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden; background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm); } .j-lead-art{ min-height:300px;display:grid;place-items:center; background:linear-gradient(150deg,var(--t),var(--b)); } .j-lead-art .j-art-ico{width:60px;height:60px} .j-lead-copy{padding:clamp(24px,3vw,42px);display:flex;flex-direction:column;gap:12px;justify-content:center} .j-lead-copy h2{font-size:clamp(23px,2.6vw,33px)} .j-lead-copy .btn{align-self:flex-start;margin-top:6px} /* Article grid -------------------------------------------------------------- */ .j-grid{display:grid;gap:20px;grid-template-columns:repeat(3,1fr)} .jcard{ background:var(--white);border:1px solid var(--line);border-radius:var(--r-md); overflow:hidden;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease; } .jcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:var(--line-2)} .jcard > a{display:flex;flex-direction:column;height:100%} .jcard-media{ position:relative;aspect-ratio:16/10;display:grid;place-items:center; background:linear-gradient(150deg,var(--t),var(--b)); } .j-topic{ position:absolute;top:12px;left:12px;padding:5px 12px;border-radius:var(--r-pill); background:var(--chip);color:var(--gold-dark); font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700; } .jcard-body{padding:16px 18px 19px;display:flex;flex-direction:column;gap:8px;flex:1} .jcard-title{font-size:18px;line-height:1.25;transition:color .25s} .jcard:hover .jcard-title{color:var(--gold-dark)} .jcard-excerpt{font-size:13.5px;line-height:1.6;color:var(--body)} .jcard-body .j-meta{margin-top:auto;padding-top:8px} /* Single article ------------------------------------------------------------ */ .page-head--post h1{max-width:820px;margin-inline:auto} .page-head--post .j-meta{margin-top:6px} .j-article{max-width:760px;margin-inline:auto} .j-article-art{ height:clamp(180px,26vw,280px);border-radius:var(--r-lg);margin-bottom:clamp(24px,3vw,36px); display:grid;place-items:center;background:linear-gradient(150deg,var(--t),var(--b)); } .j-article-art .j-art-ico{width:56px;height:56px} .j-standfirst{ font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink-2); padding-left:20px;border-left:2px solid var(--gold);margin-bottom:24px; } .j-article > p{font-size:15.5px;line-height:1.8;margin-bottom:18px} .j-article-foot{ display:flex;flex-wrap:wrap;gap:12px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line); } /* ========================================================================= Scroll reveal ========================================================================= */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } /* ========================================================================= Responsive ========================================================================= */ @media (max-width:1080px){ .p-grid{grid-template-columns:repeat(3,1fr)} .p-grid--shop{grid-template-columns:repeat(3,1fr)} .nav{gap:18px} .nav a{font-size:10.5px;letter-spacing:.1em} .brand img{height:38px} } @media (max-width:900px){ .nav{display:none} .burger{display:grid} .brand{margin-right:auto} .hero .wrap{grid-template-columns:1fr;gap:34px} .hero-copy{max-width:none;text-align:center;margin-inline:auto} .hero p.lead{margin-inline:auto} .hero-cta{justify-content:center} .assurance{grid-template-columns:repeat(2,1fr);gap:16px;text-align:left} .hero-media{max-width:520px;margin-inline:auto;width:100%} .about{grid-template-columns:1fr} .about-media{order:-1;max-width:460px;margin-inline:auto;width:100%} .reviews{grid-template-columns:1fr} .j-grid{grid-template-columns:repeat(2,1fr)} .j-lead{grid-template-columns:1fr} .j-lead-art{min-height:200px} .promo{grid-template-columns:1fr;text-align:center} .promo-art{order:2} .news{grid-template-columns:1fr} .footer-grid{grid-template-columns:1fr 1fr;gap:28px} .benefits{grid-template-columns:repeat(2,1fr)} .announce .a-start,.announce .a-end{display:none} .announce .wrap{grid-template-columns:1fr} } @media (max-width:640px){ :root{--header-h:66px} .p-grid,.p-grid--shop{grid-template-columns:repeat(2,1fr);gap:12px} .brand-name{font-size:16px} .brand-sub{letter-spacing:.24em} .brand img{height:34px} .cats{margin-top:-26px} .cats-inner{grid-auto-columns:minmax(78px,1fr);padding:16px 12px} .cat-ring{width:54px;height:54px} .cat-ring .ico{width:22px;height:22px} .hero-chip--rating{top:12px;left:8px;padding:8px 12px} .hero-chip--stock{bottom:14px;left:8px;padding:8px 12px} .hero-bottle{width:34%;right:4px;bottom:-10px} .card-body{padding:12px 12px 14px} .card-name{font-size:14.5px} .card-price{font-size:15px} .add{width:34px;height:34px} .footer-grid{grid-template-columns:1fr} .benefits{grid-template-columns:1fr;gap:14px} .section-head .link{padding:7px 13px} .about .stat-row{gap:22px} .toolbar{flex-direction:column;align-items:stretch} .j-grid{grid-template-columns:1fr;gap:16px} .jcard-title{font-size:16.5px} .j-article-foot .btn{flex:1;justify-content:center} /* Chip rows scroll sideways instead of widening the page. `min-width:0` is the load-bearing bit: as a flex item of .toolbar its automatic minimum size is its content width, so without this it refuses to shrink and overflow-x has nothing to scroll. `flex:0 0 auto` stops the chips squashing instead. */ .filters{ overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px; min-width:0;width:100%;scrollbar-width:none; -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain; } .filters a{flex:0 0 auto} .filters::-webkit-scrollbar{display:none} } /* ========================================================================= Wishlist heart + card links (all widths) ========================================================================= */ /* The heart sits beside the bag at the foot of the card rather than floating over the art, so both actions read as one pair. */ .wish{ display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:50%; background:transparent;border:1px solid var(--line-2);color:var(--gold-dark); transition:transform .25s,background .25s,border-color .25s; } .wish .ico{width:16px;height:16px;transition:fill .25s,stroke .25s} .wish:hover{transform:scale(1.09);background:var(--surface);border-color:var(--gold)} .wish.is-on{background:var(--surface);border-color:var(--gold)} .wish.is-on .ico{fill:var(--gold);stroke:var(--gold-deep)} .card-link{position:relative;z-index:1;display:grid;place-items:center;width:100%;height:100%} .card-name a{color:inherit} /* ========================================================================= Mobile app bar — phone widths only ========================================================================= */ .appbar{ /* colour of the dome below — the page underneath sets it to its own surface so the band and the page read as one screen, not two stacked blocks */ --dome:var(--white); display:none;position:sticky;top:0;z-index:70; /* two rows at rest — delivery line over the search pill. Condensed, the delivery line drops out and the pill moves up beside the tools. */ grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:10px; padding:calc(14px + env(safe-area-inset-top,0px)) 16px 34px; border-radius:0 0 22px 22px;color:var(--on-dark); background:linear-gradient(155deg,var(--gold) 0%,var(--gold-deep) 48%,var(--gold-fill) 100%); box-shadow:0 6px 18px rgba(120,98,40,.16); transition:box-shadow .25s ease; /* the dome below is drawn wider than the band so its flanks are flat; this keeps that overshoot from widening the page */ overflow:hidden; } /* The page rises into the band as a soft dome — the curve the app screen has under its search field. It is simply the page colour laid over the gold. */ .appbar::after{ content:'';position:absolute;left:-8%;right:-8%;bottom:-1px;height:30px; background:var(--dome);border-radius:50% 50% 0 0/100% 100% 0 0; } /* the wrapper only groups the two for the markup — the bar's own grid places them, so it can move the pill up into their row when it condenses */ .appbar-top{display:contents} .appbar-loc,.appbar-tools,.appbar-search{position:relative;z-index:1} .appbar-loc{grid-area:1/1/2/2} .appbar-tools{grid-area:1/2/2/3} .appbar-search{grid-area:2/1/3/3} .appbar-loc-label{ display:block;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.78);margin-bottom:2px; } .appbar-loc-value{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--on-dark)} .appbar-loc-value .ico{width:16px;height:16px} .appbar-loc-value .ico:last-child{width:13px;height:13px;opacity:.8} .appbar-tools{display:flex;align-items:center;gap:9px;flex:none} .appbar-btn{ position:relative;display:grid;place-items:center;width:39px;height:39px; border-radius:50%;color:var(--on-dark); background:rgba(255,255,255,.20);border:1px solid rgba(255,255,255,.30); } .appbar-btn .ico{width:18px;height:18px} .appbar-btn .count{ position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px; border-radius:var(--r-pill);background:var(--on-dark);color:var(--gold-fill); font-size:10px;font-weight:700;display:grid;place-items:center;line-height:1; border:2px solid var(--gold-deep); } .appbar-btn .count[hidden]{display:none} .appbar-search{ display:flex;align-items:center;gap:10px;margin-top:15px;height:50px; background:var(--surface);border-radius:15px;padding:0 6px 0 15px; box-shadow:0 8px 20px rgba(90,72,20,.18); } .appbar-search input{ flex:1;min-width:0;height:100%;border:none;outline:none;background:none; font-family:var(--sans);font-size:14px;color:var(--ink); } .appbar-search input::placeholder{color:var(--muted)} .appbar-go{ display:grid;place-items:center;width:39px;height:39px;border-radius:12px;flex:none; border:none;padding:0;cursor:pointer; background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:var(--on-gold); } .appbar-go .ico{width:19px;height:19px} /* Condensed — set once the page has been scrolled past the head. The dome and the rounded corners go with it, so the products run cleanly under a flat edge instead of being cut by a curve. main.js gives the bar a margin worth exactly the height it drops, so nothing below it moves. */ .appbar.is-stuck{ padding-bottom:10px;border-radius:0; box-shadow:0 6px 20px rgba(90,72,20,.24); } .appbar.is-stuck::after{opacity:0} .appbar.is-stuck .appbar-loc{display:none} .appbar.is-stuck .appbar-search{grid-area:1/1/2/2;margin-top:0;height:44px;border-radius:13px} .appbar.is-stuck .appbar-btn{width:36px;height:36px} .appbar.is-stuck .appbar-btn .ico{width:17px;height:17px} .appbar.is-stuck .appbar-go{width:34px;height:34px;border-radius:10px} .appbar.is-stuck .appbar-go .ico{width:17px;height:17px} /* ========================================================================= Mobile tab bar — phone widths only ========================================================================= */ /* A capsule that floats clear of the bottom edge rather than a bar welded to it: every tab keeps its icon, and the one the visitor is on opens into a tinted pill to show its name. */ .tabbar{ display:none;position:fixed;z-index:75; left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px)); align-items:center;justify-content:space-between;gap:4px; padding:7px 8px;border-radius:var(--r-pill); background:var(--glass);backdrop-filter:saturate(160%) blur(14px); border:1px solid var(--line); box-shadow:0 14px 34px rgba(120,98,40,.20); } .tab{ position:relative;display:flex;align-items:center;gap:8px; padding:11px 14px;border-radius:var(--r-pill); color:var(--body);font-size:11.5px;letter-spacing:.03em;font-weight:600; transition:background .3s,color .3s; } .tab .ico{width:21px;height:21px;flex:none} .tab-ico{position:relative;display:grid;place-items:center} /* the label is only ever hidden by width, so it still reads out to a screen reader on the tabs that are not open */ .tab-label{ max-width:0;overflow:hidden;white-space:nowrap;opacity:0; transition:max-width .32s cubic-bezier(.4,0,.2,1),opacity .22s; } .tab.is-active{ background:linear-gradient(135deg,var(--cream-light),var(--cream-deep)); color:var(--gold-dark); } .tab.is-active .ico{stroke-width:1.8} .tab.is-active .tab-label{max-width:90px;opacity:1} .tab .count{ position:absolute;top:-7px;right:-9px;min-width:16px;height:16px;padding:0 4px; border-radius:var(--r-pill);background:var(--gold-fill);color:var(--on-dark); font-size:9.5px;font-weight:700;display:grid;place-items:center;line-height:1; border:2px solid var(--surface); } /* on the open tab the badge swaps to the far side of the icon, clear of the label that has just slid out beside it */ .tab.is-active .count{right:auto;left:-10px} .tab .count[hidden]{display:none} /* ========================================================================= Product detail page ========================================================================= */ .pdp{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px); max-width:1280px;margin-inline:auto;padding:clamp(22px,3vw,40px) var(--pad) 0; align-items:start; } .pdp-media{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--surface)} .pdp-actions{ position:absolute;top:14px;left:14px;right:14px;z-index:4; display:flex;align-items:center;justify-content:space-between;gap:10px; } .pdp-actions-end{display:flex;gap:10px} .pdp-btn{ display:grid;place-items:center;width:39px;height:39px;border-radius:50%; background:var(--chip);color:var(--ink);box-shadow:var(--shadow-sm); transition:transform .25s,background .25s; } .pdp-btn:hover{transform:scale(1.07);background:var(--surface)} .pdp-btn .ico{width:18px;height:18px} .pdp-btn.is-on .ico{fill:var(--gold);stroke:var(--gold-deep)} .pdp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none} .pdp-track::-webkit-scrollbar{display:none} .pdp-slide{ flex:0 0 100%;scroll-snap-align:center;display:grid;place-items:center; padding:10px 24px 30px;background:transparent;position:relative;z-index:2; } .pdp-slide .art{width:auto;height:min(46vh,330px)} .pdp-slide .art--alt{filter:drop-shadow(0 18px 30px rgba(90,72,20,.22))} .pdp-dots{display:flex;justify-content:center;gap:7px;padding:15px 0 4px} .pdp-dots button{width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:.3s} .pdp-dots button.is-on{width:22px;border-radius:var(--r-pill);background:var(--gold-deep)} .pdp-sheet{background:var(--surface);padding-top:4px} .pdp-sheet .crumbs{margin-bottom:12px} .pdp-rate{display:flex;align-items:center;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:12px} .pdp-score{display:inline-flex;align-items:center;gap:5px} .pdp-score .star{width:17px;height:17px;fill:var(--gold)} .pdp-score b{font-family:var(--serif);font-size:17px;color:var(--ink)} .avatars{display:inline-flex;align-items:center} .avatars i{ width:25px;height:25px;border-radius:50%;display:grid;place-items:center; font-style:normal;font-size:10px;font-weight:700;color:var(--gold-dark); background:linear-gradient(150deg,var(--cream-light),var(--cream-deep)); border:2px solid var(--surface);margin-left:-9px; } .avatars i:first-child{margin-left:0} .pdp-rate small{font-size:11.5px;color:var(--muted)} .pdp-price{font-family:var(--serif);font-size:clamp(26px,3.4vw,34px);line-height:1.1} .pdp-unit{ font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; } /* ---------- size ladder (15 ml · 30 ml · 50 ml, XS – XXL) ---------------- */ .pdp-size{border:0;margin-top:22px} .pdp-size legend{ font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700; color:var(--ink);margin-bottom:10px;padding:0; } .pdp-size-row{display:flex;flex-wrap:wrap;gap:10px} .pdp-size-opt{cursor:pointer;position:relative} .pdp-size-opt input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer} .pdp-size-opt span{ display:grid;place-items:center;min-width:82px;padding:12px 20px; border:1.5px solid var(--line-2);border-radius:14px;background:var(--surface); font-size:13.5px;font-weight:600;color:var(--ink); transition:background .2s,border-color .2s,box-shadow .2s; } .pdp-size-opt:hover span{border-color:var(--gold)} .pdp-size-opt input:checked+span{ border-color:var(--gold-deep);background:var(--cream-light); box-shadow:inset 0 0 0 1px var(--gold-deep); } .pdp-size-opt input:focus-visible+span{outline:2px solid var(--gold-dark);outline-offset:2px} /* Sold out: still readable, plainly not choosable. */ .pdp-size-opt.is-out{cursor:not-allowed} .pdp-size-opt.is-out input{cursor:not-allowed} .pdp-size-opt.is-out span{ color:var(--muted);background:var(--cream-light);border-style:dashed; text-decoration:line-through;text-decoration-color:var(--line-2); } .pdp-size-opt.is-out:hover span{border-color:var(--line-2)} .pdp-size-note{margin-top:10px;font-size:12px;color:var(--gold-dark)} .pdp-size-note--out{color:var(--muted)} .pdp-sheet h2{font-size:17px;margin:26px 0 10px} .pdp-desc{font-size:14.5px;line-height:1.75} .pdp-desc-more{display:block;margin-top:12px} .pdp-learn{ color:var(--gold-dark);font-weight:700;font-size:13.5px; text-decoration:underline;text-underline-offset:3px;margin-left:4px; } .pdp-specs > div{ display:flex;align-items:baseline;justify-content:space-between;gap:18px; padding:11px 0;border-bottom:1px solid var(--line); } .pdp-specs dt{font-size:13.5px;color:var(--body)} .pdp-specs dd{font-size:13.5px;color:var(--ink);font-weight:600;text-align:right} .pdp-notes{display:flex;flex-wrap:wrap;gap:8px} .pdp-notes li{ padding:8px 14px;border-radius:var(--r-pill);background:var(--cream-light); border:1px solid var(--line);font-size:12px;color:var(--ink-2); } .pdp-assure{ display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;padding-top:18px; border-top:1px solid var(--line); } .pdp-assure span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)} .pdp-assure .ico{width:16px;height:16px;color:var(--gold-dark)} .pdp-related{padding-top:clamp(34px,4vw,54px)} .buybar{ position:sticky;bottom:0;z-index:60; display:flex;align-items:center;justify-content:space-between;gap:18px; background:var(--glass);backdrop-filter:saturate(160%) blur(10px); border-top:1px solid var(--line); padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom,0px)); box-shadow:0 -8px 26px rgba(120,98,40,.10); } .buybar-price small{ display:block;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted); } .buybar-price b{font-family:var(--serif);font-size:21px;color:var(--ink)} .buybar-actions{display:flex;align-items:center;gap:10px} .buybar .btn{border-radius:var(--r-pill);padding:14px 30px} .buybar .btn .ico{width:17px;height:17px} .buybar .btn[disabled]{opacity:.55;pointer-events:none} /* ========================================================================= App layout — phone widths take over the shell ========================================================================= */ @media (max-width:768px){ /* clears the floating tab capsule, which stands off the bottom edge */ body{padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))} /* the buy bar is pinned on a phone, so it needs the same clearance */ /* clears the fixed buy bar, which stacks price over actions at this width */ body.is-product{padding-bottom:130px} .toast{bottom:calc(100px + env(safe-area-inset-bottom,0px))} .announce,.header{display:none} .appbar{display:grid} .tabbar{display:flex} /* a detail screen owns its own chrome: back button on top, buy bar below */ body.is-product .appbar,body.is-product .tabbar{display:none} /* home: the app bar replaces the hero */ .hero{display:none} /* the circle rail rides straight under the app bar's dome */ .cats{margin-top:0;padding-top:12px} .cats-inner{ background:none;box-shadow:none;padding:0 0 4px;gap:13px; grid-auto-columns:minmax(72px,1fr);border-radius:0; } .cat{gap:9px;padding:0} .cat-ring{ width:64px;height:64px;border:1px solid var(--line-2); background:radial-gradient(120% 120% at 30% 18%,var(--surface),var(--cream) 55%,var(--cream-deep)); box-shadow:0 8px 18px rgba(120,98,40,.14); } .cat-ring .ico{width:27px;height:27px} /* one line each, so the circles all sit on the same baseline */ .cat span{ font-size:10.5px;letter-spacing:.02em;text-transform:none;font-weight:600; color:var(--ink-2);white-space:nowrap; } .section{padding-block:22px} .section-head{margin-bottom:16px} .section-head h2{font-family:var(--serif);font-size:22px;letter-spacing:0;text-transform:none;font-weight:400} .section-head .link{border:none;background:none;padding:0;font-size:11px;color:var(--gold-dark)} .section-head .link:hover{background:none;color:var(--gold-dark)} /* The head is where the app bar lands. It slides up behind the band's rounded corners and the dome is cut from the head's own wash, so the gold band, the curve and the breadcrumbs read as one screen instead of three stacked bands. The wash then fades to white so the grid below joins on without a seam. */ body:has(.page-head) .appbar{--dome:var(--cream-light)} .page-head{ margin-top:-24px;padding:40px 0 20px;text-align:left; background:linear-gradient(180deg,var(--cream-light) 0 42%,var(--surface-2) 76%,var(--white)); } .page-head h1{font-size:26px} .page-head p{margin-inline:0;font-size:13.5px} /* cards keep the same shape two-up, only tighter — deeper tint, smaller type, and the two actions shrink to fit beside the name */ .p-grid,.p-grid--shop{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px} .card{ border-radius:20px;border-color:transparent;padding:8px; background:linear-gradient(168deg,var(--cream-light),var(--cream) 58%,var(--cream-deep)); box-shadow:0 8px 20px rgba(120,98,40,.12); } .card-media{border-radius:15px;padding:10px 12px 18px;background:var(--veil)} .card-media::before{width:80%} .card-body{padding:11px 5px 2px;gap:4px} .card-was{font-size:11px} .card-now{font-size:15.5px} .card-rate{font-size:11.5px} .card-star{width:12px;height:12px} .card-tag{font-size:10px} .card-foot{padding-top:8px;gap:7px} .card-name{font-size:14px;color:var(--ink)} .card-actions{gap:5px} .card .add,.card .wish{width:30px;height:30px} .card .add .ico,.card .wish .ico{width:14px;height:14px} .card .add{background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:var(--on-gold)} .card .add.is-added{background:var(--ok);color:var(--on-dark)} .card .add[disabled]{background:var(--line-2);color:var(--muted);box-shadow:none} .card .wish{background:var(--veil-2);border-color:var(--veil-3)} /* product page */ .pdp{display:block;padding:0} .pdp-media{border-radius:0} .pdp-slide{padding:34px 20px 30px} .pdp-slide .art{height:min(42vh,300px)} .pdp-sheet{padding:6px 18px 26px} .pdp-sheet .crumbs{display:none} .pdp-head h1{font-size:26px} .pdp-price{font-size:22px} .pdp-rate small{font-size:11px} .pdp-related{padding:6px 0 20px} /* reviews: the summary stacks, and the buy bar must not sit on the form's submit button — the section carries its own clearance */ .pdp-reviews{padding:6px 0 20px} .rv-summary{grid-template-columns:1fr;gap:18px;padding:20px} .rv-score{justify-items:start} .rv-score b{font-size:34px} .rv-list{grid-template-columns:1fr;gap:12px} .review{padding:17px} .rv-form{padding:18px;margin-bottom:14px} .rv-form h3{font-size:18px} .rv-form .btn{width:100%} .rv-stars svg{width:32px;height:32px} .buybar{position:fixed;left:0;right:0;bottom:0;flex-wrap:wrap;gap:10px;padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px))} /* two actions will not fit beside the price at this width, so the price keeps the top line to itself and the buttons share the one below */ .buybar-price{width:100%} .buybar-actions{width:100%;gap:9px} .buybar .btn{flex:1;justify-content:center;padding:14px 12px;font-size:10.5px;letter-spacing:.1em} .footer{margin-top:26px} } /* ========================================================================= Account — profile block in the menu, sign in / register, member card ========================================================================= */ .acct-avatar{ display:grid;place-items:center;width:46px;height:46px;border-radius:50%;flex:none; background:linear-gradient(150deg,var(--gold),var(--gold-deep)); color:var(--on-gold);font-family:var(--serif);font-size:20px;line-height:1; box-shadow:0 6px 16px rgba(176,143,39,.30); } .acct-avatar--empty{background:linear-gradient(150deg,var(--cream-light),var(--cream-deep));color:var(--gold-dark)} .acct-avatar .ico{width:21px;height:21px} /* ---------- menu panel ---------------------------------------------------- */ .mnav-me{ display:flex;align-items:center;gap:13px; padding:18px 22px;border-bottom:1px solid var(--line); background:linear-gradient(160deg,var(--cream-light),var(--surface) 70%); } .mnav-me-id{min-width:0;flex:1} .mnav-me-id b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.25} .mnav-me-id small{ display:block;font-size:11.5px;color:var(--muted); overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .mnav-me > .ico{width:15px;height:15px;color:var(--gold);flex:none} .mnav-auth{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:16px 22px 4px} .mnav-auth .btn{padding:12px 10px;font-size:10.5px;letter-spacing:.12em} .mnav-signout{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:12px; font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted); padding:10px;border-radius:var(--r-sm);transition:.25s; } .mnav-signout:hover{color:var(--gold-dark);background:var(--surface)} .mnav-signout .ico{width:16px;height:16px} /* ---------- account page -------------------------------------------------- */ .acct{max-width:520px;margin-inline:auto} .acct-card{ background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(20px,3vw,30px);box-shadow:var(--shadow-sm); } .acct-tabs{ display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:24px; background:var(--cream-light);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px; } .acct-tabs a{ text-align:center;padding:11px 8px;border-radius:var(--r-pill); font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700; color:var(--body);transition:.25s; } .acct-tabs a.is-active{ background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--on-gold); box-shadow:0 6px 16px rgba(176,143,39,.28); } .form{display:grid;gap:16px} .form label{display:grid;gap:7px} .form label > span{ font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--ink-2); } .form input{ width:100%;padding:14px 16px;border-radius:var(--r-sm); border:1px solid var(--line-2);background:var(--cream-light); font-family:var(--sans);font-size:14.5px;color:var(--ink);transition:.22s; } .form input:focus{outline:none;border-color:var(--gold);background:var(--surface);box-shadow:0 0 0 3px rgba(214,177,61,.16)} .form label > small{font-size:11px;color:var(--muted)} .form .btn{margin-top:4px} .form-alt{text-align:center;font-size:13px;color:var(--muted)} .form-alt a{color:var(--gold-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px} .form-note{ display:flex;align-items:flex-start;gap:10px;margin-bottom:18px; padding:13px 16px;border-radius:var(--r-sm);font-size:13.5px;line-height:1.5; } .form-note .ico{width:17px;height:17px;flex:none;margin-top:2px} .form-note span span{display:block} .form-note--ok{background:var(--ok-bg);border:1px solid var(--ok-border);color:var(--ok-ink)} .form-note--ok .ico{color:var(--ok)} .form-note--bad{background:var(--bad-bg);border:1px solid var(--bad-border);color:var(--bad-ink)} .form-note--bad .ico{color:var(--bad-ico)} .acct-id{display:flex;align-items:center;gap:14px;margin-bottom:22px} .acct-id b{display:block;font-family:var(--serif);font-size:20px;color:var(--ink);line-height:1.2} .acct-id small{font-size:12.5px;color:var(--muted)} .acct-links{display:grid;margin:22px 0 24px} .acct-links a{ display:flex;align-items:center;gap:12px;padding:14px 2px; border-bottom:1px solid var(--line);font-size:14px;color:var(--ink);transition:.22s; } .acct-links a:hover{color:var(--gold-dark);padding-left:6px} .acct-links a span{flex:1} .acct-links a .ico{width:18px;height:18px;color:var(--gold-dark)} .acct-links a .ico:last-child{width:14px;height:14px;color:var(--gold)} .acct-assure{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:18px;font-size:12px;color:var(--muted);text-align:center; } .acct-assure .ico{width:15px;height:15px;color:var(--gold-dark);flex:none} @media (max-width:768px){ .acct{max-width:none} .acct-card{border-radius:20px;padding:20px 18px} .mnav-auth{grid-template-columns:1fr 1fr;padding:14px 22px 0} } /* ========================================================================= Delivery location — the app-bar chip, its sheet and the picker rows ========================================================================= */ .announce a.a-start{ display:inline-flex;align-items:center;gap:7px; padding:4px 10px;border-radius:var(--r-pill);transition:.25s; } .announce a.a-start:hover{background:var(--veil);color:var(--gold-dark)} .announce a.a-start .ico:last-child{width:12px;height:12px} .cart-loc{color:var(--gold-dark);font-weight:600;text-decoration:underline;text-underline-offset:3px} /* the sheet: a drawer on desktop, a bottom sheet on a phone ---------------- */ .sheet{ position:fixed;top:0;right:0;height:100dvh;width:min(400px,92vw);background:var(--surface); z-index:100;display:flex;flex-direction:column;box-shadow:var(--shadow-lg); transform:translateX(100%);transition:transform .36s cubic-bezier(.4,0,.2,1); } .sheet.is-open{transform:none} .sheet-body{flex:1;overflow-y:auto;padding:16px 20px 26px} .loc-group{ font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:700; color:var(--muted);margin:14px 2px 8px; } .loc-group:first-child{margin-top:4px} .loc-list{display:grid;gap:8px} .loc{ display:flex;align-items:center;gap:12px;width:100%;text-align:left; padding:13px 14px;border-radius:var(--r-md); border:1px solid var(--line);background:var(--surface);transition:.22s; } .loc:hover{border-color:var(--line-2);background:var(--cream-light)} .loc-pin{ display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none; background:linear-gradient(150deg,var(--cream-light),var(--cream-deep));color:var(--gold-dark); } .loc-pin .ico{width:17px;height:17px} .loc-text{flex:1;min-width:0} .loc-text b{display:block;font-family:var(--serif);font-size:16px;color:var(--ink);line-height:1.3} .loc-text small{display:block;font-size:11.5px;color:var(--muted)} .loc-mark{ display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none; border:1px solid var(--line-2);color:transparent;transition:.22s; } .loc-mark .ico{width:13px;height:13px;stroke-width:3} .loc.is-on{border-color:var(--gold);background:var(--cream-light)} .loc.is-on .loc-pin{background:linear-gradient(150deg,var(--gold),var(--gold-deep));color:var(--on-gold)} .loc.is-on .loc-mark{background:var(--gold-fill);border-color:var(--gold-fill);color:var(--on-dark)} .loc-foot{ display:flex;align-items:flex-start;gap:9px;margin-top:18px;padding-top:16px; border-top:1px solid var(--line);font-size:12px;color:var(--muted);line-height:1.5; } .loc-foot .ico{width:16px;height:16px;color:var(--gold-dark);flex:none;margin-top:1px} @media (max-width:768px){ .sheet{ top:auto;bottom:0;left:0;right:0;width:auto;height:auto;max-height:86dvh; border-radius:24px 24px 0 0;transform:translateY(100%); } .sheet-body{padding:14px 18px calc(24px + env(safe-area-inset-bottom,0px))} .loc{padding:12px} } /* ========================================================================= Checkout & orders ========================================================================= */ .notice{ border-radius:var(--r-md);padding:14px 18px;margin-bottom:22px; font-size:13.5px;border:1px solid var(--line-2);background:var(--cream-light); } .notice--bad{border-color:var(--bad-border);background:var(--bad-bg);color:var(--bad-ink)} .notice--good{border-color:var(--ok-border);background:var(--ok-bg);color:var(--ok-ink)} .notice p+p{margin-top:4px} .notice b{font-weight:700} .notice a{color:inherit;text-decoration:underline} .checkout-hint{font-size:12.5px;color:var(--muted);margin-top:10px} .checkout-hint a{color:var(--gold-dark);text-decoration:underline} .checkout{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(20px,3vw,38px);align-items:start} .checkout-main{display:grid;gap:18px;min-width:0} .field-group{ border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--surface); } .field-group legend{ font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700; color:var(--ink);padding:0 8px; } .field{display:block;margin-bottom:14px} .field:last-child{margin-bottom:0} .field>span{ display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--body);margin-bottom:6px; } .field>span em{font-style:normal;color:var(--muted);text-transform:none;letter-spacing:0} .field input,.field select,.field textarea{ width:100%;padding:12px 14px;border:1px solid var(--line-2);border-radius:var(--r-sm); font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--surface); } .field textarea{resize:vertical;min-height:76px} .field input:focus,.field select:focus,.field textarea:focus{ outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(214,177,61,.18); } .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} .field-row .field{margin-bottom:14px} .check{display:flex;align-items:center;gap:10px;font-size:14px;margin-bottom:14px} .check input{width:18px;height:18px;accent-color:var(--gold-deep)} .pay-options{display:grid;gap:10px} .pay-option{ display:flex;align-items:center;gap:12px;padding:13px 15px;cursor:pointer; border:1px solid var(--line-2);border-radius:var(--r-sm);transition:.2s; } .pay-option:hover{border-color:var(--gold)} .pay-option input{width:18px;height:18px;accent-color:var(--gold-deep);flex:none} .pay-option:has(input:checked){border-color:var(--gold);background:var(--cream-light)} .pay-option b{display:block;font-size:13.5px;color:var(--ink);font-weight:600} .pay-option small{font-size:11.5px;color:var(--muted)} /* Order summary panel ------------------------------------------------------ */ .checkout-side{position:sticky;top:calc(var(--header-h) + 14px)} .summary{ border:1px solid var(--line);border-radius:var(--r-md);padding:20px;background:var(--cream-light); } .summary h2{ font-family:var(--sans);font-size:11px;letter-spacing:.18em;text-transform:uppercase; font-weight:700;margin-bottom:14px; } .summary h2+p,.summary .order-address{margin-bottom:16px} .summary-lines{display:grid;gap:12px;margin-bottom:16px} .summary-empty{font-size:13.5px;color:var(--muted)} .summary-empty a{color:var(--gold-dark);text-decoration:underline} .summary-line{display:flex;align-items:center;gap:11px} .summary-art{ width:46px;height:46px;flex:none;border-radius:9px;padding:4px;background:var(--surface); border:1px solid var(--line);display:grid;place-items:center; } .summary-art svg{height:100%;width:auto} .summary-info{flex:1;min-width:0} .summary-info b{display:block;font-family:var(--serif);font-size:14px;color:var(--ink)} .summary-info small{font-size:11px;color:var(--muted)} .summary-price{font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap} .field--inline{margin:16px 0} .summary-totals{margin:16px 0 18px;font-size:13.5px} .summary-totals>div{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px} .summary-totals dt{color:var(--body)} .summary-totals dd{color:var(--ink);font-weight:600} .summary-total{ padding-top:11px;margin-top:11px;border-top:1px solid var(--line-2); font-size:16px; } .summary-total dd{font-family:var(--serif);font-weight:400;font-size:19px} #placeOrder[disabled]{opacity:.45;pointer-events:none} /* Order view --------------------------------------------------------------- */ .order-view{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(20px,3vw,38px);align-items:start} .order-main{border:1px solid var(--line);border-radius:var(--r-md);padding:22px;min-width:0} .order-head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px} .order-head h2{font-size:26px;letter-spacing:.02em} .order-status{ padding:7px 14px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700; letter-spacing:.12em;text-transform:uppercase;background:var(--cream);color:var(--gold-dark); white-space:nowrap; } .order-status--shipped,.order-status--out_for_delivery{background:var(--cream-deep);color:var(--stat-ship-ink)} .order-status--delivered{background:var(--ok-bg);color:var(--ok-ink)} .order-status--cancelled,.order-status--refunded{background:var(--bad-bg);color:var(--bad-ink)} .order-table{width:100%;border-collapse:collapse;margin-bottom:18px} .order-table td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:14px} .order-table b{display:block;font-family:var(--serif);font-size:15.5px;color:var(--ink)} .order-table small{font-size:11.5px;color:var(--muted)} .order-table .num{text-align:right;white-space:nowrap;color:var(--ink)} .order-address{font-size:13.5px;line-height:1.7;color:var(--body)} .order-address small{color:var(--muted)} .order-side .summary .btn{margin-top:6px} /* Delivery tracker --------------------------------------------------------- Six stages from "order placed" to "delivered", drawn from ORDER_FLOW. The dots are joined by their own connectors, so a stage can be added or removed in PHP without the line ever falling out of step with the labels. -------------------------------------------------------------------------- */ /* A container, not a media query: the same tracker sits in a 520px account column and in a much wider order page, so it has to lay itself out from the room it is actually given rather than from the size of the window. */ .track{ container-type:inline-size; background:var(--cream-light);border:1px solid var(--line); border-radius:var(--r-md);padding:16px 18px 18px; } .track-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .track-now{ display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark); } .track-now-ico{width:17px;height:17px} .track-count{ margin-left:auto;font-size:11px;letter-spacing:.06em; color:var(--muted);white-space:nowrap; } .track-say{font-size:12.5px;line-height:1.55;color:var(--body);margin-top:5px} .track-steps{ display:grid;grid-template-columns:repeat(var(--track-steps,6),1fr); gap:4px;margin-top:20px; } .track-step{ position:relative;display:flex;flex-direction:column; text-align:center;min-width:0; } /* The segment that arrives at this dot — filled once the stage before it is behind us, which is exactly when this step is done or in progress. */ .track-step::before{ content:'';position:absolute;top:17px;height:2px;border-radius:2px; left:calc(-50% + 25px);right:calc(50% + 25px);background:var(--line-2); } .track-step:first-child::before{display:none} .track-step.is-done::before, .track-step.is-now::before{background:linear-gradient(90deg,var(--gold-deep),var(--gold))} /* Leaving the current stage: dashed, because it is still in transit. */ .track-step.is-now+.track-step::before{ background:repeating-linear-gradient(90deg,var(--line-2) 0 5px,transparent 5px 10px); } .track-dot{ position:relative;z-index:1;width:36px;height:36px;flex:none; margin-inline:auto;border-radius:50%;display:grid;place-items:center; background:var(--white);border:1.5px solid var(--line-2);color:var(--muted); } .track-ico{width:17px;height:17px} .track-step.is-done .track-dot{ background:linear-gradient(140deg,var(--gold),var(--gold-deep)); border-color:transparent;color:var(--on-gold); } .track-step.is-now .track-dot{ background:var(--white);border-color:var(--gold);color:var(--gold-dark); box-shadow:0 0 0 4px rgba(214,177,61,.16); } .track-step.is-void .track-dot{opacity:.5} /* A quiet halo so the eye lands on where the parcel actually is. */ .track-step.is-now .track-dot::after{ content:'';position:absolute;inset:-5px;border-radius:50%; border:1.5px solid var(--gold);animation:track-pulse 2.4s ease-out infinite; } @keyframes track-pulse{ 0%{transform:scale(.85);opacity:.75} 70%{transform:scale(1.4);opacity:0} 100%{transform:scale(1.4);opacity:0} } .track-text{display:flex;flex-direction:column;flex:1;margin-top:10px;min-width:0} .track-text b{ font-family:var(--sans);font-size:11.5px;font-weight:600;line-height:1.35; color:var(--ink);letter-spacing:.01em; } .track-step.is-next .track-text b, .track-step.is-void .track-text b{color:var(--muted);font-weight:500} .track-text time{ display:block;margin-top:auto;padding-top:4px; font-size:10.5px;line-height:1.4;color:var(--muted); } .track-step.is-now .track-text time{color:var(--gold-dark)} /* Six columns leave no room for it; the stacked layout below puts it back. */ .track-since{display:none} .track-eta{ display:flex;align-items:center;gap:9px;margin-top:18px;padding-top:14px; border-top:1px dashed var(--line-2);font-size:12.5px;color:var(--gold-dark); } .track-eta .ico{width:16px;height:16px} /* Cancelled or refunded: the journey stopped, so the gold does too. */ .track--stopped{background:var(--stop-bg);border-color:var(--stop-line)} .track--stopped .track-now{color:var(--bad-ink)} .track--stopped .track-step.is-done .track-dot{background:var(--stop-dot);border-color:transparent} .track--stopped .track-step.is-done::before, .track--stopped .track-step.is-now::before{background:var(--stop-rail)} @media (prefers-reduced-motion:reduce){ .track-step.is-now .track-dot::after{animation:none;opacity:.5} } /* Account: order history --------------------------------------------------- */ .order-list{display:grid;gap:14px} .order-card{ container-type:inline-size; border:1px solid var(--line);border-radius:var(--r-lg);padding:16px; transition:border-color .25s,box-shadow .25s; } .order-card:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)} .order-row{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; border:1px solid var(--line);border-radius:var(--r-md);padding:15px 18px; transition:border-color .25s,box-shadow .25s; } .order-row:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)} /* Inside a card the row is the heading, not a tile of its own — and a two by two grid rather than a wrapping flex line, so the badge and the amount stay put however long the reference or the status happens to be. */ .order-card .order-row{ display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center; gap:5px 12px;border:0;border-radius:0;padding:2px 4px 15px;box-shadow:none; } .order-card .order-ref{grid-row:1/3} .order-card .order-status, .order-card .amount{grid-column:2;justify-self:end} .order-row b{font-family:var(--serif);font-size:16px;color:var(--ink)} .order-row small{display:block;font-size:11.5px;color:var(--muted)} .order-row .amount{font-family:var(--serif);font-size:17px;color:var(--ink)} .order-card-foot{margin-top:13px;text-align:right} .order-card-foot a{ display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark); } .order-card-foot a .ico{width:15px;height:15px;transition:transform .25s} .order-card-foot a:hover .ico{transform:translateX(4px)} /* A long status like "Awaiting confirmation" beside a reference and a total is more than a phone-width card can hold, so the badge and the amount drop to a line of their own. */ @container (max-width:460px){ .order-card .order-ref{grid-row:1;grid-column:1/-1} .order-card .order-status{grid-row:2;grid-column:1;justify-self:start;white-space:normal} .order-card .amount{grid-row:2;grid-column:2;justify-self:end} } .order-main .track{margin-bottom:20px} @media (max-width:900px){ .checkout,.order-view{grid-template-columns:1fr} .checkout-side{position:static} } /* Narrow: six labels side by side would be shredded, so the same list turns into a vertical timeline — stage on the left, when it happened on the right. */ @container (max-width:620px){ .track-steps{grid-template-columns:1fr;gap:0;margin-top:15px} .track-step{ display:grid;grid-template-columns:32px minmax(0,1fr) auto; align-items:start;gap:0 12px;text-align:left;padding-bottom:17px; } .track-step:last-child{padding-bottom:0} .track-step::before{display:none} /* The segment now leaves this dot on its way down to the next one. */ .track-step::after{ content:'';position:absolute;left:15px;width:2px;top:33px;bottom:0; border-radius:2px;background:var(--line-2); } .track-step:last-child::after{display:none} .track-step.is-done::after{background:linear-gradient(180deg,var(--gold-deep),var(--gold))} .track-step.is-now::after{ background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 8px); } .track--stopped .track-step.is-done::after{background:var(--stop-rail)} .track-dot{width:32px;height:32px} .track-ico{width:15px;height:15px} .track-step.is-now .track-dot::after{inset:-4px} /* The title and the time drop into columns two and three of the row. */ .track-text{display:contents} .track-text b{font-size:13px;padding-top:7px} .track-text time{margin-top:0;padding-top:8px;text-align:right;white-space:nowrap} .track-since{display:inline} } /* Tighter still — the timestamp gets its own line under the stage name. */ @container (max-width:380px){ .track-step{grid-template-columns:32px minmax(0,1fr)} .track-text time{grid-column:2;text-align:left;padding-top:1px} } @media (max-width:640px){ .field-row{grid-template-columns:1fr;gap:0} .field-group{padding:16px} .order-main{padding:16px} .order-head h2{font-size:22px} .order-row{padding:13px 15px} .order-card{padding:14px} .order-card .order-row{padding:2px 2px 13px} .track{padding:14px 15px 16px} } /* ---------- "use my current location" ------------------------------------- */ .loc-detect{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%; margin-bottom:6px;padding:13px 16px;border-radius:var(--r-md); border:1px dashed var(--line-2);background:var(--cream-light); color:var(--gold-dark);font-size:11px;letter-spacing:.13em; text-transform:uppercase;font-weight:700;transition:.25s; } .loc-detect:hover{border-color:var(--gold);background:var(--surface)} .loc-detect .ico{width:17px;height:17px} .loc-detect.is-busy{opacity:.65;cursor:progress} .loc-detect.is-busy .ico{animation:loc-spin 1.1s linear infinite} @keyframes loc-spin{to{transform:rotate(360deg)}} .loc-msg{ margin:2px 2px 8px;font-size:12px;line-height:1.5;color:var(--gold-dark); } @media (prefers-reduced-motion:reduce){ .loc-detect.is-busy .ico{animation:none} } /* ========================================================================= Address book ========================================================================= */ .addr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-bottom:18px} .addr{ border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px; background:var(--surface);transition:border-color .25s,box-shadow .25s;position:relative; } .addr:hover{border-color:var(--line-2);box-shadow:var(--shadow-sm)} .addr--default{border-color:var(--gold);background:var(--cream-light)} .addr-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px} .addr-label{ display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dark); } .addr-label .ico{width:14px;height:14px} .addr-badge{ font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; background:var(--gold);color:var(--on-gold);padding:4px 10px;border-radius:var(--r-pill); } .addr-name{font-family:var(--serif);font-size:16px;color:var(--ink);margin-bottom:4px} .addr-body{font-size:13.5px;line-height:1.6;color:var(--body)} .addr-meta{font-size:12.5px;color:var(--muted);margin-top:8px;line-height:1.9} .addr-meta .ico{width:14px;height:14px;vertical-align:-2px;margin-right:6px;color:var(--gold-dark)} .addr-map{ display:inline-flex;align-items:center;gap:6px;margin-top:10px; font-size:12px;color:var(--gold-dark);text-decoration:underline; } .addr-map .ico{width:14px;height:14px} .addr-actions{ display:flex;flex-wrap:wrap;align-items:center;gap:14px; margin-top:13px;padding-top:12px;border-top:1px solid var(--line); } .addr-actions form{display:inline} .addr-actions a,.addr-actions button{ font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:var(--gold-dark);padding:0;transition:color .2s; } .addr-actions a:hover,.addr-actions button:hover{color:var(--ink);text-decoration:underline} .addr-actions .is-danger{color:var(--danger)} /* Form --------------------------------------------------------------------- */ .addr-form{ border:1px solid var(--line-2);border-radius:var(--r-md); padding:20px;background:var(--cream-light);margin-top:4px; } .addr-form-title{font-size:19px;margin-bottom:16px} .addr-form .field input,.addr-form .field select{background:var(--surface)} .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px} .chip{cursor:pointer} .chip input{position:absolute;opacity:0;pointer-events:none} .chip span{ display:inline-block;padding:9px 18px;border-radius:var(--r-pill); border:1px solid var(--line-2);background:var(--surface);color:var(--ink); font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; transition:.2s; } .chip input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .chip input:focus-visible+span{outline:2px solid var(--gold-dark);outline-offset:2px} .addr-geo{ display:flex;flex-wrap:wrap;align-items:center;gap:12px; padding:14px;border:1px dashed var(--line-2);border-radius:var(--r-sm); background:var(--surface);margin:4px 0 16px; } .addr-geo .btn{padding:11px 20px} .addr-geo-note{font-size:12px;color:var(--muted);flex:1;min-width:180px} .addr-geo-note.is-ok{color:var(--ok-ink)} .addr-geo-note.is-bad{color:var(--danger)} .addr-form-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} @media (max-width:640px){ .addr-list{grid-template-columns:1fr} .addr-form{padding:16px} .addr-form-actions .btn{flex:1;justify-content:center} } /* Saved-address picker at checkout ----------------------------------------- */ .addr-pick{display:grid;gap:10px} .addr-pick-item{ display:flex;align-items:flex-start;gap:12px;padding:13px 15px;cursor:pointer; border:1px solid var(--line-2);border-radius:var(--r-sm);transition:.2s;background:var(--surface); } .addr-pick-item:hover{border-color:var(--gold)} .addr-pick-item input{width:18px;height:18px;accent-color:var(--gold-deep);flex:none;margin-top:2px} .addr-pick-item:has(input:checked){border-color:var(--gold);background:var(--cream-light)} .addr-pick-item b{display:block;font-size:13.5px;color:var(--ink);font-weight:600} .addr-pick-item small{font-size:11.5px;color:var(--muted);line-height:1.5} /* ========================================================================= Product page — boutique-window layout The piece stands on white under its own name, with a ghost of the name behind it; everything you need to buy sits on the gold panel below. ========================================================================= */ .pdp-media{ background:var(--surface);padding:64px 0 0; display:flex;flex-direction:column; } .pdp-title{ position:relative;z-index:3;order:-2; margin:0 auto;padding:0 58px;text-align:center; font-size:clamp(23px,3vw,33px);letter-spacing:.06em;text-transform:uppercase; color:var(--ink);line-height:1.15; } /* the outlined echo of the name, sitting behind the bottle */ .pdp-ghost{ position:absolute;top:clamp(58px,9vw,96px);left:50%;transform:translateX(-50%); z-index:1;pointer-events:none;user-select:none;white-space:nowrap; font-family:var(--serif);font-size:clamp(64px,13vw,132px);letter-spacing:.02em; text-transform:uppercase;line-height:1; color:transparent;-webkit-text-stroke:1px var(--cream-deep); opacity:.55; } @supports not ((-webkit-text-stroke: 1px red)){ .pdp-ghost{color:var(--cream);opacity:.7} } /* ---------- the gold panel ---------------------------------------------- */ .pdp-panel{ position:relative;margin:0 0 26px;padding:clamp(26px,4vw,38px) clamp(20px,4vw,40px); border-radius:var(--r-lg);text-align:center;color:var(--on-fill); background:linear-gradient(158deg,var(--gold-deep) 0%,var(--gold-fill) 58%,#6E5510 100%); box-shadow:0 18px 42px rgba(96,78,32,.26); } .pdp-panel-name{ font-family:var(--serif);font-size:clamp(19px,2.4vw,25px);letter-spacing:.14em; text-transform:uppercase;color:var(--on-dark);line-height:1.25; } .pdp-panel-desc{ margin:14px auto 0;max-width:44ch;font-size:14px;line-height:1.75; color:rgba(255,255,255,.84); } .pdp-panel .pdp-desc-more{display:block;margin-top:12px} .pdp-panel .pdp-learn{ display:inline-block;margin-top:10px;color:var(--on-dark);font-weight:700;font-size:12.5px; letter-spacing:.1em;text-transform:uppercase; text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5); } .pdp-panel .pdp-learn:hover{text-decoration-color:var(--on-dark)} .pdp-panel .pdp-price{margin-top:20px;color:var(--on-dark)} .pdp-panel .pdp-unit{margin-top:6px;color:rgba(255,255,255,.72)} /* the rating row, recoloured for the panel */ .pdp-panel .pdp-rate{margin-top:12px} .pdp-panel .pdp-score b{color:var(--on-dark)} .pdp-panel .pdp-rate small, .pdp-panel .pdp-rate small a{color:rgba(255,255,255,.75)} .pdp-panel .pdp-rate small a:hover{color:var(--on-dark)} .pdp-panel .avatars i{ background:linear-gradient(150deg,var(--cream),var(--cream-deep)); border-color:rgba(255,255,255,.5);color:var(--gold-dark); } /* ---------- buy bar: white, with the basket ------------------------------ */ .buybar{background:var(--surface)} .buybar .btn--primary{border-radius:var(--r-pill)} @media (max-width:768px){ /* one column: white window, then the panel bleeding to the edges */ .pdp-media{padding-top:58px;border-radius:0} .pdp-title{padding:0 62px} .pdp-sheet{padding:0 0 26px} .pdp-panel{ margin:0 0 22px;border-radius:26px 26px 0 0;padding:26px 20px 30px; box-shadow:none; } /* the sheet's own padding returns for everything under the panel */ .pdp-sheet > *:not(.pdp-panel){margin-inline:18px} .pdp-panel-desc{font-size:13.5px} } /* ========================================================================= Checkout summary — the bag, laid out like the app's cart screen ========================================================================= */ .summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px} .summary-count{ display:grid;place-items:center;min-width:26px;height:26px;padding:0 8px; border-radius:var(--r-pill);background:var(--fill-dark);color:var(--on-fill); font-size:12px;font-weight:700;line-height:1; } .summary-lines{display:grid;gap:14px;margin-bottom:18px} /* one row: art tile · name/size/price · vertical stepper */ .summary-line{ display:flex;align-items:center;gap:14px; padding:12px;border-radius:var(--r-md); background:var(--cream-light);border:1px solid var(--line); } .summary-art{ width:74px;height:74px;flex:none;border-radius:14px;overflow:hidden; display:grid;place-items:center;padding:8px; background:linear-gradient(150deg,var(--surface),var(--cream)); } .summary-art svg{height:100%;width:auto} .summary-art img{width:100%;height:100%;object-fit:cover;border-radius:10px} .summary-info{flex:1;min-width:0;display:grid;gap:3px} .summary-info b{ display:block;font-family:var(--serif);font-size:15.5px;color:var(--ink);line-height:1.25; } .summary-info small{font-size:11.5px;color:var(--muted)} .summary-price{ font-family:var(--serif);font-size:17px;color:var(--gold-dark);margin-top:2px; } .summary-qty{ display:grid;justify-items:center;gap:5px;flex:none; font-size:12.5px;color:var(--ink); } .summary-qty button{ display:grid;place-items:center;width:28px;height:28px;border-radius:50%; border:1px solid var(--line-2);background:var(--surface);color:var(--gold-dark); font-size:15px;line-height:1;transition:.2s; } .summary-qty button:hover{background:var(--gold);border-color:var(--gold);color:var(--on-gold)} .summary-qty i{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums} /* promo code + Apply */ .promo-row{ display:flex;align-items:center;gap:8px;padding:6px 6px 6px 16px; border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface); transition:border-color .2s; } .promo-row:focus-within{border-color:var(--gold)} .promo-row.is-on{border-color:var(--gold);background:var(--cream-light)} .promo-row input{ flex:1;min-width:0;border:0;background:none;outline:none; font-family:var(--sans);font-size:13.5px;color:var(--ink);letter-spacing:.06em; } .promo-row input::placeholder{color:var(--muted);letter-spacing:0} .promo-apply{ flex:none;padding:11px 22px;border-radius:var(--r-pill); background:var(--fill-dark);color:var(--on-fill); font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700; transition:.2s; } .promo-apply:hover{background:var(--gold-fill);color:var(--on-dark)} .promo-ok{ display:flex;align-items:center;gap:7px;margin-top:9px; font-size:12px;font-weight:600;color:var(--gold-dark); } .promo-ok .ico{width:15px;height:15px} /* accepted, but not taking anything off yet — the bag is under its minimum */ .promo-ok--wait{color:var(--muted)} .promo-ok--wait .ico{opacity:.5} /* totals, with a dotted leader between label and figure */ .summary-totals{margin:20px 0 20px;font-size:13.5px} .summary-totals>div{ display:flex;align-items:baseline;gap:10px;padding:9px 0; } .summary-totals dt{color:var(--body);flex:none} .summary-totals dt::after{ content:'';display:block;height:0; } .summary-totals>div::after{ content:'';flex:1;order:2;height:1px;margin-bottom:4px; background-image:linear-gradient(90deg,var(--line-2) 33%,transparent 0); background-size:6px 1px;background-repeat:repeat-x; } .summary-totals dd{order:3;flex:none;font-weight:600;color:var(--ink);white-space:nowrap} .summary-off dd{color:var(--gold-dark)} .summary-total{margin-top:2px} .summary-total dt{font-weight:700;color:var(--ink)} .summary-total dd{font-family:var(--serif);font-size:20px;color:var(--ink)} /* the one dark button on the page */ .btn--checkout{ background:var(--fill-dark);color:var(--on-fill);border-radius:var(--r-pill); padding:18px 30px;font-size:12px;letter-spacing:.18em; box-shadow:0 12px 26px rgba(36,31,22,.24); } .btn--checkout:hover{background:var(--fill-dark-2);transform:translateY(-2px);box-shadow:0 16px 32px rgba(36,31,22,.3)} .btn--checkout:disabled{background:var(--line-2);color:var(--muted);box-shadow:none;transform:none;cursor:not-allowed} @media (max-width:768px){ .summary-art{width:64px;height:64px} .summary-info b{font-size:14.5px} .summary-price{font-size:16px} .btn--checkout{padding:17px 24px} } .summary-price s{ font-family:var(--sans);font-size:12.5px;color:var(--muted); margin-right:6px;text-decoration-thickness:1px; } /* ========================================================================= Theme switch — light / dark Every control that flips the theme carries .js-theme, so one rule set dresses the icon wherever it sits: the header tools, the mobile app bar and the row in the menu. ========================================================================= */ /* Each control holds both marks and shows the one it would switch TO: a moon while the lights are on, a sun once they are off. */ .ico--sun{display:none} [data-theme="dark"] .ico--moon{display:none} [data-theme="dark"] .ico--sun{display:block} /* The app bar's tool row gained a third control, so on the narrowest phones the delivery line has to be willing to give ground. A flex item will not shrink below its content without min-width:0 — without this the row would push the bag button off the edge instead. */ .appbar-loc{min-width:0} .appbar-loc-value{overflow:hidden;white-space:nowrap} .appbar-loc-value .ico{flex:none} /* ---------- the row in the mobile menu ----------------------------------- */ .mnav-theme{ display:flex;align-items:center;gap:13px; padding:15px 22px;border-bottom:1px solid var(--line); } .mnav-theme-mark{ display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none; background:linear-gradient(150deg,var(--cream-light),var(--cream-deep)); color:var(--gold-dark); } .mnav-theme-mark .ico{width:18px;height:18px} .mnav-theme-id{min-width:0;flex:1} .mnav-theme-id b{ display:block;font-size:12px;letter-spacing:.13em;text-transform:uppercase; font-weight:700;color:var(--ink);line-height:1.4; } .mnav-theme-id small{display:block;font-size:11.5px;color:var(--muted)} /* ---------- the switch itself -------------------------------------------- */ .switch{ position:relative;width:48px;height:27px;flex:none;padding:0; border-radius:var(--r-pill);background:var(--line-2); transition:background .28s; } .switch::after{ content:'';position:absolute;top:3px;left:3px;width:21px;height:21px; border-radius:50%;background:var(--surface); box-shadow:0 2px 6px rgba(36,31,22,.28); transition:transform .3s cubic-bezier(.4,0,.2,1); } .switch[aria-checked="true"]{background:linear-gradient(135deg,var(--gold),var(--gold-deep))} .switch[aria-checked="true"]::after{transform:translateX(21px)}