/* ============================================================
Original Delites — Design System
Bold Mediterranean pantry. Cream canvas + flavor color blocks.
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Bricolage+Grotesque:opsz,wght@12..96,300;12..96,400;12..96,500;12..96,600;12..96,700&family=JetBrains+Mono:wght@400;500;600&display=swap');
:root {
/* canvas */
--od-cream: #F5EDD8;
--od-cream-deep: #ECE1C4;
--od-cream-light: #FBF6E6;
--od-ink: #1F1A12;
--od-ink-soft: #4A3F2E;
--od-ink-mute: #80715A;
--od-line: #2A2418;
/* brand */
--od-tomato: #E84A2A;
--od-tomato-deep: #C23B1F;
--od-tomato-soft: #F8A48D;
--od-olive: #5B6E3A;
--od-paprika: #B04428;
--od-gold: #E8B854;
--od-aubergine: #4A2438;
/* type */
--serif: 'Instrument Serif', 'Times New Roman', serif;
--sans: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
--mono: 'JetBrains Mono', 'SF Mono', monospace;
/* layout */
--rad: 4px;
--rad-lg: 14px;
--rad-pill: 999px;
--shadow-soft: 0 1px 0 rgba(31,26,18,0.06), 0 8px 24px -16px rgba(31,26,18,0.18);
--shadow-lift: 0 2px 0 rgba(31,26,18,0.08), 0 24px 48px -24px rgba(31,26,18,0.25);
--container: 1280px;
--nav-h: 64px;
--marquee-h: 36px;
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: var(--od-cream);
color: var(--od-ink);
font-family: var(--sans);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
/* Belt-and-suspenders against any flex/grid child causing horizontal
scroll on mobile (display headlines, parallax break-outs, etc.). */
overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
/* ===== Type scale ===== */
.od-display {
font-family: var(--serif);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.015em;
font-feature-settings: "ss01" on;
}
.od-display .it { font-style: italic; }
/* Type scale — clamp floors lowered so display headlines don't feel
oppressive on phones. The min is what shows at ~360-414px viewports. */
.od-h1 { font-size: clamp(44px, 9vw, 144px); }
.od-h2 { font-size: clamp(34px, 6vw, 88px); }
.od-h3 { font-size: clamp(26px, 3.5vw, 48px); }
.od-h4 { font-size: clamp(20px, 2.4vw, 32px); }
.od-eyebrow {
font-family: var(--mono);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.od-eyebrow::before {
content: "";
width: 22px; height: 1px;
background: currentColor;
opacity: 0.6;
}
.od-eyebrow.no-rule::before { display: none; }
.od-lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.45; color: var(--od-ink-soft); }
.od-body { font-size: 15.5px; line-height: 1.55; color: var(--od-ink-soft); }
.od-tiny { font-size: 12px; line-height: 1.5; color: var(--od-ink-mute); }
/* ===== Layout ===== */
.od-container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.od-section { padding: 96px 0; }
.od-section.compact { padding: 64px 0; }
.od-section.tight { padding: 40px 0; }
.od-divider { border-top: 1px solid rgba(31,26,18,0.12); }
.od-rule { width: 100%; height: 1px; background: rgba(31,26,18,0.14); }
/* ===== Marquee ===== */
.od-marquee {
background: var(--od-ink);
color: var(--od-cream-light);
height: var(--marquee-h);
overflow: hidden;
display: flex;
align-items: center;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.od-marquee-track {
display: flex;
gap: 56px;
white-space: nowrap;
animation: od-marq 36s linear infinite;
padding-left: 56px;
}
.od-marquee-track span { display: inline-flex; align-items: center; gap: 12px; }
.od-marquee-track .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--od-tomato); display: inline-block; }
@keyframes od-marq {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* ===== Nav ===== */
.od-nav {
position: sticky;
top: 0;
z-index: 50;
background: var(--od-cream);
border-bottom: 1px solid rgba(31,26,18,0.08);
height: var(--nav-h);
}
.od-nav-inner {
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
padding: 0 28px;
max-width: 1440px;
margin: 0 auto;
gap: 32px;
}
.od-nav-links { display: flex; gap: 28px; font-size: 14px; font-weight: 500; }
.od-nav-links a { padding: 6px 0; position: relative; }
.od-nav-links a:hover { color: var(--od-tomato); }
.od-nav-links a.active { color: var(--od-tomato); }
.od-nav-wordmark {
font-family: var(--serif);
font-size: 22px;
letter-spacing: -0.01em;
font-style: italic;
display: flex;
align-items: baseline;
gap: 6px;
}
.od-nav-wordmark .est { font-family: var(--mono); font-style: normal; font-size: 9px; letter-spacing: 0.18em; opacity: 0.55; }
.od-nav-right { display: flex; justify-content: flex-end; gap: 22px; align-items: center; font-size: 14px; font-weight: 500; }
.od-nav-right a { display: inline-flex; align-items: center; gap: 6px; }
.od-nav-right a:hover { color: var(--od-tomato); }
.od-cart-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; font-size: 14px; font-weight: 500; color: var(--od-ink); }
.od-cart-btn:hover { color: var(--od-tomato); }
.od-cart-count { background: var(--od-tomato); color: var(--od-cream-light); font-family: var(--mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: var(--rad-pill); min-width: 18px; text-align: center; }
/* ===== Buttons ===== */
.od-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 26px;
border: 1px solid var(--od-ink);
background: var(--od-ink);
color: var(--od-cream-light);
font-family: var(--sans);
font-size: 14px;
font-weight: 600;
letter-spacing: 0.02em;
border-radius: var(--rad-pill);
text-transform: none;
cursor: pointer;
transition: transform .12s ease, background .12s ease;
}
.od-btn:hover { background: var(--od-tomato); border-color: var(--od-tomato); transform: translateY(-1px); }
.od-btn.tomato { background: var(--od-tomato); border-color: var(--od-tomato); }
.od-btn.tomato:hover { background: var(--od-ink); border-color: var(--od-ink); color: var(--od-cream-light); }
.od-btn.ghost { background: transparent; color: var(--od-ink); }
.od-btn.ghost:hover { background: var(--od-ink); color: var(--od-cream-light); }
.od-btn.cream { background: var(--od-cream-light); color: var(--od-ink); border-color: var(--od-cream-light); }
.od-btn.cream:hover { background: var(--od-tomato); color: var(--od-cream-light); border-color: var(--od-tomato); }
.od-btn.sm { padding: 10px 18px; font-size: 13px; }
.od-btn.lg { padding: 18px 32px; font-size: 15px; }
.od-btn .arrow { display: inline-block; transition: transform .15s ease; }
.od-btn:hover .arrow { transform: translateX(3px); }
/* ===== Pill / Chip ===== */
.od-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px;
border: 1px solid rgba(31,26,18,0.2);
border-radius: var(--rad-pill);
font-size: 12px; font-weight: 500;
background: transparent;
font-family: var(--sans);
cursor: pointer;
transition: all .12s ease;
}
.od-chip:hover { border-color: var(--od-ink); }
.od-chip.active { background: var(--od-ink); color: var(--od-cream-light); border-color: var(--od-ink); }
.od-chip.tomato.active { background: var(--od-tomato); border-color: var(--od-tomato); color: var(--od-cream-light); }
/* ===== Heat scale ===== */
.od-heat { display: inline-flex; gap: 2px; align-items: center; }
.od-heat-dot {
width: 7px; height: 7px;
background: currentColor;
opacity: 0.18;
border-radius: 50%;
transform: rotate(45deg);
}
.od-heat-dot.on { opacity: 1; }
.od-heat[data-level="0"] .od-heat-dot { opacity: 0.18; }
.od-heat[data-level="0"]::after { content: "No heat"; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; margin-left: 6px; opacity: 0.6; }
/* ===== Product card / placeholder ===== */
.od-placeholder {
position: relative;
background: var(--bg, var(--od-cream-deep));
color: var(--fg, var(--od-ink));
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.od-placeholder::before,
.od-placeholder::after {
content: "";
position: absolute;
inset: 0;
background-image: repeating-linear-gradient(
45deg,
transparent 0 14px,
rgba(255,255,255,0.06) 14px 15px
);
pointer-events: none;
}
.od-placeholder .ph-label {
position: relative;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
opacity: 0.7;
padding: 6px 10px;
border: 1px solid currentColor;
border-radius: var(--rad);
}
/* ===== Editorial product card (.pcard) =====
Shared across shop archive, related products, my-account reorder strip,
homepage signature products grid, etc. Each instance sets --bg and --fg
inline (per-product color theming) and optionally adds .dark when the
card has a dark background so the Add+ pill flips to a translucent white.
--------------------------------------------------------------------- */
.pcard {
background: var(--bg, var(--od-cream-deep));
color: var(--fg, var(--od-ink));
border-radius: var(--rad-lg);
padding: 22px 22px 20px;
display: flex;
flex-direction: column;
gap: 16px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease;
}
.pcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(31,26,18,0.35); }
.pcard .pc-img {
aspect-ratio: 4 / 5;
border-radius: 10px;
position: relative;
/* Photos are pre-composed with their own colored backdrops, so the
photo fills the well edge-to-edge. No frame, no inner well. */
background: transparent;
overflow: hidden;
}
.pcard .pc-img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .25s ease;
}
/* Legacy marker class (pc-img-solid) kept harmless in case any code path
still adds it — same behavior as the default now. */
.pcard .pc-img img.pc-img-solid {
object-fit: cover;
object-position: center 56%;
}
.pcard:hover .pc-img img { transform: scale(1.04); }
.pcard .pc-img .od-placeholder {
position: absolute; inset: 0;
--bg: rgba(0,0,0,0.04);
--fg: currentColor;
}
.pcard .pc-img .ph-label { background: rgba(255,255,255,0.18); }
.pcard .pc-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
opacity: 0.75;
}
.pcard h4 {
margin: 0;
font-family: var(--serif);
font-style: italic;
font-size: 26px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.01em;
}
.pcard .pc-tag {
font-size: 13px;
line-height: 1.35;
opacity: 0.82;
margin: 0;
}
.pcard .pc-bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
}
.pcard .pc-price {
font-family: var(--serif);
font-size: 20px;
font-style: italic;
}
.pcard .pc-add {
background: rgba(0,0,0,0.12);
color: inherit;
border: 0;
border-radius: var(--rad-pill);
padding: 8px 14px;
font-size: 12px;
font-weight: 600;
font-family: var(--sans);
cursor: pointer;
transition: background .15s ease;
}
.pcard .pc-add:hover { background: rgba(0,0,0,0.25); }
.pcard.dark .pc-add { background: rgba(255,255,255,0.15); color: inherit; }
.pcard.dark .pc-add:hover { background: rgba(255,255,255,0.3); }
.pcard .badge {
position: absolute;
top: 14px;
right: 14px;
background: rgba(0,0,0,0.85);
color: var(--od-cream-light);
font-family: var(--mono);
font-size: 9px;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 5px 8px;
border-radius: 4px;
z-index: 1;
}
.pcard.dark .badge { background: rgba(255,255,255,0.92); color: var(--od-ink); }
/* ===== Cart drawer base ===== */
.od-cart-overlay {
position: fixed; inset: 0;
background: rgba(31,26,18,0.4);
opacity: 0; pointer-events: none;
transition: opacity .25s ease;
z-index: 100;
}
.od-cart-overlay.open { opacity: 1; pointer-events: auto; }
.od-cart-drawer {
position: fixed; top: 0; right: 0; bottom: 0;
width: min(440px, 100%);
background: #FFFFFF;
z-index: 101;
transform: translateX(100%);
transition: transform .32s cubic-bezier(.22,1,.36,1);
display: flex;
flex-direction: column;
box-shadow: -32px 0 64px -32px rgba(31,26,18,0.3);
/* Bulletproof clipping: a malformed inner image must never escape the
drawer's bounds, even before our other inner rules apply. */
overflow: hidden;
contain: layout paint;
}
/* Hard ceiling on every image inside the drawer — defends against any
future markup that forgets to constrain an ![]()
. */
.od-cart-drawer img { max-width: 100%; max-height: 100%; }
.od-cart-drawer.open { transform: translateX(0); }
/* ===== Cart drawer v2 (refined) ===== */
.od-cart-drawer.od-cart-drawer-v2 {
background: #FFFFFF;
width: min(440px, 100%);
}
.od-cart-drawer-v2 .cd-head {
display: flex; align-items: center; justify-content: space-between;
padding: 24px 28px 20px;
border-bottom: 1px solid #ECE9E2;
}
.od-cart-drawer-v2 .cd-head h3 {
margin: 0;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 20px;
font-weight: 600;
letter-spacing: -0.015em;
color: #16140F;
}
.od-cart-drawer-v2 .cd-close {
background: transparent; border: 0;
width: 30px; height: 30px;
border-radius: 50%;
font-size: 22px; line-height: 1; cursor: pointer;
color: #6B665C;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease;
}
.od-cart-drawer-v2 .cd-close:hover { background: #F4F1EA; color: #16140F; }
.od-cart-drawer-v2 .cd-body {
flex: 1;
overflow-y: auto;
padding: 20px 28px 24px;
display: flex;
flex-direction: column;
gap: 0;
}
/* Free shipping progress */
.od-cart-drawer-v2 .cd-progress {
display: flex; flex-direction: column; gap: 8px;
padding: 14px 16px;
background: #FAF8F4;
border-radius: 10px;
margin-bottom: 20px;
}
.od-cart-drawer-v2 .cd-progress-row {
display: flex; justify-content: space-between;
font-size: 12.5px;
font-weight: 500;
color: #16140F;
}
.od-cart-drawer-v2 .cd-progress-pct {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
color: #6B665C;
}
.od-cart-drawer-v2 .cd-progress-bar {
height: 6px; background: #ECE9E2; border-radius: 99px; overflow: hidden;
}
.od-cart-drawer-v2 .cd-progress-bar > div {
height: 100%; background: #E03E1A; border-radius: 99px; transition: width .25s ease;
}
/* Items */
.od-cart-drawer-v2 .cd-items {
display: flex; flex-direction: column; gap: 0;
margin-bottom: 8px;
}
.od-cart-drawer-v2 .cd-item {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 14px;
padding: 16px 0;
border-bottom: 1px solid #F1EEE7;
align-items: center;
}
.od-cart-drawer-v2 .cd-item:last-child { border-bottom: 0; }
.od-cart-drawer-v2 .cd-thumb {
width: 64px; height: 64px;
border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
overflow: hidden;
position: relative;
background: transparent;
}
/* Product photos are pre-composed with their own backdrops, so the
image fills the tile edge-to-edge. */
.od-cart-drawer-v2 .cd-thumb-img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.od-cart-drawer-v2 .cd-thumb-img.is-solid {
object-fit: cover;
}
.od-cart-drawer-v2 .cd-thumb-label {
font-family: 'JetBrains Mono', monospace;
font-size: 8.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(0,0,0,0.55);
background: rgba(255,255,255,0.45);
padding: 3px 6px;
border-radius: 3px;
}
.od-cart-drawer-v2 .cd-item-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.od-cart-drawer-v2 .cd-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 9.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6B665C;
}
.od-cart-drawer-v2 .cd-name {
font-size: 14px;
font-weight: 600;
line-height: 1.2;
color: #16140F;
letter-spacing: -0.005em;
}
.od-cart-drawer-v2 .cd-row {
display: flex; justify-content: space-between; align-items: center;
margin-top: 4px;
}
.od-cart-drawer-v2 .cd-qty {
display: inline-flex; align-items: center; gap: 0;
border: 1px solid #ECE9E2;
border-radius: 99px;
padding: 2px;
}
.od-cart-drawer-v2 .cd-qty button {
background: transparent; border: 0;
width: 24px; height: 24px;
font-size: 14px; line-height: 1;
color: #16140F;
border-radius: 50%;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
padding: 0;
}
.od-cart-drawer-v2 .cd-qty button:hover { background: #F4F1EA; }
.od-cart-drawer-v2 .cd-qty span {
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
font-weight: 500;
min-width: 22px;
text-align: center;
}
.od-cart-drawer-v2 .cd-price {
font-size: 14px;
font-weight: 600;
color: #16140F;
}
.od-cart-drawer-v2 .cd-remove {
background: transparent; border: 0;
width: 24px; height: 24px;
font-size: 16px; line-height: 1;
color: #B5B1A8;
cursor: pointer;
border-radius: 50%;
align-self: flex-start;
transition: all .12s ease;
}
.od-cart-drawer-v2 .cd-remove:hover { background: #FDEDE8; color: #E03E1A; }
/* Cross-sell suggestions */
.od-cart-drawer-v2 .cd-sugg {
margin: 16px 0 8px;
padding: 16px 0 0;
border-top: 1px solid #ECE9E2;
}
.od-cart-drawer-v2 .cd-sugg-h {
font-family: 'JetBrains Mono', monospace;
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6B665C;
margin-bottom: 10px;
}
.od-cart-drawer-v2 .cd-sugg-list { display: flex; flex-direction: column; gap: 8px; }
.od-cart-drawer-v2 .cd-sugg-item {
display: grid;
grid-template-columns: 40px 1fr auto;
gap: 12px;
align-items: center;
padding: 8px;
background: #FAF8F4;
border-radius: 10px;
}
.od-cart-drawer-v2 .cd-sugg-thumb {
width: 40px; height: 40px;
border-radius: 6px;
overflow: hidden;
position: relative;
flex-shrink: 0;
}
/* Cart-drawer suggestion thumbnails inherit the same image treatment as
line-item thumbs — same .cd-thumb-img class shared from the JS markup. */
.od-cart-drawer-v2 .cd-sugg-body { min-width: 0; }
.od-cart-drawer-v2 .cd-sugg-cat {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6B665C;
}
.od-cart-drawer-v2 .cd-sugg-name {
font-size: 13px;
font-weight: 600;
line-height: 1.2;
color: #16140F;
letter-spacing: -0.005em;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.od-cart-drawer-v2 .cd-sugg-right { display: flex; align-items: center; gap: 8px; }
.od-cart-drawer-v2 .cd-sugg-price {
font-size: 13px;
font-weight: 600;
color: #16140F;
}
.od-cart-drawer-v2 .cd-sugg-add {
background: #16140F;
color: #FFFFFF;
border: 0;
width: 26px; height: 26px;
border-radius: 50%;
font-size: 14px;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background .12s ease;
}
.od-cart-drawer-v2 .cd-sugg-add:hover { background: #E03E1A; }
/* Promo */
.od-cart-drawer-v2 .cd-promo {
margin: 16px 0 12px;
padding: 14px 16px;
border-radius: 10px;
font-size: 12.5px;
line-height: 1.4;
}
.od-cart-drawer-v2 .cd-promo-on {
background: #FDEDE8;
color: #16140F;
display: flex; align-items: center; gap: 10px;
}
.od-cart-drawer-v2 .cd-promo-off {
background: #FAF8F4;
color: #6B665C;
}
.od-cart-drawer-v2 .cd-promo-off b { color: #E03E1A; font-weight: 600; letter-spacing: 0.04em; }
.od-cart-drawer-v2 .cd-promo-tag {
background: #16140F; color: #FFFFFF;
padding: 3px 8px;
border-radius: 4px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
}
/* Totals */
.od-cart-drawer-v2 .cd-totals {
display: flex; flex-direction: column; gap: 6px;
padding-top: 16px;
border-top: 1px solid #ECE9E2;
margin-top: 8px;
}
.od-cart-drawer-v2 .cd-total-row {
display: flex; justify-content: space-between;
font-size: 13.5px;
color: #2A2620;
}
.od-cart-drawer-v2 .cd-total-row.cd-grand {
font-size: 17px;
font-weight: 600;
color: #16140F;
padding-top: 10px;
margin-top: 4px;
border-top: 1px solid #F1EEE7;
}
.od-cart-drawer-v2 .cd-total-row.cd-grand small {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
color: #6B665C;
margin-left: 4px;
}
/* Cart buttons */
.od-cart-drawer-v2 .cd-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 100%;
padding: 15px 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
margin-top: 12px;
text-decoration: none;
transition: all .12s ease;
}
.od-cart-drawer-v2 .cd-btn-primary {
background: #E03E1A; color: #FFFFFF; border-color: #E03E1A;
}
.od-cart-drawer-v2 .cd-btn-primary:hover { background: #16140F; border-color: #16140F; }
.od-cart-drawer-v2 .cd-btn-ghost {
background: transparent; color: #16140F; border-color: #ECE9E2;
margin-top: 8px;
}
.od-cart-drawer-v2 .cd-btn-ghost:hover { background: #FAF8F4; border-color: #16140F; }
.od-cart-drawer-v2 .cd-checkout {
margin-top: 8px;
}
/* Empty */
.od-cart-drawer-v2 .cd-empty {
text-align: center;
padding: 60px 20px 40px;
}
.od-cart-drawer-v2 .cd-empty-icon {
font-size: 48px;
color: #ECE9E2;
line-height: 1;
margin-bottom: 16px;
}
.od-cart-drawer-v2 .cd-empty h4 {
font-size: 20px;
font-weight: 600;
margin: 0 0 8px;
color: #16140F;
letter-spacing: -0.015em;
}
.od-cart-drawer-v2 .cd-empty p {
margin: 0 0 20px;
color: #6B665C;
font-size: 14px;
}
/* ===== Country picker ===== */
.od-country-btn {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 1px solid var(--c-hair, #ECE9E2);
padding: 6px 10px 6px 8px;
border-radius: 99px;
font-family: inherit;
font-size: 12.5px;
font-weight: 500;
cursor: pointer;
color: inherit;
}
.od-country-btn:hover { border-color: var(--c-ink, #16140F); }
.od-country-btn .caret { opacity: 0.5; font-size: 9px; margin-left: 2px; }
.od-country-menu {
position: absolute;
top: calc(100% + 8px);
right: 32px;
z-index: 200;
background: #FFFFFF;
border: 1px solid #ECE9E2;
border-radius: 12px;
padding: 10px;
min-width: 240px;
box-shadow: 0 12px 32px -12px rgba(0,0,0,0.2);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .15s ease, transform .15s ease;
}
.od-country-menu.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.od-country-menu-h {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6B665C;
padding: 6px 10px 10px;
}
.od-country-opt {
display: grid;
grid-template-columns: 28px 1fr auto;
gap: 10px;
align-items: center;
width: 100%;
background: transparent; border: 0;
padding: 10px 12px;
font-family: inherit;
font-size: 14px;
cursor: pointer;
border-radius: 8px;
text-align: left;
color: inherit;
}
.od-country-opt:hover { background: #FAF8F4; }
.od-country-opt .n { font-weight: 500; }
.od-country-opt .cur {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.08em;
color: #6B665C;
}
/* Footer country row */
.od-footer-country {
margin-top: 16px;
padding-top: 14px;
border-top: 1px solid rgba(255,255,255,0.08);
font-size: 12.5px;
color: rgba(255,255,255,0.7);
display: flex; gap: 6px; align-items: center;
}
.od-footer-country a { color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; }
.od-footer-country b { color: rgba(255,255,255,0.95); font-weight: 500; }
body.clean .od-footer-country { color: var(--c-mute); border-top-color: var(--c-hair); }
body.clean .od-footer-country b { color: var(--c-ink); }
body.clean .od-footer-country a { color: var(--c-ink); }
/* ===== Footer ===== */
.od-footer { background: var(--od-ink); color: var(--od-cream); padding: 80px 0 28px; margin-top: 80px; }
.od-footer-grid {
display: grid;
grid-template-columns: 1.6fr repeat(4, 1fr);
gap: 40px;
padding-bottom: 56px;
}
.od-footer h5 { font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.16em; font-size: 11px; font-weight: 500; margin: 0 0 16px; opacity: 0.65; }
.od-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.od-footer ul a { opacity: 0.85; }
.od-footer ul a:hover { color: var(--od-tomato-soft); opacity: 1; }
.od-footer-brand .wm { font-family: var(--serif); font-style: italic; font-size: 44px; line-height: 1; letter-spacing: -0.02em; margin-bottom: 14px; }
.od-footer-brand p { font-size: 14px; opacity: 0.7; line-height: 1.55; max-width: 320px; }
.od-footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(245,237,216,0.15); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: 0.7; }
/* ===== Form ===== */
.od-input {
width: 100%;
background: var(--od-cream-light);
border: 1px solid rgba(31,26,18,0.18);
padding: 14px 16px;
font-family: var(--sans);
font-size: 14px;
color: var(--od-ink);
border-radius: var(--rad);
transition: border-color .12s ease;
}
.od-input:focus { outline: none; border-color: var(--od-ink); }
.od-label { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 8px; color: var(--od-ink-soft); }
/* ===== Page header ===== */
.od-page-head { padding: 56px 0 40px; }
.od-page-head .od-eyebrow { color: var(--od-tomato); }
.od-page-head h1 { margin: 18px 0 14px; }
.od-page-head p { max-width: 540px; }
/* ============================================================
Nav — left column wrapper (burger + desktop links)
============================================================ */
.od-nav-left { display: flex; align-items: center; gap: 16px; }
.od-burger {
display: none; /* hidden on desktop; revealed at <= 980 */
background: transparent;
border: 0;
padding: 0;
width: 42px; height: 42px;
border-radius: 50%;
align-items: center; justify-content: center;
cursor: pointer;
color: var(--od-ink);
flex-shrink: 0;
transition: background .12s ease;
-webkit-tap-highlight-color: transparent;
}
.od-burger:hover { background: rgba(31,26,18,0.06); }
.od-burger-bars,
.od-burger-bars::before,
.od-burger-bars::after {
content: "";
display: block;
width: 22px; height: 1.8px;
background: currentColor;
border-radius: 2px;
transition: transform .25s ease, opacity .15s ease, top .25s ease;
}
.od-burger-bars { position: relative; }
.od-burger-bars::before { position: absolute; left: 0; top: -7px; }
.od-burger-bars::after { position: absolute; left: 0; top: 7px; }
.od-burger.is-open .od-burger-bars { background: transparent; }
.od-burger.is-open .od-burger-bars::before { top: 0; transform: rotate(45deg); }
.od-burger.is-open .od-burger-bars::after { top: 0; transform: rotate(-45deg); }
/* Account / cart icon variants — visible on small screens only */
.od-nav-account-icon,
.od-cart-btn-icon { display: none; }
.od-cart-btn { display: inline-flex; align-items: center; gap: 6px; }
.od-nav-account { display: inline-flex; align-items: center; gap: 6px; }
/* ============================================================
Mobile menu drawer
============================================================ */
body.od-mm-locked { overflow: hidden; }
.od-mm-backdrop {
position: fixed; inset: 0;
background: rgba(22,20,15,0.42);
opacity: 0; pointer-events: none;
transition: opacity .28s ease;
z-index: 1100;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.od-mm-backdrop.open { opacity: 1; pointer-events: auto; }
.od-mobile-menu {
position: fixed; top: 0; bottom: 0; left: 0;
width: min(420px, 92vw);
background: var(--od-cream);
z-index: 1101;
transform: translateX(-100%);
transition: transform .35s cubic-bezier(.22,1,.36,1);
display: flex; flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
box-shadow: 32px 0 64px -32px rgba(31,26,18,0.4);
}
.od-mobile-menu.open { transform: translateX(0); }
.od-mm-head {
display: flex; align-items: center; justify-content: space-between;
padding: 20px 24px 16px;
border-bottom: 1px solid rgba(31,26,18,0.08);
}
.od-mm-wordmark {
display: flex; flex-direction: column;
font-family: var(--serif);
line-height: 0.95;
color: var(--od-ink);
letter-spacing: -0.01em;
}
.od-mm-wordmark span:first-child { font-size: 13px; font-style: italic; opacity: 0.7; }
.od-mm-wordmark .it { font-size: 26px; font-style: italic; }
.od-mm-close {
width: 38px; height: 38px;
border-radius: 50%;
border: 0;
background: transparent;
font-size: 24px; line-height: 1;
color: var(--od-ink);
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.od-mm-close:hover { background: rgba(31,26,18,0.06); }
.od-mm-links {
padding: 18px 24px 12px;
display: flex; flex-direction: column;
}
.od-mm-link {
display: flex; align-items: center; justify-content: space-between;
padding: 14px 0;
font-family: var(--serif);
font-style: italic;
font-size: 34px;
line-height: 1;
letter-spacing: -0.015em;
color: var(--od-ink);
border-bottom: 1px solid rgba(31,26,18,0.08);
transition: color .12s ease, padding-left .18s ease;
}
.od-mm-link:last-child { border-bottom: 0; }
.od-mm-link:hover,
.od-mm-link:active { color: var(--od-tomato); padding-left: 6px; }
.od-mm-link.active { color: var(--od-tomato); }
.od-mm-arrow {
font-family: var(--mono);
font-style: normal;
font-size: 15px;
opacity: 0.4;
letter-spacing: 0;
}
.od-mm-link:hover .od-mm-arrow { opacity: 1; }
.od-mm-actions {
margin: 6px 24px 0;
padding: 18px 0 8px;
border-top: 1px solid rgba(31,26,18,0.08);
display: flex; flex-direction: column; gap: 2px;
}
.od-mm-action {
display: flex; align-items: center; justify-content: space-between;
gap: 12px;
padding: 12px 0;
background: transparent;
border: 0;
font-family: var(--sans);
font-size: 14px;
color: var(--od-ink);
text-align: left;
cursor: pointer;
width: 100%;
}
.od-mm-action-label { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.od-mm-action-label b { font-weight: 600; }
.od-mm-action-meta {
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--od-ink-soft);
white-space: nowrap;
}
.od-mm-flag { font-size: 18px; line-height: 1; }
.od-mm-foot {
margin-top: auto;
padding: 24px;
border-top: 1px solid rgba(31,26,18,0.08);
}
.od-mm-foot-h {
font-family: var(--mono);
font-size: 10px; letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--od-ink-soft);
margin-bottom: 10px;
}
.od-mm-foot-row {
display: flex; gap: 18px;
font-size: 14px; font-weight: 500;
margin-bottom: 18px;
}
.od-mm-foot-est {
font-family: var(--mono);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--od-ink-mute);
margin-top: 14px;
}
.od-mm-foot-legal {
display: flex; flex-wrap: wrap;
gap: 8px 14px;
font-size: 13px;
color: var(--od-ink-soft);
margin-bottom: 6px;
}
.od-mm-foot-legal a { color: inherit; }
.od-mm-foot-legal a:hover { color: var(--od-tomato); }
/* Footer 6-col layout (Brand + Shop + Brand + Support + Legal + Social) */
.od-footer-grid { grid-template-columns: 1.5fr repeat(5, 1fr); gap: 32px; }
.od-footer ul { font-size: 13.5px; }
/* ============================================================
Global mobile pass
Breakpoints: 980 (tablet), 720 (large phone landscape), 480 (phone)
============================================================ */
@media (max-width: 980px) {
/* Roomy container gutters — content breathes from screen edges. */
.od-container { padding: 0 32px; }
/* Nav: switch to [burger] [wordmark] [actions] layout */
.od-nav-inner {
grid-template-columns: 1fr auto 1fr;
padding: 0 20px;
gap: 12px;
}
.od-nav-links { display: none; }
.od-burger { display: inline-flex; }
.od-nav-wordmark { font-size: 19px; }
.od-nav-wordmark .est { display: none; }
.od-nav-right { gap: 14px; }
.od-country-btn .od-country-code-text { display: none; }
.od-country-btn .caret { display: none; }
.od-country-btn { padding: 6px 8px; }
/* Account text → icon */
.od-nav-account-text { display: none; }
.od-nav-account-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; }
.od-nav-account { padding: 4px; border-radius: 50%; }
.od-nav-account:hover { background: rgba(31,26,18,0.05); }
/* Cart text → icon */
.od-cart-btn-text { display: none; }
.od-cart-btn-icon { display: inline-flex; align-items: center; justify-content: center; padding: 4px; position: relative; }
.od-cart-btn { padding: 4px; border-radius: 50%; position: relative; }
.od-cart-btn:hover { background: rgba(31,26,18,0.05); }
/* Cart count badge floats on the icon */
.od-cart-btn .od-cart-count {
position: absolute;
top: -2px; right: -4px;
padding: 1px 5px;
font-size: 9.5px;
min-width: 16px;
line-height: 1.4;
}
/* Section spacing */
.od-section { padding: 72px 0; }
.od-section.compact { padding: 48px 0; }
.od-section.tight { padding: 32px 0; }
/* Marquee — calmer */
.od-marquee-track { gap: 36px; padding-left: 36px; animation-duration: 32s; }
.od-marquee { font-size: 10.5px; }
/* Footer 2 col */
.od-footer { padding: 60px 0 24px; margin-top: 60px; }
.od-footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.od-footer-brand { grid-column: 1 / -1; }
.od-footer-brand .wm { font-size: 36px; }
.od-footer-brand p { max-width: 100%; }
/* Buttons a touch tighter */
.od-btn { padding: 13px 22px; font-size: 13.5px; }
.od-btn.lg { padding: 16px 28px; font-size: 14.5px; }
/* Page head */
.od-page-head { padding: 40px 0 28px; }
/* Geo-suggest scoots out of the way of mobile nav */
.od-geo-suggest { top: 12px; right: 12px; left: 12px; max-width: none; }
}
@media (max-width: 720px) {
.od-container { padding: 0 26px; }
.od-section { padding: 56px 0; }
.od-section.compact { padding: 36px 0; }
/* Marquee tighter still */
.od-marquee { height: 32px; font-size: 10px; }
.od-marquee-track { gap: 28px; padding-left: 28px; }
/* Nav wordmark even smaller */
.od-nav-wordmark { font-size: 17px; }
.od-nav-inner { padding: 0 16px; gap: 10px; }
.od-nav-right { gap: 10px; }
/* Forms — 16px font on inputs to prevent iOS zoom on focus */
.od-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
textarea,
select { font-size: 16px !important; }
/* Footer */
.od-footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; padding-bottom: 36px; }
.od-footer h5 { margin-bottom: 14px; }
.od-footer ul { gap: 10px; font-size: 14px; }
.od-footer-bottom {
flex-direction: column;
gap: 10px;
align-items: flex-start;
padding-top: 26px;
font-size: 10.5px;
}
/* pcard sized for 2-col phone grid: smaller h4 so it never wraps to 3 lines */
.pcard { padding: 18px 18px 18px; gap: 12px; border-radius: 18px; }
.pcard .pc-img { border-radius: 12px; }
.pcard h4 { font-size: 19px; line-height: 1.1; }
.pcard .pc-price { font-size: 17px; }
.pcard .pc-tag { font-size: 12px; line-height: 1.35; }
.pcard .pc-add { padding: 7px 12px; font-size: 11px; }
/* Mobile drawer scoots full-width on tiny screens */
.od-mobile-menu { width: 100vw; }
.od-mm-link { font-size: 30px; padding: 12px 0; }
}
@media (max-width: 480px) {
/* 24px gutter — visible breathing room from screen edges. */
.od-container { padding: 0 24px; }
.od-section { padding: 48px 0; }
.od-section.compact { padding: 32px 0; }
.od-section.tight { padding: 22px 0; }
/* Footer 1 col, generous spacing */
.od-footer { padding: 48px 0 28px; }
.od-footer-grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 28px; }
.od-footer-brand .wm { font-size: 32px; }
/* Buttons — taller hit target, more padding */
.od-btn { padding: 13px 22px; font-size: 13px; }
.od-btn.lg { padding: 15px 24px; font-size: 13.5px; }
/* Cart drawer padding on phones — keep airy, not boxy */
.od-cart-drawer-v2 .cd-head { padding: 20px 20px 14px; }
.od-cart-drawer-v2 .cd-head h3 { font-size: 19px; }
.od-cart-drawer-v2 .cd-body { padding: 18px 20px 22px; }
.od-cart-drawer-v2 .cd-item { grid-template-columns: 60px 1fr auto; gap: 14px; padding: 14px 0; }
.od-cart-drawer-v2 .cd-thumb { width: 60px; height: 60px; }
.od-cart-drawer-v2 .cd-name { font-size: 14px; }
.od-cart-drawer-v2 .cd-cat { font-size: 9px; }
.od-cart-drawer-v2 .cd-price { font-size: 14px; }
.od-cart-drawer-v2 .cd-progress { padding: 13px 15px; margin-bottom: 18px; }
.od-cart-drawer-v2 .cd-progress-row { font-size: 12px; }
/* Drawer mobile menu */
.od-mm-head { padding: 18px 20px 14px; }
.od-mm-links { padding: 16px 20px 8px; }
.od-mm-link { font-size: 28px; padding: 12px 0; }
.od-mm-actions { margin: 4px 20px 0; padding: 16px 0 4px; }
.od-mm-foot { padding: 22px 20px; }
/* Eyebrows / labels smaller */
.od-eyebrow { font-size: 10px; letter-spacing: 0.18em; }
.od-eyebrow::before { width: 16px; }
}
/* Tiny phones (iPhone SE / mini class) — keep readable, never squashed. */
@media (max-width: 380px) {
.od-container { padding: 0 20px; }
.pcard { padding: 16px 16px 16px; gap: 10px; }
.pcard h4 { font-size: 18px; }
}
/* ============================================================
Multisite — geo-suggest banner + country menu "current" state
Added v0.2.0. Banner appears server-side when CF-IPCountry header
indicates the visitor is shopping from the other market.
============================================================ */
.od-geo-suggest {
position: fixed;
top: 18px;
right: 18px;
z-index: 200;
background: var(--od-ink, #1F1A12);
color: var(--od-cream-light, #F5EDD8);
padding: 14px 18px 14px 16px;
border-radius: 12px;
box-shadow: 0 18px 40px -12px rgba(0,0,0,0.35);
display: flex;
align-items: center;
gap: 14px;
max-width: 420px;
font-size: 13.5px;
line-height: 1.4;
animation: od-geo-in 0.35s ease-out;
}
.od-geo-suggest.hidden { display: none; }
.od-geo-suggest .od-geo-flag { font-size: 22px; line-height: 1; }
.od-geo-suggest .od-geo-copy { flex: 1; }
.od-geo-suggest .od-geo-cta {
display: block;
margin-top: 4px;
color: var(--od-tomato, #E84A2A);
font-weight: 600;
text-decoration: none;
}
.od-geo-suggest .od-geo-cta:hover { text-decoration: underline; }
.od-geo-suggest .od-geo-close {
background: rgba(245,237,216,0.1);
color: inherit;
border: 0;
width: 28px;
height: 28px;
border-radius: 50%;
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.od-geo-suggest .od-geo-close:hover { background: rgba(245,237,216,0.2); }
@keyframes od-geo-in { from { transform: translateY(-10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@media (max-width: 600px) {
.od-geo-suggest { left: 12px; right: 12px; top: 12px; max-width: none; }
}
/* Country menu — mark the currently-active market */
.od-country-opt.current {
background: rgba(232,74,42,0.08);
position: relative;
}
.od-country-opt.current::after {
content: "•";
color: var(--od-tomato, #E84A2A);
margin-left: 6px;
font-weight: 700;
}
/* ============================================================
Region & Language modal (editorial picker)
============================================================ */
body.od-region-locked { overflow: hidden; }
.od-region-modal {
position: fixed; inset: 0;
z-index: 1200;
display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.od-region-modal.open { display: flex; animation: od-region-in .22s ease-out; }
.od-region-backdrop {
position: absolute; inset: 0;
background: rgba(22, 20, 15, 0.42);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.od-region-card {
position: relative;
width: 100%;
max-width: 520px;
max-height: calc(100vh - 48px);
overflow-y: auto;
background: var(--od-cream-light, #FAF6EC);
border: 1px solid var(--c-hair, #ECE9E2);
border-radius: 18px;
box-shadow: 0 30px 60px -20px rgba(22,20,15,0.35);
padding: 38px 40px 32px;
}
.od-region-x {
position: absolute; top: 18px; right: 20px;
width: 32px; height: 32px;
border-radius: 50%;
background: transparent;
border: 0;
font-size: 22px;
line-height: 1;
color: var(--od-ink, #16140F);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
opacity: 0.6;
transition: opacity .12s ease, background .12s ease;
}
.od-region-x:hover { opacity: 1; background: rgba(22,20,15,0.05); }
.od-region-head { padding-bottom: 22px; border-bottom: 1px solid var(--c-hair, #ECE9E2); margin-bottom: 22px; }
.od-region-eyebrow {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10.5px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--od-tomato, #E84A2A);
margin-bottom: 14px;
}
.od-region-title {
font-family: var(--serif, 'Spectral', serif);
font-size: 32px;
line-height: 1.08;
letter-spacing: -0.015em;
margin: 0 0 10px;
color: var(--od-ink, #16140F);
}
.od-region-sub {
margin: 0;
font-size: 13.5px;
line-height: 1.5;
color: var(--od-ink-soft, #6B665C);
max-width: 380px;
}
.od-region-section { margin-bottom: 22px; }
.od-region-section:last-of-type { margin-bottom: 0; }
.od-region-h {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--od-ink-soft, #6B665C);
margin-bottom: 10px;
}
.od-region-opt {
display: grid;
grid-template-columns: 44px 1fr 22px;
gap: 14px;
align-items: center;
width: 100%;
background: transparent;
border: 1px solid var(--c-hair, #ECE9E2);
border-radius: 12px;
padding: 14px 16px;
margin-bottom: 8px;
font-family: inherit;
text-align: left;
color: inherit;
cursor: pointer;
transition: border-color .12s ease, background .12s ease;
}
.od-region-opt:last-child { margin-bottom: 0; }
.od-region-opt:hover { border-color: rgba(22,20,15,0.35); }
.od-region-opt.is-selected {
border-color: var(--od-ink, #16140F);
background: rgba(22,20,15,0.025);
}
.od-region-flag { font-size: 24px; line-height: 1; }
.od-region-lcode {
font-family: var(--mono, 'JetBrains Mono', monospace);
font-size: 11px;
letter-spacing: 0.12em;
color: var(--od-ink-soft, #6B665C);
text-align: center;
}
.od-region-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.od-region-n {
font-family: var(--sans, 'Inter', sans-serif);
font-size: 15px;
font-weight: 600;
color: var(--od-ink, #16140F);
letter-spacing: -0.005em;
}
.od-region-d {
font-size: 12.5px;
color: var(--od-ink-soft, #6B665C);
}
.od-region-pip {
width: 18px; height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(22,20,15,0.25);
position: relative;
justify-self: end;
transition: border-color .12s ease;
}
.od-region-opt.is-selected .od-region-pip {
border-color: var(--od-ink, #16140F);
}
.od-region-opt.is-selected .od-region-pip::after {
content: "";
position: absolute;
inset: 3px;
border-radius: 50%;
background: var(--od-ink, #16140F);
}
.od-region-foot {
display: flex; align-items: center; justify-content: space-between;
gap: 16px;
margin-top: 26px;
padding-top: 22px;
border-top: 1px solid var(--c-hair, #ECE9E2);
}
.od-region-note {
font-size: 12px;
color: var(--od-ink-soft, #6B665C);
line-height: 1.45;
}
.od-region-apply {
background: var(--od-ink, #16140F);
color: var(--od-cream-light, #FAF6EC);
border: 0;
border-radius: 999px;
padding: 13px 28px;
font-family: var(--sans, 'Inter', sans-serif);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
cursor: pointer;
transition: background .12s ease, transform .08s ease;
flex-shrink: 0;
}
.od-region-apply:hover { background: var(--od-tomato, #E84A2A); }
.od-region-apply:active { transform: translateY(1px); }
@keyframes od-region-in {
from { opacity: 0; }
to { opacity: 1; }
}
.od-region-modal.open .od-region-card {
animation: od-region-card-in .25s cubic-bezier(.2,.7,.3,1);
}
@keyframes od-region-card-in {
from { opacity: 0; transform: translateY(12px) scale(.985); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 560px) {
.od-region-modal { padding: 12px; align-items: flex-end; }
.od-region-card {
padding: 28px 22px 22px;
border-radius: 16px;
max-height: 92vh;
}
.od-region-title { font-size: 26px; }
.od-region-foot { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
.od-region-apply { width: 100%; }
.od-region-note { text-align: center; }
}
/* ============================================================
Geo-confirmation banner
------------------------------------------------------------
Sticky toast pinned to the bottom-center on store pages, on
the visitor's first session. Asks them to confirm the
current region (or quietly suggests switching if their geo
header says they're in a different country).
Dismissed via the od_geo_dismissed cookie so it only shows
once per visitor.
============================================================ */
.od-geo-banner {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%) translateY(140%);
width: min(720px, calc(100vw - 32px));
z-index: 1100;
background: var(--od-cream-light, #FBF6E6);
border: 1px solid rgba(22, 20, 15, 0.10);
border-radius: 14px;
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.6) inset,
0 18px 38px -14px rgba(22, 20, 15, 0.38),
0 4px 10px -4px rgba(22, 20, 15, 0.12);
padding: 18px 22px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px 20px;
opacity: 0;
pointer-events: none;
transition:
transform .42s cubic-bezier(.2, .8, .2, 1),
opacity .32s ease-out;
}
.od-geo-banner.is-visible {
transform: translateX(-50%) translateY(0);
opacity: 1;
pointer-events: auto;
}
.od-geo-banner.is-leaving {
transform: translateX(-50%) translateY(140%);
opacity: 0;
pointer-events: none;
}
.od-geo-flag {
width: 44px; height: 44px;
border-radius: 50%;
background: #FFF;
border: 1px solid rgba(22, 20, 15, 0.08);
display: flex; align-items: center; justify-content: center;
font-size: 24px; line-height: 1;
box-shadow: 0 2px 6px -2px rgba(22, 20, 15, 0.18);
flex-shrink: 0;
}
.od-geo-copy {
min-width: 0;
}
.od-geo-headline {
font-family: "ITC Caslon No. 224", "Caslon", "Times New Roman", Georgia, serif;
font-style: italic;
font-weight: 500;
font-size: 19px;
line-height: 1.15;
color: var(--od-ink, #1F1A12);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.od-geo-sub {
font-size: 13px;
line-height: 1.45;
color: var(--od-ink-soft, #4A3F2E);
margin: 0;
}
.od-geo-sub b {
font-weight: 600;
color: var(--od-ink, #1F1A12);
}
.od-geo-actions {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.od-geo-btn {
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 10px 18px;
border-radius: 999px;
cursor: pointer;
transition: background .14s ease-out, color .14s ease-out, border-color .14s ease-out, transform .14s ease-out;
white-space: nowrap;
border: 1px solid transparent;
}
.od-geo-btn--primary {
background: var(--od-ink, #1F1A12);
color: var(--od-cream-light, #FBF6E6);
border-color: var(--od-ink, #1F1A12);
}
.od-geo-btn--primary:hover {
background: #2B2418;
transform: translateY(-1px);
}
.od-geo-btn--ghost {
background: transparent;
color: var(--od-ink, #1F1A12);
border-color: rgba(22, 20, 15, 0.18);
}
.od-geo-btn--ghost:hover {
border-color: rgba(22, 20, 15, 0.5);
background: rgba(22, 20, 15, 0.04);
}
.od-geo-close {
position: absolute;
top: 8px;
right: 10px;
width: 22px; height: 22px;
border: 0;
background: transparent;
cursor: pointer;
color: var(--od-ink-mute, #80715A);
font-size: 18px;
line-height: 1;
padding: 0;
border-radius: 50%;
transition: color .14s ease-out, background .14s ease-out;
}
.od-geo-close:hover {
color: var(--od-ink, #1F1A12);
background: rgba(22, 20, 15, 0.06);
}
@media (max-width: 640px) {
.od-geo-banner {
bottom: 12px;
width: calc(100vw - 16px);
padding: 14px 16px 16px;
grid-template-columns: auto 1fr;
grid-template-areas:
"flag copy"
"actions actions";
row-gap: 12px;
}
.od-geo-flag { grid-area: flag; width: 38px; height: 38px; font-size: 20px; }
.od-geo-copy { grid-area: copy; }
.od-geo-actions { grid-area: actions; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.od-geo-btn { padding: 10px 12px; text-align: center; }
.od-geo-headline { font-size: 17px; }
.od-geo-sub { font-size: 12.5px; }
}
/* ============================================================
404 — page not found
------------------------------------------------------------
Editorial wayfinding page. Big italic display headline on
the left, a subtle spice-shop photograph fading in from the
right edge, primary tomato CTA + ghost secondary, then a
row of category quick-links so the visitor can recover
without going home first.
============================================================ */
.od-404 {
position: relative;
padding: 96px 0 132px;
overflow: hidden;
background: var(--od-cream);
min-height: calc(100vh - 240px);
display: flex;
align-items: center;
}
.od-404-inner {
position: relative;
display: grid;
gap: 40px;
align-items: center;
min-height: 56vh;
}
.od-404-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center right;
opacity: 0.22;
filter: grayscale(35%) contrast(0.95);
pointer-events: none;
/* Fade the photo in from the right so it never competes with copy */
-webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 38%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85) 100%);
mask-image: linear-gradient(to right, transparent 0%, transparent 38%, rgba(0,0,0,0.65) 70%, rgba(0,0,0,0.85) 100%);
}
.od-404-copy {
position: relative;
z-index: 1;
max-width: 660px;
}
.od-404-eyebrow {
display: inline-block;
color: var(--od-tomato);
letter-spacing: 0.18em;
margin-bottom: 28px;
}
.od-404-headline {
margin: 0 0 24px;
line-height: 0.94;
letter-spacing: -0.02em;
font-size: clamp(48px, 8.4vw, 110px);
color: var(--od-ink);
}
.od-404-headline .it { font-style: italic; }
.od-404-headline .accent { color: var(--od-tomato); }
.od-404-sub {
max-width: 52ch;
margin: 0 0 40px;
color: var(--od-ink-soft);
}
.od-404-ctas {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-bottom: 56px;
}
.od-404-quick {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 22px;
padding-top: 28px;
border-top: 1px solid rgba(22, 20, 15, 0.10);
}
.od-404-quick-label {
color: var(--od-ink-mute);
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: 11.5px;
}
.od-404-links {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 22px;
padding: 0;
margin: 0;
}
.od-404-links li { margin: 0; }
.od-404-links a {
color: var(--od-ink);
font-family: inherit;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid rgba(22, 20, 15, 0.22);
transition: color .14s ease-out, border-color .14s ease-out;
}
.od-404-links a:hover {
color: var(--od-tomato);
border-bottom-color: var(--od-tomato);
}
@media (max-width: 820px) {
.od-404 { padding: 72px 0 96px; min-height: auto; }
.od-404-headline { font-size: clamp(40px, 12vw, 72px); }
.od-404-bg { opacity: 0.14; }
}
@media (max-width: 560px) {
.od-404 { padding: 56px 0 80px; }
.od-404-eyebrow { margin-bottom: 20px; }
.od-404-headline { font-size: clamp(36px, 13vw, 54px); }
.od-404-sub { margin-bottom: 32px; }
.od-404-ctas { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 40px; }
.od-404-ctas .od-btn { width: 100%; justify-content: center; }
.od-404-quick { flex-direction: column; align-items: flex-start; gap: 14px; }
.od-404-links { gap: 14px 20px; }
.od-404-bg {
/* On mobile the side-fade looks weird because the copy fills the column.
Switch to a soft top-down fade so the photo whispers under the text. */
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.5) 100%);
opacity: 0.08;
}
}
/* ============================================================
Fluent Forms — editorial overrides
------------------------------------------------------------
FF outputs its own .fluentform / .ff-el-* markup. We target
those inside our editorial wrappers so the forms inherit the
*exact* original styling that the previous static