/* ============ Header ============ */
/* The header sticks; every position: fixed layer (drawers, overlays, cookie,
WhatsApp) is portalled onto by HeaderPortal, so it is NOT capped by
this stacking context and never inherits a containing block from an ancestor.
Layer order on : WhatsApp 100 → search dim 150 → header 200 → drawers
300/310 → cookie 330. Keep 200 above the PDP sticky buy bar (120). */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader {
position: sticky;
top: 0;
z-index: 200;
}
/* Anchors the absolutely positioned search dropdown (top: 100%) to the bar. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__sticky {
position: relative;
}
/* The blurred bar. z-index keeps it above the search panel so the bar stays
bright while the page dims behind the dropdown. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__bar {
position: relative;
z-index: 3;
background: color-mix(in oklab, var(--hd-bg, var(--paper)) 90%, transparent);
backdrop-filter: blur(14px) saturate(1.1);
border-bottom: 1px solid var(--line);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce {
background: var(--ink);
color: var(--paper);
font-family: var(--mono);
font-size: 11.5px;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce b { color: #fff; font-weight: 500; }
/* Rotator row: a single centered rich-text message, auto-cycled. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-inner {
display: flex;
align-items: center;
justify-content: center;
min-height: 38px;
padding: 9px var(--gutter);
max-width: var(--maxw);
margin: 0 auto;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-track {
overflow: hidden;
text-align: center;
animation: cc_oe6aXTYiT2_jGYcx0baFP_announce-in 0.45s var(--ease);
}
/* flatten the IkasComponentRenderer wrapper so the message stays inline/centered */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-track > * {
display: contents;
}
@keyframes cc_oe6aXTYiT2_jGYcx0baFP_announce-in {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Optional manual navigation: arrows hug the centred message (not the edges).
The track shrinks (min-width:0) so a long message never pushes them off-screen. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-inner.has-arrows { gap: 8px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-inner.has-arrows .vheader__announce-track { flex: 0 1 auto; min-width: 0; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-arrow {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: none;
background: transparent;
color: currentColor;
font-size: 13px;
line-height: 1;
cursor: pointer;
opacity: 0.6;
transition: opacity 0.2s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-arrow:hover { opacity: 1; }
@media (max-width: 520px) {
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-inner.has-arrows { padding-inline: 10px; gap: 4px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__announce-arrow { width: 20px; font-size: 12px; }
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__nav {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
/* No vertical padding: the logo sits flush so its own height drives the
header. min-height is the merchant-controlled header height (slider). */
padding: 0 var(--gutter);
min-height: var(--hd-h, 74px);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links {
display: flex;
gap: 30px;
align-items: center;
position: relative; /* anchor for the overflow dropdown */
min-width: 0; /* let the 1fr track clip rather than push the layout wider */
flex-wrap: nowrap; /* never spill onto a second line — overflow → "more" menu */
}
/* collapse the renderer wrappers so MenuItems sit directly in the nav row */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links > * { display: contents; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links > * > * { display: contents; }
/* the overflow group is a real flex item, not a pass-through wrapper */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links > .vheader__more { display: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links > .vheader__more.is-active { display: inline-flex; align-items: center; }
/* ===================== Desktop nav overflow ("more" mega) ===================== */
@media (min-width: 861px) {
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more { position: static; }
/* Inline menus must NOT shrink or wrap — otherwise they compress to fit (text
onto a 2nd line) and the overflow measurement never sees a real overflow.
They keep natural width, overflow, then the JS collapses the extras. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links .menu-item { flex-shrink: 0; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links .menu-item__label { white-space: nowrap; }
/* Inline items that don't fit are hidden and surfaced in the more panel. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links .menu-item.is-of-hidden { display: none; }
/* Chevron toggle that opens the overflow mega. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 6px 0;
background: none;
border: none;
cursor: pointer;
color: var(--ink);
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-btn:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-chevron {
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: translateY(-2px) rotate(45deg);
transition: transform 0.3s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more.is-open .vheader__more-chevron { transform: translateY(1px) rotate(-135deg); }
/* Two-pane dropdown, anchored to the left edge of the nav row. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel {
position: absolute;
top: calc(100% + 14px);
left: 0;
z-index: 80;
display: flex;
width: min(920px, calc(100vw - 2 * var(--gutter)));
min-height: 340px;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more.is-open .vheader__more-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* No overflowed menu has sub-items → no right pane, so the box shrinks to the list. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel.is-list-only {
width: 248px;
min-height: 0;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel.is-list-only .vheader__more-list {
border-right: none;
background: var(--paper);
}
/* Left pane — the overflowed top-level menus as a vertical list. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-list {
flex: 0 0 248px;
width: 248px;
padding: 14px;
border-right: 1px solid var(--line);
background: var(--paper-2);
max-height: 72vh;
overflow-y: auto;
}
/* Re-skin the reused MenuItems: vertical rows + panel in the right pane. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item { display: block; position: static; width: 100%; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.is-of-hidden { display: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
cursor: pointer;
border: none;
background: none;
transition: background 0.2s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item__label {
font-family: var(--sans);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
padding: 0;
color: var(--ink);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item__label::after { display: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item__toggle { display: none; }
/* chevron-right affordance — only on rows that really open a right pane.
A leaf link (no subLinks / no feature) must not promise something beside it. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.has-panel .menu-item__bar::after {
content: "";
flex: none;
width: 6px;
height: 6px;
border-right: 1.5px solid var(--ink-3);
border-bottom: 1.5px solid var(--ink-3);
transform: rotate(-45deg);
transition: border-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item:hover .menu-item__bar, .cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.is-of-active .menu-item__bar { background: var(--paper); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item:hover .menu-item__label, .cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.is-of-active .menu-item__label { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.has-panel:hover .menu-item__bar::after, .cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.has-panel.is-of-active .menu-item__bar::after {
border-color: var(--hd-ac, var(--accent));
transform: translateX(2px) rotate(-45deg);
}
/* Right pane — the active/hovered menu's sub-items fill the area beside the list. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 248px;
display: none;
align-items: flex-start;
gap: 44px;
margin: 0;
padding: 30px 34px;
background: var(--paper);
border: none;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
overflow-y: auto;
z-index: 1;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item.is-of-active .menu-item__panel, .cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel .menu-item:hover .menu-item__panel { display: flex; }
/* When another row is hovered, drop the default-active panel. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__more-panel:has(.menu-item.has-panel:hover) .menu-item.is-of-active:not(:hover) .menu-item__panel { display: none; }
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__brand {
font-family: var(--display);
font-weight: 700;
font-size: 30px;
letter-spacing: 0.12em;
text-align: center;
text-transform: uppercase;
text-decoration: none;
color: var(--ink);
justify-self: center;
/* No padding around the logo so resizing it never adds stray vertical space.
line-height:1 (not 0) so the TEXT brand fallback keeps a proper line box
and stays vertically centered like the image — a block ![]()
is unaffected
by line-height, so the image case looks identical. */
padding: 0;
line-height: 1;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__logo {
display: block;
/* Slider-driven height; width:auto recomputes from the height so the logo
scales perfectly proportionally as the merchant drags the slider. */
height: var(--logo-h, 34px);
width: auto;
max-width: 100%;
object-fit: contain;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tools {
display: flex;
gap: 20px;
align-items: center;
justify-content: flex-end;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool {
background: none;
border: none;
padding: 6px 0;
cursor: pointer;
color: var(--ink);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.25s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool:hover { color: var(--hd-ac, var(--accent)); }
/* Tool icons inherit the button's colour, so hover/accent need no extra rules. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool-icon {
display: block;
flex: none;
width: 20px;
height: 20px;
}
/* Anchors the signed-in dot to the glyph rather than to the button, which grows
wider once a label sits next to it. line-height:0 keeps the box glyph-tight. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool-ic {
position: relative;
display: block;
flex: none;
line-height: 0;
}
/* Signed-in marker. The ring is painted in the header's own background so the dot
stays legible where it overlaps the icon's stroke. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__dot {
position: absolute;
right: -1px;
bottom: -1px;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--hd-ac, var(--accent));
box-shadow: 0 0 0 2px var(--hd-bg, var(--paper));
}
/* Icon-only cart: the count detaches from the flex row and pins to the glyph
instead of sitting beside a label that is no longer rendered. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool--cart.is-icon-only {
position: relative;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool--cart.is-icon-only .vheader__count {
position: absolute;
top: 0;
right: -8px;
min-width: 16px;
height: 16px;
font-size: 9.5px;
}
/* Additional Link entry with an optional link-driven dropdown (additionalLink.subLinks) */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__account { position: relative; display: inline-flex; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__account-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 200px;
background: var(--paper);
border: 1px solid var(--line);
box-shadow: var(--shadow-soft);
padding: 8px 0;
display: flex;
flex-direction: column;
opacity: 0;
visibility: hidden;
transform: translateY(6px);
transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s var(--ease);
z-index: 20;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__account.has-menu:hover .vheader__account-menu, .cc_oe6aXTYiT2_jGYcx0baFP .vheader__account.has-menu:focus-within .vheader__account-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__account-link {
padding: 8px 18px;
color: var(--ink);
text-decoration: none;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: color 0.2s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__account-link:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mfoot-link--sub { font-size: 13px; opacity: 0.72; padding-left: 14px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__count {
background: var(--hd-ac, var(--accent));
color: var(--on-accent);
font-family: var(--mono);
font-weight: 500;
font-size: 10.5px;
min-width: 18px;
height: 18px;
display: inline-grid;
place-items: center;
padding: 0 4px;
}
/* burger (mobile only) */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__burger {
display: none;
flex-direction: column;
gap: 5px;
justify-content: center;
align-items: flex-start;
background: none;
border: none;
padding: 8px 4px;
cursor: pointer;
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__burger i {
width: 22px;
height: 2px;
flex: none;
background: var(--ink);
display: block;
border-radius: 0;
/* integer height keeps all three bars on whole pixels — no sub-pixel
anti-aliasing that makes identical lines look uneven / differently shaded */
transition: background 0.3s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__burger:hover i { background: var(--hd-ac, var(--accent)); }
/* ============ Search panel ============ */
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__overlay {
position: fixed;
inset: 0;
background: rgba(13, 13, 13, 0.4);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s var(--ease), visibility 0.3s;
z-index: 150;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__overlay.is-open { opacity: 1; visibility: visible; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch {
position: absolute;
left: 0;
right: 0;
top: 100%;
background: var(--paper);
border-bottom: 1px solid var(--line);
box-shadow: var(--shadow-soft);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
z-index: 2;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__inner { padding: 28px var(--gutter) 40px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__box {
display: flex;
align-items: center;
gap: 14px;
border-bottom: 2px solid var(--ink);
padding-bottom: 14px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__ic { font-size: 24px; color: var(--ink); line-height: 1; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__input {
flex: 1;
border: none;
background: none;
outline: none;
font-family: var(--display);
font-weight: 500;
font-size: clamp(20px, 2.6vw, 32px);
letter-spacing: -0.01em;
color: var(--ink);
min-width: 0;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__input::placeholder { color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__close {
background: none;
border: none;
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-3);
cursor: pointer;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__close:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__suggest {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 40px;
margin-top: 28px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__col-title {
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ink-3);
margin: 0 0 16px;
font-weight: 500;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__col--full { grid-column: 1 / -1; }
/* match the product column's title→content gap (its first row adds 10px padding) */
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__chips { display: flex; flex-wrap: wrap; gap: 9px; padding-top: 10px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__chip {
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.04em;
border: 1px solid var(--line-2);
background: var(--paper);
padding: 9px 14px;
cursor: pointer;
color: var(--ink-2);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__chip:hover { border-color: var(--hd-ac, var(--accent)); color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-img {
width: 46px;
height: 58px;
object-fit: cover;
flex: none;
background: var(--paper-2);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-img--empty {
background: repeating-linear-gradient(135deg, rgba(13, 13, 13, 0.04) 0 2px, transparent 2px 10px), var(--paper-2);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row:hover .hsearch__row-name { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__row-price { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__viewall {
display: inline-flex;
gap: 8px;
margin-top: 18px;
background: none;
border: none;
cursor: pointer;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
border-bottom: 1px solid var(--ink);
padding: 0 0 3px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__viewall:hover { color: var(--hd-ac, var(--accent)); border-color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__empty { text-align: center; padding: 30px 10px; color: var(--ink-3); font-size: 16px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__loading { padding: 24px 0; color: var(--ink-3); font-size: 22px; letter-spacing: 0.3em; }
/* ============ Off-canvas drawers (cart + mobile menu) ============ */
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__overlay {
position: fixed;
inset: 0;
background: rgba(13, 13, 13, 0.42);
opacity: 0;
visibility: hidden;
transition: opacity 0.35s var(--ease), visibility 0.35s;
z-index: 300;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__overlay.is-open { opacity: 1; visibility: visible; }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer {
position: fixed;
top: 0;
bottom: 0;
background: var(--paper);
z-index: 310;
display: flex;
flex-direction: column;
transition: transform 0.42s var(--ease);
max-height: 100%;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--right { right: 0; width: min(440px, 92vw); transform: translateX(100%); }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--left { left: 0; width: min(380px, 86vw); transform: translateX(-100%); }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer.is-open { transform: none; }
/* Shadow only while open — otherwise the off-screen drawer's shadow bleeds onto the page edge */
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--right.is-open { box-shadow: -30px 0 60px -30px rgba(13, 13, 13, 0.3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--left.is-open { box-shadow: 30px 0 60px -30px rgba(13, 13, 13, 0.3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 24px;
border-bottom: 1px solid var(--line);
flex: none;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__title { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__title span { color: var(--ink-3); font-weight: 500; }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__close {
background: none;
border: none;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 7px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__close:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer__foot { flex: none; border-top: 1px solid var(--line); padding: 16px 24px 18px; background: var(--paper); }
/* ---- cart contents ---- */
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; padding: 20px; margin-inline: -20px; border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line.is-confirming { background: var(--paper-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-img { width: 64px; height: 84px; object-fit: cover; background: var(--paper-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-img--empty { background: repeating-linear-gradient(135deg, rgba(13, 13, 13, 0.04) 0 2px, transparent 2px 11px), var(--paper-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-info { display: flex; flex-direction: column; min-width: 0; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-cat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-media { display: block; text-decoration: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-name { font-family: var(--display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; margin: 4px 0 6px; line-height: 1.15; color: var(--ink); text-decoration: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-name:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__qty { display: inline-flex; align-items: stretch; border: 1px solid var(--line-2); margin-top: 10px; width: fit-content; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__qty button { width: 32px; height: 30px; display: grid; place-items: center; background: none; border: none; font-size: 16px; line-height: 1; color: var(--ink); cursor: pointer; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__qty button:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__qty span { min-width: 30px; display: grid; place-items: center; font-family: var(--mono); font-size: 13px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-right { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-price { font-family: var(--mono); font-size: 14px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-remove { background: none; border: none; color: var(--ink-3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__line-remove:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm { display: inline-flex; align-items: center; gap: 10px; animation: cc_oe6aXTYiT2_jGYcx0baFP_hcart-confirm-in 0.3s var(--ease); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-yes, .cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-no { background: none; border: none; cursor: pointer; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s var(--ease); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-yes { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-yes:hover { text-decoration: underline; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-no { color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__confirm-no:hover { color: var(--ink); }
@keyframes cc_oe6aXTYiT2_jGYcx0baFP_hcart-confirm-in {
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__empty { text-align: center; padding: 60px 10px; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__empty-text { margin: 0; color: var(--ink); font-size: 17px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-wrap { margin-bottom: 16px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo { display: flex; border: 1px solid var(--line-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-error { margin: 8px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--danger); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-input { flex: 1; border: none; padding: 13px 14px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; background: var(--paper); outline: none; min-width: 0; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-btn { background: var(--ink); color: #fff; border: none; padding: 0 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-btn:hover { background: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__promo-applied {
display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px;
background: var(--accent-soft); color: var(--hd-ac, var(--accent)); border: none;
padding: 10px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__ship-bar { margin-bottom: 16px; padding: 14px; border: 1px solid var(--line); background: var(--paper-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__ship-track { height: 3px; background: var(--line-2); overflow: hidden; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__ship-fill { height: 100%; background: var(--hd-ac, var(--accent)); transition: width 0.35s var(--ease); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__ship-text { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); line-height: 1.35; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__ship-text b { color: var(--hd-ac, var(--accent)); font-weight: 500; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__sum { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; font-size: 14px; color: var(--ink-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__sum--total { font-family: var(--display); font-weight: 600; font-size: 19px; color: var(--ink); margin: 8px 0 12px; padding-top: 12px; border-top: 1px solid var(--line); }
/* dark checkout button (accent still fills bottom-up on hover via .btn-fill) */
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__checkout { width: 100%; justify-content: center; --btn-fill: var(--hd-ac, var(--accent)); background: var(--ink); border-color: var(--ink); color: #fff; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__note { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 10px; }
/* ---- cart cross-sell rail (quick-add with variant select) ---- */
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__xsell {
margin-top: 18px;
padding-top: 18px;
border-top: 1px solid var(--line);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__xsell-title {
display: block;
margin-bottom: 12px;
font-family: var(--mono);
font-size: 10.5px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-3);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcart__xsell-list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* ---- mobile menu ---- */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mmenu { padding: 6px 0 24px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mmenu > * { display: contents; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mmenu > * > * { display: contents; }
/* push the account footer to the bottom of the mobile drawer */
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--left .hdrawer__body { display: flex; flex-direction: column; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mfoot { margin-top: auto; padding-top: 20px; padding-bottom: 28px; border-top: 1px solid var(--line); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mfoot-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--mono);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink);
text-decoration: none;
transition: color 0.25s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mfoot-link:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__mfoot-icon {
display: block;
flex: none;
width: 18px;
height: 18px;
}
/* ============ Cookie consent ============ */
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie {
position: fixed;
left: clamp(16px, 3vw, 32px);
bottom: clamp(16px, 3vw, 32px);
width: min(420px, calc(100vw - 32px));
/* vertical stack so the eyebrow → title → text → actions never sit side by side */
display: flex;
flex-direction: column;
align-items: flex-start;
background: var(--paper);
box-shadow: var(--shadow-lift);
border-top: 2px solid var(--hd-ac, var(--accent));
padding: 30px clamp(22px, 3vw, 34px) 26px;
z-index: 330;
opacity: 0;
visibility: hidden;
transform: translateY(120%);
transition: transform 0.55s var(--ease), opacity 0.4s var(--ease), visibility 0.55s;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__x {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
cursor: pointer;
color: var(--ink-3);
font-size: 14px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__x:hover { color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__eyebrow {
font-family: var(--mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--hd-ac, var(--accent));
display: inline-flex;
align-items: center;
gap: 10px;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__title { font-family: var(--display); font-weight: 700; font-size: 26px; letter-spacing: -0.01em; margin: 14px 0 10px; color: var(--ink); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__text { width: 100%; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__text a { color: var(--ink); border-bottom: 1px solid var(--line-2); text-decoration: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__text a:hover { color: var(--hd-ac, var(--accent)); border-color: var(--hd-ac, var(--accent)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__actions { width: 100%; display: flex; gap: 12px; margin-top: 22px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__btn {
flex: 1;
padding: 15px;
font-family: var(--mono);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
border: 1px solid var(--ink);
transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__btn--accept { background: var(--hd-ac, var(--accent)); border-color: var(--hd-ac, var(--accent)); color: var(--on-accent); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__btn--accept:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__btn--reject { background: var(--paper); color: var(--ink); }
.cc_oe6aXTYiT2_jGYcx0baFP .hcookie__btn--reject:hover { background: var(--ink); color: #fff; }
/* ============ Responsive ============ */
@media (max-width: 860px) {
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__nav { grid-template-columns: auto 1fr auto; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__links { display: none; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__burger { display: inline-flex; }
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__brand { font-size: 24px; }
/* Mobile header height — own slider, falls back to desktop var, then 60px. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__nav { min-height: var(--hd-h-m, var(--hd-h, 60px)); }
/* Mobile logo size — own slider, falls back to desktop var, then 28px. */
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__logo { height: var(--logo-h-m, var(--logo-h, 28px)); }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__suggest { grid-template-columns: 1fr; gap: 28px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hsearch__list { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
.cc_oe6aXTYiT2_jGYcx0baFP .vheader__tool--account { display: none; }
}
/* full-width cart drawer on phones */
@media (max-width: 560px) {
.cc_oe6aXTYiT2_jGYcx0baFP .hdrawer--right { width: 100vw; }
}
/* Bundle sub-products nested inside a cart-drawer line (BundleLineItems sub-component). */
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__label { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__item { display: grid; grid-template-columns: 30px 1fr auto; gap: 9px; align-items: center; }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__img { width: 30px; height: 38px; object-fit: cover; background: var(--paper-2); display: block; }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__name { font-family: var(--sans); font-size: 12px; line-height: 1.2; color: var(--ink); }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__meta { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-3); }
.cc_oe6aXTYiT2_jGYcx0baFP .vsp-blines__qty { font-family: var(--mono); font-size: 11px; color: var(--ink-2); }
/* ============ WhatsApp bubble ============
Lives inside (z-index 200), so it floats above page content but its
own z-index (50) keeps it BELOW the mega menu (60/75), search panel (80),
drawers (150/160) and cookie consent (190) — an open overlay always wins. */
.cc_oe6aXTYiT2_jGYcx0baFP .hwa {
position: fixed;
bottom: clamp(18px, 3vw, 28px);
z-index: 100;
display: inline-flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
background: #25d366;
color: #fff;
box-shadow: var(--shadow-lift);
transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.cc_oe6aXTYiT2_jGYcx0baFP .hwa--right { right: clamp(18px, 3vw, 28px); }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa--left { left: clamp(18px, 3vw, 28px); }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa:hover { transform: translateY(-3px) scale(1.04); }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa__icon { display: block; }
/* Tooltip: label comes from the link prop, revealed on hover/focus */
.cc_oe6aXTYiT2_jGYcx0baFP .hwa__tip {
position: absolute;
bottom: 50%;
transform: translateY(50%) translateX(6px);
white-space: nowrap;
background: var(--ink);
color: var(--paper);
font-family: var(--mono);
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 8px 12px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.28s var(--ease), transform 0.28s var(--ease), visibility 0.28s;
}
.cc_oe6aXTYiT2_jGYcx0baFP .hwa--right .hwa__tip { right: calc(100% + 12px); }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa--left .hwa__tip { left: calc(100% + 12px); transform: translateY(50%) translateX(-6px); }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa:hover .hwa__tip, .cc_oe6aXTYiT2_jGYcx0baFP .hwa:focus-visible .hwa__tip {
opacity: 1;
visibility: visible;
transform: translateY(50%) translateX(0);
}
@media (max-width: 767px) {
.cc_oe6aXTYiT2_jGYcx0baFP .hwa { width: 48px; height: 48px; }
.cc_oe6aXTYiT2_jGYcx0baFP .hwa__tip { display: none; }
}
/* Sizing and colour live with the consumers (Header/styles.css), because those
rules need the header's scope and its hover/accent tokens. Kept here so the
folder follows the sub-component convention. */