/* =========================================================================
Cassaro Beauty — design system
Layout/components locked to the Behance reference; colour tokens are Cassaro Beauty.
========================================================================= */
:root {
/* brand — Cassaro Beauty (values from the brand guidelines deck) */
--green: #6F4A34; /* Cocoa — primary dark fill (was forest green) */
--green-dark: #241812; /* Cacao — deepest */
--green-light: #8A5D42; /* Cocoa +10% — hover */
--gold: #B8894F; /* Gilt — metallic accent */
--gold-light: #C9A784; /* Nude — accent hover / on-dark accent */
/* neutrals */
--ink: #241812; /* Cacao */
--body: #6B5B52;
--muted: #9A8A7E;
--placeholder: #B5A79B;
--line: #E7DCCD;
--section: #F4ECE1; /* Cream */
--shot: #EBCBAF; /* flat rim colour baked into every product photo */
--card: #FFFFFF;
--white: #FBF7F0; /* Porcelain — page ground */
/* status */
--star: #B8894F; /* Gilt */
--instock: #6F7A52; /* muted olive, reads as "available" without leaving the palette */
--sale: #6F4A34;
--danger: #8C3A2E; /* burgundy */
/* metrics — unchanged, design is locked */
--container: 1240px;
--radius-pill: 999px;
--radius-card: 16px;
--radius-sm: 10px;
--shadow-card: 0 2px 14px rgba(36,24,18,.06);
--shadow-pop: 0 18px 50px rgba(36,24,18,.14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--white);
color: var(--ink);
font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
font-size: 15px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, select, textarea { font: inherit; color: var(--ink); }
::placeholder { color: var(--placeholder); }
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.section { padding: 72px 0; }
.section--grey { background: var(--section); }
.gold { color: var(--gold); }
.green { color: var(--green); }
.center { text-align: center; }
/* ---------- Type ---------- */
h1, h2, h3, h4 { margin: 0; font-weight: 700; color: var(--ink); line-height: 1.22; }
h1 { font-size: 46px; }
h2 { font-size: 34px; }
h3 { font-size: 20px; }
p { margin: 0; color: var(--body); }
.eyebrow {
font-size: 14px; color: var(--body); text-align: center;
margin-bottom: 6px; position: relative;
}
.section-head { text-align: center; margin-bottom: 40px; }
.section-head h2 { font-size: 34px; }
.script { font-family: 'Sacramento', cursive; font-size: 30px; color: var(--ink); font-weight: 400; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 26px; border-radius: var(--radius-pill);
font-size: 14px; font-weight: 600; white-space: nowrap;
transition: background .25s, color .25s, border-color .25s;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-light); }
.btn--gold { background: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-light); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--green); color: var(--green); }
.btn--white { background: #fff; color: var(--ink); }
.btn--sm { padding: 9px 18px; font-size: 13px; }
.btn--block { width: 100%; }
.link-underline { font-size: 14px; font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
/* ---------- Announcement bar ---------- */
.announce {
background: var(--green); color: #fff; font-size: 13px;
}
.announce .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; }
.announce a { color: var(--gold-light); text-decoration: underline; text-underline-offset: 3px; }
.announce__social { display: flex; gap: 10px; }
.announce__social span {
width: 20px; height: 20px; border-radius: 50%; background: #fff; color: var(--green);
display: grid; place-items: center; font-size: 12px;
}
/* ---------- Header ---------- */
.header { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 44px; width: auto; display: block; }
.brand__mono { height: 34px !important; }
.footer .brand img { height: 74px; }
.brand__mark {
width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff;
display: grid; place-items: center; font-size: 16px;
}
.brand__dot { color: var(--green); }
.mainnav { display: flex; gap: 26px; font-size: 14px; font-weight: 500; }
.mainnav > li > a { padding: 24px 0; display: block; transition: color .2s; }
.mainnav > li > a:hover, .mainnav > li.is-active > a { color: var(--green); }
.icons { display: flex; align-items: center; gap: 18px; font-size: 20px; }
.icons a { position: relative; display: grid; place-items: center; transition: color .2s; }
.icons a:hover { color: var(--green); }
/* mega menu */
.has-mega { position: relative; }
.mega {
position: absolute; top: 100%; left: -40px; z-index: 70;
background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
padding: 28px 30px; display: none; gap: 44px;
grid-template-columns: repeat(3, minmax(120px, 1fr)) 190px;
}
.has-mega:hover .mega { display: grid; }
.mega h4 { font-size: 14px; margin-bottom: 14px; }
.mega li { margin-bottom: 9px; }
.mega li a { font-size: 13px; color: var(--body); transition: color .2s; }
.mega li a:hover { color: var(--green); }
.mega__promo {
border-radius: var(--radius-sm); overflow: hidden; position: relative;
background: var(--gold); color: #fff; text-align: center; padding: 18px 14px; min-height: 190px;
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.mega__promo small { font-size: 11px; opacity: .9; }
.mega__promo strong { font-size: 15px; line-height: 1.35; }
/* ---------- Category marquee ---------- */
.marquee { background: var(--green); color: #fff; overflow: hidden; }
.marquee__track {
display: flex; gap: 44px; align-items: center; white-space: nowrap;
padding: 13px 0; font-size: 14px; font-weight: 500;
width: max-content; animation: marquee 34s linear infinite;
}
.marquee__track span.leaf { color: var(--gold); }
@keyframes marquee { to { transform: translateX(-50%); } }
/* ---------- Product card ---------- */
.grid { display: grid; gap: 24px; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.pcard { position: relative; }
.pcard__media {
position: relative; border-radius: var(--radius-card); overflow: hidden;
aspect-ratio: 1/1; background: var(--section); margin-bottom: 12px;
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.pcard:hover .pcard__media img { transform: scale(1.05); }
.badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
background: var(--green); color: #fff; font-size: 11px; font-weight: 600;
padding: 5px 11px; border-radius: var(--radius-pill);
}
.pcard__tools {
position: absolute; top: 12px; right: 12px; z-index: 2;
display: flex; flex-direction: column; gap: 8px;
opacity: 0; transform: translateX(8px); transition: all .3s;
}
.pcard:hover .pcard__tools { opacity: 1; transform: none; }
.pcard__tools button {
width: 32px; height: 32px; border-radius: 50%; background: #fff; color: var(--ink);
display: grid; place-items: center; font-size: 16px; box-shadow: var(--shadow-card);
transition: background .2s, color .2s;
}
.pcard__tools button:hover { background: var(--green); color: #fff; }
.pcard__cat { font-size: 12px; color: var(--muted); }
.pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pcard__name { font-size: 15px; font-weight: 600; margin: 2px 0 6px; }
.rating { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; color: var(--body); white-space: nowrap; }
.rating .star { color: var(--star); font-size: 14px; font-variation-settings: "FILL" 1; }
.rating__n { font-weight: 600; color: var(--ink); margin-left: 2px; }
.price { font-size: 15px; font-weight: 600; color: var(--gold); }
.price del { color: var(--muted); font-weight: 400; margin-left: 6px; font-size: 13px; }
/* countdown strip inside a card */
.pcard__timer {
position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 2;
background: var(--green); color: #fff; border-radius: var(--radius-pill);
display: flex; justify-content: center; gap: 10px; padding: 7px 10px; font-size: 11px;
}
.pcard__timer b { display: block; font-size: 13px; text-align: center; }
.pcard__timer span { opacity: .75; }
/* ---------- Chips / filters ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 32px; }
.chip {
padding: 8px 18px; border-radius: var(--radius-pill); border: 1px solid var(--line);
font-size: 13px; background: #fff; transition: all .2s;
}
.chip:hover { border-color: var(--green); }
.chip.is-active { background: var(--green); color: #fff; border-color: var(--green); }
/* ---------- Category circles ---------- */
.cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.cat { text-align: center; }
.cat img {
width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; margin-bottom: 14px;
transition: transform .4s;
}
.cat:hover img { transform: scale(1.04); }
.cat strong { display: block; font-size: 15px; }
.cat small { color: var(--muted); font-size: 12px; }
/* ---------- Promo tiles ---------- */
.promo {
border-radius: var(--radius-card); overflow: hidden; position: relative;
min-height: 240px; display: flex; align-items: center; padding: 34px;
background-size: cover; background-position: center;
}
.promo__body { max-width: 55%; position: relative; z-index: 2; }
.promo .tag {
display: inline-block; background: var(--gold); color: #fff; font-size: 12px; font-weight: 600;
padding: 5px 14px; border-radius: var(--radius-pill); margin-bottom: 12px;
}
.promo h3 { font-size: 26px; margin-bottom: 8px; }
.promo p { font-size: 13px; margin-bottom: 18px; }
.promo--dark { background: var(--green); color: #fff; }
.promo--dark h3, .promo--dark p { color: #fff; }
/* ---------- Trust bar ---------- */
.trust { border-top: 1px solid var(--line); }
.trust .wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding-top: 34px; padding-bottom: 34px; }
.trust__item { display: flex; gap: 14px; align-items: center; justify-content: center; }
.trust__item .ico { font-size: 30px; color: var(--gold); }
.trust__item strong { display: block; font-size: 15px; }
.trust__item small { color: var(--muted); font-size: 12px; }
/* ---------- Newsletter ---------- */
.newsletter { background: var(--section); padding: 66px 0; text-align: center; }
.newsletter h2 { font-size: 30px; margin-bottom: 10px; }
.newsletter p { font-size: 13px; margin-bottom: 24px; }
.subscribe { display: flex; max-width: 470px; margin: 0 auto; gap: 10px; }
.subscribe input {
flex: 1; padding: 13px 22px; border-radius: var(--radius-pill);
border: 1px solid var(--line); background: #fff; outline: none;
}
.subscribe input:focus { border-color: var(--green); }
/* ---------- Footer ---------- */
.footer { background: var(--white); padding: 54px 0 0; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr; gap: 32px; }
.footer p { font-size: 13px; margin: 14px 0 18px; }
.footer h4 { font-size: 15px; margin-bottom: 16px; }
.footer li { margin-bottom: 10px; }
.footer li a, .footer address { font-size: 13px; color: var(--body); font-style: normal; line-height: 1.9; }
/* An inline anchor is only as tall as its text — 18px here, under the 24px
minimum touch target. The list already leaves 35px between rows, so the
padding buys a 26px target without moving anything. */
.footer li a { display: inline-block; padding: 4px 0; }
.footer li { margin-bottom: 6px; }
.footer li a:hover { color: var(--green); }
.socials { display: flex; gap: 10px; }
/* The share row's copy-link control is a button, not a link — it performs an
action rather than going anywhere — so it has to be styled alongside the
anchors or it renders as a bare browser button. */
.socials a,
.socials button {
width: 30px; height: 30px; border-radius: 50%; background: var(--section); color: var(--green);
display: grid; place-items: center; font-size: 15px; transition: background .2s, color .2s;
border: 0; padding: 0; cursor: pointer; font-family: inherit;
}
.socials a:hover,
.socials button:hover { background: var(--green); color: #fff; }
.footer__bar {
border-top: 1px solid var(--line); margin-top: 40px; padding: 20px 0;
display: flex; justify-content: space-between; font-size: 13px; color: var(--body);
}
.footer__bar .gold { font-weight: 500; }
/* ---------- Page hero (inner pages) ---------- */
.pagehead { background: var(--section); padding: 46px 0; text-align: center; }
.pagehead h1 { font-size: 36px; margin-bottom: 6px; }
.crumb { font-size: 13px; color: var(--body); }
.crumb a:hover { color: var(--green); }
.crumb b { font-weight: 500; color: var(--ink); }
/* A product pagehead announces the product instead of repeating the path that
led to it. The plain .pagehead carries an h1 on every other inner page, but
product pages kept their title down in the buy column, which left this band
holding nothing but a breadcrumb. The band carries the brand alone; the
product name is the .pdp__title beside the photograph, which is the page's
h1, so the document still has exactly one. */
.pagehead--product {
padding: 58px 0 52px;
background:
radial-gradient(120% 140% at 50% 0%, #FBF3E9 0%, var(--section) 62%);
border-bottom: 1px solid var(--line);
}
/* Wide-tracked caps, not the Sacramento script used elsewhere: the catalogue's
brands include SKIN1004, COSRX and AXIS-Y, and acronyms and digits set in a
handwriting face are close to unreadable. Caps also match the brand book's
own display treatment. */
.pagehead--product .pagehead__brand {
/* This is the band's whole title now, so it is set at display size rather
than as an eyebrow above something else. The tracking stays wide — the
line is one or two words and needs the width to hold the band. */
font-size: clamp(24px, 3.2vw, 38px);
line-height: 1.1;
font-weight: 500;
letter-spacing: .3em;
text-indent: .3em; /* the last letter's tracking, re-centred */
text-transform: uppercase;
color: var(--gold);
margin: 0;
}
/* A short gilt rule closes the block so the band reads as composed rather than
as a heading that ran out of page. */
.pagehead--product .pagehead__rule {
width: 54px; height: 2px; margin: 20px auto 0;
background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
@media (max-width: 768px) {
.pagehead--product { padding: 34px 0 30px; }
.pagehead--product .pagehead__rule { margin-top: 14px; }
}
/* A cover pagehead runs a photograph edge to edge behind the title. The shot
carries its own empty left third, so the copy sits there over a scrim in the
photo's own brown rather than a flat band. */
.pagehead--cover {
position: relative; overflow: hidden;
padding: 0; text-align: left;
/* Same band as the homepage hero cover (.hero--cover) so page covers and the
homepage read at one scale. */
height: 53.35vw;
min-height: 520px;
max-height: 720px;
display: flex; align-items: center;
background: #5F311A;
}
/* Page covers run under the announcement bar and the floating pill header,
exactly as the homepage hero does — same pull-up, same top scrim — so the
photograph starts at the very top of the page with no white band above it. */
body:has(.pagehead--cover) .announce {
position: relative; z-index: 40;
background: transparent;
}
body:has(.pagehead--cover) .header { z-index: 60; }
.pagehead--cover {
margin-top: -136px;
padding-top: 136px;
}
.pagehead--cover::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 210px;
background: linear-gradient(180deg, rgba(36,24,18,.62) 0%, rgba(36,24,18,.28) 55%, rgba(36,24,18,0) 100%);
z-index: 2; pointer-events: none;
}
@media (max-width: 1024px) {
.pagehead--cover { margin-top: -120px; padding-top: 120px; }
.pagehead--cover::before { height: 170px; }
}
.pagehead--cover .pagehead__bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
/* Anchor the top so the crop takes from the shoulders, never the face. */
object-position: right top;
}
/* Some page covers are pale still-life photographs rather than the dark
portraits the shop and skincare covers use, and white type over those is
unreadable. This modifier lays a scrim down the left of the band — under the
copy, fading out before the products — so a light photograph can still carry
a title. */
.pagehead--cover-ink::after {
content: "";
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(100deg,
rgba(36,24,18,.74) 0%, rgba(36,24,18,.52) 34%, rgba(36,24,18,.12) 62%, rgba(36,24,18,0) 82%);
}
@media (max-width: 700px) {
/* Narrow screens put the copy over the middle of the frame, so the scrim has
to cover the whole band rather than a left column of it. */
.pagehead--cover-ink::after {
background: linear-gradient(180deg, rgba(36,24,18,.30) 0%, rgba(36,24,18,.62) 100%);
}
}
.pagehead--cover .wrap { position: relative; z-index: 2; }
.pagehead--cover h1 { color: #fff; }
.pagehead--cover .crumb,
.pagehead--cover .crumb a { color: rgba(255,255,255,.78); }
.pagehead--cover .crumb b { color: #fff; }
.pagehead--cover .crumb a:hover { color: var(--gold-light); }
@media (max-width: 1024px) {
.pagehead--cover { height: 62vw; min-height: 380px; max-height: 560px; }
}
/* ---------- Forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 7px; }
.field label .req { color: var(--danger); }
.field .hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.input, select.input, textarea.input {
width: 100%; padding: 12px 20px; border: 1px solid var(--line);
border-radius: var(--radius-pill); background: #fff; outline: none; transition: border-color .2s;
}
textarea.input { border-radius: var(--radius-card); resize: vertical; min-height: 120px; }
.input:focus { border-color: var(--green); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
/* ---------- Accordion ---------- */
.acc { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; overflow: hidden; background: #fff; }
.acc__head {
width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px;
padding: 17px 22px; text-align: left; font-size: 15px; font-weight: 500;
}
.acc__body { padding: 0 22px; max-height: 0; overflow: hidden; opacity: 0; transition: all .35s; }
.acc__body p { font-size: 13px; }
.acc.is-open { background: var(--green); border-color: var(--green); color: #fff; }
.acc.is-open .acc__body { max-height: 320px; opacity: 1; padding-bottom: 18px; }
.acc.is-open .acc__body p { color: rgba(255,255,255,.82); }
.acc__sign { font-size: 20px; line-height: 1; }
/* ---------- Misc shared ---------- */
.ask {
background: var(--green); color: #fff; border-radius: var(--radius-card);
padding: 30px 26px; text-align: center;
}
.ask .bubble { font-size: 30px; color: var(--gold-light); }
.ask strong { display: block; margin: 10px 0 6px; font-size: 15px; }
.ask small { font-size: 12px; color: rgba(255,255,255,.72); display: block; margin-bottom: 16px; line-height: 1.6; }
.statbar { background: var(--green); color: #fff; border-radius: var(--radius-card); display: grid; grid-template-columns: repeat(3,1fr); padding: 20px 26px; }
.statbar div { text-align: left; }
.statbar b { display: block; font-size: 26px; color: var(--gold-light); }
.statbar small { font-size: 12px; color: rgba(255,255,255,.8); }
.leafbg { position: relative; }
/* ---------- Mobile ---------- */
.burger { display: none; font-size: 24px; }
@media (max-width: 1024px) {
.grid--4 { grid-template-columns: repeat(2, 1fr); }
.cats { grid-template-columns: repeat(3, 1fr); }
.footer__grid { grid-template-columns: 1fr 1fr 1fr; }
.mainnav, .announce .wrap > :not(:first-child) { display: none; }
.burger { display: block; }
}
@media (max-width: 720px) {
h1 { font-size: 32px; } h2 { font-size: 25px; }
.section { padding: 48px 0; }
.grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
.cats { grid-template-columns: repeat(2, 1fr); }
.trust .wrap { grid-template-columns: 1fr; }
.footer__grid { grid-template-columns: 1fr 1fr; }
.row2 { grid-template-columns: 1fr; }
.promo__body { max-width: 100%; }
.subscribe { flex-direction: column; }
.footer__bar { flex-direction: column; gap: 8px; }
}
/* =========================================================================
Home page components
========================================================================= */
/* ---------- Hero ---------- */
.hero { background: linear-gradient(180deg,var(--white), var(--section)); overflow: hidden; }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; padding-top: 40px; padding-bottom: 0; }
.hero__pill {
display: inline-flex; align-items: center; gap: 8px; background: #fff;
border-radius: var(--radius-pill); padding: 8px 18px; font-size: 13px; font-weight: 500;
box-shadow: var(--shadow-card); margin-bottom: 20px;
}
.hero__pill .material-symbols-outlined { font-size: 17px; color: var(--green); }
.hero h1 { font-size: 52px; margin-bottom: 16px; }
.hero p { font-size: 14px; margin-bottom: 26px; }
.hero__cta { display: flex; align-items: center; gap: 26px; }
.hero__media { position: relative; align-self: end; }
.hero__media img { width: 100%; height: 430px; object-fit: cover; object-position: top center; }
.hero__seal {
position: absolute; top: 10px; right: 6px; width: 78px; height: 78px; border-radius: 50%;
background: var(--green); color: #fff; display: grid; place-items: center; text-align: center;
font-size: 11px; font-weight: 600; letter-spacing: .08em; border: 3px solid var(--gold);
}
.hero__chip {
position: absolute; display: inline-flex; align-items: center; gap: 7px; background: #fff;
border-radius: var(--radius-pill); padding: 7px 15px; font-size: 12px; font-weight: 500;
box-shadow: var(--shadow-card); white-space: nowrap;
}
.hero__chip .material-symbols-outlined { font-size: 16px; color: var(--green); }
.hero__chip--a { top: 46%; left: -6%; }
.hero__chip--b { bottom: 18%; right: -4%; }
/* ---------- About strip ---------- */
.about-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.about-strip__gallery {
position: relative; display: grid; grid-template-columns: 1fr 1fr;
grid-template-rows: 190px 190px; gap: 14px;
}
.about-strip__gallery img { width: 100%; height: 100%; object-fit: cover; }
/* The four tiles carry the rounded shape, so they have to clip their own image
and paint the product ground; without overflow the letterboxed shot spills
past the corners and reads as overlapping tiles. */
.about-strip__gallery > div {
position: relative; overflow: hidden; background: var(--shot);
}
.about-strip__gallery .g1 { border-radius: 90px 16px 16px 16px; }
.about-strip__gallery .g2 { border-radius: 16px 90px 16px 16px; }
.about-strip__gallery .g3 { border-radius: 16px 16px 16px 90px; }
.about-strip__gallery .g4 { border-radius: 16px 16px 90px 16px; }
.about-strip__seal {
position: absolute; inset: 0; margin: auto; width: 74px; height: 74px; border-radius: 50%;
background: var(--green); color: #fff; display: grid; place-items: center; text-align: center;
font-size: 10px; font-weight: 600; letter-spacing: .08em; border: 3px solid var(--gold); z-index: 2;
}
/* ---------- Summer glow deals ---------- */
.deals { display: grid; grid-template-columns: 220px 1fr 220px; gap: 24px; align-items: stretch; }
.deals__side { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-card); }
.deals__mid {
background: var(--section); border-radius: var(--radius-card);
padding: 46px 30px; text-align: center;
}
.countdown { display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 22px; }
.countdown b { display: block; font-size: 30px; }
.countdown small { font-size: 11px; color: var(--muted); }
.countdown > span { font-size: 24px; color: var(--gold); }
/* ---------- Deal cards ---------- */
.dealcard {
display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: center;
background: var(--section); border-radius: var(--radius-card); padding: 18px;
}
.dealcard__media { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1/1; }
.dealcard__media img { width: 100%; height: 100%; object-fit: cover; }
/* ---------- New arrivals ---------- */
.arrivals { display: grid; grid-template-columns: 260px 1fr; gap: 24px; align-items: start; }
.arrivals__feature {
border-radius: var(--radius-card); min-height: 100%; padding: 24px;
display: flex; align-items: flex-end; background-size: cover; background-position: center;
}
/* ---------- Testimonials ---------- */
.avatars { display: flex; justify-content: center; gap: 14px; margin: 26px 0 30px; }
.avatars img { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; opacity: .75; }
.avatars img.is-active { width: 76px; height: 76px; opacity: 1; border: 3px solid var(--gold); margin-top: -11px; }
.quote { position: relative; padding: 0 80px; }
.quote__nav {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%; color: #fff; display: grid; place-items: center;
}
.quote__nav--prev { left: 0; background: var(--gold); }
.quote__nav--next { right: 0; background: var(--green); }
.stars .star { color: var(--star); font-size: 20px; vertical-align: middle; }
/* ---------- Blog post card ---------- */
.post__media { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/3; margin-bottom: 14px; }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.post:hover .post__media img { transform: scale(1.04); }
.post__media .badge { top: auto; bottom: 12px; }
.post__meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.post__meta .dot { color: var(--gold); font-size: 9px; vertical-align: middle; }
.post__title { font-size: 17px; margin-bottom: 10px; }
/* ---------- Instagram grid ---------- */
.insta { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 140px; gap: 14px; }
.insta img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.insta__big { grid-column: span 2; grid-row: span 2; }
/* ---------- FAQ layout ---------- */
.faq-layout { display: grid; grid-template-columns: 1.4fr .8fr; gap: 30px; align-items: start; }
@media (max-width: 1024px) {
.hero__inner, .about-strip, .arrivals, .faq-layout { grid-template-columns: 1fr; }
.deals { grid-template-columns: 1fr; }
/* Stacked, these go full width. A fixed 200px band against a square packshot
is a violent crop, so give them a shape instead and let the shot sit whole
on its own ground. */
.deals__side {
height: auto;
aspect-ratio: 4 / 3;
background: var(--shot);
border-radius: var(--radius-card);
overflow: hidden;
}
.deals__side .ph-img,
.deals__side img {
width: 100%; height: 100%;
object-fit: contain;
}
.insta { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.hero h1 { font-size: 34px; }
.hero__chip { display: none; }
.dealcard { grid-template-columns: 1fr; }
.quote { padding: 0; }
.quote__nav { position: static; transform: none; display: inline-grid; margin: 14px 6px 0; }
.insta { grid-template-columns: repeat(2, 1fr); }
}
/* =========================================================================
Shop + Product detail
========================================================================= */
.shop-layout { display: grid; grid-template-columns: 250px 1fr; gap: 40px; align-items: start; }
.filters__title { font-size: 17px; margin-bottom: 20px; }
.filters__group { margin-bottom: 26px; }
.filters__group h4 { font-size: 14px; margin-bottom: 12px; }
.check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--body); margin-bottom: 9px; cursor: pointer; }
.check input { accent-color: var(--green); width: 15px; height: 15px; }
.range { width: 100%; accent-color: var(--green); }
.stars-sm { color: var(--star); letter-spacing: 1px; }
.stars-off { color: var(--line); letter-spacing: 1px; }
.shop-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 13px; color: var(--body); margin-bottom: 16px; }
.sortby { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.input--sm { padding: 7px 16px; width: auto; font-size: 13px; }
.shop-active { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 13px; color: var(--body); margin-bottom: 24px; }
.pillfilter { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 12px; background: #fff; }
.pillfilter span { color: var(--muted); margin-left: 4px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 40px; }
.pager button { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; color: var(--body); }
.pager button.is-active { background: var(--green); color: #fff; }
/* Product detail */
.pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
/* Packshots are square, so a 4/3 stage letterboxed every one of them with
bars down both sides. A square stage lets the photograph fill it. */
.pdp__stage { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--section); aspect-ratio: 1/1; }
.pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.pdp__arrow {
position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px;
border-radius: 50%; background: var(--green); color: #fff; font-size: 20px; line-height: 1;
}
.pdp__arrow--prev { left: 12px; } .pdp__arrow--next { right: 12px; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 12px; }
.pdp__thumbs button { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 1/1; border: 2px solid transparent; }
.pdp__thumbs button.is-active { border-color: var(--green); }
.pdp__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pdp__title { font-size: 30px; margin: 4px 0 10px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tag-stock { font-size: 11px; font-weight: 500; color: var(--instock); background: #ECEFE3; border-radius: var(--radius-pill); padding: 4px 12px; }
.pdp__rating { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--body); margin-bottom: 10px; }
.stars-inline { display: inline-flex; }
.stars-inline .star { color: var(--star); font-size: 18px; font-variation-settings: "FILL" 1; }
.pdp__rating b { color: var(--ink); font-weight: 600; }
.muted { color: var(--muted); }
.pdp__price { font-size: 26px; font-weight: 700; color: var(--gold); margin-bottom: 14px; }
.pdp__price del { font-size: 17px; color: var(--muted); font-weight: 400; margin-left: 8px; }
.pdp__sizes { margin: 22px 0; }
.pdp__sizes h4 { font-size: 14px; margin-bottom: 12px; }
.pdp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 26px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-pill); overflow: hidden; }
.qty button { width: 38px; height: 42px; font-size: 17px; }
.qty input { width: 44px; height: 42px; border: 0; text-align: center; outline: none; }
.iconbtn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; }
.iconbtn:hover { border-color: var(--green); color: var(--green); }
.pdp__meta { margin: 0; font-size: 13px; color: var(--body); }
.pdp__meta div { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pdp__meta dt { font-weight: 500; color: var(--ink); }
.pdp__meta dd { margin: 0; }
.socials--inline a,
.socials--inline button { width: 26px; height: 26px; font-size: 13px; }
.tabs { display: flex; gap: 34px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.tab { padding: 12px 0; font-size: 15px; color: var(--body); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab.is-active { color: var(--ink); font-weight: 600; border-bottom-color: var(--green); }
.ticks { font-size: 14px; color: var(--body); }
.ticks li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.ticks li::before { content: "◗"; position: absolute; left: 0; color: var(--gold); }
.spec { width: 100%; border-collapse: collapse; font-size: 13px; }
.spec th { background: var(--green); color: #fff; text-align: left; padding: 12px 18px; font-weight: 600; }
.spec th:first-child { border-radius: var(--radius-sm) 0 0 0; }
.spec th:last-child { border-radius: 0 var(--radius-sm) 0 0; }
.spec td { padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--body); }
.reviewsum { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: center; }
.reviewsum__score { text-align: center; border-right: 1px solid var(--line); }
.reviewsum__score b { font-size: 40px; }
.reviewsum__score span { font-size: 13px; color: var(--body); }
.reviewsum__score small { font-size: 12px; color: var(--muted); }
.reviewsum__bars div { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; font-size: 12px; color: var(--body); }
.reviewsum__bars span { width: 46px; }
.reviewsum__bars i { flex: 1; height: 7px; border-radius: var(--radius-pill); background: var(--line); position: relative; }
.reviewsum__bars i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--star); }
.review { border-bottom: 1px solid var(--line); padding: 20px 0; }
.review header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review header img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.review header strong { display: block; font-size: 14px; }
.review header small { font-size: 11px; color: var(--muted); }
.review header time { margin-left: auto; font-size: 12px; color: var(--muted); }
.review h4 { font-size: 14px; margin-bottom: 6px; }
.review p { font-size: 13px; margin-bottom: 10px; }
.review__shots { display: flex; gap: 10px; margin-top: 12px; }
.review__shots img { width: 78px; height: 78px; border-radius: var(--radius-sm); object-fit: cover; }
.addreview { margin-top: 34px; }
.dropzone {
border: 1px dashed var(--line); border-radius: var(--radius-card); padding: 26px;
display: flex; flex-direction: column; align-items: center; gap: 5px;
font-size: 13px; color: var(--body);
}
.dropzone .material-symbols-outlined { font-size: 26px; color: var(--gold); }
@media (max-width: 1024px) {
.shop-layout, .pdp, .reviewsum { grid-template-columns: 1fr; }
.reviewsum__score { border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 16px; }
}
/* =========================================================================
Cart / checkout / order / wishlist
========================================================================= */
.cart-layout { display: grid; grid-template-columns: 1fr 330px; gap: 34px; align-items: start; }
.linetable { width: 100%; border-collapse: collapse; font-size: 14px; }
.linetable thead th {
background: var(--green); color: #fff; text-align: left; font-weight: 600;
padding: 14px 18px; font-size: 13px;
}
.linetable thead th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.linetable thead th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.linetable td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--body); vertical-align: middle; }
.linetable .strong { color: var(--ink); font-weight: 600; }
.linetable__prod { display: flex; align-items: center; gap: 14px; }
.linetable__prod img { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; }
.linetable__prod strong { display: block; font-size: 14px; color: var(--ink); }
.linetable__prod small { color: var(--muted); font-size: 12px; }
.linetable--plain thead th { background: transparent; color: var(--ink); border-bottom: 1px solid var(--line); }
.linetable__total td { font-weight: 700; color: var(--ink); border-bottom: 0; }
.rm { color: var(--muted); font-size: 18px; line-height: 1; }
.rm:hover { color: var(--danger); }
.instock { color: var(--instock); }
.cart-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }
.summary { background: var(--section); border-radius: var(--radius-card); padding: 24px; }
.summary h3 { font-size: 17px; margin-bottom: 16px; }
.summary dl { margin: 0; }
.summary dl div { display: flex; justify-content: space-between; font-size: 13px; color: var(--body); margin-bottom: 10px; }
.summary__total {
display: flex; justify-content: space-between; align-items: center;
border-top: 1px solid var(--line); padding-top: 14px; margin: 14px 0 18px;
}
.summary__total b { font-size: 22px; }
.radios { display: flex; flex-wrap: wrap; gap: 14px; }
.radio, .paymethod {
display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--body);
border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 12px 18px; cursor: pointer;
}
.radio input, .paymethod input { accent-color: var(--green); width: 16px; height: 16px; }
.paymethod { margin-bottom: 12px; }
.paymethod--card { flex-direction: column; align-items: stretch; border-radius: var(--radius-card); }
.paymethod__head { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.paymethod__body { padding-top: 18px; }
.pm-logo {
width: 32px; height: 22px; border-radius: 4px; display: grid; place-items: center;
font-size: 10px; font-weight: 700; color: #fff;
}
/* Card-scheme and wallet badges were removed with the card checkout: this
site takes bank transfer / EFT only and must not imply otherwise. */
.pm-logo--cod { background: var(--green); }
.tickmark {
width: 62px; height: 62px; border-radius: 50%; background: var(--gold); color: #fff;
display: inline-grid; place-items: center; font-size: 32px;
}
.orderbar {
background: var(--green); color: #fff; border-radius: var(--radius-card);
display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 20px 26px; margin-bottom: 26px;
}
.orderbar div small { display: block; font-size: 11px; color: rgba(255,255,255,.65); }
.orderbar div strong { font-size: 14px; }
.orderbar .btn { margin-left: auto; }
.panel { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px 24px; }
.panel__head { font-size: 16px; margin-bottom: 12px; }
/* Banking details, order-completed only. The figures are read off the screen
and typed into a banking app, so they are set larger than body copy and the
account number is spaced to stop digits running together. */
.bankbox__list { margin: 0; }
.bankbox__list > div {
display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline;
padding: 10px 0; border-bottom: 1px solid var(--line);
}
.bankbox__list > div:last-child { border-bottom: 0; }
.bankbox__list dt {
flex: 0 0 150px; font-size: 12px; letter-spacing: .08em;
text-transform: uppercase; color: var(--muted);
}
.bankbox__list dd {
margin: 0; font-size: 17px; font-weight: 600; color: var(--ink);
font-variant-numeric: tabular-nums; letter-spacing: .04em;
}
.bankbox__note { font-size: 12px; color: var(--muted); margin: 14px 0 0; line-height: 1.7; }
@media (max-width: 560px) {
.bankbox__list dt { flex-basis: 100%; }
}
/* Order status stepper */
.steps { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0; }
.steps li { text-align: center; position: relative; font-size: 12px; color: var(--muted); }
.steps__ico { display: block; margin: 0 auto 8px; font-size: 26px; color: var(--muted); }
.steps li b { display: block; font-size: 13px; color: var(--ink); margin-bottom: 26px; }
.steps li small { display: block; color: var(--body); }
.steps li i {
position: absolute; top: 62px; left: 50%; width: 100%; height: 3px; background: var(--line);
}
.steps li.is-done .steps__ico { color: var(--green); }
.steps li.is-done i { background: var(--green); }
.steps li::after {
content: ""; position: absolute; top: 57px; left: 50%; transform: translateX(-50%);
width: 14px; height: 14px; border-radius: 50%; background: var(--line); z-index: 2;
}
.steps li.is-done::after { background: var(--green); }
/* =========================================================================
Contact / FAQs / 404
========================================================================= */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: start; }
.contact-photo img { border-radius: var(--radius-card); width: 100%; height: 100%; object-fit: cover; max-height: 470px; }
.infocard { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px; text-align: center; }
.infocard__ico {
width: 44px; height: 44px; border-radius: 50%; background: var(--green); color: #fff;
display: grid; place-items: center; margin: 0 auto 12px; font-size: 20px;
}
.infocard strong { display: block; margin-bottom: 6px; }
.infocard small { color: var(--body); font-size: 12px; line-height: 1.7; }
.mapstrip { width: 100%; height: 260px; object-fit: cover; }
.faqnav { display: flex; flex-direction: column; gap: 10px; }
.faqnav button {
border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 20px;
text-align: left; font-size: 14px; background: #fff;
}
.faqnav button.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.err404 {
font-size: 150px; font-weight: 700; line-height: 1; color: var(--green);
background: linear-gradient(120deg, var(--green), var(--gold));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
/* =========================================================================
About
========================================================================= */
.vmcard { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 26px; }
.vmcard__ico {
width: 40px; height: 40px; border-radius: 50%; background: var(--green); color: #fff;
display: grid; place-items: center; font-size: 19px; margin-bottom: 14px;
}
.vmcard h3 { font-size: 17px; margin-bottom: 10px; }
.vmcard p { font-size: 13px; }
.videoblock { position: relative; border-radius: var(--radius-card); overflow: hidden; }
.videoblock img { width: 100%; height: 340px; object-fit: cover; }
.videoblock__play {
position: absolute; inset: 0; margin: auto; width: 62px; height: 62px; border-radius: 50%;
background: rgba(255,255,255,.9); color: var(--green); display: grid; place-items: center; font-size: 30px;
}
.statbar--4 { grid-template-columns: repeat(4, 1fr); border-radius: 0 0 var(--radius-card) var(--radius-card); margin-top: -1px; }
.member { text-align: center; }
.member img { width: 100%; aspect-ratio: 3/4; object-fit: cover; border-radius: var(--radius-card); margin-bottom: 12px; }
.member strong { display: block; font-size: 15px; }
.member small { color: var(--muted); font-size: 12px; }
.award { display: grid; grid-template-columns: 92px 1fr; gap: 18px; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 20px; }
.award__badge {
width: 92px; height: 92px; border-radius: 50%; border: 3px double var(--gold); color: var(--green);
display: grid; place-items: center; text-align: center; font-size: 8px; line-height: 1.5; font-weight: 600;
}
.award__badge b { font-size: 11px; }
.award small { color: var(--muted); font-size: 12px; }
.award h3 { font-size: 16px; margin: 3px 0 6px; }
.award p { font-size: 12px; }
/* =========================================================================
Blog
========================================================================= */
.blog-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
.bloglist { display: grid; gap: 34px; }
.bloglist .post__media { aspect-ratio: 16/9; }
.blogside { display: grid; gap: 24px; }
.searchbox { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px 6px 4px 16px; }
.searchbox input { flex: 1; border: 0; outline: none; padding: 9px 0; background: none; }
.sidebox { border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; }
.sidebox h4 { font-size: 15px; margin-bottom: 14px; border-left: 3px solid var(--gold); padding-left: 10px; }
.catlist li a { display: block; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 16px; font-size: 13px; margin-bottom: 9px; }
.catlist li a:hover { border-color: var(--green); color: var(--green); }
.recent { display: grid; grid-template-columns: 54px 1fr; gap: 12px; margin-bottom: 14px; align-items: center; }
.recent img { width: 54px; height: 54px; border-radius: var(--radius-sm); object-fit: cover; }
.recent strong { font-size: 12px; display: block; line-height: 1.5; }
.recent small { font-size: 11px; color: var(--muted); }
.sidepromo {
border-radius: var(--radius-card); background-size: cover; background-position: center;
min-height: 240px; padding: 22px; color: #fff; display: flex; flex-direction: column;
justify-content: flex-end; align-items: center; text-align: center; gap: 8px;
}
.sidepromo small { font-size: 11px; opacity: .85; }
.sidepromo strong { font-size: 15px; line-height: 1.4; }
.bd-hero { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-card); }
.bd-author { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; }
.bd-author img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.bd-author strong { display: block; font-size: 13px; }
.bd-author small { font-size: 12px; color: var(--muted); }
.bd-body { display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start; }
.bd-share { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: .1em; color: var(--muted); }
.bd-share a { width: 32px; height: 32px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; font-size: 15px; }
.alsoread { background: var(--green); border-radius: var(--radius-sm); padding: 18px 22px; }
.alsoread small { color: var(--gold-light); font-size: 12px; display: block; margin-bottom: 4px; }
.alsoread a { color: #fff; font-size: 14px; border-left: 2px solid var(--gold); padding-left: 10px; }
.numcard b { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gold); color: #fff; font-size: 13px; margin-bottom: 10px; }
.numcard h4 { font-size: 14px; margin-bottom: 8px; }
.numcard p { font-size: 12px; }
.authorbox { background: var(--green); border-radius: var(--radius-card); padding: 22px; display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; }
.authorbox img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; }
.authorbox p { color: rgba(255,255,255,.8); font-size: 12px; margin-top: 6px; }
.toc li { margin-bottom: 10px; }
.toc a { font-size: 12px; color: var(--body); }
.toc a:hover { color: var(--green); }
/* =========================================================================
My Account
========================================================================= */
.acct { display: grid; grid-template-columns: 230px 1fr; gap: 34px; align-items: start; }
.acctnav { display: grid; gap: 10px; }
.acctnav__item { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 18px; font-size: 14px; background: #fff; }
.acctnav__item.is-active { background: var(--green); color: #fff; border-color: var(--green); }
.acctnav__item:hover:not(.is-active) { border-color: var(--green); color: var(--green); }
.avatar-edit { position: relative; width: 92px; margin-bottom: 22px; }
.avatar-edit img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; }
.avatar-edit button {
position: absolute; right: 0; bottom: 4px; width: 28px; height: 28px; border-radius: 50%;
background: var(--green); color: #fff; display: grid; place-items: center; border: 2px solid #fff;
}
.ordercard { border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; margin-bottom: 20px; }
.ordercard__head { background: var(--green); color: #fff; display: flex; flex-wrap: wrap; gap: 26px; padding: 14px 20px; }
.ordercard__head small { display: block; font-size: 11px; color: rgba(255,255,255,.65); }
.ordercard__head strong { font-size: 13px; }
.ordercard table { padding: 0 8px; }
.ordercard__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px 20px; font-size: 13px; color: var(--body); }
.statuspill { border-radius: var(--radius-pill); padding: 4px 12px; font-size: 11px; font-weight: 600; }
.statuspill--accepted { background: #F6EBDA; color: var(--gold); }
.statuspill--delivered { background: #ECEFE3; color: var(--instock); }
.danger { color: var(--danger); }
.addressrow { display: flex; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px 20px; margin-bottom: 12px; }
.addressrow strong { display: block; font-size: 14px; }
.addressrow small { font-size: 12px; color: var(--body); }
.addressrow__act { display: flex; gap: 14px; font-size: 13px; white-space: nowrap; }
.pwfield { position: relative; }
.pwfield button { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--muted); }
@media (max-width: 1024px) {
.cart-layout, .contact-layout, .blog-layout, .acct { grid-template-columns: 1fr; }
.acctnav { grid-template-columns: repeat(2, 1fr); }
.steps { grid-template-columns: repeat(2, 1fr); gap: 24px; }
.steps li i, .steps li::after { display: none; }
.steps li b { margin-bottom: 6px; }
.statbar--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.bd-body { grid-template-columns: 1fr; }
.bd-share { flex-direction: row; }
}
@media (max-width: 720px) {
.linetable thead { display: none; }
.linetable td { display: block; border-bottom: 0; padding: 6px 12px; }
.linetable tbody tr { display: block; border-bottom: 1px solid var(--line); padding: 12px 0; }
.award { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.err404 { font-size: 92px; }
}
/* ---------- Labelled image placeholders (temporary, until final imagery lands) --
Sits inside the existing containers so every box, ratio and card size is
preserved exactly. Swap each .ph for an ![]()
when the approved image arrives. */
.ph {
width: 100%; height: 100%;
background: var(--section);
border: 1px dashed var(--line);
display: flex; align-items: center; justify-content: center;
text-align: center; padding: 12px;
}
.ph span {
font-size: 11px; line-height: 1.5; letter-spacing: .04em;
color: var(--muted); max-width: 90%;
}
/* containers that size themselves from the placeholder rather than the reverse */
.cat .ph { height: auto; aspect-ratio: 1/1; border-radius: 50%; margin-bottom: 14px; }
.hero__media .ph { height: 430px; }
.deals__side .ph, .videoblock .ph { border-radius: var(--radius-card); }
.videoblock .ph { height: 340px; }
.contact-photo .ph { border-radius: var(--radius-card); height: 470px; }
.bd-hero .ph { height: 400px; border-radius: var(--radius-card); }
.member .ph { height: auto; aspect-ratio: 3/4; border-radius: var(--radius-card); margin-bottom: 12px; }
.insta .ph, .review__shots .ph, .pdp__thumbs .ph { border-radius: var(--radius-sm); }
.blog-layout .grid .ph { height: 220px; border-radius: var(--radius-card); }
/* small fixed-size slots */
.linetable__prod .ph { width: 56px; height: 56px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.recent .ph { width: 54px; height: 54px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.avatar-edit .ph { width: 92px; height: 92px; border-radius: 50%; }
.bd-author .ph, .review header .ph, .authorbox .ph { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
/* full-bleed background placeholders sit behind their copy */
.promo, .arrivals__feature, .sidepromo, .mega__promo { position: relative; }
.ph--promo {
position: absolute; inset: 0; z-index: 0; border: 0;
align-items: flex-end; justify-content: flex-end; padding: 10px 14px;
}
.ph--promo span { font-size: 10px; opacity: .8; }
.promo__body { position: relative; z-index: 2; }
.promo--dark .ph--promo { background: var(--green); }
.promo--dark .ph--promo span { color: rgba(255,255,255,.6); }
.arrivals__feature .ph--promo, .sidepromo .ph--promo { background: var(--green); }
.arrivals__feature .ph--promo span, .sidepromo .ph--promo span { color: rgba(255,255,255,.6); }
.mega__promo .ph--promo { background: var(--gold); }
.mega__promo .ph--promo span { color: rgba(255,255,255,.7); }
.mega__promo small, .mega__promo strong, .mega__promo .btn { position: relative; z-index: 2; }
/* Real imagery drops into the same slots the placeholders occupied. */
/* Images are wrapped in to offer a WebP source. A picture box is
inline and shrink-wraps, which would leave every .ph-img sizing against it
instead of the card, thumbnail or hero it is meant to fill. display:contents
removes that box from layout so the img stays a child of its real container. */
picture { display: contents; }
.ph-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat .ph-img { height: auto; aspect-ratio: 1/1; border-radius: 50%; margin-bottom: 14px; }
.hero__media .ph-img { height: 430px; }
.deals__side .ph-img, .videoblock .ph-img { border-radius: var(--radius-card); }
.videoblock .ph-img { height: 340px; }
.contact-photo .ph-img { border-radius: var(--radius-card); height: 470px; }
.bd-hero .ph-img { height: 400px; border-radius: var(--radius-card); }
.member .ph-img { height: auto; aspect-ratio: 3/4; border-radius: var(--radius-card); margin-bottom: 12px; }
.insta .ph-img, .review__shots .ph-img, .pdp__thumbs .ph-img { border-radius: var(--radius-sm); }
.linetable__prod .ph-img { width: 56px; height: 56px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.recent .ph-img { width: 54px; height: 54px; border-radius: var(--radius-sm); flex: 0 0 auto; }
.avatar-edit .ph-img { width: 92px; height: 92px; border-radius: 50%; }
.bd-author .ph-img, .review header .ph-img, .authorbox .ph-img { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
/* background-style slots: image sits behind the copy, dimmed for legibility */
img.ph--promo { position: absolute; inset: 0; z-index: 0; }
.promo:not(.promo--dark) img.ph--promo { opacity: .5; object-position: right center; }
.promo--dark img.ph--promo, .arrivals__feature img.ph--promo,
.sidepromo img.ph--promo, .mega__promo img.ph--promo { opacity: .32; }
.promo--dark, .arrivals__feature, .sidepromo { background-color: var(--green); }
.mega__promo { background-color: var(--gold); }
/* Cover image: model sits centre-right in the frame, so bias the crop that way
and let it fill the hero panel rather than being trimmed at the sides. */
.hero__media .ph-img { object-position: 62% center; border-radius: var(--radius-card); }
/* =========================================================================
Hero — full-bleed cover
Image spans edge to edge behind the copy instead of sitting in a panel.
A left-to-right scrim keeps the headline legible over the photograph.
========================================================================= */
.hero--cover {
position: relative;
/* 916/1717 = the cover photo's own ratio, so the full frame is visible
instead of being cropped top and bottom. Capped so it stays usable
on very wide screens. */
height: 53.35vw;
min-height: 520px;
max-height: 720px;
display: flex;
align-items: center;
overflow: hidden;
background: var(--section);
}
.hero--cover .hero__cover {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: 68% center;
border-radius: 0;
z-index: 0;
}
.hero--cover::after {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg,
rgba(251,247,240,.97) 0%,
rgba(251,247,240,.94) 16%,
rgba(251,247,240,.72) 27%,
rgba(251,247,240,.20) 38%,
rgba(251,247,240,0) 48%);
}
.hero--cover .hero__inner {
position: relative; z-index: 2;
display: block;
padding-top: 0; padding-bottom: 0;
}
.hero--cover .hero__copy { max-width: 470px; }
.hero__eyebrow {
font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
color: var(--gold); margin: 0 0 14px;
}
.hero--cover .hero__seal { top: 34px; right: 40px; }
.hero--cover .hero__chip--a { top: 22%; left: auto; right: 8%; }
.hero--cover .hero__chip--b { bottom: 14%; right: 20%; }
@media (max-width: 1024px) {
.hero--cover { min-height: 560px; }
.hero--cover::after {
background: linear-gradient(180deg,
rgba(251,247,240,.95) 0%,
rgba(251,247,240,.80) 46%,
rgba(251,247,240,.35) 100%);
}
.hero--cover .hero__cover { object-position: 72% center; }
.hero--cover .hero__seal { top: 20px; right: 20px; }
}
@media (max-width: 720px) {
.hero--cover { min-height: 500px; align-items: flex-start; padding-top: 46px; }
.hero--cover .hero__copy { max-width: 100%; }
}
/* Brand card — reuses the product-card treatment for the Brands index. */
.brandcard { display: block; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 20px; background: var(--card); transition: border-color .25s; }
.brandcard:hover { border-color: var(--gold); }
.brandcard__media { border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4/3; background: var(--section); margin-bottom: 16px; }
.brandcard__media .ph-img, .brandcard__media .ph { width: 100%; height: 100%; object-fit: cover; }
.brandcard h3 { font-size: 18px; margin-bottom: 8px; }
.brandcard p { font-size: 13px; margin-bottom: 14px; }
/* The "More Brands" card keeps the dashed, tinted treatment that marks it as
an invitation rather than a stocked brand, but now carries a product image
so it sits in the same rhythm as the cards beside it. */
.brandcard--soon {
display: flex; flex-direction: column; text-align: center;
background: var(--section); border-style: dashed;
}
.brandcard--soon .brandcard__media { background: var(--shot); }
.brandcard--soon .brandcard__tag {
display: inline-block; align-self: center;
font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
color: var(--gold); margin-bottom: 8px;
}
.brandcard--soon p { flex: 1 0 auto; }
.brandcard--soon .btn { align-self: center; }
/* -------------------------------------------------------------------------
Hero — dark cover variant
The whole photograph must be visible, so the cover is `contain`, not `cover`.
A blurred, scaled copy of the same image fills whatever space is left over,
which avoids both a hard crop and a visible letterbox edge. The section
fills the viewport below the announcement bar and header (40px + 72px).
------------------------------------------------------------------------- */
.hero--dark {
height: calc(100vh - 112px);
min-height: 520px;
max-height: none;
background: #8C5133;
}
.hero--dark .hero__backdrop {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
transform: scale(1.15);
filter: blur(34px) saturate(1.06) brightness(.92);
z-index: 0;
}
.hero--dark .hero__cover {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain;
object-position: right center;
z-index: 1;
}
.hero--dark::after {
z-index: 2;
background: linear-gradient(90deg,
rgba(36,24,18,.72) 0%,
rgba(36,24,18,.52) 26%,
rgba(36,24,18,.18) 44%,
rgba(36,24,18,0) 60%);
}
.hero--dark .hero__inner { z-index: 3; }
.hero--dark .hero__seal { z-index: 3; }
.hero--dark h1 { color: #F4ECE1; }
.hero--dark h1 .gold { color: var(--gold-light); }
/* .hero--dark p is more specific than .hero__eyebrow, so the eyebrow needs
its on-dark colour stated here or it renders as body copy. */
.hero--dark .hero__eyebrow { color: var(--gold-light); }
.hero--dark p { color: rgba(244,236,225,.86); }
.hero--dark .btn--primary { background: #F4ECE1; color: var(--green-dark); }
.hero--dark .btn--primary:hover { background: #fff; }
.hero--dark .btn--ghost { background: transparent; border-color: rgba(244,236,225,.55); color: #F4ECE1; }
.hero--dark .btn--ghost:hover { border-color: #F4ECE1; background: rgba(244,236,225,.12); color: #F4ECE1; }
.hero--dark .hero__seal { background: #F4ECE1; color: var(--green-dark); border-color: var(--gold-light); }
@media (max-width: 1024px) {
.hero--dark .hero__cover { object-position: center 20%; }
.hero--dark::after {
background: linear-gradient(180deg,
rgba(36,24,18,.30) 0%,
rgba(36,24,18,.58) 46%,
rgba(36,24,18,.84) 100%);
}
}
/* Four-up variant of the category row (homepage). */
.cats--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) { .cats--4 { grid-template-columns: repeat(2, 1fr); } }
/* =========================================================================
Header — floating pill
The bar itself goes transparent; the inner container becomes a rounded
pill that floats over the page and stays pinned on scroll.
========================================================================= */
.header {
background: transparent;
border-bottom: 0;
padding: 14px 0;
}
.header .wrap {
height: 68px;
padding: 0 14px 0 26px;
background: var(--white);
border: 1px solid rgba(36,24,18,.06);
border-radius: var(--radius-pill);
box-shadow: 0 8px 30px rgba(36,24,18,.10);
gap: 18px;
}
.header .brand__mono { height: 32px !important; }
.mainnav { gap: 20px; }
.mainnav > li > a { padding: 22px 0; }
/* icons become a soft pill cluster at the end of the bar */
.icons { gap: 6px; }
.icons > a {
width: 38px; height: 38px; border-radius: 50%;
transition: background .2s, color .2s;
}
.icons > a:hover { background: var(--section); color: var(--green); }
/* mega menus clear the pill and keep a hover bridge across the gap */
.mega { top: calc(100% + 16px); border-radius: var(--radius-card); }
.mega::before {
content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
}
/* the hero sits under the announcement bar (40) + pill header (96) */
.hero--dark { height: calc(100vh - 136px); }
@media (max-width: 1024px) {
.header { padding: 10px 0; }
.header .wrap { height: 60px; padding: 0 10px 0 18px; }
.hero--dark { height: calc(100vh - 120px); }
}
@media (max-width: 720px) {
.header .wrap { padding: 0 8px 0 14px; }
}
/* =========================================================================
Cover pages: run the photograph up behind the announcement bar and header
instead of tinting them to match. Nothing to keep in sync, and the bands
pick up the cover's own gradient rather than a flat approximation.
Scoped with :has() so only pages carrying a dark cover are affected.
========================================================================= */
body:has(.hero--dark) .announce {
position: relative; z-index: 40;
background: transparent;
}
body:has(.hero--dark) .header { z-index: 60; }
body:has(.hero--dark) .hero--dark {
height: 100vh;
margin-top: -136px; /* pull up under the announcement bar + pill header */
padding-top: 136px; /* keep the copy optically centred below them */
}
/* the backdrop now has to cover the bands too, so bias it upward */
body:has(.hero--dark) .hero--dark .hero__cover { object-position: right 58%; }
@media (max-width: 1024px) {
body:has(.hero--dark) .hero--dark {
height: 100vh;
margin-top: -120px;
padding-top: 120px;
}
body:has(.hero--dark) .hero--dark .hero__cover { object-position: center 26%; }
}
/* Top scrim: keeps the announcement bar legible now that the photograph runs
behind it, and stops the pill header floating on an unresolved edge. */
body:has(.hero--dark) .hero--dark::before {
content: "";
position: absolute; top: 0; left: 0; right: 0; height: 210px;
background: linear-gradient(180deg, rgba(36,24,18,.62) 0%, rgba(36,24,18,.28) 55%, rgba(36,24,18,0) 100%);
z-index: 2; pointer-events: none;
}
/* seal clears the header pill instead of sitting behind it */
body:has(.hero--dark) .hero--dark .hero__seal { top: 172px; right: 44px; }
@media (max-width: 1024px) {
body:has(.hero--dark) .hero--dark::before { height: 170px; }
body:has(.hero--dark) .hero--dark .hero__seal { top: 146px; right: 20px; }
}
/* =========================================================================
Product imagery: show the whole product.
Packshots are square with their own light backdrop, while the card and
gallery frames are not — `cover` was cropping lids and labels. `contain`
fits the product inside the frame with nothing cut off.
========================================================================= */
.pcard__media .ph-img,
.dealcard__media .ph-img,
.brandcard__media .ph-img,
.pdp__stage .ph-img,
.pdp__thumbs .ph-img,
.linetable__prod .ph-img,
.recent .ph-img {
object-fit: contain;
/* The packshots carry their own backdrop. A white background here showed as
a bright seam wherever the photograph did not reach the frame, because the
frames are cream; matching the frame makes any letterbox invisible. */
background: var(--shot);
}
/* No padding: it inset every photograph from its frame, and with the white
background above that inset read as a border drawn inside each card. */
.pcard:hover .pcard__media .ph-img { transform: scale(1.04); }
/* =========================================================================
Responsive corrections
========================================================================= */
/* ---- Announcement bar ----------------------------------------------------
The base rule kept only the first child on narrow screens, which left the
phone number and dropped the offer. Show the offer instead — it is the one
line worth the space — and centre it. */
@media (max-width: 1024px) {
.announce .wrap > :not(:first-child) { display: block; }
.announce .wrap > :first-child,
.announce .wrap > .announce__social { display: none; }
.announce .wrap { justify-content: center; }
.announce { font-size: 12px; }
}
@media (max-width: 420px) {
.announce .wrap { height: 36px; }
.announce { font-size: 11px; }
}
/* ---- Header pill ---------------------------------------------------------
Search, wishlist and account all live in the drawer on small screens, so
the pill keeps only the cart and the menu button. */
@media (max-width: 1024px) {
.icons > a[aria-label="Search"],
.icons > a[aria-label="Wishlist"],
.icons > a[aria-label="Account"] { display: none; }
.icons { gap: 2px; }
.burger { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; }
.burger:hover { background: var(--section); }
}
/* ---- Hero below desktop --------------------------------------------------
A landscape photograph inside a tall narrow box either zooms in hard
(`cover`) or floats with dead space (`contain`). Below 1024 the hero stops
being an overlay and becomes stacked: a full-width image band with the copy
underneath on solid cocoa. Nothing crops, nothing overlaps. */
@media (max-width: 1024px) {
body:has(.hero--dark) .hero--dark {
height: auto; min-height: 0; max-height: none;
margin-top: -116px; padding-top: 116px;
display: block;
/* sampled from the cover photo itself (#81492B at the top edge, #8B5032
where it meets the copy) so the bands flow out of the image */
background: linear-gradient(180deg, #81492B 0%, #8B5032 100%);
}
.hero--dark .hero__backdrop { display: none; }
body:has(.hero--dark) .hero--dark .hero__cover {
position: static;
width: 100%; height: auto;
aspect-ratio: 3 / 2;
object-fit: cover; object-position: 58% 18%;
}
.hero--dark::after { display: none; }
body:has(.hero--dark) .hero--dark::before { display: none; }
body:has(.hero--dark) .hero--dark .hero__seal { display: none; }
.hero--cover .hero__inner { padding-top: 28px; padding-bottom: 36px; }
.hero--cover .hero__copy { max-width: 100%; }
}
@media (max-width: 720px) {
body:has(.hero--dark) .hero--dark { margin-top: -104px; padding-top: 104px; }
body:has(.hero--dark) .hero--dark .hero__cover { aspect-ratio: 4 / 3; object-position: 60% 16%; }
.hero--cover h1 { font-size: 30px; line-height: 1.16; }
.hero--cover .hero__copy p br { display: none; }
.hero--cover .hero__cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero--cover .hero__cta .btn { width: 100%; padding-left: 10px; padding-right: 10px; font-size: 13px; }
}
/* ---- Section rhythm and type --------------------------------------------- */
@media (max-width: 720px) {
.section { padding: 40px 0; }
.wrap { padding: 0 18px; }
h2, .section-head h2 { font-size: 24px; }
.newsletter h2 { font-size: 22px; }
.pagehead { padding: 30px 0; }
.pagehead h1 { font-size: 26px; }
/* stacked headlines were breaking awkwardly at narrow widths */
.section-head h2 br, .newsletter h2 br { display: none; }
}
/* ---- Grids ---------------------------------------------------------------
Two product cards per row reads better than one full-width card. */
@media (max-width: 720px) {
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.grid--2 { grid-template-columns: 1fr; }
.cats, .cats--4 { grid-template-columns: repeat(2, 1fr); gap: 18px; }
.pcard__name { font-size: 13px; }
.pcard__cat, .rating { font-size: 12px; }
.price { font-size: 14px; }
.bloglist .grid--3, .blog-layout .grid--3 { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
.grid--3, .grid--4 { gap: 12px; }
.rating { gap: 2px; font-size: 11px; }
.rating .star { font-size: 13px; }
}
/* ---- Trust + support strips ---------------------------------------------- */
@media (max-width: 720px) {
.trust .wrap { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; padding-bottom: 26px; }
.trust__item { justify-content: flex-start; }
.trust__item .ico { font-size: 26px; }
}
/* ---- Product detail ------------------------------------------------------ */
@media (max-width: 720px) {
.pdp { gap: 26px; }
.pdp__title { font-size: 22px; }
.pdp__price { font-size: 22px; }
.pdp__actions { gap: 10px; }
.pdp__actions .btn { flex: 1 1 140px; }
.tabs { gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; font-size: 14px; }
.spec { font-size: 12px; }
.spec th, .spec td { padding: 10px 12px; }
}
/* ---- Filters -------------------------------------------------------------
A long checkbox list above the products buries the grid on a phone, so the
sidebar collapses into a disclosure. */
@media (max-width: 1024px) {
.filters {
border: 1px solid var(--line); border-radius: var(--radius-card);
padding: 16px 18px; margin-bottom: 22px;
}
.filters__title { margin-bottom: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
.filters__title::after { content: "+"; font-size: 20px; line-height: 1; }
.filters.is-open .filters__title::after { content: "\2212"; }
.filters > :not(.filters__title) { display: none; }
.filters.is-open > :not(.filters__title) { display: block; margin-top: 18px; }
.filters.is-open .ask { display: block; }
}
/* ---- Tables --------------------------------------------------------------
Cart and wishlist rows become stacked blocks with their column label. */
@media (max-width: 720px) {
.linetable thead { display: none; }
.linetable, .linetable tbody, .linetable tr, .linetable td { display: block; width: 100%; }
.linetable tr {
border: 1px solid var(--line); border-radius: var(--radius-card);
padding: 14px; margin-bottom: 14px; position: relative;
}
.linetable td { border: 0; padding: 4px 0; }
.linetable__prod { display: flex; gap: 12px; align-items: center; padding-right: 26px; }
.linetable .rm { position: absolute; top: 12px; right: 12px; }
.linetable td[data-label]::before {
content: attr(data-label) " "; color: var(--muted); font-size: 12px;
}
.cart-actions { flex-direction: column; align-items: stretch; }
.cart-actions .input, .cart-actions .btn { max-width: 100% !important; width: 100%; }
.summary { position: static; }
}
/* ---- Account, blog, contact, checkout ------------------------------------ */
@media (max-width: 720px) {
.acctnav { grid-template-columns: 1fr; }
.blogside { order: 2; }
.bd-share { flex-direction: row; justify-content: flex-start; align-items: center; }
.infocard { padding: 18px; }
.row2 { grid-template-columns: 1fr; gap: 0; }
.radios { flex-direction: column; gap: 10px; }
.radio, .paymethod { width: 100%; }
.orderbar { flex-direction: column; align-items: flex-start; gap: 14px; }
.orderbar .btn { margin-left: 0; width: 100%; }
}
/* ---- Footer --------------------------------------------------------------- */
@media (max-width: 720px) {
.footer { padding-top: 38px; }
.footer__grid { grid-template-columns: 1fr 1fr; gap: 26px; }
.footer__grid > :first-child { grid-column: 1 / -1; }
.footer__grid > :last-child { grid-column: 1 / -1; }
.footer__bar { flex-direction: column; gap: 10px; text-align: left; }
.subscribe { flex-direction: column; }
.subscribe .btn { width: 100%; }
}
/* ---- Marquee -------------------------------------------------------------- */
@media (max-width: 720px) {
.marquee__track { font-size: 12px; gap: 28px; padding: 10px 0; animation-duration: 26s; }
}
/* ---- Never allow sideways scroll ------------------------------------------
`overflow-x: hidden` on html/body silently breaks `position: sticky` on
descendants, which stopped the header sticking. `clip` gives the same
protection without creating a scroll container. */
html, body { max-width: 100%; overflow-x: clip; }
img, video { max-width: 100%; }
/* =========================================================================
Cover pages: header stack height
The hero pulls up behind the announcement bar and header. That offset was
hardcoded per breakpoint and drifted out of sync, leaving a strip of page
background above the bar. One variable now drives both the pull-up and the
padding that compensates for it, so they cannot disagree.
desktop 40 announce + 96 header (14+68+14)
<=1024 40 announce + 80 header (10+60+10)
<=420 36 announce + 80 header
========================================================================= */
:root { --topstack: 136px; }
@media (max-width: 1024px) { :root { --topstack: 120px; } }
@media (max-width: 420px) { :root { --topstack: 116px; } }
body:has(.hero--dark) .hero--dark,
body:has(.hero--dark) .hero--dark[class] {
margin-top: calc(-1 * var(--topstack));
padding-top: var(--topstack);
}
/* No fixed fallback strip: being position:fixed it stayed visible behind the
sticky header for the whole page. The --topstack variable already keeps the
hero flush with the bars, so nothing is needed here. */
/* =========================================================================
Hero slideshow
Two covers crossfade behind fixed copy. The copy does not change between
slides, so nothing reflows and there is no layout shift on rotation.
========================================================================= */
.hero__slide {
position: absolute; inset: 0; z-index: 0;
opacity: 0; transition: opacity 1.1s ease;
}
.hero__slide.is-active { opacity: 1; }
.hero__dots {
position: absolute; z-index: 4;
left: 0; right: 0; bottom: 26px;
display: flex; justify-content: center; gap: 10px;
}
.hero__dots button {
width: 34px; height: 4px; border-radius: var(--radius-pill);
background: rgba(244,236,225,.42);
transition: background .25s, width .25s;
}
.hero__dots button:hover { background: rgba(244,236,225,.7); }
.hero__dots button.is-active { background: #F4ECE1; width: 52px; }
@media (max-width: 1024px) {
/* stacked hero: the slides sit in flow, so only the image band crossfades */
.hero__slide { position: relative; inset: auto; }
.hero__slide:not(.is-active) { position: absolute; }
.hero__dots { position: static; margin: 14px 0 0; }
.hero__dots button { background: rgba(244,236,225,.38); }
}
@media (prefers-reduced-motion: reduce) {
.hero__slide { transition: none; }
}
/* =========================================================================
Hero: settle transition + parallax
The incoming cover fades in over a longer curve while easing down from a
slight scale, so it settles rather than snapping. Parallax offset comes
from --py, set in rAF on scroll.
========================================================================= */
.hero__slide {
opacity: 0;
transform: scale(1.045);
transition: opacity 1.6s cubic-bezier(.4,0,.2,1),
transform 2.6s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.hero__slide.is-active { opacity: 1; transform: scale(1); }
/* Parallax is scroll-driven in CSS rather than a scroll listener: it runs on
the compositor, cannot jank the scroll thread, and needs no JS. Browsers
without scroll-driven animation simply get a static cover. */
@supports (animation-timeline: scroll()) {
.hero--dark .hero__cover {
animation: heroDrift linear both;
animation-timeline: scroll(root block);
animation-range: 0 100vh;
}
.hero--dark .hero__backdrop {
animation: heroDriftBack linear both;
animation-timeline: scroll(root block);
animation-range: 0 100vh;
}
}
@keyframes heroDrift { from { transform: translate3d(0,0,0); }
to { transform: translate3d(0,96px,0); } }
@keyframes heroDriftBack { from { transform: scale(1.15) translate3d(0,0,0); }
to { transform: scale(1.15) translate3d(0,38px,0); } }
@media (max-width: 1024px) {
/* stacked hero — no parallax, and the settle stays but without the scale
so the image band cannot bleed past its container */
.hero--dark .hero__cover,
.hero--dark .hero__backdrop { transform: none; }
.hero__slide { transform: none; }
.hero__slide.is-active { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero__slide { transition: none; transform: none; }
.hero--dark .hero__cover, .hero--dark .hero__backdrop { transform: none; }
}
/* =========================================================================
Stacked hero: fade the photograph itself into the brown
Fading the copy block was not enough — the gradient only reached about a
quarter opacity by the time it met the bottom of the picture, so the
photo's edge still read as a hard line. The fade now lives on the image and
resolves fully to the copy colour before the picture ends.
========================================================================= */
@media (max-width: 1024px) {
.hero__slide { position: relative; }
.hero__slide:not(.is-active) { position: absolute; }
.hero__slide::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -1px;
height: 210px; pointer-events: none;
background: linear-gradient(180deg,
rgba(133,76,46,0) 0%,
rgba(133,76,46,.28) 34%,
rgba(133,76,46,.72) 62%,
#854C2E 92%,
#854C2E 100%);
}
body:has(.hero--dark) .hero--dark {
background: linear-gradient(180deg, #854C2E 0%, #8B5032 100%);
}
.hero--cover .hero__inner {
position: relative; z-index: 3;
margin-top: -34px; /* small overlap; the fade does the blending */
padding-top: 0;
}
body:has(.hero--dark) .hero--dark .hero__cover { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
.hero__slide::after { height: 170px; }
.hero--cover .hero__inner { margin-top: -28px; }
body:has(.hero--dark) .hero--dark .hero__cover { aspect-ratio: 1 / 1; object-position: 60% 12%; }
}
/* Brand social marks (inline SVG, so they render as the real logos). */
.announce__social a,
.socials a, .socials button { display: grid; place-items: center; }
.announce__social a svg { width: 13px; height: 13px; }
.socials a svg { width: 15px; height: 15px; }
.socials--inline a svg { width: 13px; height: 13px; }
.announce__social a {
width: 20px; height: 20px; border-radius: 50%;
background: #fff; color: var(--green);
transition: background .2s, color .2s;
}
.announce__social a:hover { background: var(--gold-light); color: #fff; }
.announce__tel { color: inherit; text-decoration: none; }
.announce__tel:hover { text-decoration: underline; }
.footer address a { color: inherit; }
.footer address a:hover { color: var(--green); }
/* ---- Product shots -------------------------------------------------------
Every product photo is a square with a flat #EBCBAF rim baked in, so any
container can letterbox it against the same colour: the product is always
whole and the seam is invisible whatever the container ratio. */
.pcard__media, .dealcard__media, .pdp__stage, .pdp__thumbs button,
.brandcard__media, .insta a, .post__media, .about-strip__gallery > div,
.deals__side-wrap, .videoblock, .review__shots img,
.linetable__prod img, .recent img, .cat .ph-img, .member img,
.bd-hero, .deals__side, .videoblock img {
background: var(--shot);
}
.pcard__media img, .dealcard__media img, .pdp__stage img, .pdp__thumbs img,
.brandcard__media .ph-img, .insta img, .post__media img,
.about-strip__gallery img, .deals__side, .videoblock img,
.review__shots img, .linetable__prod img,
.recent img, .cat .ph-img, .member img, .bd-hero {
object-fit: contain;
}
/* A purpose-shot promo banner already leaves its own copy space, so it runs at
full strength instead of the washed-back treatment used for stock imagery. */
/* The generic promo rule dims stock imagery to 50%; that selector is more
specific than a plain .promo--banner one, so match its weight to win. A
purpose-shot banner also shows whole rather than cropped: `contain` keeps
every product in frame and the container ground is sampled from the file,
so the letterbox is invisible. */
.promo:not(.promo--dark).promo--banner img.ph--promo {
opacity: 1;
object-fit: contain;
object-position: right center;
}
/* Each banner sits on its own photographed ground, sampled from the file, so
the container and the photo are the same colour at every viewport width. */
.promo--banner { background: #F3D6BD; }
.promo--arrivals { background: #F6D5B7; }
.promo--korean { background: #D5B185; }
/* The Korean Skincare banner runs full-bleed. Giving the block the photo's own
2.19:1 ratio means `cover` has almost nothing to crop, so the whole scene
reads at its true scale instead of a magnified slice. */
.promo--korean {
aspect-ratio: 1857 / 847;
min-height: 260px;
align-items: center;
}
.promo:not(.promo--dark).promo--korean img.ph--promo {
object-fit: cover;
object-position: right center;
}
/* A soft left-to-right haze in the photo's own beige, so the copy stays legible
over the image without sitting in a hard coloured box. */
.promo--korean::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg,
rgba(240,226,206,.96) 0%,
rgba(240,226,206,.86) 30%,
rgba(240,226,206,.45) 50%,
rgba(240,226,206,0) 68%);
}
.promo--korean .promo__body { max-width: 46%; }
/* The New In panel carries a purpose-shot photo rather than stock imagery
washed over green. The panel stretches to the grid height so `cover` fills it
edge to edge with no ground band, and the label reads via a text shadow
instead of a gradient haze, which was itself showing as a beige strip. */
.arrivals:has(.arrivals__feature--shot) { align-items: stretch; }
.arrivals__feature--shot,
.arrivals__feature--shot .ph--promo,
.arrivals__feature--shot img.ph--promo {
/* Three separate rules paint this card cocoa: the container background at
:906, the image's own background at :880, and the .32 wash at :904. Clear
all of them so nothing but the photo shows. */
background: none;
background-color: transparent;
}
.arrivals__feature--shot {
overflow: hidden;
min-height: 420px;
border-radius: var(--radius-card);
}
.arrivals__feature--shot img.ph--promo {
opacity: 1; object-fit: cover; object-position: center;
}
.arrivals__feature--shot h3 {
color: var(--ink);
text-shadow: 0 1px 10px rgba(251,247,240,.9), 0 1px 3px rgba(251,247,240,1);
}
/* The card is itself an , so the call to action is a styled span rather
than a nested link. */
.arrivals__feature--shot .btn {
display: inline-flex; align-items: center; gap: 6px;
box-shadow: 0 6px 20px rgba(36,24,18,.22);
}
.arrivals__feature--shot:hover .btn { background: var(--green); color: #fff; }
/* =========================================================================
Full-bleed collection shot
The generic video-block rules pin their image to a 340px band and are
declared later in this file, so an equally specific .videoblock--wide rule
loses to them. Doubling the class raises the weight enough to win, and the
image then keeps its own 2:1 frame at full viewport width — the whole photo,
nothing cropped.
========================================================================= */
.videoblock.videoblock--wide {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
border-radius: 0;
background: none;
}
.videoblock.videoblock--wide img,
.videoblock.videoblock--wide .ph-img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 0;
}
/* Copy sits in the photograph's own empty left third, over a scrim in the
shot's own tan so it reads as haze rather than a panel. */
.videoblock.videoblock--wide {
display: flex; align-items: center;
/* the band, not the image, carries the photo's 2:1 shape — the image is
absolutely positioned for the overlay and can no longer set the height */
aspect-ratio: 1774 / 887;
}
.videoblock.videoblock--wide img,
.videoblock.videoblock--wide .ph-img { position: absolute; inset: 0; z-index: 0; }
.videoblock.videoblock--wide::before {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(90deg,
rgba(178,130,90,.94) 0%, rgba(178,130,90,.80) 26%,
rgba(178,130,90,.38) 44%, rgba(178,130,90,0) 60%);
}
.collectionband__body {
position: relative; z-index: 2;
width: min(38%, 480px);
margin-left: clamp(24px, 8vw, 120px);
color: #fff;
}
.collectionband__body .tag {
display: inline-block; font-size: 11px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
color: #fff; background: rgba(36,24,18,.34);
border-radius: var(--radius-pill); padding: 5px 14px; margin-bottom: 12px;
}
.collectionband__body h3 { font-size: clamp(22px, 2.4vw, 34px); line-height: 1.18; color: #fff; margin-bottom: 12px; }
.collectionband__body p { font-size: 14px; color: rgba(255,255,255,.9); margin-bottom: 20px; }
.collectionband__body .btn { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 860px) {
.videoblock.videoblock--wide::before {
background: linear-gradient(180deg,
rgba(178,130,90,.30) 0%, rgba(178,130,90,.72) 46%, rgba(178,130,90,.94) 100%);
}
.videoblock.videoblock--wide {
align-items: flex-end;
aspect-ratio: auto; min-height: 540px;
}
.collectionband__body {
width: auto; margin: 0 20px 24px; text-align: center;
}
.videoblock.videoblock--wide img,
.videoblock.videoblock--wide .ph-img { object-fit: cover; }
}
.filters__clear { width: 100%; margin-bottom: 22px; }
.filters__empty { padding: 40px 0; text-align: center; color: var(--body); font-size: 14px; }
/* Anchoring alone cannot save this one. The band is 53.35vw (~1.87:1) to match
the Shop and Skincare portraits, but this shot is 3:2, so `cover` always had
height to throw away — off the bottom when anchored top, off the top when
anchored bottom. The band now takes the photo's own 3:2 shape with no cap,
so the whole frame shows and there is nothing to crop. */
/* Every cover uses the same band as the homepage hero, so no page reads bigger
or smaller than another. This shot is 3:2 against a ~1.87:1 band, so it is
the one that gives up height — anchored bottom, the crop comes off the empty
wall rather than the products along the base. */
.pagehead--cover.pagehead--cover-bottom .pagehead__bg {
object-position: center bottom;
}
/* The contact photo is a 4:3 portrait, and the generic rules pin it to a 470px
band with contain, which letterboxed it. Declared here so it outweighs them:
it fills its column, matching the form's height beside it. */
.contact-photo { align-self: stretch; }
.contact-photo .ph-img,
.contact-photo img {
width: 100%; height: 100%;
min-height: 470px; max-height: none;
object-fit: cover; object-position: center top;
border-radius: var(--radius-card);
}
/* =========================================================================
Mobile pass
========================================================================= */
.filters__toggle { display: none; }
@media (max-width: 1024px) {
/* Filters: collapsed by default so products are reachable immediately.
Matches the width at which .shop-layout stops being a sidebar. */
.filters__toggle {
display: inline-flex; align-items: center; gap: 8px;
width: 100%; justify-content: center; margin-bottom: 16px;
}
.filters { display: none; margin-bottom: 8px; }
.filters.is-open { display: block; }
.filters .ask { display: none; } /* the support card belongs below, not mid-filter */
}
@media (max-width: 720px) {
/* Covers: a 520px floor eats a phone screen whole */
.pagehead--cover { height: 82vw; min-height: 300px; max-height: 460px; }
.pagehead--cover::before { height: 140px; }
/* Contact photograph sits below the form once stacked, so it needs less height */
.contact-photo .ph-img,
.contact-photo img { min-height: 320px; }
/* Collection band: the copy stacks over the photo, so give it room */
.videoblock.videoblock--wide { min-height: 470px; }
.collectionband__body h3 { font-size: 22px; }
/* Product grids: two up reads better than one on a phone */
.grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Tap targets */
.check { padding: 7px 0; }
.btn { padding: 12px 22px; }
}
@media (max-width: 420px) {
.pagehead--cover { min-height: 260px; }
.grid--3, .grid--4 { gap: 10px; }
}
/* =========================================================================
Responsive audit — photo + copy components
On a phone these all put text on top of the photograph. At desktop widths
the shot has an empty third to hold the copy; at 400px that third does not
exist, so the words land on the products. Every one of them stacks instead:
the picture keeps its own shape above, the copy sits on solid ground below.
========================================================================= */
@media (max-width: 860px) {
/* --- Promo banners: Featured Skincare, New Arrivals, Korean Skincare ---- */
.promo.promo--banner,
.promo.promo--korean {
display: block;
height: auto;
min-height: 0;
aspect-ratio: auto;
padding: 0;
overflow: hidden;
}
.promo.promo--banner img.ph--promo,
.promo.promo--korean img.ph--promo {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
object-position: center;
opacity: 1;
}
/* the scrims exist only to lift copy off the photo; stacked, they just tint */
.promo.promo--korean::before,
.promo.promo--banner::before { display: none; }
.promo.promo--banner .promo__body,
.promo.promo--korean .promo__body {
max-width: 100%;
width: auto;
padding: 20px 22px 26px;
}
/* --- New In feature card ------------------------------------------------ */
.arrivals__feature--shot {
display: block;
min-height: 0;
padding: 0;
}
.arrivals__feature--shot img.ph--promo {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
}
.arrivals__feature--shot > div { padding: 18px 20px 22px; }
.arrivals__feature--shot h3,
.arrivals__feature--shot .link-underline { text-shadow: none; }
/* --- About collection band ---------------------------------------------- */
.videoblock.videoblock--wide {
display: block;
min-height: 0;
aspect-ratio: auto;
}
.videoblock.videoblock--wide img,
.videoblock.videoblock--wide .ph-img {
position: relative;
inset: auto;
width: 100%;
height: auto;
aspect-ratio: 1774 / 887;
}
.videoblock.videoblock--wide::before { display: none; }
.collectionband__body {
width: auto;
margin: 0;
padding: 20px 22px 26px;
text-align: left;
color: var(--ink);
background: var(--shot);
}
.collectionband__body h3 { color: var(--ink); }
.collectionband__body p { color: var(--body); }
.collectionband__body .tag { background: rgba(36,24,18,.10); color: var(--ink); }
}
/* --- Page covers: never crop on a phone --------------------------------- */
@media (max-width: 720px) {
.pagehead--cover {
height: auto;
min-height: 0;
max-height: none;
aspect-ratio: 3 / 2;
}
.pagehead--cover .pagehead__bg { object-position: center top; }
.pagehead--cover.pagehead--cover-bottom { aspect-ratio: 3 / 2; }
.pagehead--cover.pagehead--cover-bottom .pagehead__bg { object-position: center bottom; }
/* the About strip tiles are fixed 190px rows, which squashes them */
.about-strip__gallery { grid-template-rows: auto auto; }
.about-strip__gallery > div { aspect-ratio: 1 / 1; }
}
/* =========================================================================
Rounded imagery
Declared with :where() so its weight is zero — circles, avatars and any
component with its own radius keep theirs untouched.
========================================================================= */
:where(.ph-img, .pcard__media, .dealcard__media, .brandcard__media,
.pdp__stage, .pdp__thumbs button, .insta a, .insta img,
.videoblock, .contact-photo, .deals__side, .about-strip__gallery > div,
.arrivals__feature, .post__media, .member img, .bd-hero) {
border-radius: var(--radius-card);
overflow: hidden;
}
/* =========================================================================
Motion
One reveal on first scroll into view, and a light lift on hover. Distances
are small and durations short on purpose — the page should settle, not
perform. Anyone who asks for reduced motion gets none of it.
========================================================================= */
.reveal {
opacity: 0;
transform: translateY(14px);
transition: opacity .55s cubic-bezier(.22,.61,.36,1),
transform .55s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.pcard, .brandcard, .vmcard, .infocard, .post {
transition: transform .3s cubic-bezier(.22,.61,.36,1),
box-shadow .3s cubic-bezier(.22,.61,.36,1),
border-color .25s;
}
.pcard:hover, .brandcard:hover, .post:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card);
}
.btn { transition: background .25s, color .25s, border-color .25s, transform .18s; }
.btn:active { transform: translateY(1px); }
.cat:hover .ph-img { transform: scale(1.04); }
.cat .ph-img { transition: transform .5s cubic-bezier(.22,.61,.36,1); }
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
.pcard:hover, .brandcard:hover, .post:hover { transform: none; }
.cat:hover .ph-img { transform: none; }
}
/* =========================================================================
Mobile: the two grids that were still on fixed row heights
========================================================================= */
@media (max-width: 860px) {
/* Instagram strip — square cells instead of 140px rows, so a square packshot
is not letterboxed into a slot half its height */
.insta { grid-auto-rows: auto; gap: 10px; }
.insta a, .insta img, .insta .ph-img {
aspect-ratio: 1 / 1; height: auto; width: 100%;
}
.insta__big { grid-column: span 2; grid-row: span 2; }
.insta__big.ph-img { aspect-ratio: 1 / 1; }
/* New In feature card — the photo is a tall 800x1800 stack, so a wide box
threw away two of the three jars */
.arrivals__feature--shot img.ph--promo { aspect-ratio: 3 / 4; }
}
/* =========================================================================
Studio credit
A small pill that sits between the copyright and the locale switcher. It
reads as a considered mark rather than a line of small print: the label
stays quiet, the studio name carries the weight, and the whole chip warms
to gold on hover with the arrow stepping out as it goes.
========================================================================= */
.credit {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 8px 7px 14px;
border: 1px solid var(--line);
border-radius: var(--radius-pill);
background: var(--card);
font-size: 12px; line-height: 1;
white-space: nowrap;
transition: border-color .25s, background .25s, box-shadow .25s, transform .25s;
}
.credit__label { color: var(--muted); letter-spacing: .02em; }
.credit__brand {
font-weight: 700; color: var(--ink); letter-spacing: .01em;
position: relative;
}
/* a gold hairline under the name, drawn on hover */
.credit__brand::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px;
background: var(--gold); transform: scaleX(0); transform-origin: left;
transition: transform .3s cubic-bezier(.22,.61,.36,1);
}
.credit__arrow {
font-size: 15px; color: var(--gold);
width: 22px; height: 22px; border-radius: 50%;
display: grid; place-items: center;
background: rgba(184,137,79,.12);
transition: transform .25s cubic-bezier(.22,.61,.36,1), background .25s, color .25s;
}
.credit:hover {
border-color: var(--gold);
box-shadow: 0 6px 18px rgba(36,24,18,.10);
transform: translateY(-1px);
}
.credit:hover .credit__brand::after { transform: scaleX(1); }
.credit:hover .credit__arrow {
transform: translate(2px, -2px);
background: var(--gold); color: #fff;
}
.credit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
.credit, .credit__arrow, .credit__brand::after { transition: none; }
.credit:hover { transform: none; }
.credit:hover .credit__arrow { transform: none; }
}
@media (max-width: 620px) {
.credit { order: 3; }
}
/* =========================================================================
Mobile drawer
The panel eases in from the right on a long, decelerating curve while the
scrim blurs the page behind it. Each row then arrives on its own beat, so
the menu assembles rather than appearing whole.
========================================================================= */
.burger {
display: none; background: none; border: 0; padding: 0;
width: 42px; height: 42px; border-radius: 50%;
place-items: center; cursor: pointer;
transition: background .25s;
}
.burger:hover { background: var(--section); }
.burger__box { position: relative; display: block; width: 20px; height: 14px; }
.burger__line {
position: absolute; left: 0; height: 1.6px; width: 100%;
background: var(--ink); border-radius: 2px;
transition: transform .38s cubic-bezier(.65,.05,.36,1),
opacity .2s linear, width .38s cubic-bezier(.65,.05,.36,1);
}
.burger__line:nth-child(1) { top: 0; }
.burger__line:nth-child(2) { top: 50%; transform: translateY(-50%); width: 70%; }
.burger__line:nth-child(3) { bottom: 0; }
.burger:hover .burger__line:nth-child(2) { width: 100%; }
/* open state: outer lines cross, middle line retracts */
.burger.is-active .burger__line:nth-child(1) { transform: translateY(6.2px) rotate(45deg); }
.burger.is-active .burger__line:nth-child(2) { opacity: 0; width: 0; }
.burger.is-active .burger__line:nth-child(3) { transform: translateY(-6.2px) rotate(-45deg); }
#scrim {
position: fixed; inset: 0; z-index: 85;
background: rgba(36,24,18,.42);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
opacity: 0; visibility: hidden;
transition: opacity .45s ease, visibility .45s;
}
#scrim.is-open { opacity: 1; visibility: visible; }
#drawer {
position: fixed; inset: 0 0 0 auto; z-index: 90;
width: min(84vw, 330px);
display: flex; flex-direction: column;
/* cacao at the top easing to cocoa at the foot, with a warm gilt bloom
behind the brand mark */
background:
radial-gradient(120% 55% at 85% 0%, rgba(184,137,79,.30) 0%, rgba(184,137,79,0) 60%),
linear-gradient(168deg, #2E1D14 0%, #4A3021 42%, #6F4A34 100%);
color: var(--white);
box-shadow: -24px 0 60px rgba(36,24,18,.34);
transform: translateX(102%);
transition: transform .52s cubic-bezier(.22,.61,.36,1);
overflow-y: auto; overscroll-behavior: contain;
padding: 18px 20px 24px;
}
/* botanical motifs — leaf, petal, droplet — tiled faintly behind the content */
#drawer::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns="http%3A//www.w3.org/2000/svg" width="180" height="180" viewBox="0 0 180 180" fill="none" stroke="%23F4ECE1" stroke-width="1.1" opacity="0.5"%3E%3Cpath d="M28 20c14 2 22 12 22 26 0 0-16 2-22-8-6-10 0-18 0-18Z"/%3E%3Cpath d="M28 20c0 18 8 30 22 34"/%3E%3Cpath d="M128 30c6 8 6 16 0 21-6-5-6-13 0-21Z"/%3E%3Cpath d="M96 96c10 2 15 9 15 19 0 0-11 1-15-6-4-7 0-13 0-13Z"/%3E%3Cpath d="M96 96c0 13 6 21 15 24"/%3E%3Cpath d="M52 128c5 7 5 14 0 19-5-5-5-12 0-19Z"/%3E%3Ccircle cx="150" cy="112" r="9"/%3E%3Cpath d="M150 103v18M141 112h18"/%3E%3Ccircle cx="20" cy="90" r="2.2" fill="%23F4ECE1" stroke="none"/%3E%3Ccircle cx="118" cy="160" r="2.2" fill="%23F4ECE1" stroke="none"/%3E%3Ccircle cx="86" cy="44" r="2.2" fill="%23F4ECE1" stroke="none"/%3E%3C/svg%3E");
background-size: 180px 180px;
opacity: .085;
mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.25) 100%);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 62%, rgba(0,0,0,.25) 100%);
}
#drawer > * { position: relative; z-index: 1; }
#drawer.is-open { transform: none; }
.drawer__head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 14px; margin-bottom: 4px;
border-bottom: 1px solid rgba(244,236,225,.16);
}
.drawer__mark { height: 40px; width: auto; }
.drawer__close {
width: 34px; height: 34px; border-radius: 50%;
border: 1px solid rgba(244,236,225,.24);
background: none; display: grid; place-items: center; cursor: pointer;
color: var(--white);
transition: background .25s, border-color .25s, transform .25s;
}
.drawer__close span { font-size: 19px; }
.drawer__close:hover { background: rgba(244,236,225,.10); border-color: var(--gold); transform: rotate(90deg); }
/* primary nav — large, generous, one per line */
.drawer__nav { margin: 4px 0 6px; }
.drawer__nav a {
display: flex; align-items: center; justify-content: space-between;
padding: 11px 2px; font-size: 15px; font-weight: 500; letter-spacing: .01em;
color: var(--white);
border-bottom: 1px solid rgba(244,236,225,.10);
transition: color .25s, padding-left .3s cubic-bezier(.22,.61,.36,1);
}
.drawer__nav a i {
font-size: 15px; color: var(--gold-light);
opacity: 0; transform: translateX(-6px);
transition: opacity .3s, transform .3s cubic-bezier(.22,.61,.36,1);
}
.drawer__nav a:hover { color: var(--gold-light); padding-left: 7px; }
.drawer__nav a:hover i { opacity: 1; transform: none; }
/* secondary group — smaller, icon-led */
.drawer__group { margin-top: 18px; }
.drawer__group h4 {
font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
color: rgba(244,236,225,.52); margin-bottom: 6px;
}
.drawer__sub a {
display: flex; align-items: center; gap: 11px;
padding: 8px 2px; font-size: 13px; color: rgba(244,236,225,.80);
transition: color .25s, gap .25s;
}
.drawer__sub a i { font-size: 17px; color: var(--gold-light); }
.drawer__sub a:hover { color: var(--white); gap: 14px; }
.drawer__foot {
margin-top: auto; padding-top: 16px;
border-top: 1px solid rgba(244,236,225,.16);
}
.drawer__tel {
display: inline-flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; color: var(--white);
}
.drawer__tel i { font-size: 17px; color: var(--gold-light); }
.drawer__social { display: flex; gap: 9px; margin-top: 12px; }
.drawer__social a {
width: 32px; height: 32px; border-radius: 50%;
border: 1px solid rgba(244,236,225,.22); display: grid; place-items: center;
color: rgba(244,236,225,.82);
transition: background .25s, color .25s, border-color .25s, transform .25s;
}
.drawer__social svg { width: 15px; height: 15px; }
.drawer__social a:hover {
background: var(--gold); border-color: var(--gold); color: #fff;
transform: translateY(-2px);
}
/* rows arrive one after another once the panel has started moving */
#drawer .drawer__nav li,
#drawer .drawer__group,
#drawer .drawer__foot {
opacity: 0; transform: translateX(18px);
transition: opacity .4s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
#drawer.is-open .drawer__nav li,
#drawer.is-open .drawer__group,
#drawer.is-open .drawer__foot { opacity: 1; transform: none; }
#drawer.is-open .drawer__nav li:nth-child(1) { transition-delay: .12s; }
#drawer.is-open .drawer__nav li:nth-child(2) { transition-delay: .17s; }
#drawer.is-open .drawer__nav li:nth-child(3) { transition-delay: .22s; }
#drawer.is-open .drawer__nav li:nth-child(4) { transition-delay: .27s; }
#drawer.is-open .drawer__nav li:nth-child(5) { transition-delay: .32s; }
#drawer.is-open .drawer__nav li:nth-child(6) { transition-delay: .37s; }
#drawer.is-open .drawer__group { transition-delay: .42s; }
#drawer.is-open .drawer__foot { transition-delay: .48s; }
@media (max-width: 1024px) { .burger { display: grid; } }
@media (prefers-reduced-motion: reduce) {
#drawer, #scrim, .burger__line,
#drawer .drawer__nav li, #drawer .drawer__group, #drawer .drawer__foot {
transition: none;
}
.drawer__close:hover { transform: none; }
}
/* =========================================================================
Ordering flow — cart count, add-to-cart feedback, saved-to-wishlist state.
Additive only: no existing rule is changed by this block.
========================================================================= */
/* Several components set an explicit display, which beats the browser's own
rule for [hidden]. Empty states rely on that attribute, so make it win. */
[hidden] { display: none !important; }
/* Count on the header cart / wishlist icons */
.cbadge {
position: absolute; top: -6px; right: -8px;
min-width: 18px; height: 18px; padding: 0 4px;
border-radius: var(--radius-pill, 999px);
background: var(--gold); color: #fff;
font-size: 11px; font-weight: 600; line-height: 18px;
text-align: center; pointer-events: none;
}
/* Wishlist heart, once the product is saved */
.iconbtn.is-on { border-color: var(--gold); color: var(--gold); }
/* Brief confirmation after adding to cart or wishlist */
.toast {
position: fixed; left: 50%; bottom: 26px; z-index: 120;
transform: translate(-50%, 14px);
max-width: min(440px, calc(100vw - 32px));
padding: 13px 22px; border-radius: var(--radius-pill, 999px);
background: var(--green-dark); color: var(--white);
font-size: 13px; text-align: center;
box-shadow: 0 12px 30px rgba(36, 24, 18, .22);
opacity: 0; visibility: hidden;
transition: opacity .24s ease, transform .24s ease, visibility .24s;
}
.toast.is-on { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
/* Empty states for cart / wishlist / orders */
.emptystate { text-align: center; padding: 46px 20px 52px; }
.emptystate .ico { font-size: 42px; color: var(--gold); }
.emptystate h3 { margin: 14px 0 8px; }
.emptystate p { color: var(--muted); font-size: 13px; margin-bottom: 20px; }
@media (prefers-reduced-motion: reduce) { .toast { transition: none; } }
/* Form feedback, honeypot and screen-reader-only labels
------------------------------------------------------------------------- */
.formstatus { margin-top: 14px; font-size: 14px; line-height: 1.5; }
.formstatus.is-ok { color: var(--gold, #B8894F); }
.formstatus.is-error { color: var(--danger, #B3261E); }
/* Bots fill every field they find; people never see this one. Kept out of the
layout and the tab order without display:none, which some bots skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.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;
}
/* Shop search sits in the toolbar beside the sort control
------------------------------------------------------------------------- */
.shopsearch { display: inline-flex; align-items: center; gap: 8px; position: relative; }
.shopsearch .material-symbols-outlined { font-size: 19px; color: var(--muted, #5C5C5C); }
.shopsearch input { min-width: 210px; }
@media (max-width: 720px) {
/* The toolbar is one nowrap row on desktop. On a phone that squeezed the
sort control to 42px, so its selected option was unreadable and the
search field was clipped mid-word. Stack the three controls instead. */
.shop-bar { flex-direction: column; align-items: stretch; gap: 12px; }
.shopsearch { width: 100%; }
.shopsearch input { width: 100%; min-width: 0; }
.sortby { display: flex; width: 100%; }
.sortby select { flex: 1; min-width: 0; }
}
/* Legal pages read like documents, so they get a narrow measure
------------------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal h2 { font-size: 20px; margin: 34px 0 10px; }
.legal p, .legal li { color: var(--body, #5C5C5C); line-height: 1.75; }
.legal ul, .legal ol { margin: 0 0 16px 20px; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--cocoa, #6F4A34); text-decoration: underline; }
.legal__updated {
font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
color: var(--muted, #5C5C5C); margin-bottom: 26px;
}