/* YERBA-MATE.LV — design tokens lifted from the prototype's computed styles. */
:root {
--ink: #0A1F16;
--ink-2: #0E2B1E;
--forest: #1B4332;
--green: #2D6A4F;
--mint: #52B788;
--mint-pale: #B7E4C7;
--cream: #F5F5F0;
--sand: #ECE9DF;
--gold: #C9A227;
--terra: #E07A5F;
--tan: #D4A373;
--line: rgba(27, 67, 50, .12);
--line-strong: rgba(27, 67, 50, .3);
--muted: #5b6b5f;
--muted-light: #d5e6d8;
--display: Georgia, "Times New Roman", serif;
--body: Calibri, "Segoe UI", system-ui, -apple-system, sans-serif;
--wrap: 1240px;
--pad: 40px;
--nav-h: 64px;
--bar-h: 47px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--cream);
color: var(--forest);
font-family: var(--body);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--green); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; line-height: 1.1; margin: 0; color: var(--forest); }
h1 { font-size: clamp(34px, 4.6vw, 52px); }
h2 { font-size: clamp(28px, 3.6vw, 44px); }
h3 { font-size: 20px; line-height: 1.25; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }
/* The container owns the horizontal gutter. NEVER set the `padding` shorthand on a .container element —
it wipes these out and the content runs to the viewport edge at intermediate widths. Use
padding-top / padding-bottom instead. */
.container { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.container.narrow { max-width: 860px; }
.section { padding-top: 76px; padding-bottom: 76px; }
.section--sand { background: var(--sand); }
.section--cream { background: var(--cream); }
.section--forest { background: var(--forest); color: var(--cream); }
.section--ink { background: var(--ink); color: var(--cream); }
.section--forest h1, .section--forest h2, .section--forest h3,
.section--ink h1, .section--ink h2, .section--ink h3 { color: var(--cream); }
.eyebrow {
font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--green); margin: 0 0 12px;
}
.section--forest .eyebrow, .section--ink .eyebrow { color: var(--mint); }
.lead { font-size: 18px; color: var(--muted); max-width: 62ch; }
.section--forest .lead, .section--ink .lead { color: var(--muted-light); }
/* ── buttons ─────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
border: 0; border-radius: 999px; padding: 13px 28px;
font-family: var(--body); font-size: 15px; font-weight: 700; line-height: 1;
background: var(--green); color: var(--cream); cursor: pointer;
transition: background .18s ease, transform .18s ease; text-align: center;
}
.btn:hover { background: var(--forest); text-decoration: none; color: var(--cream); }
.btn--mint { background: var(--mint); color: var(--ink); }
.btn--mint:hover { background: var(--mint-pale); color: var(--ink); }
.btn--outline { background: transparent; color: var(--forest); border: 1px solid var(--line-strong); padding: 12px 24px; }
.btn--outline:hover { background: rgba(27, 67, 50, .06); color: var(--forest); }
.btn--light { background: var(--cream); color: var(--forest); }
.btn--light:hover { background: #fff; color: var(--forest); }
.btn--block { width: 100%; }
.btn--sm { padding: 9px 18px; font-size: 13.5px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* ── offer bar ───────────────────────────────────────────────────────────── */
.offerbar {
background: var(--ink-2); color: var(--mint-pale);
font-size: 13px; line-height: 1.3;
}
.offerbar .container {
display: flex; align-items: center; justify-content: center; gap: 26px;
padding-top: 13px; padding-bottom: 13px; flex-wrap: wrap; text-align: center;
}
.offerbar__gift {
display: inline-flex; align-items: center; gap: 10px;
border: 1px solid rgba(201, 162, 39, .4); border-radius: 999px; padding: 3px 14px;
}
.offerbar__code {
font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .18em;
color: var(--gold); background: rgba(201, 162, 39, .16); border-radius: 999px; padding: 2px 9px;
}
.offerbar__rating { color: var(--gold); }
@media (max-width: 900px) { .offerbar__rating { display: none; } }
@media (max-width: 620px) { .offerbar__gift { display: none; } }
/* ── nav ─────────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 90; background: var(--forest); color: var(--cream); }
.site-header.is-scrolled { box-shadow: 0 10px 30px rgba(10, 31, 22, .28); }
.nav-inner {
display: flex; align-items: center; gap: 20px;
min-height: var(--nav-h); padding-top: 10px; padding-bottom: 10px;
}
.brand {
font-family: var(--display); font-size: 21px; font-weight: 700; letter-spacing: .06em;
color: var(--cream); text-transform: uppercase; margin-right: auto; white-space: nowrap;
}
.brand:hover { text-decoration: none; color: var(--cream); }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a:not(.btn) { color: var(--muted-light); font-size: 14.5px; font-weight: 600; }
.nav-links a:not(.btn):hover { color: var(--cream); text-decoration: none; }
.nav-links a.is-active { color: var(--cream); }
.nav-pill {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(183, 228, 199, .14); border-radius: 999px; padding: 7px 15px !important;
color: var(--cream) !important;
}
.nav-cart {
display: inline-flex; align-items: center; gap: 8px;
background: var(--mint); color: var(--ink) !important; border-radius: 999px;
padding: 9px 18px !important; font-weight: 700 !important; font-size: 14px !important;
}
.nav-cart:hover { background: var(--mint-pale); }
.nav-toggle {
display: none; background: rgba(183, 228, 199, .14); border: 0; color: var(--cream);
width: 40px; height: 40px; border-radius: 10px; font-size: 19px; cursor: pointer;
}
/* language switcher */
.lang { position: relative; }
.lang__btn {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
background: rgba(183, 228, 199, .14); border: 0; border-radius: 999px;
padding: 7px 13px; color: var(--cream); font-family: var(--body); font-size: 13.5px; font-weight: 700;
}
.lang__menu {
display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 95;
min-width: 172px; flex-direction: column; gap: 2px; padding: 6px;
background: #12301f; border: 1px solid rgba(183, 228, 199, .25); border-radius: 12px;
box-shadow: 0 14px 34px rgba(10, 31, 22, .45);
}
.lang.is-open .lang__menu { display: flex; }
.lang__menu a {
display: flex; align-items: center; gap: 9px; border-radius: 8px; padding: 8px 10px;
color: var(--cream) !important; font-size: 13px; font-weight: 600;
}
.lang__menu a:hover { background: rgba(183, 228, 199, .14); text-decoration: none; }
.lang__menu a.is-current { background: rgba(183, 228, 199, .12); }
.lang__check { margin-left: auto; color: var(--mint); font-weight: 700; }
@media (max-width: 1080px) {
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
.nav-links {
display: none; position: absolute; left: 0; right: 0; top: 100%;
flex-direction: column; align-items: stretch; gap: 4px;
background: var(--forest); padding: 14px var(--pad) 22px;
box-shadow: 0 18px 40px rgba(10, 31, 22, .4);
}
.site-header.is-open .nav-links { display: flex; }
.nav-links a:not(.btn) { padding: 11px 0; font-size: 16px; border-bottom: 1px solid rgba(183, 228, 199, .12); }
.nav-pill, .nav-cart { align-self: flex-start; margin-top: 10px; }
.lang { align-self: flex-start; margin-top: 10px; }
.lang__menu { right: auto; left: 0; }
}
/* ── hero ────────────────────────────────────────────────────────────────── */
.hero { background: var(--cream); padding-top: 64px; padding-bottom: 64px; }
.hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hero__title { margin-bottom: 20px; }
.hero__body { font-size: 17px; color: var(--muted); margin-bottom: 26px; max-width: 54ch; }
.hero__body strong { color: var(--forest); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 13.5px; color: var(--muted); }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero__stars { color: var(--gold); letter-spacing: 1px; }
.hero__media img { border-radius: 18px; box-shadow: 0 26px 60px rgba(10, 31, 22, .22); width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.hero__stats {
display: flex; flex-wrap: wrap; gap: 12px 38px;
margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
font-size: 13.5px; color: var(--muted);
}
.hero__stats strong { color: var(--forest); font-size: 15px; }
@media (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr; gap: 32px; }
.hero__media { order: -1; }
}
/* ── generic band + card grids ───────────────────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--reverse .split__media { order: -1; }
.split__media img { border-radius: 18px; width: 100%; object-fit: cover; aspect-ratio: 3 / 2; }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 30px; } .split--reverse .split__media { order: 0; } }
.facts { display: flex; flex-wrap: wrap; gap: 0; margin-top: 28px; }
.facts__item { flex: 1 1 180px; padding: 0 22px; border-left: 2px solid var(--mint); }
.facts__item:first-child { padding-left: 0; }
.facts__item h3 { font-size: 19px; margin-bottom: 5px; }
.facts__item p { font-size: 13.5px; color: var(--muted); }
/* --muted is a dark ink meant for cream backgrounds; on the forest/ink bands it reads as near-invisible.
Every muted-body element inside a dark band flips to the light muted tone. */
.section--forest .facts__item p, .section--ink .facts__item p,
.section--forest .card p, .section--ink .card p,
.section--forest .form-note, .section--ink .form-note,
.section--forest .count-note, .section--ink .count-note,
.section--forest .crumbs, .section--ink .crumbs,
.section--forest .crumbs a, .section--ink .crumbs a { color: var(--muted-light); }
.section--forest .card, .section--ink .card { background: rgba(245, 245, 240, .06); border-color: rgba(183, 228, 199, .2); }
.section--forest .card h3, .section--ink .card h3 { color: var(--cream); }
.grid { display: grid; gap: 22px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }
.card {
background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 26px;
}
.card h3 { margin-bottom: 8px; }
.card p { font-size: 14.5px; color: var(--muted); }
/* two ways */
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) { .ways { grid-template-columns: 1fr; } }
.way { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; display: flex; flex-direction: column; }
.way--dark { background: var(--forest); border-color: transparent; color: var(--cream); }
.way--dark h3, .way--dark p { color: var(--cream); }
.way__badge {
display: inline-block; align-self: flex-start; margin-bottom: 14px;
background: rgba(82, 183, 136, .18); color: var(--mint); border-radius: 999px;
padding: 4px 12px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
}
.way h3 { font-size: 26px; margin-bottom: 12px; }
.way p { margin-bottom: 18px; }
.way ul { list-style: none; margin: 0 0 22px; padding: 0; }
.way li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 14.5px; }
.way li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.way--dark li { color: var(--muted-light); }
.way .btn { align-self: flex-start; margin-top: auto; }
/* origin */
.origin { display: grid; grid-template-columns: 1.05fr .95fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .origin { grid-template-columns: 1fr; gap: 28px; } }
.origin__card { background: var(--forest); color: var(--cream); border-radius: 20px; padding: 34px; }
.origin__card h3 { color: var(--cream); font-size: 32px; margin-bottom: 6px; }
.origin__meta { color: var(--mint); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; margin-bottom: 18px; }
.origin__card p { color: var(--muted-light); font-size: 15px; }
.origin__media img { border-radius: 20px; width: 100%; object-fit: cover; aspect-ratio: 3 / 4; max-height: 520px; }
/* mystery box teaser */
.mystery { display: grid; grid-template-columns: .95fr 1.05fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .mystery { grid-template-columns: 1fr; gap: 28px; } .mystery__media { order: -1; } }
.mystery__media img { border-radius: 20px; width: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }
.plan {
background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px;
display: flex; flex-direction: column; gap: 6px;
}
.plan.is-featured { border-color: var(--mint); box-shadow: 0 0 0 2px rgba(82, 183, 136, .22); }
.plan__name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.plan__body { font-size: 13px; color: var(--muted); }
.plan__price { font-family: var(--display); font-size: 24px; font-weight: 700; margin-top: auto; }
.plan__per { font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }
.section--forest .plan, .section--ink .plan { background: rgba(245, 245, 240, .06); border-color: rgba(183, 228, 199, .2); }
.section--forest .plan__name, .section--ink .plan__name,
.section--forest .plan__price, .section--ink .plan__price { color: var(--cream); }
.section--forest .plan__body, .section--ink .plan__body,
.section--forest .plan__per, .section--ink .plan__per { color: var(--muted-light); }
/* category tiles */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .tiles { grid-template-columns: 1fr; } }
.tile {
position: relative; display: block; border-radius: 18px; overflow: hidden;
min-height: 300px; color: var(--cream);
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10, 31, 22, .12) 0%, rgba(10, 31, 22, .82) 100%);
}
.tile__body { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 300px; padding: 26px; }
.tile__name { font-family: var(--display); font-size: 26px; font-weight: 700; margin-bottom: 8px; }
.tile__cta { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; color: var(--mint-pale); }
.tile:hover { text-decoration: none; color: var(--cream); }
.tile:hover .tile__cta { color: var(--cream); }
/* reviews */
.rating-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.rating-head__stars { color: var(--gold); font-size: 22px; letter-spacing: 2px; }
.rating-head__score { font-family: var(--display); font-size: 26px; font-weight: 700; }
.rating-head__count { color: var(--muted); font-size: 14px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; }
.review__stars { color: var(--gold); font-size: 14px; letter-spacing: 1px; margin-bottom: 12px; }
.review h3 { font-size: 17px; margin-bottom: 10px; }
.review p { font-size: 14.5px; color: var(--muted); margin-bottom: 18px; }
.review__who { display: flex; align-items: center; gap: 11px; margin-top: auto; }
.review__avatar {
width: 38px; height: 38px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
color: var(--cream); font-size: 13px; font-weight: 700; letter-spacing: .04em;
}
.review__name { font-size: 14px; font-weight: 700; }
.review__meta { font-size: 12px; color: var(--muted); }
/* newsletter */
.newsletter { text-align: center; }
.newsletter__badge {
display: inline-block; margin-bottom: 14px; border-radius: 999px; padding: 4px 14px;
background: rgba(201, 162, 39, .16); border: 1px solid rgba(201, 162, 39, .4);
color: var(--gold); font-family: var(--display); font-size: 12.5px; font-weight: 700;
}
.newsletter h2 { margin-bottom: 12px; }
.newsletter .lead { margin: 0 auto 22px; }
.newsletter__form { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 520px; margin: 0 auto; }
.newsletter__form .input { flex: 1 1 240px; }
.newsletter__note { margin-top: 14px; font-size: 12.5px; color: var(--muted-light); }
/* ── forms ───────────────────────────────────────────────────────────────── */
.input, .textarea, .select {
width: 100%; border: 1px solid var(--line-strong); border-radius: 12px;
padding: 13px 16px; font-family: var(--body); font-size: 15px; color: var(--forest);
background: #fff;
}
.input:focus, .textarea:focus, .select:focus { outline: 2px solid var(--mint); outline-offset: 1px; }
.textarea { min-height: 130px; resize: vertical; }
.field { margin-bottom: 14px; }
.label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.section--forest .input, .section--ink .input,
.section--forest .textarea, .section--ink .textarea {
background: rgba(245, 245, 240, .08); border-color: rgba(183, 228, 199, .28); color: var(--cream);
}
.section--forest .input::placeholder, .section--ink .input::placeholder,
.section--forest .textarea::placeholder, .section--ink .textarea::placeholder { color: rgba(213, 230, 216, .75); }
.form-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.section--forest .form-note { color: var(--muted-light); }
.flash { border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; background: rgba(82, 183, 136, .16); border: 1px solid var(--mint); font-size: 14.5px; }
/* ── contact ─────────────────────────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact__card { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px; }
.contact__row { margin-bottom: 18px; }
.contact__row:last-child { margin-bottom: 0; }
.contact__row strong { display: block; font-size: 16px; }
.contact__form { background: var(--forest); color: var(--cream); border-radius: 18px; padding: 28px; }
.contact__form h3 { color: var(--cream); font-size: 24px; margin-bottom: 18px; }
/* ── product grid + cards ────────────────────────────────────────────────── */
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .product-grid { grid-template-columns: 1fr; } }
.product-card {
position: relative; display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
transition: box-shadow .18s ease, transform .18s ease;
}
.product-card:hover { box-shadow: 0 16px 34px rgba(10, 31, 22, .12); transform: translateY(-2px); text-decoration: none; }
.product-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: #fff; }
.product-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.product-card__ph { position: absolute; inset: 0; background: linear-gradient(160deg, var(--forest), var(--green)); display: flex; align-items: center; justify-content: center; color: var(--cream); font-family: var(--display); font-size: 30px; font-weight: 700; }
.product-card__body { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px 18px; flex: 1; }
.product-card__brand { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.product-card__name { font-family: var(--display); font-size: 16.5px; font-weight: 700; line-height: 1.25; color: var(--forest); }
.product-card__name:hover { text-decoration: none; }
.product-card__size { font-size: 13px; color: var(--muted); }
.product-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; }
.product-card__price { font-family: var(--display); font-size: 19px; font-weight: 700; }
.product-card__price s { font-size: 14px; color: var(--muted); font-weight: 400; margin-left: 6px; }
.badge {
position: absolute; top: 12px; left: 12px; z-index: 2;
border-radius: 999px; padding: 4px 11px;
font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
background: var(--gold); color: var(--ink);
}
.badge--new { background: var(--terra); color: #fff; }
.badge--premium { background: var(--forest); color: var(--cream); }
/* ── category / shop pages ───────────────────────────────────────────────── */
.crumbs { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.page-head { padding-top: 46px; padding-bottom: 30px; }
.page-head h1 { margin-bottom: 14px; }
.page-head .lead { margin-bottom: 0; }
.subnav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.chip {
border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 16px;
font-size: 13.5px; font-weight: 600; color: var(--forest); background: #fff;
}
.chip:hover { background: var(--sand); text-decoration: none; }
.chip.is-active { background: var(--forest); border-color: var(--forest); color: var(--cream); }
.count-note { font-size: 13.5px; color: var(--muted); margin-top: 18px; }
/* ── product detail ──────────────────────────────────────────────────────── */
/* The media column is capped at 480px on purpose: the product packshots are 472–600px originals, so a
wider box would paint them upscaled (soft on desktop and on every retina screen). */
.pdp { display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 50px; align-items: start; }
@media (max-width: 900px) { .pdp { grid-template-columns: 1fr; gap: 26px; } }
.pdp__media { background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; position: relative; aspect-ratio: 1 / 1; max-width: 460px; }
.pdp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 22px; }
.pdp__brand { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.pdp h1 { font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 12px; }
.pdp__price { font-family: var(--display); font-size: 32px; font-weight: 700; margin: 14px 0 4px; }
.pdp__vat { font-size: 12.5px; color: var(--muted); margin-bottom: 20px; }
.pdp__stock { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--green); font-weight: 600; margin-bottom: 20px; }
.pdp__form { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 26px; }
.pdp__qty { width: 92px; }
.specs { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14.5px; }
.specs td { padding: 9px 0; border-bottom: 1px solid var(--line); }
.specs td:first-child { color: var(--muted); width: 40%; }
.pdp__group { margin-bottom: 16px; }
.pdp__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pdp__chip { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 15px; font-size: 13.5px; cursor: pointer; background: #fff; }
.pdp__chip input { accent-color: var(--green); }
.pdp__swatch { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
/* ── glossary / steps / faq ──────────────────────────────────────────────── */
.glossary { list-style: none; margin: 0; padding: 0; }
.glossary li { padding: 13px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--muted); }
.glossary li:last-child { border-bottom: 0; }
.glossary strong { color: var(--forest); }
.step__no { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--mint); margin-bottom: 10px; }
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
list-style: none; cursor: pointer; padding: 20px 40px 20px 0; position: relative;
font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--forest);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 17px; font-size: 24px; font-weight: 400; color: var(--green); }
.faq details[open] summary::after { content: "−"; }
.faq__body { padding: 0 0 22px; color: var(--muted); font-size: 15px; max-width: 78ch; }
/* ── legal ───────────────────────────────────────────────────────────────── */
.legal h2 { font-size: 24px; margin: 34px 0 12px; }
.legal .legal__body { color: var(--muted); font-size: 15.5px; }
/* ── cart / checkout / account (money path — starter markup, brand skin) ─── */
.content { padding-top: 56px; padding-bottom: 72px; }
.cart-table, .account-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.cart-table td, .account-table td, .account-table th { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: 14.5px; }
.account-table th { text-align: left; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cart-line-media img { width: 62px; height: 62px; object-fit: contain; }
.cart-qty-form { display: inline-flex; align-items: center; gap: 10px; }
.cart-qty-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line-strong); background: #fff; cursor: pointer; font-size: 15px; color: var(--forest); }
.cart-qty-btn:hover { background: var(--sand); }
.cart-line-total { font-family: var(--display); font-weight: 700; white-space: nowrap; }
.cart-remove { background: none; border: 0; color: var(--muted); font-size: 20px; cursor: pointer; line-height: 1; }
.cart-remove:hover { color: var(--terra); }
.cart-subtotal { font-size: 17px; margin-top: 20px; }
.cart-subtotal strong { font-family: var(--display); font-size: 22px; }
.cart-discount-note { font-size: 13.5px; color: var(--muted); }
.checkout-grid, .checkout-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: 34px; align-items: start; }
@media (max-width: 900px) { .checkout-grid, .checkout-layout { grid-template-columns: 1fr; } }
.checkout-summary, .order-summary { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
fieldset { border: 1px solid var(--line); border-radius: 16px; padding: 22px; margin: 0 0 20px; background: #fff; }
legend { font-family: var(--display); font-size: 19px; font-weight: 700; padding: 0 8px; }
/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer { background: var(--ink); color: var(--muted-light); font-size: 14px; }
.site-footer a { color: var(--muted-light); }
.site-footer a:hover { color: var(--cream); text-decoration: none; }
.footer-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-top: 60px; padding-bottom: 40px; }
@media (max-width: 900px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 560px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand { font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: .06em; color: var(--cream); text-transform: uppercase; }
.footer-tagline { font-size: 11px; font-weight: 700; letter-spacing: .18em; color: var(--mint); margin: 6px 0 14px; }
.footer-col h4 { font-size: 11.5px; font-weight: 700; letter-spacing: .16em; color: var(--cream); text-transform: uppercase; margin-bottom: 14px; font-family: var(--body); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 9px; }
.footer-pay { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.footer-pay span { border: 1px solid rgba(183, 228, 199, .25); border-radius: 6px; padding: 3px 9px; font-size: 9.5px; letter-spacing: .1em; color: var(--muted-light); }
.footer-bottom {
display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: center;
border-top: 1px solid rgba(183, 228, 199, .14); padding-top: 22px; padding-bottom: 30px; font-size: 12.5px;
}
.footer-bottom .spacer { margin-left: auto; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 18px; color: var(--mint); }
.credit { color: rgba(213, 230, 216, .6); }
/* ── utility ─────────────────────────────────────────────────────────────── */
.stack-sm > * + * { margin-top: 10px; }
.mt-24 { margin-top: 24px; }
.mt-32 { margin-top: 32px; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ── product detail: the prototype's buy-box ─────────────────────────────── */
.pdp__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.pdp__tag {
font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--green); background: rgba(45, 106, 79, .1); border-radius: 999px; padding: 4px 11px;
}
.pdp__brandline { font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.pdp__sub { font-size: 15px; color: var(--muted); margin: 6px 0 14px; }
.pdp__why { border-top: 1px solid var(--line); margin: 22px 0 24px; padding-top: 20px; }
.pdp__why-title { font-size: 19px; margin-bottom: 10px; }
.pdp__pitch { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.pdp__points { list-style: none; margin: 0; padding: 0; }
.pdp__points li { position: relative; padding-left: 26px; margin-bottom: 9px; font-size: 14.5px; color: var(--muted); }
.pdp__points li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
/* size picker — one row per pack, price on the right, savings chip when the tier saves money */
.pdp__group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.pdp__guide { font-size: 13px; }
.sizes { display: flex; flex-direction: column; gap: 8px; }
.size {
display: flex; align-items: center; gap: 12px; cursor: pointer;
border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 16px; background: #fff;
transition: border-color .15s ease, box-shadow .15s ease;
}
.size:hover { border-color: var(--green); }
.size:has(input:checked) { border-color: var(--green); box-shadow: 0 0 0 2px rgba(45, 106, 79, .16); }
.size input { accent-color: var(--green); flex: none; }
.size__label { flex: 1; font-size: 14.5px; font-weight: 600; }
.size__price { font-family: var(--display); font-weight: 700; font-size: 16px; }
.size__save {
font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: var(--ink);
background: var(--mint-pale); border-radius: 999px; padding: 3px 9px; white-space: nowrap;
}
/* mystery-box cross-sell strip */
.pdp__mb {
display: flex; gap: 10px; align-items: flex-start;
background: rgba(201, 162, 39, .1); border: 1px solid rgba(201, 162, 39, .32);
border-radius: 12px; padding: 12px 15px; margin: 18px 0; font-size: 13.5px; color: var(--forest);
}
.pdp__mb-mark { color: var(--gold); font-size: 15px; line-height: 1.3; }
/* qty stepper + buy button */
.pdp__buy { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 18px; }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; overflow: hidden; background: #fff; }
.qty__btn { width: 40px; height: 46px; border: 0; background: none; font-size: 17px; color: var(--forest); cursor: pointer; }
.qty__btn:hover { background: var(--sand); }
.qty__input { width: 46px; height: 46px; border: 0; text-align: center; font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--forest); -moz-appearance: textfield; }
.qty__input::-webkit-outer-spin-button, .qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.btn--buy { flex: 1 1 220px; height: 46px; font-size: 15.5px; }
.pdp__guarantee { margin-top: 12px; font-size: 13px; color: var(--muted); }
/* trust row */
.trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0; text-align: center; }
.trust__item { border: 1px solid var(--line); border-radius: 12px; padding: 12px 8px; background: #fff; }
.trust__item strong { display: block; font-size: 13px; }
.trust__item span { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .trust { grid-template-columns: 1fr; } }
/* accordions */
.acc { border-top: 1px solid var(--line); margin-top: 22px; }
.acc details { border-bottom: 1px solid var(--line); }
.acc summary {
list-style: none; cursor: pointer; position: relative; padding: 16px 34px 16px 0;
font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--forest);
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after { content: "+"; position: absolute; right: 4px; top: 13px; font-size: 21px; font-weight: 400; color: var(--green); }
.acc details[open] summary::after { content: "−"; }
.acc__body { padding-bottom: 18px; color: var(--muted); font-size: 14.5px; }
.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip-mini {
font-size: 11.5px; font-weight: 600; color: var(--forest);
background: var(--sand); border-radius: 999px; padding: 5px 11px;
}
/* grouped card: a product with a size picker advertises its lowest price */
.product-card__from { font-size: 12px; color: var(--muted); margin-right: 3px; }
/* ═══════════════════════════════════════════════════════════════════════════
Design-parity layer — matches the client's phone-export design (2026-08-01).
Appended after the base sheet; later rules win. New home sections use the
solx/flavx/wayx/mbx/catx/revx/nlx blocks; hero/offerbar/nav/footer are
retuned in place. Phone spec follows the design's 820px/480px breakpoints.
═══════════════════════════════════════════════════════════════════════════ */
:root { --wrap: 1236px; --pad: 28px; }
@media (max-width: 480px) { :root { --pad: 18px; } }
/* Hard lock against sideways panning on phones: the guard must live on —
body-only overflow-x:hidden still lets iOS drag the page and show white gutters. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) {
html, body { overflow-x: clip; }
}
@keyframes glowPulse { 0%, 100% { opacity: .8; } 50% { opacity: 1; } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
/* ── offer bar: 12px, gift pill stays on the phone, rating drops at 480 ──── */
.offerbar { font-size: 12px; letter-spacing: .4px; }
.offerbar .container { padding-top: 8px; padding-bottom: 8px; gap: 28px; }
/* One line, one font: the email-signup offer, centred like any store bar. */
.offerbar { font-size: 13px; }
.offerbar .container { padding-top: 10px; padding-bottom: 10px; }
.offerbar__gift {
display: inline-block; border: 0; padding: 0; white-space: nowrap;
font-family: var(--body); font-weight: 600; color: var(--mint-pale);
max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.offerbar__gift:hover { color: var(--cream); text-decoration: none; }
@media (max-width: 480px) {
.offerbar { font-size: 11px; }
.offerbar .container { padding-left: 10px; padding-right: 10px; }
}
/* ── brand logo in the header and footer ─────────────────────────────────── */
.brand { display: inline-flex; align-items: center; padding: 2px 0; }
.brand__logo { display: block; width: auto; height: 34px; }
.brand__mark { display: none; width: auto; height: 44px; }
.footer-brand { display: inline-block; }
.footer-brand__logo { display: block; width: auto; height: 30px; }
/* Phone header shows the full wordmark (icon + text). Swap the two display rules
below to go back to the compact gourd mark alone. */
@media (max-width: 820px) {
.brand__logo { display: block; height: 42px; }
.brand__mark { display: none; }
/* The controls must not out-weigh the logo. */
.nav-inner { min-height: 68px; }
.nav-toggle { width: 36px; height: 36px; font-size: 17px; }
.nav-account { padding: 7px 11px; }
.nav-account svg { width: 14px; height: 14px; }
.nav-cart { padding: 7px 11px !important; }
}
@media (max-width: 380px) {
.brand__logo { height: 36px; }
.nav-toggle { width: 34px; height: 34px; }
}
/* ── nav: pill links, tighter cart pill, 60px phone header ───────────────── */
/* Header type: a plain system UI face — the clearest thing to read at small sizes. */
.nav-links a, .nav-cart, .nav-account, .lang__btn, .lang__menu a, .nav-lang-row__opt {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
letter-spacing: .005em;
}
.nav-links a:not(.btn):not(.nav-cart) {
font-size: 14.5px; font-weight: 500; border-radius: 999px; padding: 8px 12px;
color: #eaf3ec; transition: all .2s ease; white-space: nowrap;
}
.nav-links a:not(.btn):not(.nav-cart):hover { color: #fff; }
.nav-links a.is-active { font-weight: 700; color: #fff; }
/* Desktop: tighter spacing between the links themselves, and a guaranteed gap
after the logo — Latvian labels are long enough to crowd it otherwise. */
@media (min-width: 821px) {
.nav-links { gap: 6px; margin-left: 20px; }
.nav-links a:not(.btn):not(.nav-cart) { font-size: 13.5px; padding: 8px 7px; }
.nav-links .nav-cart { margin-left: 6px; }
}
/* With About us moved to the footer there is room for a larger logo up top.
The scale is visual only — the layout box stays 38px, so no other header
element shifts by a single pixel. */
@media (min-width: 821px) {
.brand__logo { height: 38px; transform-origin: left center; }
}
@media (min-width: 821px) and (max-width: 1199px) {
.brand__logo { transform: scale(1.12); }
.brand { padding-right: 17px; }
}
@media (min-width: 1200px) and (max-width: 1399px) {
.brand__logo { transform: scale(1.28); }
.brand { padding-right: 40px; }
}
@media (min-width: 1400px) {
.brand__logo { transform: scale(1.45); }
.brand { padding-right: 64px; }
}
.nav-links a:not(.btn):not(.nav-cart):hover { background: rgba(183, 228, 199, .14); color: var(--cream); }
.nav-links a.is-active { background: rgba(183, 228, 199, .18); color: var(--cream); }
.nav-cart { font-size: 13px !important; padding: 8px 16px !important; }
.lang__flag { border-radius: 2.5px; box-shadow: 0 0 0 1px rgba(10, 31, 22, .35); flex: none; }
.nav-right { display: flex; align-items: center; gap: 8px; flex: none; }
.nav-right .lang, .nav-right .nav-cart { margin-top: 0 !important; align-self: center !important; }
.nav-right .nav-toggle { display: none; }
.nav-lang-row { display: none; }
@media (max-width: 1080px) {
.nav-right .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
/* Language lives in the burger on small screens — first row, options as flag pills. */
.nav-right .lang { display: none; }
.nav-lang-row {
display: flex; justify-content: flex-end; gap: 8px;
padding: 11px 0; border-bottom: 1px solid rgba(183, 228, 199, .12);
}
.nav-lang-row__opt {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(183, 228, 199, .14); border-radius: 999px; padding: 7px 13px;
color: var(--cream) !important; font-size: 13.5px !important; font-weight: 700;
border-bottom: 0 !important;
}
.nav-lang-row__opt.is-current { background: rgba(183, 228, 199, .28); }
/* Burger menu contents hang to the right; Blogs + BUJ share one row so the
menu stays short. */
.nav-links { text-align: right; flex-direction: row !important; flex-wrap: wrap; align-content: flex-start; gap: 0 10px; }
.nav-links > a { flex: 1 1 100%; }
.nav-links > a:nth-of-type(2), .nav-links > a:nth-of-type(3) { flex: 1 1 calc(50% - 5px); }
.nav-lang-row { flex: 1 1 100%; }
.nav-links a:not(.btn):not(.nav-lang-row__opt) { border-radius: 8px; padding: 11px 10px; text-align: right; }
}
@media (max-width: 820px) {
.nav-inner { min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
.brand { font-size: 19px; white-space: normal; line-height: 1.05; }
.nav-right { gap: 6px; }
/* Cart pill on the phone: just the icon and the count. */
.nav-cart { padding: 8px 12px !important; }
.nav-cart__label { display: none; }
}
/* ── hero: design metrics; phone = centred text first, no cta/trust/stats ── */
.hero { padding-top: 44px; padding-bottom: 42px; }
.hero__grid { grid-template-columns: 1fr 1.06fr; gap: 24px; align-items: stretch; }
.hero__title { font-size: 44px; line-height: 1.08; margin-bottom: 0; }
.hero__body { font-size: 16.5px; color: #4a5a50; margin-bottom: 0; margin-top: 16px; max-width: 510px; }
.hero__cta { margin-top: 24px; margin-bottom: 0; }
.hero__trust { margin-top: 20px; gap: 10px 18px; font-size: 13px; }
.hero__stats { margin-top: 22px; padding-top: 18px; gap: 12px 28px; }
.hero__media { align-self: stretch; }
.hero__media img { height: 100%; min-height: 340px; aspect-ratio: auto; border-radius: 18px; box-shadow: 0 16px 38px rgba(27, 67, 50, .18); }
@media (min-width: 821px) and (max-width: 900px) {
.hero__grid { grid-template-columns: 1fr 1.06fr; gap: 24px; }
.hero__media { order: 0; }
}
@media (max-width: 820px) {
.hero { padding-top: 26px; padding-bottom: 26px; }
.hero__grid { grid-template-columns: 1fr; gap: 18px; }
.hero__media { display: none; }
.hero__text { text-align: center; }
.hero__title { font-size: 34px; }
.hero__body { margin-left: auto; margin-right: auto; margin-top: 12px; }
.hero__stats { display: none; }
/* The phone hero must sell on sight: both buy buttons side by side, then the trust line. */
.hero__cta {
display: flex; justify-content: center; flex-wrap: nowrap; gap: 10px;
margin-top: 20px; margin-bottom: 0;
}
.hero__cta .btn {
flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px;
font-size: 14px; white-space: nowrap;
}
/* Two reinforcements only on the phone — shipping + dispatch — on a single line. */
.hero__trust {
display: flex; justify-content: center; flex-wrap: nowrap; gap: 14px;
margin-top: 16px; font-size: 12.5px; white-space: nowrap;
}
.hero__trust > span:first-child { display: none; }
}
@media (max-width: 480px) {
.hero__title { font-size: 29px; }
.hero__cta .btn { font-size: 13px; }
.hero__trust { font-size: 11px; gap: 10px; }
}
/* ── solx: full-bleed photo soluble band ─────────────────────────────────── */
.solx { position: relative; overflow: hidden; background: var(--ink-2); }
.solx__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.solx__shade { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(8, 26, 17, .93) 0%, rgba(8, 26, 17, .78) 42%, rgba(8, 26, 17, .15) 78%, rgba(8, 26, 17, .05) 100%); }
.solx__inner { position: relative; padding-top: 62px; padding-bottom: 64px; color: var(--cream); }
.solx__title { font-size: 50px; line-height: 1.05; color: var(--cream); margin: 0; }
.solx__lead { margin-top: 18px; font-size: 16.5px; line-height: 1.65; color: var(--muted-light); max-width: 470px; }
.solx__facts { margin-top: 26px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; max-width: 520px; }
.solx__fact { border-left: 2px solid var(--mint); padding-left: 12px; }
.solx__fact h3 { font-size: 18px; color: var(--cream); margin: 0; }
.solx__fact p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: #a9c4b3; }
.solx__cta { margin-top: 30px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.solx__note { font-size: 13px; color: #a9c4b3; }
.solx__cta2 { display: none; align-items: center; justify-content: flex-end; }
@media (max-width: 820px) {
.solx__inner { padding-top: 26px; padding-bottom: 28px; }
.solx__title { font-size: 34px; }
.solx__cta { display: none; }
.solx__cta2 { display: flex; }
}
/* ── flavx: white video band + three flavour cards; phone carousel ───────── */
.flavx { position: relative; overflow: hidden; background: #fff; border-top: 1px solid rgba(27, 67, 50, .10); border-bottom: 1px solid rgba(27, 67, 50, .10); }
.flavx__vid {
position: absolute; right: 0; top: 0; bottom: 0; width: 47%; height: 100%;
object-fit: cover; object-position: center; opacity: .42; pointer-events: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 70%);
mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.55) 34%, #000 70%);
}
.flavx__wrap { position: relative; padding-top: 34px; padding-bottom: 36px; }
.flavx__band { position: relative; min-height: 400px; display: flex; align-items: center; }
.flavx__copy { position: relative; width: 58%; max-width: 640px; padding: 14px 0; }
.flavx__title { font-size: 38px; color: var(--forest); line-height: 1.05; margin: 0; }
.flavx__row { margin-top: 24px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.flavx__card {
background: #FBF8EF; border: 1px solid rgba(27, 67, 50, .14); border-radius: 14px;
overflow: hidden; display: flex; flex-direction: column; color: inherit;
transition: all .2s ease;
}
.flavx__card:hover { box-shadow: 0 10px 26px rgba(27, 67, 50, .14); transform: translateY(-3px); border-color: rgba(45, 106, 79, .35); text-decoration: none; }
.flavx__media { position: relative; display: block; height: 196px; background: #fff; }
.flavx__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.flavx__cbody { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.flavx__cname { font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--forest); line-height: 1.25; }
.flavx__cbrand { font-size: 12px; color: #79766a; }
.flavx__ctag { margin-top: 3px; font-size: 11.5px; font-weight: 600; color: var(--green); }
.flavx__cfoot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.flavx__cprice { font-size: 15.5px; font-weight: 700; color: var(--forest); }
@media (max-width: 820px) {
.flavx__vid { width: 100%; opacity: .5; -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), #000 70%); mask-image: linear-gradient(to bottom, rgba(0,0,0,.15), #000 70%); }
.flavx__wrap { padding-top: 10px; padding-bottom: 14px; }
.flavx__band { min-height: 0; }
.flavx__copy { width: 100%; max-width: none; padding: 4px 0 0; }
.flavx__title { display: none; }
.flavx__row {
display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
margin: 0 calc(-1 * var(--pad)); padding: 4px var(--pad) 10px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.flavx__row::-webkit-scrollbar { display: none; }
.flavx__card { flex: 0 0 76%; max-width: 330px; scroll-snap-align: center; }
.flavx__media { height: 240px; }
.flavx__cbody { padding: 16px 16px 18px; gap: 6px; }
.flavx__cname { font-size: 20px; }
.flavx__cbrand { font-size: 13.5px; }
.flavx__ctag { font-size: 13px; }
.flavx__cprice { font-size: 19px; }
.flavx__cfoot .btn--sm { font-size: 14.5px; padding: 12px 22px; }
}
/* ── wayx: instant-or-traditional, image-headed cards ────────────────────── */
.wayx { background: var(--sand); border-top: 1px solid #dfdccd; border-bottom: 1px solid #dfdccd; padding-top: 56px; padding-bottom: 60px; }
.wayx__h { font-size: 38px; color: var(--forest); line-height: 1.05; margin: 0 0 26px; }
.wayx__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.wayx__card { position: relative; border-radius: 18px; overflow: hidden; border: 2px solid var(--mint); background: #fff; display: flex; flex-direction: column; }
.wayx__mediaA { position: relative; display: block; height: 216px; overflow: hidden; background: var(--ink-2); }
.wayx__mediaA img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wayx__badge {
position: absolute; top: 14px; left: 14px; background: var(--mint); color: #08210f;
font-size: 10.5px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
border-radius: 999px; padding: 6px 12px;
}
.wayx__mediaB {
position: relative; height: 216px; overflow: hidden; border-bottom: 1px solid var(--line);
background: #fff; display: flex; align-items: center; justify-content: center;
}
.wayx__pack { height: 190px; width: auto; object-fit: contain; }
.wayx__pack--l { margin-right: -26px; }
.wayx__pack--c { height: 210px; position: relative; z-index: 1; }
.wayx__pack--r { margin-left: -26px; }
.wayx__body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; background: #fdfcf6; }
.wayx__body h3 { font-family: var(--display); font-size: 25px; font-weight: 700; color: var(--forest); margin: 0; }
.wayx__body p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.6; color: #4a5a50; }
.wayx__row { margin-top: auto; padding-top: 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.wayx__row .btn { flex: none; white-space: nowrap; font-size: 14.5px; }
.wayx__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; color: var(--forest); }
.wayx__list li { position: relative; padding-left: 22px; }
.wayx__list li::before { content: "\2713"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.wayx__list--gold li::before { color: var(--gold); }
@media (max-width: 820px) {
/* Phone: no section heading, tight paddings, card titles on a single line. */
.wayx { padding-top: 26px; padding-bottom: 26px; }
.wayx__h { display: none; }
.wayx__grid { grid-template-columns: 1fr; gap: 16px; }
.wayx__grid > .wayx__card:first-child { order: 2; }
.wayx__body { padding: 20px 22px 22px; }
.wayx__body h3 { font-size: 22px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.wayx__row { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 14px; }
}
/* ── mbx: mystery-box gradient card with the glowing "?" pane ────────────── */
.mbx { padding-top: 30px; padding-bottom: 74px; background: var(--cream); }
.mbx__card {
background: linear-gradient(160deg, var(--forest) 0%, var(--green) 100%);
border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr;
box-shadow: 0 24px 60px rgba(27, 67, 50, .28);
}
.mbx__pane { position: relative; min-height: 420px; overflow: hidden; }
.mbx__pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mbx__shade { position: absolute; inset: 0; background: linear-gradient(150deg, rgba(10, 31, 22, .72) 0%, rgba(27, 67, 50, .5) 48%, rgba(10, 31, 22, .68) 100%); }
.mbx__orb { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; }
.mbx__glow { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(82, 183, 136, .4) 0%, rgba(82, 183, 136, 0) 70%); animation: glowPulse 4.5s ease-in-out infinite; }
.mbx__ring { position: absolute; inset: 14px; border-radius: 50%; border: 1.5px dashed rgba(183, 228, 199, .55); }
.mbx__q { position: relative; font-family: var(--display); font-size: 96px; font-weight: 700; line-height: 1; color: var(--cream); text-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.mbx__ask {
position: absolute; left: 50%; top: 50%; transform: translateX(-50%); margin-top: 104px;
width: 100%; padding: 0 26px; text-align: center; font-family: var(--display);
font-size: 23px; font-weight: 700; color: var(--cream); line-height: 1.2;
text-shadow: 0 4px 16px rgba(0, 0, 0, .5);
}
.mbx__flag {
position: absolute; top: 18px; left: 18px; background: var(--mint); color: var(--ink);
font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
border-radius: 999px; padding: 7px 14px; box-shadow: 0 8px 18px rgba(0, 0, 0, .25);
}
.mbx__right { padding: 40px; color: var(--cream); }
.mbx__right h2 { font-size: 34px; line-height: 1.08; color: var(--cream); margin: 0; }
.mbx__lead { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--muted-light); max-width: 440px; }
.mbx__plans { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
.mbx__plan {
display: flex; align-items: center; gap: 14px; border: 1.5px solid rgba(183, 228, 199, .3);
background: rgba(245, 245, 240, .04); border-radius: 12px; padding: 13px 16px;
color: var(--cream); transition: all .18s ease;
}
.mbx__plan:hover { border-color: rgba(183, 228, 199, .6); text-decoration: none; color: var(--cream); }
.mbx__plan.is-on { border-color: var(--mint); background: rgba(82, 183, 136, .12); }
.mbx__dot { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(183, 228, 199, .6); flex: none; display: flex; align-items: center; justify-content: center; }
.mbx__dot span { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.mbx__plan.is-on .mbx__dot { border-color: var(--mint); }
.mbx__plan.is-on .mbx__dot span { background: var(--mint); }
.mbx__pmid { flex: 1; min-width: 0; }
.mbx__pname { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; color: var(--cream); }
.mbx__pdesc { display: block; font-size: 12px; color: #a9d3b8; margin-top: 1px; }
.mbx__pright { text-align: right; white-space: nowrap; }
.mbx__pprice { display: block; font-size: 16px; font-weight: 700; color: var(--cream); }
.mbx__pper { display: block; font-size: 10px; color: #8fd1ac; letter-spacing: 1px; text-transform: uppercase; }
.mbx__cta { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; }
.mbx__foot { font-size: 12px; color: #8fd1ac; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
@media (max-width: 900px) { .mbx__card { grid-template-columns: 1fr; } }
@media (max-width: 820px) {
.mbx__pane { min-height: 260px; }
.mbx__orb { top: 40%; width: 124px; height: 124px; }
.mbx__q { font-size: 74px; }
.mbx__ask { top: 40%; margin-top: 82px; font-size: 19px; }
.mbx__right { padding: 14px 20px 22px; }
.mbx__cta { flex-direction: column; align-items: stretch; gap: 12px; }
.mbx__cta .btn { width: 100%; padding: 14px 0; font-size: 16px; }
.mbx__foot { justify-content: center; font-size: 13px; }
}
/* ── catx: category tiles with centred names and colour pill buttons ─────── */
.catx { background: var(--sand); border-bottom: 1px solid #dfdccd; padding-top: 60px; padding-bottom: 56px; }
.catx__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 26px; }
.catx__head h2 { font-size: 38px; line-height: 1.05; }
.catx__lead { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #4a5a50; }
.catx__lead p { margin: 0; }
.catx__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1100px) { .catx__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catx__tile { position: relative; display: block; border-radius: 18px; overflow: hidden; min-height: 300px; background: var(--ink-2); transition: transform .2s ease; }
.catx__tile:hover { transform: translateY(-4px); text-decoration: none; }
.catx__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.catx__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 26, 17, .15) 0%, rgba(8, 26, 17, .72) 100%); }
.catx__in { position: absolute; inset: 0; padding: 18px; display: grid; grid-template-rows: 1fr auto; align-items: center; justify-items: center; gap: 12px; }
.catx__name { font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--cream); text-align: center; }
.catx__btn {
width: 100%; text-align: center; border-radius: 999px; padding: 10px 20px;
font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
transition: background .2s ease;
}
.catx__tile:nth-child(1) .catx__btn { background: var(--mint); color: #08210f; }
.catx__tile:nth-child(2) .catx__btn { background: var(--gold); color: var(--forest); }
.catx__tile:nth-child(3) .catx__btn { background: var(--cream); color: var(--forest); }
.catx__tile:nth-child(4) .catx__btn { background: var(--mint-pale); color: var(--forest); }
/* Four across: slightly smaller tiles and labels so the row still breathes. */
@media (min-width: 1101px) {
.catx__tile { min-height: 280px; }
.catx__in { padding: 16px; }
.catx__name { font-size: 20px; }
.catx__btn { font-size: 11px; letter-spacing: 1.2px; padding: 9px 12px; }
}
@media (max-width: 820px) {
.catx__grid { grid-template-columns: 1fr; }
/* Halve the dead band around this section and keep the heading on one line. */
.mbx { padding-bottom: 32px; }
.catx { padding-top: 28px; padding-bottom: 32px; }
.catx__head { margin-bottom: 16px; }
.catx__head h2 { font-size: 26px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.catx__lead { margin-top: 6px; font-size: 13.5px; }
}
@media (max-width: 380px) { .catx__head h2 { font-size: 23px; } }
/* ── revx: sand reviews, rating right, verified checks; phone carousel ───── */
.revx { background: var(--sand); padding-top: 34px; padding-bottom: 70px; }
.revx__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.revx__head h2 { font-size: 38px; line-height: 1.05; }
.revx__score { display: flex; align-items: center; gap: 14px; }
.revx__stars { color: var(--gold); font-size: 22px; letter-spacing: 2px; }
.revx__val { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; color: var(--forest); line-height: 1; }
.revx__cnt { display: block; font-size: 12px; color: #79766a; margin-top: 3px; }
/* Auto-playing testimonial marquee: two identical groups, translate by one group per loop.
Full-bleed: the strip spans the whole viewport, breaking out of the centred container. */
.revx__marquee { overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.revx__row { display: flex; width: max-content; animation: revScroll 120s linear infinite; }
.revx__marquee:hover .revx__row { animation-play-state: paused; }
.revx__group { display: flex; gap: 20px; flex: none; margin-right: 20px; }
@keyframes revScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
.revx__marquee { overflow-x: auto; }
.revx__row { animation: none; }
}
.revx__card { flex: 0 0 340px; width: 340px; background: #fff; border: 1px solid rgba(27, 67, 50, .09); border-radius: 16px; padding: 24px 24px 22px; display: flex; flex-direction: column; }
.revx__cstars { color: var(--gold); font-size: 15px; margin-bottom: 12px; }
.revx__card h3 { font-family: var(--display); font-size: 17px; font-weight: 700; color: var(--forest); line-height: 1.3; margin: 0; }
.revx__card p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: #4a5a50; flex: 1; }
.revx__who { margin-top: 18px; display: flex; align-items: center; gap: 12px; }
.revx__avatar {
width: 40px; height: 40px; border-radius: 50%; flex: none;
display: flex; align-items: center; justify-content: center;
color: var(--cream); font-family: var(--display); font-size: 15px; font-weight: 700;
}
.revx__name { font-size: 13.5px; font-weight: 700; color: var(--forest); }
.revx__meta { font-size: 12px; color: #79766a; display: inline-flex; align-items: center; gap: 6px; }
.revx__meta svg { flex: none; }
@media (max-width: 820px) {
.revx__card { flex: 0 0 300px; width: 300px; }
.revx__group { gap: 14px; margin-right: 14px; }
}
/* ── nlx: two-column newsletter with the boxed form ──────────────────────── */
.nlx { background: var(--forest); }
.nlx__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: center; padding-top: 60px; padding-bottom: 60px; }
.nlx__copy { color: var(--cream); }
.nlx__badge {
display: inline-flex; align-items: center; gap: 9px;
background: rgba(201, 162, 39, .16); border: 1px solid rgba(201, 162, 39, .4);
border-radius: 999px; padding: 6px 14px;
font-family: var(--display); font-size: 13px; font-weight: 700; color: var(--gold);
letter-spacing: .06em;
}
.nlx__copy h2 { margin: 16px 0 0; font-size: 36px; line-height: 1.08; color: var(--cream); }
.nlx__lead { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--muted-light); max-width: 440px; }
.nlx__box { background: rgba(245, 245, 240, .06); border: 1px solid rgba(183, 228, 199, .22); border-radius: 16px; padding: 24px; }
.nlx__form { display: flex; flex-direction: column; gap: 11px; }
.nlx__input {
width: 100%; border: 1px solid rgba(183, 228, 199, .3); border-radius: 10px;
padding: 14px 15px; font-size: 15px; font-family: var(--body);
background: rgba(10, 31, 22, .5); color: var(--cream); outline: none;
}
.nlx__input::placeholder { color: rgba(213, 230, 216, .75); }
.nlx__input:focus { outline: 2px solid var(--mint); outline-offset: 1px; }
.nlx__form .btn { border-radius: 10px; padding: 14px; font-size: 15px; }
.nlx__note { margin: 12px 0 0; font-size: 11.5px; color: #8fd1ac; line-height: 1.5; }
@media (max-width: 820px) {
.nlx__grid { grid-template-columns: 1fr; gap: 20px; padding-top: 30px; padding-bottom: 36px; }
.nlx__badge { display: none; }
.nlx__copy h2 { margin-top: 0; }
}
/* ── globe: gold band + origin globe, phone spec from the design ─────────── */
.gchart canvas { outline: none; }
.ghint { display: none; }
@media (max-width: 820px) {
/* Phone: no gold band — the title row carries the spin hint on its right. */
[data-globe-jump] { display: none; }
.ghint {
display: block; position: absolute; top: 20px; right: 18px;
font-size: 12px; letter-spacing: .06em; color: #8fd1ac;
}
.gsec { height: 70vh !important; min-height: 620px !important; }
.gchart { top: 104px !important; }
.gchart, .gchart * { touch-action: pan-y; }
.gtitle { top: 16px !important; left: 18px !important; }
.gtitle div { font-size: 20px !important; }
.gsearch { top: 52px !important; left: 18px !important; right: 18px !important; width: auto !important; }
.glegend { position: absolute; top: -32px; right: 0; margin-top: 0 !important; }
.gpanel { display: none; }
.gpanel.sel { display: block !important; left: 14px !important; right: 14px !important; width: auto !important; bottom: 96px !important; }
.gside { display: none !important; }
.gctrl { bottom: 16px !important; left: 14px !important; right: 14px !important; transform: none !important; }
.gctrl > div { align-self: stretch; justify-content: center; }
.gtrack { width: auto !important; flex: 1 1 auto; }
}
/* ── product page: the picture follows the scroll, like the design's rsticky ─ */
.pdp__media { position: sticky; top: 86px; }
/* On stacked layouts the picture stops sticking but MUST stay position:relative —
its image is absolutely positioned against this box. */
@media (max-width: 900px) { .pdp__media { position: relative; top: auto; } }
/* Stock line removed — tighten the gap between the subtitle and the why-block. */
.pdp__sub { margin-bottom: 6px; }
.pdp__why { margin-top: 14px; }
/* Price + VAT note on one baseline (desktop keeps the stepper down in the buy row). */
.pdp__pricerow { display: flex; align-items: baseline; gap: 12px; margin: 16px 0 20px; }
.pdp__pricecol { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp__pricerow .pdp__price { margin: 0; }
.pdp__pricerow .pdp__vat { margin: 0; }
/* Phone: the stepper is moved into this row by assets/site js — VAT hugs the price,
the stepper sits at the right edge, and the buy button spans the full width below. */
@media (max-width: 820px) {
.pdp__pricerow { align-items: center; gap: 10px; }
.pdp__pricerow .pdp__vat { margin-right: auto; }
.pdp__pricerow .qty { flex: none; }
.pdp__buy .btn--buy { flex: 1 1 100%; }
}
/* Size picker: one row of centred tiles like the design — label over price,
radio hidden, selection shown by the green outline, savings as a corner chip. */
.sizes { flex-direction: row; flex-wrap: wrap; gap: 10px; }
.size {
flex: 1 1 0; min-width: 92px; position: relative;
flex-direction: column; align-items: center; justify-content: center; gap: 2px;
text-align: center; padding: 10px 12px; border-radius: 12px; border-width: 2px;
}
.size input { position: absolute; opacity: 0; pointer-events: none; }
.size:has(input:checked) { background: rgba(45, 106, 79, .07); }
.size__label { flex: none; font-size: 14.5px; font-weight: 700; }
.size__price { font-size: 12px; font-weight: 400; color: #4a5a50; font-family: var(--body); }
.size__save {
position: absolute; top: -9px; right: -7px; padding: 3px 8px;
background: var(--gold); color: var(--forest);
font-size: 9.5px; letter-spacing: .6px;
}
@media (max-width: 820px) {
.sizes { flex-wrap: nowrap; gap: 8px; }
.size { min-width: 0; padding: 10px 4px; }
.size__label { font-size: 13px; white-space: nowrap; }
.size__price { font-size: 11px; }
}
/* Product trust boxes (free shipping / returns / rating): always three in one row,
compacted on the phone instead of stacking. */
@media (max-width: 520px) {
.trust { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trust__item { padding: 10px 6px; }
.trust__item strong { font-size: 11.5px; }
.trust__item span { font-size: 10.5px; }
}
/* Prices in the body font: the serif's oldstyle figures made the euro sign and
digits sit on different lines. Lining digits + a matching euro everywhere. */
.pdp__price, .product-card__price, .size__price, .plan__price,
.cart-line-total, .cart-subtotal strong {
font-family: var(--body);
letter-spacing: -.01em;
}
.pdp__price { font-size: 34px; }
/* ── category head: dark gradient band, count as the big number top-right ── */
.cathead { background: linear-gradient(160deg, var(--forest) 0%, var(--green) 100%); color: var(--cream); }
.cathead .container { padding-top: 44px; padding-bottom: 40px; }
.cathead__crumbs { margin: 0 0 14px; font-size: 11px; letter-spacing: 2.5px; color: #8fd1ac; text-transform: uppercase; }
.cathead__crumbs a { color: #8fd1ac; border-bottom: 1px solid rgba(143, 209, 172, .4); }
.cathead__crumbs a:hover { color: var(--cream); text-decoration: none; }
.cathead__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cathead__main { max-width: 640px; }
.cathead__main h1 { margin: 0; font-size: 44px; line-height: 1.05; color: var(--cream); }
.cathead__intro { margin-top: 14px; font-size: 15.5px; line-height: 1.55; color: var(--muted-light); }
.cathead__intro p { margin: 0; }
.cathead__count { text-align: right; padding-bottom: 4px; }
.cathead__num { font-family: var(--display); font-size: 30px; font-weight: 700; color: var(--mint-pale); line-height: 1; }
.cathead__lbl { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: #8fd1ac; margin-top: 5px; }
.catsubs { background: var(--sand); border-bottom: 1px solid #dfdccd; }
.catsubs__row { padding-top: 12px; padding-bottom: 12px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.catsubs__row::-webkit-scrollbar { display: none; }
.catsubs .chip { flex: none; white-space: nowrap; }
.catgrid { padding-top: 34px; }
/* In-place sub-category filtering: wrappers are transparent to the grid. */
.pgrid-item { display: contents; }
.pgrid-item.is-hidden { display: none; }
@media (max-width: 820px) {
.cathead .container { padding-top: 20px; padding-bottom: 20px; position: relative; }
.cathead__main h1 { font-size: 27px; line-height: 1.1; }
.cathead__intro { margin-top: 8px; font-size: 13.5px; }
/* Phone: no breadcrumb trail and no product counter — they only add clutter. */
.cathead__crumbs, .cathead__count, .crumbs { display: none; }
}
/* ── mystery-box page: compact top row, no dead space around the intro ───── */
.split--mb { grid-template-columns: 1.2fr .8fr; align-items: start; gap: 40px; }
.split--mb .split__media { align-self: center; }
.mbp-trust { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mbp-trust li { position: relative; padding-left: 24px; font-size: 14.5px; color: var(--muted); }
.mbp-trust li::before { content: "\2713"; position: absolute; left: 0; color: var(--mint); font-weight: 700; }
.mbp-cta { margin-top: 20px; }
.split--mb .split__media img { max-width: 420px; margin-left: auto; aspect-ratio: 4 / 3; max-height: 300px; }
@media (max-width: 900px) {
.split--mb { grid-template-columns: 1fr; }
.split--mb .split__media img { max-width: 100%; margin-left: 0; }
}
/* ── cart on the phone: rows become tidy product cards, no table overflow ── */
@media (max-width: 700px) {
.cart-table, .cart-table tbody { display: block; width: 100%; }
.cart-table tr {
position: relative; display: grid;
grid-template-columns: 60px 1fr;
grid-template-areas: "img name" "img controls";
gap: 4px 12px; align-items: center;
padding: 14px 12px; border-bottom: 1px solid var(--line);
}
.cart-table tr:last-child { border-bottom: 0; }
.cart-table td { display: block; padding: 0; border: 0; }
.cart-table td.cart-line-media { grid-area: img; }
.cart-line-media img { width: 60px; height: 60px; }
.cart-table td:nth-child(2) { grid-area: name; padding-right: 30px; font-size: 14.5px; }
.cart-table td.cart-line-qty { grid-area: controls; }
.cart-qty-form { gap: 8px; }
.cart-qty-btn { width: 28px; height: 28px; font-size: 14px; }
.cart-table td.cart-line-total {
grid-area: controls; justify-self: end; align-self: center;
font-size: 15.5px;
}
.cart-table td:nth-child(5) { position: absolute; top: 8px; right: 8px; }
}
/* ── customer account: header button + page styling ──────────────────────── */
.nav-account {
display: inline-flex; align-items: center; gap: 7px;
background: rgba(183, 228, 199, .14); color: var(--cream) !important;
border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700;
}
.nav-account:hover { background: rgba(183, 228, 199, .24); text-decoration: none; }
@media (max-width: 820px) {
.nav-account { padding: 8px 10px; }
.nav-account__label { display: none; }
}
.account-page h1 { font-size: clamp(28px, 3.4vw, 38px); margin-bottom: 6px; }
.account-greeting { color: var(--muted); font-size: 14.5px; margin-bottom: 24px; }
.account-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 22px 0 8px; }
@media (max-width: 760px) { .account-tiles { grid-template-columns: 1fr; } }
.account-tile { display: flex; flex-direction: column; gap: 6px; transition: box-shadow .18s ease, transform .18s ease; }
.account-tile:hover { box-shadow: 0 14px 30px rgba(10, 31, 22, .12); transform: translateY(-2px); text-decoration: none; }
.account-tile h3 { color: var(--forest); }
.account-tile p { margin: 0; }
.account-tile__cta { margin-top: auto; padding-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); }
.account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.account-head .account-logout { margin-top: 8px; flex: none; }
.account-form {
background: #fff; border: 1px solid var(--line); border-radius: 16px;
padding: 24px; margin-top: 22px; display: flex; flex-direction: column; gap: 6px;
}
.account-form .label { margin-top: 8px; }
.account-form .btn { margin-top: 14px; align-self: flex-start; }
.account-divider {
display: flex; align-items: center; gap: 14px; margin: 24px 0 2px;
color: var(--muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
}
.account-divider::before, .account-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.account-alt { margin-top: 20px; font-size: 14px; color: var(--muted); }
.account-hint { margin: 10px 0 0; font-size: 12.5px; color: var(--muted); }
.alert {
background: rgba(224, 122, 95, .12); border: 1px solid rgba(224, 122, 95, .5);
border-radius: 12px; padding: 13px 16px; margin: 18px 0 4px; font-size: 14px; color: #8a3b28;
}
/* Checkout order summary: the product lines above the totals. */
.checkout-summary { margin: 20px 0 6px; }
.checkout-summary__title { font-family: var(--display); font-size: 19px; font-weight: 700; color: var(--forest); margin: 0 0 10px; }
.checkout-lines { list-style: none; margin: 0 0 14px; padding: 0; border-bottom: 1px solid var(--line); }
/* One line per item: the name/size truncates, quantity and price stay pinned. */
.checkout-line { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.checkout-line__name { flex: 1 1 auto; min-width: 0; color: var(--forest); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.checkout-line__opt { color: var(--muted); font-size: 12.5px; margin-left: 6px; }
.checkout-line__qty { flex: none; color: var(--muted); font-size: 13px; white-space: nowrap; }
.checkout-line__price { flex: none; margin-left: auto; font-weight: 700; white-space: nowrap; font-family: var(--body); }
@media (max-width: 560px) {
.checkout-page .account-form { padding: 16px; }
.checkout-line { font-size: 13px; gap: 8px; }
.checkout-line__opt { font-size: 11.5px; margin-left: 5px; }
.checkout-line__qty { font-size: 12px; }
}
.checkout-total { font-size: 17px; }
.checkout-total strong { font-family: var(--body); font-size: 20px; }
.account-table__id { font-weight: 700; white-space: nowrap; }
.paid-mark { color: var(--green); font-weight: 700; }
.status-badge {
display: inline-block; border-radius: 999px; padding: 4px 12px;
font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
background: var(--sand); color: var(--forest);
}
.status-badge--ordered { background: rgba(82, 183, 136, .16); color: var(--green); }
.status-badge--shipped { background: rgba(45, 106, 79, .14); color: var(--forest); }
.status-badge--closed { background: rgba(82, 183, 136, .22); color: var(--forest); }
.status-badge--customercancelled { background: rgba(224, 122, 95, .14); color: #8a3b28; }
.status-badge--paymentreview, .status-badge--onhold { background: rgba(201, 162, 39, .16); color: #7a611a; }
/* ── enquiry / wholesale page ────────────────────────────────────────────── */
.contactx { padding-bottom: 72px; }
.contactx__form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .contactx__form .field-row { grid-template-columns: 1fr; } }
.contactx__form .btn { align-self: flex-start; }
.contactx__done {
background: rgba(82, 183, 136, .10); border: 1px solid rgba(82, 183, 136, .45);
border-radius: 18px; padding: 32px 28px; text-align: center;
}
.contactx__tick {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 50%; margin-bottom: 14px;
background: var(--mint); color: var(--ink); font-size: 26px; font-weight: 700;
}
.contactx__done h2 { font-size: 26px; margin-bottom: 10px; }
.contactx__direct { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14.5px; }
.contactx__direct > div { display: flex; flex-direction: column; gap: 4px; }
.contactx__k { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contactx__hours { color: var(--muted); }
@media (max-width: 820px) { .contactx { padding-bottom: 48px; } }
/* ── article pages: images ───────────────────────────────────────────────── */
.article__img { width: 100%; border-radius: 16px; margin: 16px 0 8px; box-shadow: 0 14px 34px rgba(27, 67, 50, .14); }
.article__img--hero { margin: 26px 0 4px; aspect-ratio: 16 / 9; object-fit: cover; }
.article__imgrow { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 8px; }
.article__imgrow img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; border-radius: 14px; }
/* ── blog index cards ────────────────────────────────────────────────────── */
/* Breathing room before the footer on both blog index and articles. */
.blogx, .article { padding-bottom: 72px; }
@media (max-width: 820px) { .blogx, .article { padding-bottom: 48px; } }
.blogx__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.blogx__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; color: inherit; transition: box-shadow .18s ease, transform .18s ease; }
.blogx__card:hover { box-shadow: 0 16px 34px rgba(10, 31, 22, .12); transform: translateY(-2px); text-decoration: none; }
.blogx__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.blogx__media img { width: 100%; height: 100%; object-fit: cover; }
.blogx__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.blogx__title { font-family: var(--display); font-size: 20px; font-weight: 700; color: var(--forest); line-height: 1.25; }
.blogx__ex { font-size: 14px; line-height: 1.55; color: var(--muted); }
.blogx__more { margin-top: auto; padding-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
/* ── article pages: comparison tables + list rhythm ──────────────────────── */
.article table { width: 100%; border-collapse: collapse; margin: 14px 0 8px; font-size: 14.5px; }
.article th, .article td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.article thead th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.article .legal__body ul, .article .legal__body ol { padding-left: 22px; margin: 12px 0; }
.article .legal__body li { margin-bottom: 9px; }
.article .legal__body a { text-decoration: underline; }
@media (max-width: 480px) { .article table { font-size: 12.5px; } .article th, .article td { padding: 7px 6px; } }
/* ── footer: design bottom row + phone grid ──────────────────────────────── */
/* Shop links flow into two side-by-side lists (4 + 3) so the column matches
the help column's height instead of trailing empty space. */
.footer-top { grid-template-columns: 1.4fr 1.5fr .95fr 1.1fr; }
.footer-col--shop ul {
display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto);
grid-auto-flow: column; column-gap: 28px; align-content: start;
}
@media (max-width: 860px) {
.footer-col--shop ul { display: block; }
}
.footer-bottom { color: #7fae93; font-size: 12px; }
.footer-bottom a { border-bottom: 1px solid rgba(127, 174, 147, .35); }
.footer-bottom a:hover { text-decoration: none; color: var(--cream); }
@media (max-width: 860px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 26px; }
.footer-top > div:first-child, .footer-top > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
.footer-tagline { display: none; }
.footer-badges { display: none; }
/* Legal links + credit stay on one line, centred, scaled to fit. */
.footer-bottom {
flex-wrap: nowrap; justify-content: center; align-items: baseline;
gap: 10px; font-size: 11px; text-align: center;
}
.footer-bottom .spacer { display: none; }
.footer-bottom > span:first-child { flex: 1 1 100%; text-align: center; }
.footer-bottom a, .footer-bottom .credit { white-space: nowrap; flex: none; }
.footer-bottom .credit { font-size: 10.5px; }
}
@media (max-width: 420px) {
.footer-bottom { gap: 8px; font-size: 10px; }
.footer-bottom .credit { font-size: 9.5px; }
}
/* ── checkout: delivery picker ───────────────────────────────────────────────
The options are injected by site.js from the live carrier quote, so the shell
styles whatever arrives: label + optional description + price. Each option is a
full card, so the whole row is a click target rather than the 18px radio. */
.delivery-options { margin-top: 10px; }
.delivery-options > .label { margin-top: 8px; }
[data-delivery-list] {
display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
gap: 10px; margin: 2px 0 4px;
}
.delivery-option {
display: flex; align-items: center; gap: 12px;
border: 1px solid var(--line-strong); border-radius: 12px;
padding: 13px 15px; background: #fff; cursor: pointer;
transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.delivery-option:hover { border-color: var(--mint); background: rgba(82, 183, 136, .06); }
.delivery-option:focus-within { outline: 2px solid var(--mint); outline-offset: 2px; }
/* Selected state stays in CSS — site.js only ever toggles the radio itself. */
.delivery-option:has(input:checked) {
border-color: var(--green); background: rgba(82, 183, 136, .12);
box-shadow: inset 0 0 0 1px var(--green);
}
.delivery-option input[type="radio"] {
flex: none; width: 18px; height: 18px; margin: 0;
accent-color: var(--green); cursor: pointer;
}
.delivery-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.delivery-option-label { font-size: 15px; font-weight: 700; color: var(--forest); line-height: 1.25; }
.delivery-option-desc { font-size: 12.5px; color: var(--muted); line-height: 1.3; }
.delivery-option-desc:empty { display: none; }
.delivery-option-price {
flex: none; margin-left: auto; font-family: var(--body);
font-size: 15px; font-weight: 700; color: var(--forest); white-space: nowrap;
}
[data-delivery-pickup-wrap] { margin-top: 12px; }
[data-delivery-loading] { margin: 6px 0; }
@media (max-width: 560px) {
[data-delivery-list] { grid-template-columns: 1fr; }
.delivery-option { padding: 12px 13px; gap: 10px; }
.delivery-option-label { font-size: 14px; }
.delivery-option-price { font-size: 14px; }
}
/* ── checkout: consent row ───────────────────────────────────────────────────
A bare (deliberately not .input, which is 100%-wide), so it
needs its own sizing; the two legal links must read as links inside the sentence. */
.check {
display: flex; align-items: flex-start; gap: 10px;
margin: 16px 0 2px; font-size: 14px; line-height: 1.45; color: var(--muted); cursor: pointer;
}
.check input[type="checkbox"] {
flex: none; width: 17px; height: 17px; margin: 2px 0 0;
accent-color: var(--green); cursor: pointer;
}
.check a { color: var(--green); font-weight: 700; text-decoration: underline; }
.check a:hover { color: var(--forest); }
/* ── cursor affordance ───────────────────────────────────────────────────────
Chrome renders