/* soooks-theme:corner:169557:f0936d16eeb03eeb */
/* Corner — base design system + chrome (announcement, header, menus, search, drawers, footer).
   Simple and friendly: flat surfaces, 1px borders, 8px radius, no gradients, no heavy shadows.
   Section styles live in corner-sections.css, page templates in corner-templates.css; they load after this file
   (alphabetical), so at equal specificity they win. Corner's heading rules below carry class weight
   (:is(h3, .cn-h3)) and set the size, family, weight and colour of every heading, card titles included.

   TOKENS (all on :root and .theme-root)
   Colors (per section via .scheme-1…5, scheme 1 on :root — snippets/theme-vars.liquid):
     --color-background --color-surface --color-surface-elevated --color-heading --color-text
     --color-text-muted --color-border --color-primary --color-on-primary --color-accent --color-secondary
     --cn-sale --cn-success --cn-error                        status colors (Theme settings → Colors)
   Type: --cn-font-heading --cn-font-body --cn-heading-weight --cn-scale (heading size multiplier)
     --cn-heading-tracking --cn-line-height
   Layout: --cn-width (page width) --cn-space (section spacing, already responsive)
     --cn-space-desktop --cn-space-mobile --cn-gap (grid gap) --cn-radius (inputs, images, menus)
   Buttons: --cn-btn-radius --cn-btn-pad-y --cn-btn-pad-x --cn-btn-font
   Cards: --cn-card-radius --cn-card-border-width (0px|1px) --cn-card-shadow (none|soft) --cn-card-pad
     (inner padding when bordered/shadowed) --cn-card-ratio (4 / 5 | 1 / 1 | 4 / 3 | auto)
   Motion: --cn-dur-fast/base/slow/drawer/exit/reveal/zoom/bump/done --cn-ease --cn-ease-out --cn-ease-in
     --cn-stagger --cn-rise --cn-zoom (image hover scale; 1 when Theme settings → Animation → zoom is off)
   Chrome (set by corner-core.js): --cn-header-h (header height) --cn-sticky-offset (height of the sticky
     header, 0 when it does not stick) — use top: calc(var(--cn-sticky-offset, 0px) + 1rem) for sticky columns.

   SHARED CLASSES: .cn-wrap .cn-section (half spacing top + bottom → var(--cn-space) between sections)
   .cn-section--padded (full spacing, for sections with their own background) .cn-h1 .cn-h2 .cn-h3 .cn-eyebrow
   .cn-muted .cn-rte .cn-visually-hidden .cn-btn (+ --secondary --link --dark --sm --lg --wide --icon)
   .cn-input .cn-field .cn-check .cn-chip .cn-qty .cn-note .cn-badge (+ --sale --sold --new) .cn-progress
   .cn-link .cn-icon--flip [data-cn-stagger] (children rise in turn inside a reveal) .cn-reveal */

/* ---------- root + motion tokens ---------- */
.theme-root {
  /* The renderer sets an inline page background, text color and font; Corner's scheme 1 and body font win. */
  background-color: var(--color-background) !important;
  color: var(--color-text) !important;
  font-family: var(--cn-font-body) !important;
  font-size: 16px;
  line-height: var(--cn-line-height, 1.6);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
:root, .theme-root {
  --cn-dur-fast: 150ms; --cn-dur-base: 220ms; --cn-dur-slow: 320ms; --cn-dur-drawer: 320ms; --cn-dur-exit: 200ms;
  --cn-dur-zoom: 400ms; --cn-dur-reveal: 400ms; --cn-dur-bump: 300ms; --cn-dur-done: 1200ms;
  --cn-ease: cubic-bezier(0.4, 0, 0.2, 1); --cn-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --cn-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --cn-stagger: 50ms; --cn-rise: 12px; --cn-zoom: 1.04;
  --cn-space: var(--cn-space-desktop, 64px);
  --cn-shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.06);
  --cn-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.08);
  --cn-scrim: rgba(22, 24, 29, 0.45);
  --cn-icon-stroke: 1.7;
}
@media (max-width: 749px) { :root, .theme-root { --cn-space: var(--cn-space-mobile, 40px); } }
.theme-root[data-motion="subtle"] { --cn-stagger: 25ms; --cn-rise: 0px; }
.theme-root[data-image-zoom="false"] { --cn-zoom: 1; }

/* ---------- base ---------- */
.theme-root *, .theme-root *::before, .theme-root *::after { box-sizing: border-box; }
:where(.theme-root) img, :where(.theme-root) svg, :where(.theme-root) video { max-width: 100%; }
:where(.theme-root) img { display: block; height: auto; }
/* Zero specificity: links inherit by default, any class that colours a link wins. */
:where(.theme-root) a { color: inherit; text-decoration: none; }
:where(.theme-root) p, :where(.theme-root) figure, :where(.theme-root) blockquote { margin: 0; }
:where(.theme-root) ul[role="list"], :where(.theme-root) ol[role="list"] { list-style: none; margin: 0; padding: 0; }
:where(.theme-root) button { font: inherit; color: inherit; }
:where(.theme-root) :is(h1, h2, h3, h4, h5, h6, .cn-h1, .cn-h2, .cn-h3, .cn-h4) {
  margin: 0; font-family: var(--cn-font-heading); font-weight: var(--cn-heading-weight, 700);
  letter-spacing: var(--cn-heading-tracking, 0); line-height: 1.2; color: var(--color-heading); text-wrap: balance;
}
:where(.theme-root) :is(h1, .cn-h1) { font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--cn-scale, 1)); line-height: 1.15; }
:where(.theme-root) :is(h2, .cn-h2) { font-size: calc(clamp(1.5rem, 3vw, 2rem) * var(--cn-scale, 1)); }
:where(.theme-root) :is(h3, .cn-h3) { font-size: calc(1.25rem * var(--cn-scale, 1)); line-height: 1.3; }
:where(.theme-root) :is(h4, .cn-h4) { font-size: calc(1.0625rem * var(--cn-scale, 1)); line-height: 1.35; }
:where(.theme-root) ::selection { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }
/* Keyboard focus is always visible: a 2px ring in the primary color. */
:where(.theme-root) :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.cn-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.theme-root .cn-skip-link, .cn-skip-link { position: fixed; inset-inline-start: 1rem; top: -100px; z-index: 1500; background: var(--color-heading); color: var(--color-background); padding: 0.7rem 1rem; border-radius: var(--cn-radius); font-weight: 600; }
.theme-root .cn-skip-link:focus, .cn-skip-link:focus { top: 1rem; }
.cn-main { outline: none; }
html.cn-locked, html.cn-locked body { overflow: hidden; }

/* ---------- layout + type utilities ---------- */
/* One side gutter for every container (header, sections, templates, footer) so content edges line up. */
:root, .theme-root { --cn-gutter: clamp(1rem, 4vw, 2rem); }
.cn-wrap { width: 100%; max-width: var(--cn-width, 1280px); margin-inline: auto; padding-inline: var(--cn-gutter); }
.cn-section { padding-block: calc(var(--cn-space) / 2); }
.cn-section--padded { padding-block: var(--cn-space); }
.cn-eyebrow { display: inline-block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.cn-muted { color: var(--color-text-muted); }
.cn-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; color: var(--color-primary); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color var(--cn-dur-base) var(--cn-ease); }
.cn-link:hover { text-decoration-color: currentColor; }
/* Directional icons mirror in right-to-left; arrows drift the way they point on hover. */
[dir="rtl"] .cn-icon--flip { transform: scaleX(-1); }
.cn-link > .cn-icon--arrow { transition: translate var(--cn-dur-base) var(--cn-ease-out); }
.cn-link:hover > .cn-icon--arrow { translate: 3px 0; }
[dir="rtl"] .cn-link:hover > .cn-icon--arrow { translate: -3px 0; }
.dir-arrow { display: inline-flex; }
[dir="rtl"] .dir-arrow { transform: scaleX(-1); }

.cn-rte > * + * { margin-top: 0.85em; }
.cn-rte :is(h2, h3, h4) { margin-top: 1.4em; }
.cn-rte a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.cn-rte :is(ul, ol) { padding-inline-start: 1.25rem; margin-block: 0.85em 0; }
.cn-rte li + li { margin-top: 0.35em; }
.cn-rte img { border-radius: var(--cn-radius); }
.cn-rte blockquote { border-inline-start: 3px solid var(--color-border); padding-inline-start: 1rem; color: var(--color-text-muted); }

/* ---------- buttons ---------- */
.theme-root .cn-btn, .cn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px;
  padding: var(--cn-btn-pad-y, 0.8rem) var(--cn-btn-pad-x, 1.5rem); border: 1px solid var(--color-primary); border-radius: var(--cn-btn-radius, 8px);
  background: var(--color-primary); color: var(--color-on-primary); font: 600 var(--cn-btn-font, 0.9375rem)/1.2 var(--cn-font-body);
  text-align: center; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--cn-dur-base) var(--cn-ease), border-color var(--cn-dur-base) var(--cn-ease), color var(--cn-dur-base) var(--cn-ease), transform var(--cn-dur-fast) var(--cn-ease);
}
.theme-root .cn-btn:hover, .cn-btn:hover { background: color-mix(in srgb, var(--color-primary) 86%, #000); border-color: color-mix(in srgb, var(--color-primary) 86%, #000); }
.theme-root .cn-btn:active, .cn-btn:active { transform: scale(0.98); }
.theme-root :is(.cn-btn--secondary, .cn-btn--soft), :is(.cn-btn--secondary, .cn-btn--soft) { background: transparent; color: var(--color-heading); border-color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.theme-root :is(.cn-btn--secondary, .cn-btn--soft):hover, :is(.cn-btn--secondary, .cn-btn--soft):hover { background: var(--color-surface); border-color: var(--color-heading); }
.theme-root :is(.cn-btn--dark, .cn-btn--ink), :is(.cn-btn--dark, .cn-btn--ink) { background: var(--color-secondary); border-color: var(--color-secondary); color: var(--color-background); }
.theme-root :is(.cn-btn--dark, .cn-btn--ink):hover, :is(.cn-btn--dark, .cn-btn--ink):hover { background: color-mix(in srgb, var(--color-secondary) 85%, var(--color-background)); }
.theme-root .cn-btn--link, .cn-btn--link { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
.theme-root .cn-btn--link:hover, .cn-btn--link:hover { background: none; text-decoration-color: currentColor; }
.theme-root .cn-btn--sm, .cn-btn--sm { min-height: 36px; padding: 0.5rem 0.9rem; font-size: 0.875rem; }
.theme-root .cn-btn--lg, .cn-btn--lg { min-height: 52px; padding: 1rem 2rem; font-size: 1rem; }
.cn-btn--wide { width: 100%; }
.theme-root .cn-btn--icon, .cn-btn--icon { padding: 0; width: 44px; }
.theme-root .cn-btn:is([disabled], [aria-disabled="true"]):not(.is-busy), .cn-btn:is([disabled], [aria-disabled="true"]):not(.is-busy) { opacity: 0.45; cursor: not-allowed; pointer-events: none; }

/* Add-to-cart states (corner-core.js): busy shows a spinner at full strength (never the faded sold-out look);
   added shows a check for a moment. Works on .cn-btn and B's .cn-quickadd. */
@keyframes cn-spin { to { transform: rotate(360deg); } }
@keyframes cn-pop { from { opacity: 0; transform: translateY(-0.1em) rotate(-45deg) scale(0.4); } }
.theme-root :is(.cn-btn, .cn-quickadd).is-busy { cursor: progress; }
:is(.cn-btn, .cn-quickadd):is(.is-busy, .is-added) > svg { display: none; }
:is(.cn-btn, .cn-quickadd).is-busy::before { content: ''; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: cn-spin 0.75s linear infinite; }
:is(.cn-btn, .cn-quickadd).is-added::before { content: ''; flex: none; width: 0.62em; height: 0.34em; margin-inline-end: 0.1em; border-inline-start: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-0.1em) rotate(-45deg); animation: cn-pop var(--cn-dur-base) var(--cn-ease-out); }

/* ---------- forms ---------- */
.cn-field { display: grid; gap: 0.4rem; }
.cn-field > label, .cn-label { font-size: 0.875rem; font-weight: 600; color: var(--color-heading); }
.cn-input, :where(.theme-root) select, :where(.theme-root) textarea {
  width: 100%; min-height: 44px; padding: 0.65rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px);
  background: var(--color-background); color: var(--color-text); font: 400 0.9375rem/1.4 var(--cn-font-body);
  transition: border-color var(--cn-dur-fast) var(--cn-ease), box-shadow var(--cn-dur-base) var(--cn-ease);
}
:where(.theme-root) textarea { min-height: 96px; resize: vertical; }
:where(.theme-root) select { appearance: none; padding-inline-end: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23646b77' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.9rem center; cursor: pointer; }
[dir="rtl"] :where(.theme-root) select { background-position: left 0.9rem center; }
.cn-input::placeholder, :where(.theme-root) textarea::placeholder { color: var(--color-text-muted); opacity: 1; }
.cn-input:hover, :where(.theme-root) select:hover, :where(.theme-root) textarea:hover { border-color: color-mix(in srgb, var(--color-text) 35%, transparent); }
.cn-input:focus, :where(.theme-root) select:focus, :where(.theme-root) textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.cn-input[aria-invalid="true"] { border-color: var(--cn-error); }
:where(.theme-root) :is(input[type="checkbox"], input[type="radio"]) { accent-color: var(--color-primary); width: 1.05rem; height: 1.05rem; }
.cn-check { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.9375rem; cursor: pointer; }
.cn-chip { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.4rem 0.9rem; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-background); font-size: 0.875rem; font-weight: 500; transition: border-color var(--cn-dur-base) var(--cn-ease), background-color var(--cn-dur-base) var(--cn-ease); }
.cn-chip:hover, .cn-chip.is-active { border-color: var(--color-heading); }
.cn-chip.is-active { background: var(--color-heading); color: var(--color-background); }

/* Quantity stepper (drawer, product page, cart page). */
.cn-qty { display: inline-flex; align-items: center; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); }
.cn-qty button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 38px; border: 0; background: none; cursor: pointer; color: inherit; border-radius: var(--cn-radius, 8px); transition: background-color var(--cn-dur-fast) var(--cn-ease); }
.cn-qty button:hover { background: var(--color-surface); }
.cn-qty button:disabled { opacity: 0.4; cursor: not-allowed; }
.cn-qty input { width: 40px; height: 38px; border: 0; background: none; text-align: center; font: 600 0.9375rem var(--cn-font-body); color: inherit; appearance: textfield; -moz-appearance: textfield; }
.cn-qty input:focus { outline: none; }
.cn-qty input::-webkit-outer-spin-button, .cn-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-qty--lg button { width: 44px; height: 48px; }
.cn-qty--lg input { width: 48px; height: 48px; font-size: 1rem; }

/* ---------- notes, toasts, badges, progress ---------- */
.theme-root .cn-note { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.75rem; padding: 0.65rem 0.85rem; border-radius: var(--cn-radius, 8px); font-size: 0.875rem; line-height: 1.45; }
.theme-root .cn-note svg { flex: none; margin-top: 2px; }
.theme-root .cn-note--error { color: var(--cn-error); background: color-mix(in srgb, var(--cn-error) 9%, var(--color-background)); }
.theme-root .cn-note--success { color: var(--cn-success); background: color-mix(in srgb, var(--cn-success) 9%, var(--color-background)); }
.cn-note[hidden] { display: none !important; }

.cn-toast { position: fixed; inset-inline: 0; bottom: 1.25rem; margin-inline: auto; width: max-content; max-width: min(92vw, 440px); z-index: 1400; display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1.1rem; border-radius: var(--cn-radius, 8px); background: var(--color-heading); color: var(--color-background); font: 500 0.9375rem/1.4 var(--cn-font-body); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity var(--cn-dur-exit) var(--cn-ease-in), transform var(--cn-dur-exit) var(--cn-ease-in); }
.cn-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; transition-duration: var(--cn-dur-slow); transition-timing-function: var(--cn-ease-out); }
.cn-toast a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.cn-toast--error { background: var(--cn-error); color: #fff; }

.cn-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border-radius: calc(var(--cn-radius, 8px) / 2); background: var(--color-surface); color: var(--color-heading); font-size: 0.75rem; font-weight: 600; line-height: 1.2; }
.cn-badge--sale { background: var(--cn-sale); color: #fff; }
.cn-badge--sold { background: var(--color-heading); color: var(--color-background); }
.cn-badge--new { background: var(--color-primary); color: var(--color-on-primary); }
[dir="rtl"] .cn-badge { unicode-bidi: plaintext; }

.cn-progress { height: 6px; border-radius: 999px; background: var(--color-surface); overflow: hidden; }
.cn-progress > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; transform: scaleX(var(--p, 0)); transform-origin: left center; transition: transform var(--cn-dur-slow) var(--cn-ease-out); }
[dir="rtl"] .cn-progress > span { transform-origin: right center; }

/* ---------- overlays (search, menu drawer, cart drawer, B/C drawers) ----------
   [data-cn-overlay] is a full-screen layer; .is-open shows it. It turns invisible only after its exit
   transition, so it leaves the tab order cleanly. Children animate from their own edge. */
[data-cn-overlay] { position: fixed; inset: 0; z-index: 1000; visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--cn-dur-exit); }
[data-cn-overlay].is-open { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.cn-overlay__scrim { position: absolute; inset: 0; background: var(--cn-scrim); opacity: 0; transition: opacity var(--cn-dur-exit) var(--cn-ease-in); }
[data-cn-overlay].is-open > .cn-overlay__scrim { opacity: 1; transition: opacity var(--cn-dur-drawer) var(--cn-ease-out); }
.cn-dpanel, .cn-drawer__panel, .cn-mdrawer__panel {
  position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; width: min(420px, 92vw);
  background: var(--color-background); color: var(--color-text); overflow: hidden;
  transition: transform var(--cn-dur-exit) var(--cn-ease-in);
}
/* Generic drawer panel for other overlays (filters…): from the end edge, or the start edge with --start. */
.cn-dpanel { inset-inline-end: 0; transform: translateX(100%); overflow-y: auto; }
.cn-dpanel--start { inset-inline-end: auto; inset-inline-start: 0; transform: translateX(-100%); }
[dir="rtl"] .cn-dpanel { transform: translateX(-100%); }
[dir="rtl"] .cn-dpanel--start { transform: translateX(100%); }

/* ---------- announcement bar ---------- */
.cn-announce { font-size: 0.875rem; line-height: 1.4; }
.cn-announce[hidden] { display: none; }
.cn-announce__inner { position: relative; display: flex; align-items: center; gap: 0.5rem; min-height: 40px; padding-block: 0.4rem; }
.cn-announce__track { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 2.5rem; row-gap: 0.15rem; }
.cn-announce--align-start .cn-announce__track { justify-content: flex-start; text-align: start; }
.cn-announce--align-end .cn-announce__track { justify-content: flex-end; text-align: end; }
.cn-announce--align-center .cn-announce__track { text-align: center; }
.cn-announce__msg { margin: 0; }
.cn-announce__msg a { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.cn-announce__msg a:hover { text-decoration-color: currentColor; }
/* Rotate: messages share one cell and cross-fade; only the active one is visible and focusable. */
.cn-announce--rotate .cn-announce__track { display: grid; }
.cn-announce--rotate .cn-announce__msg { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity var(--cn-dur-slow) var(--cn-ease), transform var(--cn-dur-slow) var(--cn-ease-out), visibility 0s linear var(--cn-dur-slow); }
.cn-announce--rotate .cn-announce__msg.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.cn-announce__nav, .cn-announce__close { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--cn-radius, 8px); background: none; color: inherit; cursor: pointer; opacity: 0.75; transition: opacity var(--cn-dur-fast) var(--cn-ease), background-color var(--cn-dur-fast) var(--cn-ease); }
.cn-announce__nav:hover, .cn-announce__close:hover { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
@media (max-width: 749px) {
  .cn-announce--static .cn-announce__msg:not(:first-child) { display: none; }
  .cn-announce__inner { font-size: 0.8125rem; }
}

/* ---------- header ---------- */
/* Sticky: the section wrapper sticks (the header inside it cannot outlive its wrapper). JS adds .cn-sticky as a
   fallback where :has() is missing. */
.soooks-section:has([data-cn-header][data-sticky="true"]), .soooks-section.cn-sticky { position: sticky; top: var(--sticky-top, 0px); z-index: 900; }
/* Transparent (home page only): the next section slides up under the header. */
.soooks-section:has(.cn-header--transparent) { margin-bottom: calc(-1 * var(--cn-header-h, 72px)); }
.cn-header { position: relative; z-index: 900; border-bottom: 1px solid var(--color-border); --cn-row-h: 72px; transition: background-color var(--cn-dur-base) var(--cn-ease), color var(--cn-dur-base) var(--cn-ease), border-color var(--cn-dur-base) var(--cn-ease); }
.cn-header--compact { --cn-row-h: 60px; }
.cn-header--icons-bold { --cn-icon-stroke: 2.2; }
.cn-header .cn-icon:not(.cn-icon--x, .cn-icon--facebook, .cn-icon--tiktok, .cn-icon--pinterest, .cn-icon--youtube) { stroke-width: var(--cn-icon-stroke); }
.cn-header.is-scrolled { border-bottom-color: var(--color-border); }
/* Beats the header's .scheme-* background (theme-vars prints scheme rules after this file). */
.theme-root .cn-header.cn-header--transparent:not(.is-solid) { background-color: transparent; border-bottom-color: transparent; }
.cn-header--transparent.cn-header--text-light:not(.is-solid) { color: #fff; --color-heading: #fff; }
.cn-header--transparent.cn-header--text-dark:not(.is-solid) { color: #16181d; --color-heading: #16181d; }
.cn-header--transparent:not(.is-solid) .cn-header__count { box-shadow: none; }

.cn-header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "logo nav end"; align-items: stretch; column-gap: 1.5rem; min-height: var(--cn-row-h); }
.cn-header--logo_left_menu_left .cn-header__row { grid-template-columns: auto minmax(0, 1fr) auto; }
.cn-header--logo_left_menu_left .cn-nav__list { justify-content: flex-start; }
.cn-header--logo_center .cn-header__row { grid-template-areas: "start logo end"; }
.cn-header__start { grid-area: start; display: none; align-items: center; gap: 0.25rem; }
.cn-header--logo_center .cn-header__start { display: flex; }
.cn-header__logo { grid-area: logo; display: flex; align-items: center; justify-self: start; min-width: 0; color: var(--color-heading); }
.cn-header--logo_center .cn-header__logo { justify-self: center; }
.cn-header__logo img { width: var(--cn-logo-w, 120px); max-width: 100%; height: auto; max-height: calc(var(--cn-row-h) - 16px); object-fit: contain; }
.cn-header__logo-text { font: var(--cn-heading-weight, 700) 1.375rem/1.2 var(--cn-font-heading); letter-spacing: var(--cn-heading-tracking, 0); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-header__end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: 0.15rem; }
.cn-header__search-start { display: none; }
.cn-header__search-end { display: contents; }
.cn-header--logo_center .cn-header__search-start { display: contents; }
.cn-header--logo_center .cn-header__search-end { display: none; }
.cn-header__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--cn-radius, 8px); background: none; color: inherit; cursor: pointer; transition: background-color var(--cn-dur-fast) var(--cn-ease); }
.cn-header__icon:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cn-header__icon:active { transform: scale(0.95); }
.cn-header__count { position: absolute; top: 4px; inset-inline-end: 2px; min-width: 18px; height: 18px; padding-inline: 5px; border-radius: 999px; background: var(--color-primary); color: var(--color-on-primary); font-size: 0.6875rem; font-weight: 700; line-height: 18px; text-align: center; display: none; }
.cn-header__count.is-visible { display: block; }
.cn-header__burger { display: none; }
.cn-header__navrow { border-top: 1px solid var(--color-border); }
.cn-header__navrow .cn-nav { min-height: 48px; }
.cn-header--transparent:not(.is-solid) .cn-header__navrow { border-top-color: color-mix(in srgb, currentColor 18%, transparent); }

/* Desktop menu: items fill the row height so the pointer never falls into a gap on the way to a dropdown. */
.cn-nav { grid-area: nav; display: flex; align-items: stretch; min-width: 0; }
.cn-nav__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; column-gap: 0.25rem; width: 100%; }
.cn-nav__item { position: relative; display: flex; align-items: center; }
.cn-nav__link { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.75rem; border-radius: var(--cn-radius, 8px); font-size: 0.9375rem; font-weight: 500; white-space: nowrap; transition: background-color var(--cn-dur-fast) var(--cn-ease), color var(--cn-dur-fast) var(--cn-ease); }
.cn-nav__link:hover, .cn-nav__item.is-open > .cn-nav__link { background: color-mix(in srgb, currentColor 7%, transparent); }
.cn-nav__caret { transition: transform var(--cn-dur-base) var(--cn-ease); }
.cn-nav__item.is-open .cn-nav__caret { transform: rotate(180deg); }
/* Dropdown + mega panels: fade/rise in from their opener, close a beat later so diagonal moves don't flicker. */
.cn-dropdown, .cn-mega { opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity var(--cn-dur-exit) var(--cn-ease-in) 60ms, transform var(--cn-dur-exit) var(--cn-ease-in) 60ms, visibility 0s linear calc(var(--cn-dur-exit) + 60ms); }
.cn-nav__item.is-open > :is(.cn-dropdown, .cn-mega), .cn-nav__item:has(:focus-visible) > :is(.cn-dropdown, .cn-mega) { opacity: 1; visibility: visible; transform: none; transition: opacity var(--cn-dur-base) var(--cn-ease-out), transform var(--cn-dur-base) var(--cn-ease-out), visibility 0s; }
@media (hover: hover) {
  .cn-nav__item:hover > :is(.cn-dropdown, .cn-mega) { opacity: 1; visibility: visible; transform: none; transition: opacity var(--cn-dur-base) var(--cn-ease-out), transform var(--cn-dur-base) var(--cn-ease-out), visibility 0s; }
  .cn-nav__item:hover .cn-nav__caret { transform: rotate(180deg); }
}
.cn-dropdown { position: absolute; top: 100%; inset-inline-start: -0.5rem; z-index: 10; min-width: 230px; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); color: var(--color-text); box-shadow: var(--cn-shadow-pop); }
.cn-dropdown a { display: block; padding: 0.55rem 0.75rem; border-radius: calc(var(--cn-radius, 8px) * 0.75); font-size: 0.9375rem; transition: background-color var(--cn-dur-fast) var(--cn-ease); }
.cn-dropdown a:hover { background: var(--color-surface); color: var(--color-heading); }
.cn-dropdown__sub { padding-inline-start: 0.75rem; margin-bottom: 0.25rem; }
.cn-dropdown__sub a { padding-block: 0.35rem; font-size: 0.875rem; color: var(--color-text-muted); }
.cn-nav--mega .cn-nav__item { position: static; }
.cn-mega { position: absolute; inset-inline: 0; top: 100%; z-index: 10; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); background: var(--color-background); color: var(--color-text); }
.cn-mega__inner { display: flex; gap: 2.5rem; padding-block: 2rem 2.25rem; }
.cn-mega__cols { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.75rem 2rem; align-content: start; }
.cn-mega__title { display: inline-block; margin-bottom: 0.6rem; font-weight: 600; color: var(--color-heading); }
.cn-mega__title:hover, .cn-mega__links a:hover { color: var(--color-primary); }
.cn-mega__links { display: grid; gap: 0.45rem; font-size: 0.9375rem; color: var(--color-text-muted); }
.cn-mega__promo { flex: 0 0 min(320px, 30%); display: grid; gap: 0.75rem; align-content: start; }
.cn-mega__promo-media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--cn-radius, 8px); background: var(--color-surface); }
.cn-mega__promo-media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cn-dur-zoom) var(--cn-ease-out); }
.cn-mega__promo:hover img { transform: scale(var(--cn-zoom)); }
.cn-mega__promo-title { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 600; color: var(--color-heading); }

@media (max-width: 989px) {
  .cn-header__row, .cn-header--logo_left_menu_left .cn-header__row, .cn-header--logo_center .cn-header__row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "start logo end"; column-gap: 0.5rem; --cn-row-h: 60px; min-height: 60px; }
  .cn-header__start { display: flex; }
  .cn-header__burger { display: inline-flex; }
  .cn-header__logo { justify-self: center; }
  .cn-header__logo img { max-width: min(var(--cn-logo-w, 120px), 42vw); }
  .cn-header__logo-text { font-size: 1.2rem; max-width: 46vw; }
  .cn-header .cn-nav, .cn-header__navrow, .cn-header--logo_center .cn-header__search-start { display: none; }
  .cn-header--logo_center .cn-header__search-end { display: contents; }
}
@media (max-width: 479px) { .cn-header__account { display: none; } }

/* ---------- mobile menu drawer ---------- */
.cn-mdrawer__panel { inset-inline-start: 0; transform: translateX(-100%); }
.cn-mdrawer--end .cn-mdrawer__panel { inset-inline-start: auto; inset-inline-end: 0; transform: translateX(100%); }
[dir="rtl"] .cn-mdrawer__panel { transform: translateX(100%); }
[dir="rtl"] .cn-mdrawer--end .cn-mdrawer__panel { transform: translateX(-100%); }
[data-cn-overlay].is-open > :is(.cn-mdrawer__panel, .cn-drawer__panel, .cn-dpanel) { transform: none; transition: transform var(--cn-dur-drawer) var(--cn-ease-out); }
.cn-mdrawer__panel { width: min(380px, 88vw); overflow-y: auto; overscroll-behavior: contain; }
.cn-mdrawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem 0.6rem 1.25rem; padding-inline: 1.25rem 0.75rem; border-bottom: 1px solid var(--color-border); }
.cn-mdrawer__title { font: var(--cn-heading-weight, 700) 1.0625rem/1.2 var(--cn-font-heading); color: var(--color-heading); }
.cn-mdrawer__nav { flex: 1; padding: 0.5rem 0; }
.cn-mdrawer__nav > ul > li { border-bottom: 1px solid var(--color-border); }
.cn-mdrawer__link, .cn-mdrawer__group > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: 0.75rem 1.25rem; font-size: 1rem; font-weight: 500; color: var(--color-heading); cursor: pointer; list-style: none; }
.cn-mdrawer__group > summary::-webkit-details-marker { display: none; }
.cn-mdrawer__group > summary .cn-icon { transition: transform var(--cn-dur-base) var(--cn-ease); }
.cn-mdrawer__group[open] > summary .cn-icon { transform: rotate(180deg); }
.cn-mdrawer__group > ul { padding: 0 1.25rem 0.9rem; display: grid; gap: 0.15rem; }
.cn-mdrawer__group > ul a { display: block; padding: 0.5rem 0.75rem; border-radius: var(--cn-radius, 8px); }
.cn-mdrawer__group > ul a:active, .cn-mdrawer__group > ul a:hover { background: var(--color-surface); }
.cn-mdrawer__all { font-weight: 600; color: var(--color-primary); }
.cn-mdrawer__sub { padding-inline-start: 0.75rem; }
.cn-mdrawer__sub a { font-size: 0.9375rem; color: var(--color-text-muted); }
.cn-mdrawer__foot { display: grid; gap: 0.25rem; padding: 1rem 0.75rem 1.5rem; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cn-mdrawer__account { display: flex; align-items: center; gap: 0.75rem; min-height: 44px; padding: 0.5rem; border: 0; border-radius: var(--cn-radius, 8px); background: none; font-size: 0.9375rem; font-weight: 500; text-align: start; cursor: pointer; }
.cn-mdrawer__account:hover { background: color-mix(in srgb, currentColor 6%, transparent); }
.cn-mdrawer__group { interpolate-size: allow-keywords; }
.cn-mdrawer__group::details-content { block-size: 0; overflow-y: clip; transition: block-size var(--cn-dur-slow) var(--cn-ease-out), content-visibility var(--cn-dur-slow) allow-discrete; }
.cn-mdrawer__group[open]::details-content { block-size: auto; }

/* ---------- search overlay ---------- */
.cn-search { z-index: 1100; }
.cn-search__panel { position: absolute; inset-inline: 0; top: 0; max-height: min(88vh, 720px); overflow-y: auto; overscroll-behavior: contain; padding-block: 1rem 1.75rem; border-bottom: 1px solid var(--color-border); background: var(--color-background); opacity: 0; transform: translateY(-12px); transition: opacity var(--cn-dur-exit) var(--cn-ease-in), transform var(--cn-dur-exit) var(--cn-ease-in); }
.cn-search.is-open .cn-search__panel { opacity: 1; transform: none; transition: opacity var(--cn-dur-base) var(--cn-ease-out), transform var(--cn-dur-drawer) var(--cn-ease-out); }
.cn-search__form { display: flex; align-items: center; gap: 0.6rem; padding-inline-start: 1rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); transition: border-color var(--cn-dur-fast) var(--cn-ease), box-shadow var(--cn-dur-base) var(--cn-ease); }
.cn-search__form:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.cn-search__form > .cn-icon { flex: none; color: var(--color-text-muted); }
.cn-search__input { flex: 1; min-width: 0; height: 52px; border: 0; background: none; color: var(--color-heading); font: 400 1.0625rem/1.3 var(--cn-font-body); }
.cn-search__input:focus { outline: none; }
.cn-search__input::-webkit-search-cancel-button { display: none; }
.cn-search__label { margin: 1.25rem 0 0.6rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.cn-search__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.cn-search__quick[hidden] { display: none; }
.cn-search__results:empty { display: none; }
.cn-search__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; }
.cn-search__products { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.25rem 1rem; }
.cn-sresult { display: flex; align-items: center; gap: 0.85rem; padding: 0.5rem; border-radius: var(--cn-radius, 8px); transition: background-color var(--cn-dur-fast) var(--cn-ease); }
.cn-sresult:hover, .cn-sresult:focus-visible { background: var(--color-surface); }
.cn-sresult__img { flex: none; width: 56px; height: 56px; border-radius: calc(var(--cn-radius, 8px) * 0.75); background: var(--color-surface); object-fit: cover; }
.cn-sresult__name { display: block; font-weight: 500; color: var(--color-heading); line-height: 1.35; }
.cn-sresult__price { display: flex; gap: 0.4rem; font-size: 0.875rem; color: var(--color-text-muted); }
.cn-sresult__price s { opacity: 0.8; }
.cn-sresult__price .is-sale { color: var(--cn-sale); }
.cn-search__cols { display: grid; gap: 0.25rem; }
.cn-search__all { margin-top: 1rem; }
.cn-search__empty, .cn-search__loading { padding-block: 1.25rem 0.25rem; color: var(--color-text-muted); }
@media (max-width: 749px) {
  .cn-search__panel { max-height: 100dvh; height: 100dvh; padding-block: 0.75rem 1.5rem; border-bottom: 0; }
  .cn-search__grid, .cn-search__products { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- cart drawer ---------- */
.cn-drawer { z-index: 1200; }
.cn-drawer__panel { inset-inline-end: 0; transform: translateX(100%); width: min(440px, 100vw); }
[dir="rtl"] .cn-drawer__panel { transform: translateX(-100%); }
.cn-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; padding-inline-start: 1.25rem; border-bottom: 1px solid var(--color-border); }
.cn-drawer__title { font: var(--cn-heading-weight, 700) 1.125rem/1.2 var(--cn-font-heading); color: var(--color-heading); }
.cn-drawer__count { font: 500 0.9375rem var(--cn-font-body); color: var(--color-text-muted); }
.cn-drawer__ship { display: grid; gap: 0.5rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--color-border); font-size: 0.875rem; }
.cn-drawer__ship[hidden], .cn-drawer__note[hidden] { display: none; }
.cn-drawer__ship.is-done .cn-progress > span { background: var(--cn-success); }
.cn-drawer__note { display: flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.25rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); font-size: 0.875rem; color: var(--color-text); }
.cn-drawer__note .cn-icon { flex: none; color: var(--color-primary); }
.cn-drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.cn-drawer__lines { padding-inline: 1.25rem; }
.cn-dline { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 1rem; padding-block: 1rem; border-bottom: 1px solid var(--color-border); transition: opacity var(--cn-dur-fast) var(--cn-ease); }
.cn-dline:last-child { border-bottom: 0; }
.cn-dline.is-pending { opacity: 0.55; }
.cn-dline__media { display: block; width: 80px; aspect-ratio: 4 / 5; border-radius: calc(var(--cn-radius, 8px) * 0.75); overflow: hidden; background: var(--color-surface); }
.cn-dline__img { width: 100%; height: 100%; object-fit: cover; }
.cn-dline__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; }
.cn-dline__name { font-weight: 600; font-size: 0.9375rem; line-height: 1.35; color: var(--color-heading); }
.cn-dline__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-dline__price { flex: none; font-weight: 600; font-size: 0.9375rem; }
.cn-dline__variant { margin-top: 0.15rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-dline__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.7rem; }
.cn-dline__row .cn-qty button { width: 32px; height: 34px; }
.cn-dline__row .cn-qty input { width: 34px; height: 34px; font-size: 0.875rem; }
.cn-dline__remove { border: 0; background: none; padding: 0.25rem; font-size: 0.8125rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cn-dline__remove:hover { color: var(--cn-error); }
.cn-drawer__empty { display: grid; justify-items: center; gap: 1rem; padding: 3.5rem 1.5rem; text-align: center; }
.cn-drawer__empty[hidden] { display: none; }
.cn-drawer__empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; background: var(--color-surface); color: var(--color-text-muted); }
.cn-drawer__empty-title { font: var(--cn-heading-weight, 700) 1.125rem/1.3 var(--cn-font-heading); color: var(--color-heading); }
.cn-drawer__recs { margin-top: 0.5rem; padding: 1.1rem 1.25rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cn-drawer__recs[hidden] { display: none; }
.cn-drawer__recs-title { margin-bottom: 0.75rem; font-weight: 600; color: var(--color-heading); }
.cn-drawer__recs-list { display: grid; gap: 0.6rem; }
.cn-drec { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.5rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); }
.cn-drec__img { width: 56px; height: 56px; border-radius: calc(var(--cn-radius, 8px) * 0.75); object-fit: cover; background: var(--color-surface); }
.cn-drec__name { display: block; font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--color-heading); }
.cn-drec__price { font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-drawer__foot { display: grid; gap: 0.7rem; padding: 1rem 1.25rem 1.25rem; border-top: 1px solid var(--color-border); background: var(--color-background); }
.cn-drawer__foot[hidden] { display: none; }
.cn-drawer__discounts { display: grid; gap: 0.3rem; font-size: 0.875rem; color: var(--cn-success); }
.cn-drawer__discounts[hidden] { display: none; }
.cn-drawer__discount { display: flex; justify-content: space-between; gap: 1rem; }
.cn-drawer__total { display: flex; justify-content: space-between; gap: 1rem; font-size: 1.0625rem; font-weight: 700; color: var(--color-heading); }
.cn-drawer__hint { margin-top: -0.35rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-drawer__notebox > summary { display: flex; align-items: center; justify-content: space-between; padding-block: 0.25rem; font-size: 0.875rem; font-weight: 600; cursor: pointer; list-style: none; }
.cn-drawer__notebox > summary::-webkit-details-marker { display: none; }
.cn-drawer__notebox[open] > summary .cn-icon { transform: rotate(180deg); }
.cn-drawer__notebox textarea { margin-top: 0.5rem; min-height: 72px; }

/* ---------- footer ---------- */
.cn-footer { padding-block: clamp(2.5rem, 6vw, 4rem) 0; font-size: 0.9375rem; border-top: 1px solid var(--color-border); }
.cn-footer__grid { display: grid; grid-template-columns: repeat(var(--cn-footer-cols, 4), minmax(0, 1fr)); gap: 2rem clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.cn-footer__heading { margin-bottom: 0.9rem; font-weight: 600; color: var(--color-heading); }
.cn-footer__links { display: grid; gap: 0.55rem; }
.cn-footer__links a, .cn-footer__legal a { color: var(--color-text-muted); transition: color var(--cn-dur-fast) var(--cn-ease); }
.cn-footer__links a:hover, .cn-footer__legal a:hover { color: var(--color-heading); text-decoration: underline; text-underline-offset: 3px; }
.cn-footer__logo { display: inline-block; margin-bottom: 0.9rem; font: var(--cn-heading-weight, 700) 1.375rem/1.2 var(--cn-font-heading); color: var(--color-heading); }
.cn-footer__logo img { width: var(--cn-logo-w, 120px); max-width: 100%; height: auto; }
.cn-footer__text { color: var(--color-text-muted); max-width: 42ch; }
.cn-footer__form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; max-width: 420px; }
/* A narrow column puts the button under the field instead of squeezing the field. */
.cn-footer__form .cn-input { flex: 1 1 180px; min-width: 0; }
.cn-footer__form .cn-btn { flex: none; }
.cn-footer__social { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cn-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-heading); transition: background-color var(--cn-dur-fast) var(--cn-ease), border-color var(--cn-dur-fast) var(--cn-ease); }
.cn-footer__social-link:hover { background: var(--color-background); border-color: var(--color-heading); }
.cn-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 1.25rem; border-top: 1px solid var(--color-border); font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-footer__legal { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; margin-inline-end: auto; }
.cn-footer__copy { margin-inline-end: 1rem; }
.cn-footer__payments { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cn-footer__payments li { display: inline-flex; }
@media (max-width: 989px) { .cn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 749px) {
  .cn-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .cn-footer__col--logo, .cn-footer__col--text, .cn-footer__col--newsletter { grid-column: 1 / -1; }
  .cn-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 374px) { .cn-footer__form { flex-direction: column; } }

/* ---------- reveal ----------
   Sections fade (and, with Standard motion, rise a little) as they enter. Grids and [data-cn-stagger] lists arrive
   as one group: the container fades, its first six children rise in turn. Once played, never replayed. */
@keyframes cn-rise { from { opacity: 0; transform: translateY(var(--cn-rise)); } }
@media (prefers-reduced-motion: no-preference) {
  .theme-root .cn-reveal { opacity: 0; transform: translateY(var(--cn-rise)); transition: opacity var(--cn-dur-reveal) var(--cn-ease), transform var(--cn-dur-reveal) var(--cn-ease-out); }
  .theme-root .cn-reveal.is-in { opacity: 1; transform: none; }
  .theme-root .cn-reveal.is-in:not(.is-settled) [data-cn-stagger] > *,
  .theme-root .cn-reveal.is-in:not(.is-settled)[data-cn-stagger] > * { animation: cn-rise var(--cn-dur-reveal) var(--cn-ease-out) backwards; animation-delay: calc(var(--cn-i, 0) * var(--cn-stagger)); }
  .theme-root .cn-reveal.is-in.is-settled { transition: none; }
}
[data-cn-stagger] > :nth-child(2) { --cn-i: 1; }
[data-cn-stagger] > :nth-child(3) { --cn-i: 2; }
[data-cn-stagger] > :nth-child(4) { --cn-i: 3; }
[data-cn-stagger] > :nth-child(5) { --cn-i: 4; }
[data-cn-stagger] > :nth-child(n+6) { --cn-i: 5; }

/* ---------- quick add window (products with options) ---------- */
.cn-qa { z-index: 1250; display: grid; place-items: center; padding: 1rem; }
.cn-qa__panel { position: relative; width: min(760px, 100%); max-height: calc(100vh - 2rem); overflow: auto; background: var(--color-background); color: var(--color-text); border-radius: var(--cn-radius, 8px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16); opacity: 0; transform: translateY(12px); transition: opacity var(--cn-dur-exit) var(--cn-ease-in), transform var(--cn-dur-exit) var(--cn-ease-in); }
.cn-qa.is-open .cn-qa__panel { opacity: 1; transform: none; transition: opacity var(--cn-dur-drawer) var(--cn-ease-out), transform var(--cn-dur-drawer) var(--cn-ease-out); }
.cn-qa__close { position: absolute; inset-block-start: 0.5rem; inset-inline-end: 0.5rem; z-index: 1; }
.cn-qa__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.5rem; }
.cn-qa__media { aspect-ratio: 1; background: var(--color-surface); border-radius: calc(var(--cn-radius, 8px) * 0.75); overflow: hidden; }
.cn-qa__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cn-qa__info { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; padding-inline-end: 1.5rem; }
.theme-root .cn-qa__title, .cn-qa__title { font-family: var(--cn-font-heading); font-weight: var(--cn-heading-weight, 600); font-size: 1.25rem; line-height: 1.3; color: var(--color-heading); text-decoration: none; }
.cn-qa__price { margin: 0; font-weight: 600; }
.cn-qa__option { border: 0; margin: 0; padding: 0; }
.cn-qa__legend { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.4rem; padding: 0; }
.cn-qa__values { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cn-qa__values .cn-chip[aria-pressed="true"] { background: var(--color-heading); color: var(--color-background); border-color: var(--color-heading); }
.cn-qa__values .cn-chip.is-unavailable { opacity: 0.45; text-decoration: line-through; }
.cn-qa__more { font-size: 0.875rem; align-self: flex-start; }
@media (max-width: 640px) {
  .cn-qa { place-items: end stretch; padding: 0; }
  .cn-qa__panel { width: 100%; border-radius: calc(var(--cn-radius, 8px) * 1.5) calc(var(--cn-radius, 8px) * 1.5) 0 0; transform: translateY(100%); max-height: 88vh; }
  .cn-qa__body { grid-template-columns: 96px minmax(0, 1fr); gap: 1rem; padding: 1.25rem; }
  .cn-qa__info { padding-inline-end: 0; }
}

/* soooks-theme:corner:169557:f0936d16eeb03eeb */
/* Corner — homepage & content sections, product card, price, image, section heading.
   Colours come from the section's scheme (var(--color-*)); sizes from the theme tokens in snippets/theme-vars.liquid
   (var(--cn-*), each with the brief's default as fallback). Logical properties only: right-to-left just works.
   Breakpoints: mobile < 768px · tablet 768–1023px · desktop ≥ 1024px. */

/* ---------- shell ---------- */
.cn-container { box-sizing: border-box; width: 100%; max-width: var(--cn-width, 1280px); margin-inline: auto; padding-inline: var(--cn-gutter-x); --cn-gutter-x: var(--cn-gutter, clamp(1rem, 4vw, 2rem)); }
/* Section spacing: half the theme's section spacing on each side, so two sections on the same colour sit one
   "section spacing" apart; a section on a colour of its own gets more room inside. Top/bottom spacing settings
   scale it (none · small · default · large). */
.cn-sec { --cn-sp: var(--cn-space, 64px); --cn-sk: 0.5; padding-block: calc(var(--cn-sp) * var(--cn-sk) * var(--cn-pt, 1)) calc(var(--cn-sp) * var(--cn-sk) * var(--cn-pb, 1)); }
.cn-sec:not(.scheme-1) { --cn-sk: 0.875; }
.cn-sec.cn-promo-sec { --cn-sk: 0.5; }
.cn-pt-none { --cn-pt: 0; } .cn-pt-small { --cn-pt: 0.5; } .cn-pt-large { --cn-pt: 2; }
.cn-pb-none { --cn-pb: 0; } .cn-pb-small { --cn-pb: 0.5; } .cn-pb-large { --cn-pb: 2; }

/* Text alignment helpers (the section's alignment setting); --cn-justify lines up buttons and flex rows. */
.cn-ta-start { text-align: start; --cn-justify: flex-start; --cn-items: flex-start; }
.cn-ta-center { text-align: center; --cn-justify: center; --cn-items: center; }
.cn-ta-end { text-align: end; --cn-justify: flex-end; --cn-items: flex-end; }
@media (max-width: 767px) {
  .cn-mta-start { text-align: start; --cn-justify: flex-start; --cn-items: flex-start; }
  .cn-mta-center { text-align: center; --cn-justify: center; --cn-items: center; }
  .cn-mta-end { text-align: end; --cn-justify: flex-end; --cn-items: flex-end; }
}

/* Shared type */
:is(.cn-head__title, .cn-hero__title, .cn-ss__title, .cn-iwt__title, .cn-promo__title, .cn-news__title, .cn-rt__title, .cn-contact__title) {
  margin: 0; color: var(--color-heading); font-weight: var(--cn-heading-weight, 700);
  line-height: 1.2; font-size: calc(clamp(1.5rem, 3vw, 2rem) * var(--cn-scale, 1)); text-wrap: balance;
}
:is(.cn-head__eyebrow, .cn-hero__eyebrow, .cn-ss__eyebrow, .cn-iwt__eyebrow, .cn-promo__eyebrow, .cn-rt__eyebrow, .cn-contact__eyebrow, .cn-fc__eyebrow) {
  margin: 0; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-primary);
}
.scheme-4 :is(.cn-head__eyebrow, .cn-hero__eyebrow, .cn-iwt__eyebrow, .cn-promo__eyebrow, .cn-rt__eyebrow, .cn-fc__eyebrow, .cn-contact__eyebrow),
.scheme-3 :is(.cn-head__eyebrow, .cn-hero__eyebrow, .cn-iwt__eyebrow, .cn-promo__eyebrow, .cn-rt__eyebrow, .cn-fc__eyebrow, .cn-contact__eyebrow) { color: var(--color-accent); }
.cn-rte > :first-child { margin-block-start: 0; }
.cn-rte > :last-child { margin-block-end: 0; }
.cn-rte p { margin-block: 0 0.75em; }
.cn-rte a { text-decoration: underline; text-underline-offset: 3px; }
.cn-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: var(--cn-justify, flex-start); margin-block-start: 1.5rem; }
.cn-arrow { display: inline-flex; }
.cn-arrow > svg { transition: transform var(--cn-dur-base, 240ms) var(--cn-ease-out, ease-out); }
[dir="rtl"] .cn-arrow > svg { transform: scaleX(-1); }
/* Chevrons for arrows: drawn with borders, flipped for right-to-left. */
.cn-chev { display: block; width: 9px; height: 9px; border-block-start: 2px solid currentColor; border-inline-end: 2px solid currentColor; }
.cn-chev--next { transform: translateX(-2px) rotate(45deg); }
.cn-chev--prev { transform: translateX(2px) rotate(-135deg); }
[dir="rtl"] .cn-chev--next { transform: translateX(2px) rotate(-45deg); }
[dir="rtl"] .cn-chev--prev { transform: translateX(-2px) rotate(135deg); }

/* Fallbacks with zero specificity: the theme's own .cn-btn / .cn-input (corner-base.css) always win. */
:where(.cn-btn) { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: var(--cn-btn-pad-y, 0.8rem) var(--cn-btn-pad-x, 1.5rem); border: 1px solid var(--color-primary); border-radius: var(--cn-btn-radius, 8px); background: var(--color-primary); color: var(--color-on-primary); font-family: inherit; font-size: var(--cn-btn-font, 0.9375rem); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; }
:where(.cn-sec, .cn-news, .cn-contact) :where(.cn-input) { box-sizing: border-box; width: 100%; min-height: 44px; padding: 0.7rem 0.9rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); color: var(--color-text); font: inherit; }
:where(.cn-contact) :where(.cn-field) { display: grid; gap: 0.375rem; }
:where(.cn-contact) :where(.cn-field label) { font-size: 0.875rem; font-weight: 600; color: var(--color-heading); }

/* ---------- section heading ---------- */
.cn-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem; margin-block-end: clamp(1.5rem, 3vw, 2.25rem); }
.cn-head__text { display: grid; gap: 0.5rem; max-width: 46rem; }
.cn-head__desc { color: var(--color-text-muted); }
.cn-head__desc > p { margin: 0; }
.cn-head--center { flex-direction: column; align-items: center; text-align: center; }
.cn-head--center .cn-head__text { justify-items: center; }
.cn-head--end { flex-direction: row-reverse; text-align: end; }
.cn-head__link { display: inline-flex; align-items: center; gap: 0.375rem; font-weight: 600; font-size: 0.9375rem; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; white-space: nowrap; }
.cn-head__link:hover .cn-arrow > svg { transform: translateX(3px); }
[dir="rtl"] .cn-head__link:hover .cn-arrow > svg { transform: scaleX(-1) translateX(3px); }

/* ---------- image box (snippets/image) ---------- */
.cn-media { position: relative; display: block; overflow: hidden; background: var(--color-surface); border-radius: var(--cn-radius, 8px); }
.cn-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--cn-focal, center); }
.cn-media picture { display: contents; }
.cn-media--portrait { aspect-ratio: 4 / 5; }
.cn-media--square { aspect-ratio: 1 / 1; }
.cn-media--landscape { aspect-ratio: 4 / 3; }
.cn-media--wide { aspect-ratio: 16 / 9; }
.cn-media--natural img { height: auto; }
.cn-media--fill { position: absolute; inset: 0; border-radius: 0; }
.cn-media--contain img { object-fit: contain; }

/* Ratio boxes for cards (product, collection) */
.cn-ratio { position: relative; display: block; overflow: hidden; background: var(--color-surface); border-radius: var(--cn-card-radius, var(--cn-radius, 8px)); }
.cn-ratio--portrait { aspect-ratio: 4 / 5; }
.cn-ratio--square { aspect-ratio: 1 / 1; }
.cn-ratio--landscape { aspect-ratio: 4 / 3; }
.cn-ratio--theme { aspect-ratio: var(--cn-card-ratio, 4 / 5); }
.cn-ratio > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cn-ratio--natural > img:first-child { position: static; height: auto; }
.cn-fit--contain > img { object-fit: contain; }

/* ---------- price ---------- */
.cn-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.5rem; font-weight: 600; color: var(--color-heading); font-variant-numeric: tabular-nums; }
.cn-price--sm { font-size: 0.875rem; }
.cn-price--lg { font-size: 1.25rem; }
.cn-price__label { font-weight: 400; font-size: 0.875em; color: var(--color-text-muted); }
.cn-price--sale .cn-price__amount { color: var(--cn-sale, #d33a2c); }
.cn-price__compare { font-weight: 400; font-size: 0.875em; color: var(--color-text-muted); }

/* ---------- stars ---------- */
.cn-stars { --cn-star: 14px; display: inline-block; flex: none; width: calc(var(--cn-star) * 5); height: var(--cn-star); vertical-align: -2px;
  background: linear-gradient(90deg, var(--cn-star-on, #f5b301) var(--cn-rating, 0%), var(--color-border) var(--cn-rating, 0%));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.7.7-5 4.6 1.4 6.6L12 17.2l-6 3.4 1.4-6.6-5-4.6 6.7-.7z'/%3E%3C/svg%3E") 0 0 / var(--cn-star) var(--cn-star) repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.7.7-5 4.6 1.4 6.6L12 17.2l-6 3.4 1.4-6.6-5-4.6 6.7-.7z'/%3E%3C/svg%3E") 0 0 / var(--cn-star) var(--cn-star) repeat-x; }
[dir="rtl"] .cn-stars { transform: scaleX(-1); }

/* ---------- product card (snippets/product-card) ---------- */
.cn-pcard { position: relative; display: flex; flex-direction: column; gap: 0.75rem; height: 100%; padding: var(--cn-card-pad, 0px); border: var(--cn-card-border-width, 0px) solid var(--color-border); border-radius: var(--cn-card-radius, 8px); box-shadow: var(--cn-card-shadow, none); background: transparent; text-align: start; --cn-items: flex-start; }
.cn-pcard--center { text-align: center; --cn-items: center; }
.cn-pcard--end { text-align: end; --cn-items: flex-end; }
.cn-pcard__media { flex: none; }
.cn-pcard__img { transition: transform var(--cn-dur-slow, 360ms) var(--cn-ease-out, ease-out), opacity var(--cn-dur-base, 240ms) var(--cn-ease, ease); }
.cn-pcard__img--alt { opacity: 0; }
.cn-pcard__badges { position: absolute; inset-block-start: 0.625rem; inset-inline-start: 0.625rem; z-index: 1; display: flex; flex-wrap: wrap; gap: 0.375rem; }
.cn-pcard__info { display: flex; flex-direction: column; align-items: var(--cn-items); gap: 0.25rem; min-width: 0; }
.cn-pcard__vendor { margin: 0; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.cn-pcard__title { margin: 0; color: var(--color-heading); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-pcard__title a { color: inherit; text-decoration: none; }
.cn-pcard__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-pcard__title a::after { content: ''; position: absolute; inset: 0; z-index: 0; }
/* Theme editor: no stretched link, so every card part (image, price, rating…) can be clicked and selected on its own. */
.theme-root[data-design-mode="true"] .cn-pcard__title a::after { content: none; }
.cn-pcard__rating { margin: 0; display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-pcard__price { font-size: 0.9375rem; }
.cn-swatches { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: var(--cn-items); gap: 0.375rem; margin-block-start: 0.25rem; }
.cn-swatch { box-sizing: border-box; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--color-border); background: var(--cn-swatch, var(--color-surface)); box-shadow: inset 0 0 0 2px var(--color-background); cursor: pointer; transition: border-color var(--cn-dur-fast, 150ms); }
.cn-swatch:hover, .cn-swatch.is-active { border-color: var(--color-heading); }
.cn-swatch--none { background: linear-gradient(135deg, var(--color-surface) 46%, var(--color-border) 46%, var(--color-border) 54%, var(--color-surface) 54%); }
.cn-swatches__more { font-size: 0.75rem; color: var(--color-text-muted); text-decoration: none; }
.cn-pcard__add { position: relative; z-index: 1; margin-block-start: auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 40px; padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--cn-btn-radius, var(--cn-radius, 8px)); background: var(--color-background); color: var(--color-heading); font: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.2; cursor: pointer; transition: background-color var(--cn-dur-fast, 150ms), border-color var(--cn-dur-fast, 150ms), color var(--cn-dur-fast, 150ms); }
.cn-pcard__add:hover { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-primary); }
.cn-pcard__add[disabled] { opacity: 0.6; pointer-events: none; }
@media (max-width: 479px) { .cn-pcard__add { font-size: 0.8125rem; padding-inline: 0.5rem; } }
.cn-pcard__missing { position: absolute; inset: 0; display: grid; place-items: center; padding: 1rem; text-align: center; font-size: 0.8125rem; color: var(--color-text-muted); border: 1px dashed var(--color-border); border-radius: inherit; }
@media (hover: hover) {
  .cn-pcard--has-alt:hover .cn-pcard__img--alt { opacity: 1; }
}

/* ---------- product grid + generic sliding rows ---------- */
.cn-grid { display: grid; gap: var(--cn-grid-gap, var(--cn-gap, 20px)); grid-template-columns: repeat(var(--cn-cols-m, 2), minmax(0, 1fr)); }
.cn-grid__item { min-width: 0; }
@media (max-width: 767px) { .cn-grid { gap: min(var(--cn-grid-gap, 20px), 16px); } }
@media (min-width: 768px) { .cn-grid { grid-template-columns: repeat(var(--cn-cols-t, 3), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-grid { grid-template-columns: repeat(var(--cn-cols-d, 4), minmax(0, 1fr)); } }

/* A row that scrolls sideways (snap, edge to edge on phones): --cn-pv items per view.
   Prefixed with .cn-container so these win over each component's own grid rules further down. */
@media (max-width: 767px) {
  .cn-container .cn-grid--slider_mobile, .cn-container .cn-grid--slider_tablet, .cn-container .cn-clist--mscroll, .cn-container .cn-fc--m-slider, .cn-container .cn-logos--scroll-mobile, .cn-container .cn-logos--scroll-always, .cn-container .cn-tst--slider {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cn-pv) - 1) * var(--cn-row-gap)) / var(--cn-pv)); gap: var(--cn-row-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--cn-gutter-x) * -1); padding-inline: var(--cn-gutter-x); scroll-padding-inline: var(--cn-gutter-x);
  }
  .cn-container .cn-grid--slider_mobile, .cn-container .cn-grid--slider_tablet { --cn-pv: calc(var(--cn-cols-m, 2) + 0.2); --cn-row-gap: min(var(--cn-grid-gap, 20px), 16px); }
  .cn-container .cn-clist--mscroll { --cn-pv: calc(var(--cn-cols-m, 2) + 0.3); --cn-row-gap: min(var(--cn-grid-gap, 20px), 16px); }
  .cn-container .cn-fc--m-slider { --cn-pv: 1.2; --cn-row-gap: 16px; }
  .cn-container .cn-logos--scroll-mobile, .cn-container .cn-logos--scroll-always { --cn-pv: calc(var(--cn-cols-m, 3) + 0.4); --cn-row-gap: var(--cn-grid-gap, 24px); }
  .cn-container .cn-tst--slider { --cn-pv: 1.1; --cn-row-gap: 16px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .cn-container .cn-grid--slider_tablet, .cn-container .cn-tst--slider, .cn-container .cn-logos--scroll-always {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cn-pv) - 1) * var(--cn-row-gap)) / var(--cn-pv)); gap: var(--cn-row-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(var(--cn-gutter-x) * -1); padding-inline: var(--cn-gutter-x); scroll-padding-inline: var(--cn-gutter-x);
  }
  .cn-container .cn-grid--slider_tablet { --cn-pv: calc(var(--cn-cols-t, 3) + 0.25); --cn-row-gap: var(--cn-grid-gap, 20px); }
  .cn-container .cn-tst--slider { --cn-pv: var(--cn-cols-t, 2); --cn-row-gap: var(--cn-gap, 20px); }
  .cn-container .cn-logos--scroll-always { --cn-pv: var(--cn-cols-t, 4); --cn-row-gap: var(--cn-grid-gap, 24px); }
}
@media (min-width: 1024px) {
  .cn-container .cn-tst--slider, .cn-container .cn-logos--scroll-always {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--cn-pv) - 1) * var(--cn-row-gap)) / var(--cn-pv)); gap: var(--cn-row-gap);
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .cn-container .cn-tst--slider { --cn-pv: var(--cn-cols-d, 3); --cn-row-gap: var(--cn-gap, 20px); }
  .cn-container .cn-logos--scroll-always { --cn-pv: var(--cn-cols-d, 5); --cn-row-gap: var(--cn-grid-gap, 24px); }
}
:is(.cn-grid, .cn-clist, .cn-fc, .cn-logos, .cn-tst)::-webkit-scrollbar { display: none; }
:is(.cn-grid, .cn-clist, .cn-fc, .cn-logos, .cn-tst) > * { scroll-snap-align: start; }

/* Slider controls (testimonials) */
.cn-slider-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-block-start: 1.5rem; }
[data-cn-slider]:not([data-scrollable]) .cn-slider-nav { display: none; }
.cn-slider-nav__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-background); color: var(--color-heading); cursor: pointer; transition: border-color var(--cn-dur-fast, 150ms), opacity var(--cn-dur-fast, 150ms); }
.cn-slider-nav__btn:hover { border-color: var(--color-heading); }
.cn-slider-nav__btn[disabled] { opacity: 0.35; cursor: default; }
.cn-slider-nav__dots { display: flex; gap: 0.25rem; }
.cn-slider-nav__dots button, .cn-ss__dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.cn-slider-nav__dots button::before { content: ''; position: absolute; inset: 8px; border-radius: 50%; background: color-mix(in srgb, var(--color-heading) 22%, transparent); transition: background-color var(--cn-dur-fast, 150ms); }
.cn-slider-nav__dots button.is-active::before { background: var(--color-heading); }

/* ---------- hero ---------- */
.cn-hero { --cn-hero-h: 560px; --cn-hero-mh: 400px; position: relative; display: grid; overflow: hidden; }
.cn-hero--h-small { --cn-hero-h: 400px; } .cn-hero--h-large { --cn-hero-h: 720px; } .cn-hero--h-full { --cn-hero-h: calc(100svh - var(--cn-header-h, 0px)); } .cn-hero--h-adapt { --cn-hero-h: 0px; }
.cn-hero--mh-small { --cn-hero-mh: 280px; } .cn-hero--mh-large { --cn-hero-mh: 520px; } .cn-hero--mh-full { --cn-hero-mh: calc(100svh - var(--cn-header-h, 0px)); } .cn-hero--mh-adapt { --cn-hero-mh: 0px; }
.cn-hero__media { position: relative; grid-area: 1 / 1; min-height: var(--cn-hero-h); }
.cn-hero__media .cn-media { border-radius: 0; }
.cn-hero--overlay .cn-hero__media::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--cn-overlay, 0.3); pointer-events: none; }
.cn-hero__inner { position: relative; z-index: 1; grid-area: 1 / 1; display: flex; padding-block: clamp(2rem, 6vw, 4.5rem); }
.cn-hero--v-top .cn-hero__inner { align-items: flex-start; } .cn-hero--v-middle .cn-hero__inner { align-items: center; } .cn-hero--v-bottom .cn-hero__inner { align-items: flex-end; }
.cn-hero--x-start .cn-hero__inner { justify-content: flex-start; } .cn-hero--x-center .cn-hero__inner { justify-content: center; } .cn-hero--x-end .cn-hero__inner { justify-content: flex-end; }
.cn-hero__content { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: var(--cn-hero-w, 600px); }
.cn-hero--w-narrow { --cn-hero-w: 440px; } .cn-hero--w-wide { --cn-hero-w: 800px; }
.cn-hero__content .cn-actions { margin-block-start: 0.75rem; }
.cn-hero__text { font-size: 1.0625rem; color: var(--color-text); }
.cn-hero__text > p { margin: 0; }
.cn-hero--panel .cn-hero__content { box-sizing: border-box; padding: clamp(1.5rem, 3.5vw, 2.75rem); border-radius: var(--cn-radius, 8px); background: var(--color-background); color: var(--color-text); }
.cn-hero--over.cn-hero--overlay .cn-hero__content { color: #fff; --color-heading: #fff; --color-text: #fff; --color-text-muted: rgba(255, 255, 255, 0.85); --color-primary: #fff; --color-on-primary: #16181d; --color-border: rgba(255, 255, 255, 0.6); --color-accent: #fff; }
/* Split: picture and text side by side (stacked on phones). */
.cn-hero--split { grid-template-columns: minmax(0, 1fr); }
.cn-hero--split .cn-hero__media, .cn-hero--split .cn-hero__inner { grid-area: auto; }
.cn-hero--split .cn-hero__inner { max-width: none; margin: 0; padding: clamp(2rem, 6vw, 5rem) var(--cn-gutter-x); }
@media (min-width: 768px) {
  .cn-hero--split { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: var(--cn-hero-h); }
  .cn-hero--split.cn-hero--x-end .cn-hero__media { order: 2; }
}
@media (max-width: 767px) {
  .cn-hero__media { min-height: var(--cn-hero-mh); }
  /* Panel layouts: the picture, then the text on the section's colour. */
  .cn-hero--panel { grid-template-columns: minmax(0, 1fr); }
  .cn-hero--panel .cn-hero__media, .cn-hero--panel .cn-hero__inner { grid-area: auto; }
  .cn-hero--panel .cn-hero__inner { padding-block: 0; }
  .cn-hero--panel .cn-hero__content { max-width: none; padding: 1.5rem 0 2rem; background: none; }
  /* Desktop height "adapt" + a fixed mobile height (and the other way round): the picture still fills. */
  .cn-hero--h-adapt:not(.cn-hero--mh-adapt) .cn-hero__media .cn-media--natural { position: absolute; inset: 0; }
  .cn-hero--h-adapt:not(.cn-hero--mh-adapt) .cn-hero__media .cn-media--natural img { height: 100%; }
  .cn-hero--mh-adapt:not(.cn-hero--h-adapt) .cn-hero__media .cn-media--fill { position: relative; }
  .cn-hero--mh-adapt:not(.cn-hero--h-adapt) .cn-hero__media .cn-media--fill img { height: auto; }
  .cn-hero--over .cn-hero__inner { min-height: 0; }
}

/* ---------- slideshow ---------- */
.cn-ss-sec { --cn-ss-h: 560px; --cn-ss-mh: 400px; }
.cn-ss--h-small { --cn-ss-h: 400px; } .cn-ss--h-large { --cn-ss-h: 720px; } .cn-ss--h-full { --cn-ss-h: calc(100svh - var(--cn-header-h, 0px)); } .cn-ss--h-adapt { --cn-ss-h: 0px; }
.cn-ss--mh-small { --cn-ss-mh: 280px; } .cn-ss--mh-large { --cn-ss-mh: 520px; } .cn-ss--mh-full { --cn-ss-mh: calc(100svh - var(--cn-header-h, 0px)); } .cn-ss--mh-adapt { --cn-ss-mh: 0px; }
.cn-ss { position: relative; --cn-ss-dur: 600ms; }
.cn-ss__viewport { position: relative; overflow: hidden; }
.cn-ss__track { touch-action: pan-y; }
.cn-ss--slide .cn-ss__track { display: flex; transition: transform var(--cn-ss-dur) var(--cn-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
.cn-ss--slide .cn-ss__slide { flex: 0 0 100%; min-width: 0; }
.cn-ss--fade .cn-ss__track { display: grid; }
.cn-ss--fade .cn-ss__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity var(--cn-ss-dur) var(--cn-ease, ease), visibility 0s linear var(--cn-ss-dur); }
.cn-ss--fade .cn-ss__slide.is-active { opacity: 1; visibility: visible; transition: opacity var(--cn-ss-dur) var(--cn-ease, ease), visibility 0s; }
.cn-ss.is-dragging .cn-ss__track { transition: none; cursor: grabbing; }
.cn-ss__slide { position: relative; display: grid; min-height: var(--cn-ss-h); }
.cn-ss__media { position: relative; grid-area: 1 / 1; }
.cn-ss__media .cn-media { border-radius: 0; }
.cn-ss__media img { -webkit-user-drag: none; user-select: none; }
.cn-slide--overlay .cn-ss__media::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--cn-overlay, 0.35); pointer-events: none; }
.cn-ss__cover { position: absolute; inset: 0; z-index: 1; }
.cn-ss__inner { position: relative; z-index: 2; grid-area: 1 / 1; display: flex; padding-block: clamp(2.5rem, 7vw, 5.5rem); pointer-events: none; }
.cn-ss__inner :is(a, button, input) { pointer-events: auto; }
.cn-slide--v-top .cn-ss__inner { align-items: flex-start; } .cn-slide--v-middle .cn-ss__inner { align-items: center; } .cn-slide--v-bottom .cn-ss__inner { align-items: flex-end; }
.cn-slide--x-start .cn-ss__inner { justify-content: flex-start; } .cn-slide--x-center .cn-ss__inner { justify-content: center; } .cn-slide--x-end .cn-ss__inner { justify-content: flex-end; }
.cn-ss__content { display: flex; flex-direction: column; gap: 0.75rem; max-width: 640px; }
.cn-ss__content .cn-actions { margin-block-start: 0.75rem; }
.cn-ss__text { font-size: 1.0625rem; }
.cn-ss__text > p { margin: 0; }
.cn-slide--overlay .cn-ss__content { color: #fff; --color-heading: #fff; --color-text: #fff; --color-text-muted: rgba(255, 255, 255, 0.85); --color-primary: #fff; --color-on-primary: #16181d; --color-border: rgba(255, 255, 255, 0.6); --color-accent: #fff; }
.cn-ss__arrow { position: absolute; z-index: 3; inset-block-start: 50%; display: grid; place-items: center; width: 44px; height: 44px; margin-block-start: -22px; padding: 0; border: 1px solid var(--color-border); border-radius: 50%; background: var(--color-background); color: var(--color-heading); cursor: pointer; transition: opacity var(--cn-dur-fast, 150ms), border-color var(--cn-dur-fast, 150ms); }
.cn-ss__arrow:hover { border-color: var(--color-heading); }
.cn-ss__arrow[disabled] { opacity: 0.4; cursor: default; }
.cn-ss__arrow--prev { inset-inline-start: 1rem; }
.cn-ss__arrow--next { inset-inline-end: 1rem; }
.cn-ss__controls { position: absolute; z-index: 3; inset-inline: 0; inset-block-end: 0.75rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; pointer-events: none; }
.cn-ss__controls > *, .cn-ss__dots > * { pointer-events: auto; }
.cn-ss__dots { display: flex; gap: 0.125rem; }
.cn-ss__dot::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; border: 1.5px solid #fff; background: transparent; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); transition: background-color var(--cn-dur-fast, 150ms); }
.cn-ss__dot.is-active::before { background: #fff; }
.cn-ss__play { position: relative; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.5)); }
.cn-ss__play-icon { display: block; width: 8px; height: 10px; border-inline: 2.5px solid currentColor; }
.cn-ss.is-paused .cn-ss__play-icon { width: 0; height: 0; border-inline-end: 0; border-inline-start: 9px solid currentColor; border-block: 5.5px solid transparent; }
[dir="rtl"] .cn-ss.is-paused .cn-ss__play-icon { transform: scaleX(-1); border-inline-start: 0; border-inline-end: 9px solid currentColor; }
@media (min-width: 768px) {
  .cn-ss__inner { padding-inline: max(var(--cn-gutter-x), 4.5rem); }
}
@media (max-width: 767px) {
  .cn-ss__slide { min-height: var(--cn-ss-mh); }
  .cn-ss--m-noarrows .cn-ss__arrow { display: none; }
  .cn-ss__arrow { width: 36px; height: 36px; margin-block-start: -18px; }
  .cn-ss__arrow--prev { inset-inline-start: 0.5rem; } .cn-ss__arrow--next { inset-inline-end: 0.5rem; }
  .cn-ss-sec:not(.cn-ss--m-noarrows) .cn-ss__inner { padding-inline: 3.25rem; }
  .cn-ss--h-adapt:not(.cn-ss--mh-adapt) .cn-ss__media .cn-media--natural { position: absolute; inset: 0; }
  .cn-ss--h-adapt:not(.cn-ss--mh-adapt) .cn-ss__media .cn-media--natural img { height: 100%; }
  .cn-ss--mh-adapt:not(.cn-ss--h-adapt) .cn-ss__media .cn-media--fill { position: relative; }
  .cn-ss--mh-adapt:not(.cn-ss--h-adapt) .cn-ss__media .cn-media--fill img { height: auto; }
}
@media (min-width: 768px) {
  .cn-ss--h-adapt .cn-ss__slide { min-height: 0; }
}

/* ---------- collection list ---------- */
.cn-clist { display: grid; gap: var(--cn-grid-gap, var(--cn-gap, 20px)); grid-template-columns: repeat(var(--cn-cols-m, 2), minmax(0, 1fr)); }
@media (max-width: 767px) { .cn-clist { gap: min(var(--cn-grid-gap, 20px), 16px); } }
@media (min-width: 768px) { .cn-clist { grid-template-columns: repeat(var(--cn-cols-t, 3), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-clist { grid-template-columns: repeat(var(--cn-cols-d, 4), minmax(0, 1fr)); } }
.cn-ccard { position: relative; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; color: inherit; text-decoration: none; }
.cn-ccard__media { border-radius: var(--cn-card-radius, 8px); }
.cn-ccard__media > img { transition: transform var(--cn-dur-slow, 360ms) var(--cn-ease-out, ease-out); }
.cn-ccard__body { display: flex; flex-direction: column; align-items: var(--cn-items, flex-start); gap: 0.25rem; }
.cn-ccard__title { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--color-heading); }
.cn-ccard__count, .cn-ccard__desc { display: block; font-size: 0.875rem; color: var(--color-text-muted); }
.cn-ccard__btn { display: inline-flex; align-items: center; gap: 0.375rem; margin-block-start: 0.25rem; font-size: 0.875rem; font-weight: 600; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cn-ccard:hover .cn-ccard__title { text-decoration: underline; text-underline-offset: 3px; }
.cn-ccard:hover .cn-arrow > svg { transform: translateX(3px); }
[dir="rtl"] .cn-ccard:hover .cn-arrow > svg { transform: scaleX(-1) translateX(3px); }
/* Cards: the picture and the text in one bordered card. */
.cn-clist--cards .cn-ccard { gap: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--cn-card-radius, 8px); background: var(--color-background); }
.cn-clist--cards .cn-ccard__media { border-radius: 0; }
.cn-clist--cards .cn-ccard__body { padding: 1rem 1.125rem 1.125rem; }
/* Text on the picture. */
.cn-clist--text-overlay .cn-ccard { overflow: hidden; border-radius: var(--cn-card-radius, 8px); }
.cn-clist--text-overlay .cn-ccard__media::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--cn-overlay, 0.3); pointer-events: none; }
.cn-clist--text-overlay .cn-ccard__body { position: absolute; inset: 0; z-index: 1; justify-content: flex-end; padding: clamp(0.875rem, 2vw, 1.5rem); color: #fff; --color-heading: #fff; --color-text-muted: rgba(255, 255, 255, 0.85); }
.cn-clist--text-overlay .cn-ccard__title { font-size: 1.125rem; }
/* Featured: the first collection large, the others smaller beside it. */
@media (min-width: 768px) {
  .cn-clist--featured > :first-child { grid-column: span 2; grid-row: span 2; }
  .cn-clist--featured > :first-child .cn-ccard__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 240px; }
  .cn-clist--featured > :first-child .cn-ccard__title { font-size: 1.25rem; }
}
@media (max-width: 767px) {
  .cn-clist--featured:not(.cn-clist--mscroll) > :first-child { grid-column: 1 / -1; }
  .cn-clist--featured:not(.cn-clist--mscroll) > :first-child .cn-ccard__media { aspect-ratio: 4 / 3; }
}

/* ---------- image with text ---------- */
.cn-iwt { display: grid; gap: 1.5rem; align-items: center; --cn-iwt-img: 1fr; --cn-iwt-txt: 1fr; }
.cn-iwt--v-top { align-items: start; } .cn-iwt--v-bottom { align-items: end; }
.cn-iwt__content { display: flex; flex-direction: column; gap: 0.75rem; }
.cn-iwt__content .cn-actions { margin-block-start: 0.75rem; }
.cn-iwt__text { color: var(--color-text); }
.cn-iwt--panel .cn-iwt__content { padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--cn-radius, 8px); background: var(--color-surface); }
@media (min-width: 768px) {
  .cn-iwt { grid-template-columns: var(--cn-iwt-img) var(--cn-iwt-txt); gap: clamp(2rem, 5vw, 4.5rem); }
  .cn-iwt--w40 { --cn-iwt-img: 4fr; --cn-iwt-txt: 6fr; }
  .cn-iwt--w60 { --cn-iwt-img: 6fr; --cn-iwt-txt: 4fr; }
  .cn-iwt--img-end { grid-template-columns: var(--cn-iwt-txt) var(--cn-iwt-img); }
  .cn-iwt--img-end .cn-iwt__media { order: 2; }
  .cn-iwt--panel { gap: clamp(1.5rem, 3vw, 2.5rem); }
}
@media (max-width: 767px) {
  .cn-iwt--m-text_first .cn-iwt__media { order: 2; }
}

/* ---------- promo banner ---------- */
.cn-promo { position: relative; display: flex; align-items: center; justify-content: var(--cn-justify, center); box-sizing: border-box; overflow: hidden; min-height: var(--cn-promo-h, 0px); padding: clamp(2rem, 6vw, 4.5rem) clamp(1.25rem, 5vw, 4rem); border-radius: var(--cn-card-radius, 8px); }
.cn-promo--h-small { --cn-promo-h: 280px; } .cn-promo--h-medium { --cn-promo-h: 400px; } .cn-promo--h-large { --cn-promo-h: 520px; }
.cn-promo-sec--full .cn-promo { border-radius: 0; }
.cn-promo--custom { background-color: var(--cn-promo-bg); color: var(--cn-promo-ink); --color-heading: var(--cn-promo-ink); --color-text: var(--cn-promo-ink); --color-text-muted: var(--cn-promo-ink); --color-primary: var(--cn-promo-ink); --color-on-primary: var(--cn-promo-bg); --color-accent: var(--cn-promo-ink); --color-border: var(--cn-promo-ink); }
.cn-promo__media { position: absolute; inset: 0; }
.cn-promo--overlay .cn-promo__media::after { content: ''; position: absolute; inset: 0; background: #000; opacity: var(--cn-overlay, 0.4); pointer-events: none; }
.cn-promo--overlay .cn-promo__content { color: #fff; --color-heading: #fff; --color-text: #fff; --color-primary: #fff; --color-on-primary: #16181d; --color-border: rgba(255, 255, 255, 0.6); --color-accent: #fff; }
/* Outline buttons on a picture: the base hover fills with the page's light surface while the text stays white —
   unreadable. On pictures they fill white with dark text instead (the reverse of their resting look). */
.theme-root :is(.cn-hero--over.cn-hero--overlay .cn-hero__content, .cn-slide--overlay .cn-ss__content, .cn-promo--overlay .cn-promo__content) :is(.cn-btn--secondary, .cn-btn--soft):is(:hover, :focus-visible) { background: #fff; border-color: #fff; color: #16181d; }
.cn-promo__content { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: var(--cn-items, center); gap: 0.75rem; max-width: 680px; }
.cn-promo__content .cn-actions { margin-block-start: 0.75rem; }
.cn-promo__text > p { margin: 0; }
@media (max-width: 767px) {
  .cn-promo { min-height: var(--cn-promo-mh, 0px); }
  .cn-promo--mh-small { --cn-promo-mh: 220px; } .cn-promo--mh-medium { --cn-promo-mh: 320px; } .cn-promo--mh-large { --cn-promo-mh: 420px; }
}

/* ---------- featured content ---------- */
.cn-fc { display: grid; gap: var(--cn-gap, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cn-fc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-fc { grid-template-columns: repeat(var(--cn-cols-d, 3), minmax(0, 1fr)); } }
.cn-fc__item { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; }
.cn-fc__media { display: block; }
.cn-fc__body { display: flex; flex-direction: column; align-items: var(--cn-items, flex-start); gap: 0.5rem; flex: 1; }
.cn-fc__title { margin: 0; font-weight: var(--cn-heading-weight, 700); color: var(--color-heading); }
.cn-fc__title a { color: inherit; text-decoration: none; }
.cn-fc__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-fc__text { color: var(--color-text-muted); font-size: 0.9375rem; }
.cn-fc__link { display: inline-flex; align-items: center; gap: 0.375rem; margin-block-start: auto; padding-block-start: 0.25rem; font-weight: 600; font-size: 0.9375rem; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.cn-fc__link:hover .cn-arrow > svg { transform: translateX(3px); }
[dir="rtl"] .cn-fc__link:hover .cn-arrow > svg { transform: scaleX(-1) translateX(3px); }
.cn-fc--bordered .cn-fc__item, .cn-fc--filled .cn-fc__item { gap: 0; overflow: hidden; border-radius: var(--cn-card-radius, 8px); }
.cn-fc--bordered .cn-fc__item { border: 1px solid var(--color-border); }
.cn-fc--filled .cn-fc__item { background: var(--color-surface); }
.cn-fc--bordered .cn-media, .cn-fc--filled .cn-media { border-radius: 0; }
.cn-fc--bordered .cn-fc__body, .cn-fc--filled .cn-fc__body { padding: 1.125rem 1.25rem 1.25rem; }

/* ---------- logo list ---------- */
.cn-logos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cn-grid-gap, 24px); grid-template-columns: repeat(var(--cn-cols-m, 3), minmax(0, 1fr)); }
@media (min-width: 768px) { .cn-logos { grid-template-columns: repeat(var(--cn-cols-t, 4), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-logos { grid-template-columns: repeat(var(--cn-cols-d, 5), minmax(0, 1fr)); } }
.cn-logos__item { min-width: 0; }
.cn-logos__cell { box-sizing: border-box; display: flex; align-items: center; justify-content: var(--cn-logo-justify, center); height: calc(var(--cn-logo-h, 48px) + 1rem); color: inherit; }
.cn-logos--start { --cn-logo-justify: flex-start; } .cn-logos--end { --cn-logo-justify: flex-end; }
.cn-logos__cell img { display: block; width: auto; height: auto; max-width: 100%; max-height: var(--cn-logo-h, 48px); object-fit: contain; transition: filter var(--cn-dur-base, 240ms), opacity var(--cn-dur-base, 240ms); }
.cn-logos--boxed .cn-logos__cell { height: calc(var(--cn-logo-h, 48px) + 2.5rem); padding: 0.75rem 1rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); }
.cn-logos--gray .cn-logos__cell img { filter: grayscale(1); opacity: 0.7; }
.cn-logos--gray .cn-logos__cell:hover img, .cn-logos--gray a.cn-logos__cell:focus-visible img { filter: none; opacity: 1; }
.cn-logos__ph { display: block; box-sizing: border-box; width: 100%; max-width: 11rem; min-height: var(--cn-logo-h, 48px); padding: 0 0.5rem; border: 1px dashed var(--color-border); border-radius: calc(var(--cn-radius, 8px) * 0.75); font-weight: 700; font-size: 0.875rem; line-height: calc(var(--cn-logo-h, 48px) - 2px); text-align: center; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- testimonials ---------- */
.cn-tst { display: grid; gap: var(--cn-gap, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cn-tst--grid { grid-template-columns: repeat(var(--cn-cols-t, 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-tst--grid { grid-template-columns: repeat(var(--cn-cols-d, 3), minmax(0, 1fr)); } }
.cn-tst__card { box-sizing: border-box; display: flex; flex-direction: column; align-items: var(--cn-items, flex-start); gap: 1rem; height: 100%; margin: 0; padding: 1.5rem; border-radius: var(--cn-card-radius, 8px); min-width: 0; }
.cn-tst--bordered .cn-tst__card { border: 1px solid var(--color-border); }
.cn-tst--filled .cn-tst__card { background: var(--color-surface); }
.cn-tst--plain .cn-tst__card { padding: 0; }
.cn-tst__rating { margin: 0; line-height: 1; }
.cn-tst__rating .cn-stars { --cn-star: 16px; }
.cn-tst__quote { margin: 0; font-size: 1.0625rem; line-height: 1.6; color: var(--color-heading); }
.cn-tst__author { display: flex; align-items: center; gap: 0.75rem; margin-block-start: auto; }
.cn-tst__avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--color-surface); }
.cn-tst__who { display: flex; flex-direction: column; text-align: start; }
.cn-ta-center .cn-tst__who { text-align: center; }
.cn-tst__name { font-weight: 600; color: var(--color-heading); }
.cn-tst__detail { font-size: 0.875rem; color: var(--color-text-muted); }
.cn-tst__product { position: relative; display: flex; align-items: center; gap: 0.625rem; align-self: stretch; padding-block-start: 0.875rem; border-block-start: 1px solid var(--color-border); font-size: 0.875rem; font-weight: 500; color: var(--color-heading); text-decoration: none; }
.cn-ta-center .cn-tst__product { justify-content: center; }
.cn-tst__product img { width: 40px; height: 40px; flex: none; border-radius: calc(var(--cn-radius, 8px) * 0.75); object-fit: cover; background: var(--color-surface); }
.cn-tst__product:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- newsletter ---------- */
.cn-news { display: grid; gap: 1.5rem; }
.cn-news__body { display: flex; flex-direction: column; gap: 1.25rem; }
.cn-news__text { display: flex; flex-direction: column; gap: 0.5rem; }
.cn-news__desc { color: var(--color-text-muted); }
.cn-news__desc > p { margin: 0; }
.cn-news__formwrap { width: 100%; max-width: 30rem; }
.cn-ta-center .cn-news__formwrap { margin-inline: auto; }
.cn-ta-end .cn-news__formwrap { margin-inline-start: auto; }
.cn-news__form { display: flex; gap: 0.5rem; }
.cn-news__form .cn-input { flex: 1 1 auto; min-width: 0; }
.cn-news__form .cn-btn { flex: none; }
.cn-news__consent { margin-block-start: 0.625rem; font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-news__consent > p { margin: 0; }
.cn-news__consent a { text-decoration: underline; text-underline-offset: 2px; }
.cn-news .cn-note { margin-block-end: 0; }
.cn-news--stacked { max-width: 40rem; }
.cn-news--stacked.cn-ta-center { margin-inline: auto; }
.cn-news--stacked.cn-ta-end { margin-inline-start: auto; }
@media (min-width: 768px) {
  .cn-news--inline .cn-news__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; }
  .cn-news--inline .cn-news__formwrap { margin-inline: 0; max-width: none; }
  .cn-news--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; align-items: stretch; }
  .cn-news--split.cn-news--img-end .cn-news__media { order: 2; }
}
.cn-news--split { overflow: hidden; border-radius: var(--cn-card-radius, 8px); background: var(--color-surface); }
.cn-news__media { position: relative; min-height: 220px; }
.cn-news--split .cn-news__body { justify-content: center; padding: clamp(1.5rem, 5vw, 4rem); }
@media (min-width: 768px) { .cn-news__media { min-height: 360px; } }
@media (max-width: 479px) {
  .cn-news__form { flex-direction: column; }
  .cn-news__form .cn-btn { width: 100%; }
}

/* ---------- rich text ---------- */
.cn-rt { display: flex; flex-direction: column; gap: 1rem; max-width: var(--cn-rt-w, 760px); }
.cn-rt--w-narrow { --cn-rt-w: 560px; } .cn-rt--w-wide { --cn-rt-w: 980px; }
.cn-rt--center { margin-inline: auto; } .cn-rt--end { margin-inline-start: auto; }
.cn-rt .cn-actions { margin-block-start: 0.5rem; }
.cn-rt__text { font-size: 1.0625rem; }

/* ---------- faq ---------- */
.cn-faq { max-width: 860px; margin-inline: auto; }
.cn-faq .cn-head { justify-content: center; }
@media (min-width: 1024px) {
  .cn-faq--side { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 4rem; align-items: start; max-width: none; }
  .cn-faq--side .cn-head { margin-block-end: 0; }
}
.cn-faq__item { border-block-end: 1px solid var(--color-border); }
.cn-faq--lines .cn-faq__item:first-child { border-block-start: 1px solid var(--color-border); }
.cn-faq--boxed .cn-faq__item { margin-block-end: 0.75rem; padding-inline: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--cn-radius, 8px); background: var(--color-background); }
.cn-faq__q { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.125rem; list-style: none; cursor: pointer; font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: var(--color-heading); }
.cn-faq__q::-webkit-details-marker { display: none; }
.cn-faq__q::marker { content: ''; }
.cn-faq__icon { position: relative; flex: none; width: 14px; height: 14px; }
.cn-faq__icon::before, .cn-faq__icon::after { content: ''; position: absolute; inset-inline-start: 0; inset-block-start: 6px; width: 14px; height: 2px; border-radius: 1px; background: currentColor; transition: transform var(--cn-dur-base, 240ms) var(--cn-ease-out, ease-out); }
.cn-faq__icon::after { transform: rotate(90deg); }
.cn-faq__item[open] .cn-faq__icon::after { transform: rotate(0deg); }
.cn-faq__a { padding-block-end: 1.25rem; color: var(--color-text); }

/* ---------- contact form ---------- */
.cn-contact { display: grid; gap: 2rem; }
.cn-contact__intro { display: flex; flex-direction: column; gap: 0.75rem; }
.cn-contact__text { color: var(--color-text-muted); }
.cn-contact__form { display: grid; gap: 1rem; }
.cn-contact__form .cn-actions { margin-block-start: 0.25rem; }
.cn-contact__form textarea { resize: vertical; min-height: 9rem; }
.cn-contact__row { display: grid; gap: 1rem; }
@media (min-width: 600px) { .cn-contact__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cn-contact--stacked { max-width: 720px; margin-inline: auto; }
@media (min-width: 1024px) { .cn-contact--side { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4rem; align-items: start; } }

/* ---------- blog posts ---------- */
.cn-posts { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem) var(--cn-gap, 20px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) { .cn-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cn-posts { grid-template-columns: repeat(var(--cn-cols-d, 3), minmax(0, 1fr)); } }
.cn-post { display: flex; flex-direction: column; gap: 1rem; min-width: 0; margin: 0; }
.cn-post__media { display: block; }
.cn-post__media .cn-media > img { transition: transform var(--cn-dur-slow, 360ms) var(--cn-ease-out, ease-out); }
.cn-post__body { display: flex; flex-direction: column; gap: 0.5rem; }
.cn-post__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; font-size: 0.8125rem; color: var(--color-text-muted); }
.cn-post__meta > * + *::before { content: '·'; margin-inline-end: 0.5rem; }
.cn-post__title { margin: 0; font-weight: var(--cn-heading-weight, 700); color: var(--color-heading); }
.cn-post__title a { color: inherit; text-decoration: none; }
.cn-post__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-post__excerpt { margin: 0; color: var(--color-text-muted); font-size: 0.9375rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn-post__tags { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0.25rem 0 0; }
.cn-tag { display: inline-block; padding: 0.1875rem 0.5rem; border: 1px solid var(--color-border); border-radius: 999px; font-size: 0.75rem; color: var(--color-text-muted); }
.cn-posts--bordered .cn-post, .cn-posts--filled .cn-post { gap: 0; overflow: hidden; border-radius: var(--cn-card-radius, 8px); }
.cn-posts--bordered .cn-post { border: 1px solid var(--color-border); }
.cn-posts--filled .cn-post { background: var(--color-surface); }
.cn-posts--bordered .cn-media, .cn-posts--filled .cn-media { border-radius: 0; }
.cn-posts--bordered .cn-post__body, .cn-posts--filled .cn-post__body { padding: 1.125rem 1.25rem 1.25rem; }
@media (min-width: 768px) {
  .cn-posts--featured > :first-child { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
  .cn-posts--featured.cn-posts--bordered > :first-child, .cn-posts--featured.cn-posts--filled > :first-child { gap: 0; }
  .cn-posts--featured > :first-child .cn-post__title { font-size: calc(clamp(1.375rem, 2.4vw, 1.75rem) * var(--cn-scale, 1)); }
  .cn-posts--featured > :first-child .cn-post__body { padding-inline-end: clamp(0rem, 2vw, 1.5rem); }
}

/* ---------- motion ----------
   Entrances ride the theme's reveal (.cn-reveal → .is-in, corner-core.js); grids carry [data-cn-stagger] so their
   first items rise in turn (corner-base.css).
   Theme settings → Animation (data-motion standard/subtle/none) and the visitor's reduced-motion choice decide
   how much moves. Image hovers zoom at most 4%. */
@keyframes cn-s-rise { from { opacity: 0; transform: translateY(var(--cn-rise, 12px)); } to { opacity: 1; transform: none; } }
@keyframes cn-s-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .theme-root:not([data-motion="none"]) .cn-ss__slide.is-entering .cn-ss__content > * { animation: cn-s-rise var(--cn-dur-reveal, 500ms) var(--cn-ease-out, ease-out) backwards; }
  .theme-root:not([data-motion="none"]) .cn-ss__slide.is-entering .cn-ss__content > :nth-child(2) { animation-delay: 80ms; }
  .theme-root:not([data-motion="none"]) .cn-ss__slide.is-entering .cn-ss__content > :nth-child(3) { animation-delay: 160ms; }
  .theme-root:not([data-motion="none"]) .cn-ss__slide.is-entering .cn-ss__content > :nth-child(4) { animation-delay: 240ms; }
  .theme-root[data-motion="subtle"] .cn-ss__slide.is-entering .cn-ss__content > * { animation-name: cn-s-fade; }
  .theme-root:not([data-motion="none"]) .cn-faq__item[open] .cn-faq__a { animation: cn-s-fade var(--cn-dur-base, 240ms) var(--cn-ease, ease); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .theme-root:not([data-motion="none"]) :is(.cn-pcard:hover .cn-pcard__img, .cn-ccard:hover .cn-ccard__media > img, .cn-post:hover .cn-post__media .cn-media > img) { transform: scale(var(--cn-zoom, 1.04)); }
}
@media (prefers-reduced-motion: reduce) {
  .cn-ss--slide .cn-ss__track, .cn-ss--fade .cn-ss__slide, .cn-ss--fade .cn-ss__slide.is-active { transition: none; }
}
.theme-root[data-motion="none"] :is(.cn-ss--slide .cn-ss__track, .cn-ss--fade .cn-ss__slide, .cn-ss--fade .cn-ss__slide.is-active) { transition: none; }

/* ---------- card & header parts (platform card blocks) ----------
   Options the shared Header / Product card / Collection card / Blog post card blocks carry. */
.cn-ratio--wide { aspect-ratio: 16 / 9; }
.cn-upper { text-transform: uppercase; letter-spacing: 0.06em; }
.cn-pcard__title--lines-1 { -webkit-line-clamp: 1; }
.cn-pcard__title--lines-none { display: block; -webkit-line-clamp: unset; overflow: visible; }
.cn-pcard__badges--inline { position: static; margin-block-end: 0.25rem; }
.cn-pcard__rating--empty { opacity: 0.35; }
.cn-pcard__price-wrap { display: block; }
.cn-pcard--hover-none .cn-pcard__img { transform: none !important; }
.cn-pcard--hover-lift { transition: transform var(--cn-dur-base, 200ms) var(--cn-ease, ease); }
.cn-pcard--hover-lift:hover { transform: translateY(-3px); }
.cn-pcard--hover-lift .cn-pcard__img { transform: none !important; }
.theme-root .cn-pcard__add--solid, .cn-pcard__add--solid { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.theme-root .cn-pcard__add--link, .cn-pcard__add--link { min-height: 0; padding: 0; border: 0; background: none; color: var(--color-heading); text-decoration: underline; text-underline-offset: 4px; justify-self: start; }
.cn-ccard__title--sm { font-size: 0.9375rem; }
.cn-ccard__title--lg { font-size: 1.1875rem; }
.cn-ccards--hover-none .cn-ccard img { transform: none !important; }
.cn-ccards--hover-lift .cn-ccard { transition: transform var(--cn-dur-base, 200ms) var(--cn-ease, ease); }
.cn-ccards--hover-lift .cn-ccard:hover { transform: translateY(-3px); }
.cn-ccards--hover-lift .cn-ccard img { transform: none !important; }
.cn-lines-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cn-lines-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cn-post__more { margin-block-start: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .cn-pcard--hover-lift:hover, .cn-ccards--hover-lift .cn-ccard:hover { transform: none; } }
/* Text over a collection picture: the overlay's empty area lets clicks reach the picture (same card link for
   shoppers; in the theme editor the Image part is selectable), its text stays on top. */
.cn-clist--text-overlay .cn-ccard__body { pointer-events: none; }
.cn-clist--text-overlay .cn-ccard__body > * { pointer-events: auto; }

/* ---------- Instagram feed ---------- */
.cn-ig__grid { display: grid; gap: var(--ig-gap); grid-template-columns: repeat(var(--ig-cols-m), minmax(0, 1fr)); }
@media (min-width: 750px) { .cn-ig__grid { grid-template-columns: repeat(min(var(--ig-cols), 4), minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cn-ig__grid { grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr)); } }
.cn-ig__post { position: relative; display: block; overflow: hidden; aspect-ratio: 1; border-radius: var(--cn-card-radius, var(--cn-radius, 8px)); background: color-mix(in srgb, currentColor 6%, transparent); }
.cn-ig--bleed .cn-ig__post { border-radius: 0; }
.cn-ig__grid--portrait .cn-ig__post { aspect-ratio: 4 / 5; }
.cn-ig__post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.cn-ig__post::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background .3s; }
.cn-ig__post:hover img { transform: scale(1.05); }
.cn-ig__post:hover::after { background: rgb(0 0 0 / .12); }
.cn-ig__post:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cn-ig__badge { position: absolute; z-index: 1; top: .55rem; inset-inline-end: .55rem; display: inline-flex; padding: .35rem; border-radius: 999px; background: rgb(0 0 0 / .45); color: #fff; line-height: 0; }
.cn-ig__note { color: var(--color-text-muted); margin: 0; }
.cn-ig__connect { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px dashed var(--color-border); border-radius: var(--cn-card-radius, var(--cn-radius, 8px)); color: var(--color-text-muted); }
.cn-ig__connect p { margin: 0; }
@media (prefers-reduced-motion: reduce) { .cn-ig__post img { transition: none; } .cn-ig__post:hover img { transform: none; } }

/* Title size settings (Small · Medium · Large): Medium is the size each title has always had. */
.cn-pcard__title--sm { font-size: calc(1rem * var(--cn-scale, 1)); }
.cn-pcard__title--lg { font-size: calc(1.5rem * var(--cn-scale, 1)); }
.cn-post__title--sm { font-size: calc(1.0625rem * var(--cn-scale, 1)); }
.cn-post__title--lg { font-size: calc(1.5rem * var(--cn-scale, 1)); }
:is(.cn-head__title--sm, .cn-rt__title--sm) { font-size: calc(clamp(1.25rem, 2.2vw, 1.5rem) * var(--cn-scale, 1)); }
:is(.cn-head__title--lg, .cn-rt__title--lg) { font-size: calc(clamp(2rem, 4vw, 2.75rem) * var(--cn-scale, 1)); }

/* ---------- popup (sections/popup.liquid) ----------
   Essential tier: modal · compact · corner card, at the center or a bottom corner. window.Soooks.popup sets the
   root's data-state (closed → opening → open → closing) and data-step; everything here moves from those, so the
   entrance and the exit both play. Corner's look: a flat white card, 1px borders, the 8px radius family, the scrim
   of the drawers. Animations: fade · fade + scale (from 96 %). Phones (≤749px): the modal shows as a compact card,
   the corner card as a bottom card that rises from the edge. Reduced motion / Animation: None → instant. */
.cn-popup { --cn-popup-from: none; position: fixed; inset: 0; z-index: var(--z-popup, 1100); display: grid; place-items: center; padding: 1.5rem; pointer-events: none; }
.cn-popup[hidden] { display: none; }
.cn-popup--bottom-left { place-items: end start; }
.cn-popup--bottom-right { place-items: end end; }
.cn-popup--corner.cn-popup--center { place-items: end center; }
.cn-popup--scale { --cn-popup-from: scale(0.96); }
.cn-popup__overlay { position: absolute; inset: 0; background: var(--cn-scrim); opacity: 0; pointer-events: auto; transition: opacity var(--cn-dur-exit) var(--cn-ease-in); }
.cn-popup__panel {
  position: relative; display: flex; flex-direction: column; width: min(520px, 100%); max-height: calc(100dvh - 3rem);
  overflow-y: auto; overscroll-behavior: contain; border-radius: calc(var(--cn-radius, 8px) * 1.5);
  background: var(--color-background); color: var(--color-text); box-shadow: 0 24px 64px rgba(22, 24, 29, 0.2);
  pointer-events: auto; opacity: 0; transform: var(--cn-popup-from); transform-origin: 50% 60%;
  transition: opacity var(--cn-dur-exit) var(--cn-ease-in), transform var(--cn-dur-exit) var(--cn-ease-in);
}
.cn-popup__panel:focus { outline: none; }
.cn-popup--compact .cn-popup__panel { width: min(420px, 100%); }
.cn-popup--corner .cn-popup__panel { width: min(360px, 100%); max-height: calc(100dvh - 3rem); border: 1px solid var(--color-border); box-shadow: var(--cn-shadow-pop); }
.cn-popup:is(.cn-popup--bottom-left, .cn-popup--bottom-right, .cn-popup--corner) .cn-popup__panel { transform-origin: 50% 100%; }
.cn-popup[data-state="open"] .cn-popup__overlay { opacity: 1; transition: opacity var(--cn-dur-drawer) var(--cn-ease-out); }
.cn-popup[data-state="open"] .cn-popup__panel { opacity: 1; transform: none; transition: opacity var(--cn-dur-slow) var(--cn-ease-out), transform var(--cn-dur-slow) var(--cn-ease-out); }
.cn-popup__close {
  position: absolute; top: 0.6rem; inset-inline-end: 0.6rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--color-background) 88%, transparent);
  color: var(--color-heading); cursor: pointer; transition: background-color var(--cn-dur-fast) var(--cn-ease);
}
.cn-popup__close:hover { background: var(--color-surface); }
.cn-popup__media { flex: none; aspect-ratio: 16 / 9; overflow: hidden; background: var(--color-surface); }
.cn-popup--corner .cn-popup__media { aspect-ratio: 2 / 1; }
.cn-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.cn-popup__body { padding: 2rem 2rem 2.25rem; }
.cn-popup--compact .cn-popup__body { padding: 2.25rem 1.75rem 1.75rem; }
.cn-popup--corner .cn-popup__body { padding: 1.25rem 1.25rem 1.4rem; }
.cn-popup__step, .cn-popup__success { display: grid; gap: 0.85rem; justify-items: center; text-align: center; }
.cn-popup--corner :is(.cn-popup__step, .cn-popup__success) { justify-items: stretch; text-align: start; }
.cn-popup__step[hidden] { display: none; }
.cn-popup__title { font-size: calc(1.625rem * var(--cn-scale, 1)); line-height: 1.2; }
.cn-popup--compact .cn-popup__title { padding-inline: 1.25rem; font-size: calc(1.375rem * var(--cn-scale, 1)); }
.cn-popup--corner .cn-popup__title { padding-inline-end: 2rem; font-size: calc(1.125rem * var(--cn-scale, 1)); }
.cn-popup--corner .cn-popup__media + .cn-popup__body .cn-popup__title { padding-inline-end: 0; }
.cn-popup__text { max-width: 40ch; color: var(--color-text-muted); font-size: 0.9375rem; }
.cn-popup--corner .cn-popup__text { font-size: 0.875rem; }
.cn-popup__form { display: flex; flex-wrap: wrap; gap: 0.5rem; width: 100%; margin-top: 0.25rem; }
.cn-popup__input { flex: 1 1 200px; min-width: 0; }
.cn-popup__submit { flex: none; }
.cn-popup--corner .cn-popup__form { flex-direction: column; }
.cn-popup--corner .cn-popup__input { flex: none; }
.cn-popup--corner .cn-popup__submit { width: 100%; }
.cn-popup__note { flex-basis: 100%; margin: 0; padding: 0.6rem 0.8rem; border-radius: var(--cn-radius, 8px); font-size: 0.875rem; line-height: 1.45; text-align: start; }
.cn-popup__note[hidden] { display: none; }
.cn-popup__note[data-kind="error"] { color: var(--cn-error); background: color-mix(in srgb, var(--cn-error) 9%, var(--color-background)); }
.cn-popup__note[data-kind="success"] { color: var(--cn-success); background: color-mix(in srgb, var(--cn-success) 9%, var(--color-background)); }
.cn-popup__coupon { display: grid; gap: 0.4rem; width: 100%; }
.cn-popup__coupon-label { color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 600; }
.cn-popup__code {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 48px; padding: 0.6rem 0.9rem;
  border: 1.5px dashed color-mix(in srgb, var(--color-primary) 55%, var(--color-border)); border-radius: var(--cn-radius, 8px);
  background: color-mix(in srgb, var(--color-primary) 6%, var(--color-background)); color: var(--color-heading); font: inherit; cursor: pointer;
  transition: border-color var(--cn-dur-fast) var(--cn-ease), background-color var(--cn-dur-fast) var(--cn-ease);
}
.cn-popup__code:hover { border-color: var(--color-primary); }
.cn-popup__code-text { font-weight: 700; letter-spacing: 0.08em; }
.cn-popup__code-action { color: var(--color-primary); font-size: 0.875rem; font-weight: 600; }
.cn-popup__copied, .cn-popup__code[data-copied] .cn-popup__copy { display: none; }
.cn-popup__code[data-copied] .cn-popup__copied { display: inline; color: var(--cn-success); }
.cn-popup__success-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 999px; background: color-mix(in srgb, var(--cn-success) 12%, var(--color-background)); color: var(--cn-success); }
.cn-popup--corner .cn-popup__success-icon { width: 40px; height: 40px; }
.cn-popup__success .cn-popup__button { margin-top: 0.25rem; }
@keyframes cn-popup-step { from { opacity: 0; transform: translateY(6px); } }
.cn-popup[data-state="open"][data-step="success"] .cn-popup__success { animation: cn-popup-step var(--cn-dur-slow) var(--cn-ease-out) both; }
@media (max-width: 749px) {
  .cn-popup { padding: 0.75rem; }
  .cn-popup:is(.cn-popup--modal, .cn-popup--compact) { place-items: center; }
  .cn-popup--modal .cn-popup__panel { width: min(420px, 100%); }
  .cn-popup--modal .cn-popup__media { aspect-ratio: 5 / 2; }
  .cn-popup:is(.cn-popup--modal, .cn-popup--compact) .cn-popup__body { padding: 1.75rem 1.25rem 1.4rem; }
  .cn-popup--modal .cn-popup__title { font-size: calc(1.375rem * var(--cn-scale, 1)); }
  .cn-popup--corner { place-items: end stretch; padding: 0.5rem; }
  .cn-popup--corner .cn-popup__panel { width: 100%; max-height: 75dvh; }
  .cn-popup--corner .cn-popup__media { aspect-ratio: 3 / 1; }
  .cn-popup--corner.cn-popup--scale { --cn-popup-from: translateY(24px); }
  .cn-popup__form { flex-direction: column; }
  .theme-root .cn-popup__input { flex: none; }
  .cn-popup__submit { width: 100%; }
}
.theme-root[data-motion="subtle"] .cn-popup { --cn-popup-from: none; }
@media (prefers-reduced-motion: reduce) {
  .cn-popup__panel { transform: none; }
  .cn-popup[data-step="success"] .cn-popup__success { animation: none; }
}

/* soooks-theme:corner:169557:f0936d16eeb03eeb */
/* Corner — page templates: product, related products, collection + filters, cart, search, blog, article, page,
   404 and sign-in. Flat surfaces, 1px borders, the theme radius; colours come from the section's colour scheme
   (--color-*), sizes from the theme tokens (--cn-*) with plain fallbacks. Logical properties only (RTL).
   Breakpoints: phones < 750px, tablets 750–989px, desktop >= 990px. */

/* ---------- tokens + section frame ---------- */
:where(.cn-product, .cn-related, .cn-collection, .cn-cart-page, .cn-search-page, .cn-blog, .cn-article-page, .cn-page, .cn-404-page, .cn-login) {
  --cn-t-radius: var(--cn-radius, 8px);
  --cn-t-gap: var(--cn-grid-gap, var(--cn-gap, 20px));
  --cn-t-surface: var(--color-surface, #f5f6f8);
  --cn-t-border: var(--color-border, #e3e6eb);
  --cn-t-muted: var(--color-text-muted, #646b77);
  --cn-t-heading: var(--color-heading, #16181d);
  --cn-t-text: var(--color-text, #2b2f36);
  --cn-t-bg: var(--color-background, #ffffff);
  --cn-t-primary: var(--color-primary, #2457d6);
  --cn-t-on-primary: var(--color-on-primary, #ffffff);
  --cn-t-accent: var(--color-accent, #f5b301);
  --cn-t-sale: var(--cn-color-sale, var(--cn-sale, #d33a2c));
  --cn-t-success: var(--cn-color-success, var(--cn-success, #1f8a4c));
  --cn-t-error: var(--cn-color-error, var(--cn-error, #c62828));
  --cn-t-scale: var(--cn-heading-scale, var(--cn-scale, 1));
  --cn-t-dur: var(--cn-dur-base, 200ms);
  --cn-t-ease: var(--cn-ease-out, cubic-bezier(0.2, 0.7, 0.2, 1));
  display: block;
  padding-block: calc(var(--cn-pt, 32px) * 0.6) calc(var(--cn-pb, 64px) * 0.6);
  color: var(--cn-t-text);
}
@media (min-width: 750px) {
  :where(.cn-product, .cn-related, .cn-collection, .cn-cart-page, .cn-search-page, .cn-blog, .cn-article-page, .cn-page, .cn-404-page, .cn-login) {
    padding-block: var(--cn-pt, 32px) var(--cn-pb, 64px);
  }
}

/* Shared bits (zero specificity, so the theme's own definitions win where they exist). */
:where(.cn-visually-hidden) {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:where(.cn-btn--sm) { min-height: 40px; padding-inline: 14px; font-size: 0.875rem; }
:where(.cn-btn--wide) { width: 100%; }
.cn-btn.is-busy { cursor: progress; }
.cn-ico { display: inline-block; flex: none; vertical-align: middle; }
[dir="rtl"] .cn-ico--flip { transform: scaleX(-1); }
.cn-muted-text { color: var(--cn-t-muted); }

.cn-tlink {
  display: inline-flex; align-items: center; gap: 6px;
  color: inherit; font-weight: 600; font-size: 0.9375rem;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.theme-root .cn-tlink:hover, .cn-tlink:hover { color: var(--cn-t-primary); }

.cn-tpl-head { margin-block-end: 24px; }
.cn-tpl-head--center { text-align: center; }
.cn-tpl-head__title { margin: 0; }
.cn-tpl-head__text { margin: 8px 0 0; color: var(--cn-t-muted); max-width: 62ch; }
.cn-tpl-head--center .cn-tpl-head__text { margin-inline: auto; }

/* Rich text extras (the base .cn-rte lives in corner-base.css). */
.cn-rte { overflow-wrap: anywhere; }
.cn-rte > :first-child { margin-block-start: 0; }
.cn-rte > :last-child { margin-block-end: 0; }
.cn-rte h2 { font-size: calc(1.5rem * var(--cn-t-scale)); }
.cn-rte h3 { font-size: calc(1.25rem * var(--cn-t-scale)); }
.cn-rte h4 { font-size: 1.0625rem; }
.cn-rte img, .cn-rte video, .cn-rte iframe { max-width: 100%; height: auto; }
.cn-rte table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; display: block; overflow-x: auto; }
.cn-rte th, .cn-rte td { border: 1px solid var(--cn-t-border); padding: 8px 10px; text-align: start; }
.cn-rte hr { border: 0; border-block-start: 1px solid var(--cn-t-border); margin-block: 2em; }

/* Selects, chips, badges, empty states. */
.cn-select { position: relative; display: block; }
.cn-select select {
  appearance: none; -webkit-appearance: none; width: 100%; min-height: 44px; margin: 0;
  padding-block: 0; padding-inline: 14px 40px;
  border-width: 1px; border-style: solid; border-radius: var(--cn-t-radius);
  color: var(--cn-t-text); font: inherit; font-size: 0.9375rem; cursor: pointer;
}
/* Colour and background at element weight: the base select's hover / focus / right-to-left rules keep winning. */
:where(.cn-select) select { border-color: var(--cn-t-border); background: var(--cn-t-bg); }
.cn-select select:hover { border-color: var(--cn-t-muted); }
.cn-select select:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 1px; }
.cn-select--sm select { min-height: 40px; font-size: 0.875rem; }
.cn-select__chevron { position: absolute; inset-inline-end: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--cn-t-muted); }

button.cn-chip { cursor: pointer; font-family: inherit; color: inherit; }
.theme-root a.cn-chip, a.cn-chip { text-decoration: none; }

:is(.cn-product, .cn-collection) .cn-badge[hidden] { display: none; }

.cn-empty-state {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: 48px 20px; border-radius: var(--cn-t-radius); background: var(--cn-t-surface);
}
.cn-empty-state--plain { background: none; padding-block: 24px; }
.cn-empty-state__title { margin: 0; font-size: 1.125rem; font-weight: 600; color: var(--cn-t-heading); }
.cn-empty-state__text { margin: 0; color: var(--cn-t-muted); max-width: 46ch; }

/* ---------- product page ---------- */
.cn-product__grid { display: grid; gap: 24px; }
.cn-product__media, .cn-product__info { min-width: 0; }
@media (min-width: 750px) {
  .cn-product__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
  .cn-product__grid--small { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .cn-product__grid--large { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .cn-product__grid--media-end .cn-product__media { order: 2; }
}
@media (min-width: 990px) {
  .cn-product__grid { gap: 56px; }
  .cn-product__info--sticky { position: sticky; top: calc(var(--cn-sticky-offset, 0px) + 20px); }
}

/* gallery */
.cn-gallery { display: grid; gap: 12px; min-width: 0; }
.cn-gallery__main { position: relative; min-width: 0; }
.cn-gallery__track {
  display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--cn-t-radius);
}
.cn-gallery__track::-webkit-scrollbar { display: none; }
.cn-gallery__track:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-gallery__slide {
  position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--cn-t-surface); border-radius: var(--cn-t-radius);
}
.cn-gallery__slide img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-select: none; }
/* Fixed shapes: the photo sits inside the frame, whole, unless the merchant chose "Fill the frame". */
.cn-gallery--ratio-square .cn-gallery__slide { aspect-ratio: 1 / 1; }
.cn-gallery--ratio-portrait .cn-gallery__slide { aspect-ratio: 4 / 5; }
.cn-gallery--ratio-landscape .cn-gallery__slide { aspect-ratio: 4 / 3; }
.cn-gallery:not(.cn-gallery--ratio-natural) .cn-gallery__slide img,
.cn-gallery:not(.cn-gallery--ratio-natural) .cn-gallery__open { width: 100%; height: 100%; }
.cn-gallery:not(.cn-gallery--ratio-natural) .cn-gallery__slide img { object-fit: contain; }
.cn-gallery--fit-cover .cn-gallery__slide img { object-fit: cover; }
.cn-gallery--ratio-natural .cn-gallery__slide img { max-height: 82vh; object-fit: contain; }
.cn-gallery__slide--placeholder { aspect-ratio: 1 / 1; }
.cn-gallery__open {
  position: relative; display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  color: inherit; cursor: zoom-in; border-radius: inherit;
}
.cn-gallery__open:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: -2px; }
.cn-gallery__zoom-hint {
  position: absolute; inset-block-end: 12px; inset-inline-end: 12px;
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  background: var(--cn-t-bg); color: var(--cn-t-heading); border: 1px solid var(--cn-t-border);
  opacity: 0; transition: opacity var(--cn-t-dur) var(--cn-t-ease);
}
.cn-gallery__open:hover .cn-gallery__zoom-hint, .cn-gallery__open:focus-visible .cn-gallery__zoom-hint { opacity: 1; }
@media (hover: none) { .cn-gallery__zoom-hint { opacity: 1; } }

.cn-gallery__arrow {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 1;
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--cn-t-border); background: var(--cn-t-bg); color: var(--cn-t-heading); cursor: pointer;
  transition: opacity var(--cn-t-dur) var(--cn-t-ease), border-color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-gallery__arrow:hover { border-color: var(--cn-t-heading); }
.cn-gallery__arrow:disabled { opacity: 0; pointer-events: none; }
.cn-gallery__arrow--prev { inset-inline-start: 12px; }
.cn-gallery__arrow--next { inset-inline-end: 12px; }
.cn-gallery__arrow:focus-visible, .cn-gallery__dot:focus-visible, .cn-gallery__thumb:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }

.cn-gallery__dots { display: none; justify-content: center; gap: 4px; margin-block-start: 10px; }
.cn-gallery__dot {
  width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center;
}
.cn-gallery__dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cn-t-border);
  transition: background-color var(--cn-t-dur) var(--cn-t-ease), width var(--cn-t-dur) var(--cn-t-ease);
}
.cn-gallery__dot.is-active::before { background: var(--cn-t-heading); width: 18px; border-radius: 4px; }

.cn-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding: 2px; }
.cn-gallery__thumb {
  flex: 0 0 72px; width: 72px; height: 72px; padding: 0; overflow: hidden; cursor: pointer;
  border: 1px solid var(--cn-t-border); border-radius: calc(var(--cn-t-radius) * 0.75); background: var(--cn-t-surface);
  transition: border-color var(--cn-t-dur) var(--cn-t-ease), box-shadow var(--cn-t-dur) var(--cn-t-ease);
}
.cn-gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cn-gallery__thumb:hover { border-color: var(--cn-t-muted); }
.cn-gallery__thumb.is-active { border-color: var(--cn-t-heading); box-shadow: inset 0 0 0 1px var(--cn-t-heading); }

/* Phones: every layout is a swipe row, with dots or thumbnails under it. */
@media (max-width: 749px) {
  .cn-gallery__arrow { display: none; }
  .cn-gallery--m-dots .cn-gallery__dots { display: flex; }
  .cn-gallery--m-dots .cn-gallery__thumbs { display: none; }
  .cn-gallery__thumbs--beside { order: 2; }
  .cn-gallery__thumb { flex-basis: 60px; width: 60px; height: 60px; }
}
@media (min-width: 750px) {
  .cn-gallery--slider .cn-gallery__dots { display: flex; }
  .cn-gallery--slider .cn-gallery__thumbs { display: none; }
  .cn-gallery--thumbs_beside { grid-template-columns: 72px minmax(0, 1fr); align-items: start; }
  .cn-gallery__thumbs--beside { flex-direction: column; overflow-x: hidden; overflow-y: auto; max-height: min(78vh, 640px); }
  .cn-gallery__thumbs--beside .cn-gallery__thumb { flex: 0 0 72px; }
  /* Stacked and grid: every image is shown, no slider controls. */
  .cn-gallery--stacked .cn-gallery__track,
  .cn-gallery--grid .cn-gallery__track { display: grid; gap: 12px; overflow: visible; scroll-snap-type: none; border-radius: 0; }
  .cn-gallery--grid .cn-gallery__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cn-gallery--grid .cn-gallery__slide:first-child { grid-column: 1 / -1; }
  .cn-gallery--stacked .cn-gallery__arrow, .cn-gallery--grid .cn-gallery__arrow,
  .cn-gallery--stacked .cn-gallery__dots, .cn-gallery--grid .cn-gallery__dots,
  .cn-gallery--stacked .cn-gallery__thumbs, .cn-gallery--grid .cn-gallery__thumbs { display: none; }
}

/* details column */
.cn-product__form { display: flex; flex-direction: column; gap: 16px; margin: 0; }
.cn-product__block { margin: 0; }
.cn-product__vendor { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cn-t-muted); }
.cn-product__vendor a { color: inherit; text-decoration: none; }
.cn-product__vendor a:hover { color: var(--cn-t-heading); text-decoration: underline; }
.cn-product__vendor--empty { opacity: 0.5; }
.cn-product__title { margin: 0; }
.cn-product__price-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.cn-product__price-amount { font-size: 1.375rem; font-weight: 600; color: var(--cn-t-heading); }
.cn-product__price-amount.is-sale { color: var(--cn-t-sale); }
.cn-product__price-compare { font-size: 1rem; color: var(--cn-t-muted); }
.cn-product__price-compare[hidden], .cn-product__price-row [hidden] { display: none; }
.cn-product__tax { margin: 6px 0 0; font-size: 0.8125rem; color: var(--cn-t-muted); }
.cn-product__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cn-product__badges:not(:has(> :not([hidden]))) { display: none; }
.cn-product__rating .cn-stars { --cn-star: 16px; }
.cn-product__rating { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-product__rating-value { color: var(--cn-t-heading); font-weight: 600; }
.cn-product__rating--empty { opacity: 0.6; }
.cn-product__text--muted { color: var(--cn-t-muted); }
.cn-product__text--small { font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-product__description { line-height: 1.7; }

/* variant picker */
.cn-product__variants { display: grid; gap: 18px; }
.cn-variant { border: 0; margin: 0; padding: 0; min-width: 0; }
.cn-variant__label { display: block; margin: 0 0 8px; padding: 0; font-size: 0.875rem; font-weight: 600; color: var(--cn-t-heading); }
.cn-variant__current { font-weight: 400; color: var(--cn-t-muted); }
.cn-variant__values { display: flex; flex-wrap: wrap; gap: 8px; }
.cn-variant__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.cn-variant__btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 48px;
  padding: 6px 16px; border: 1px solid var(--cn-t-border); border-radius: var(--cn-t-radius);
  background: var(--cn-t-bg); color: var(--cn-t-text); font-size: 0.9375rem; line-height: 1.3; text-align: center; cursor: pointer;
  transition: border-color var(--cn-t-dur) var(--cn-t-ease), background-color var(--cn-t-dur) var(--cn-t-ease), color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-variant__btn:hover { border-color: var(--cn-t-heading); }
.cn-variant__input:checked + .cn-variant__btn { background: var(--cn-t-heading); border-color: var(--cn-t-heading); color: var(--cn-t-bg); }
.cn-variant__input:focus-visible + label { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-variant__input[data-state="soldout"] + .cn-variant__btn { color: var(--cn-t-muted); text-decoration: line-through; }
.cn-variant__input[data-state="soldout"]:checked + .cn-variant__btn { color: var(--cn-t-bg); opacity: 0.75; }
.cn-variant__input[data-state="unavailable"] + .cn-variant__btn { border-style: dashed; color: var(--cn-t-muted); opacity: 0.55; text-decoration: line-through; }
.cn-variant__swatch {
  position: relative; display: block; width: 36px; height: 36px; border-radius: 50%; cursor: pointer;
  background: var(--cn-swatch, var(--cn-t-surface)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: box-shadow var(--cn-t-dur) var(--cn-t-ease);
}
.cn-variant__swatch:hover { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--cn-t-bg), 0 0 0 3px var(--cn-t-border); }
.cn-variant__input:checked + .cn-variant__swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12), 0 0 0 2px var(--cn-t-bg), 0 0 0 4px var(--cn-t-heading); }
.cn-variant__input:not([data-state="available"]):not(:checked) + .cn-variant__swatch { opacity: 0.55; }
.cn-variant__input:not([data-state="available"]) + .cn-variant__swatch::after {
  content: ''; position: absolute; inset: 50% 2px auto; height: 1.5px; background: var(--cn-t-heading); rotate: -45deg;
}
.cn-variant__input:not([data-state]) + .cn-variant__swatch::after { content: none; }

/* quantity stepper */
.cn-stepper {
  display: inline-flex; align-items: stretch; height: 48px; overflow: hidden;
  border: 1px solid var(--cn-t-border); border-radius: var(--cn-t-radius); background: var(--cn-t-bg);
}
.cn-stepper .cn-stepper__btn {
  display: grid; place-items: center; width: 44px; padding: 0; margin: 0; border: 0; background: transparent;
  color: var(--cn-t-text); cursor: pointer; transition: background-color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-stepper .cn-stepper__btn:hover { background: var(--cn-t-surface); }
.cn-stepper .cn-stepper__input {
  width: 48px; min-width: 0; min-height: 0; height: auto; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  background: transparent; color: var(--cn-t-heading); font: inherit; font-weight: 600; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.cn-stepper .cn-stepper__input::-webkit-outer-spin-button,
.cn-stepper .cn-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cn-stepper .cn-stepper__input:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: -2px; }
.cn-stepper--sm { height: 40px; }
.cn-stepper--sm .cn-stepper__btn { width: 36px; }
.cn-stepper--sm .cn-stepper__input { width: 40px; }
.cn-product__qty { display: grid; justify-items: start; }

.cn-product__buttons { display: grid; gap: 10px; }
.theme-root .cn-product__buttons .cn-btn { min-height: 50px; }
.cn-product__buttons [data-soooks-gift-host] { margin-block-end: 4px; }

.cn-stock { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: var(--cn-t-text); }
.cn-stock:empty { display: none; }
.cn-stock__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--cn-t-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-t-success) 18%, transparent); }
.cn-stock__dot--low { background: var(--cn-t-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-t-accent) 22%, transparent); }
.cn-stock__dot--out { background: var(--cn-t-error); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cn-t-error) 18%, transparent); }

/* collapsible rows */
.cn-disclosure { border-block: 1px solid var(--cn-t-border); }
.cn-disclosure + .cn-disclosure { border-block-start: 0; margin-block-start: -16px; }
.cn-disclosure__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-block: 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--cn-t-heading);
}
.cn-disclosure__summary::-webkit-details-marker { display: none; }
.cn-disclosure__summary:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-disclosure__title { display: inline-flex; align-items: center; gap: 10px; }
.cn-disclosure__chevron { transition: transform var(--cn-t-dur) var(--cn-t-ease); }
details[open] > summary .cn-disclosure__chevron { transform: rotate(180deg); }
.cn-disclosure__body { padding-block-end: 16px; color: var(--cn-t-text); font-size: 0.9375rem; line-height: 1.7; }

/* share */
.cn-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.cn-share__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; border: 0; background: none;
  color: var(--cn-t-text); font: inherit; font-size: 0.875rem; cursor: pointer;
}
.cn-share__btn[hidden] { display: none; }
.cn-share__btn:hover { color: var(--cn-t-primary); }

/* sticky add to cart */
.cn-sticky-atc {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 80;
  background: var(--cn-t-bg); color: var(--cn-t-text); border-block-start: 1px solid var(--cn-t-border);
  padding-block: 10px; padding-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%); visibility: hidden;
  transition: transform var(--cn-t-dur) var(--cn-t-ease), visibility 0s linear var(--cn-t-dur);
}
.cn-sticky-atc.is-visible { transform: none; visibility: visible; transition: transform var(--cn-t-dur) var(--cn-t-ease), visibility 0s; }
.cn-sticky-atc__inner { display: flex; align-items: center; gap: 12px; }
.cn-sticky-atc__img { flex: none; width: 48px; height: 48px; object-fit: contain; border-radius: calc(var(--cn-t-radius) * 0.75); background: var(--cn-t-surface); }
.cn-sticky-atc__text { flex: 1; min-width: 0; }
.cn-sticky-atc__title { margin: 0; font-weight: 600; font-size: 0.9375rem; color: var(--cn-t-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sticky-atc__price { margin: 0; font-size: 0.875rem; color: var(--cn-t-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cn-sticky-atc__price [data-cn-sticky-price] { color: var(--cn-t-heading); font-weight: 600; }
.theme-root .cn-sticky-atc__btn { flex: none; min-width: 150px; }
html.cn-has-sticky-atc body { padding-block-end: 72px; }
@media (max-width: 749px) {
  .cn-sticky-atc__img, .cn-sticky-atc__variant { display: none; }
  .theme-root .cn-sticky-atc__btn { min-width: 0; }
}

/* zoom view */
.cn-lightbox {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--cn-t-bg); color: var(--cn-t-text); overflow: hidden;
}
.cn-lightbox[open] { display: flex; flex-direction: column; animation: cn-tpl-fade var(--cn-t-dur) var(--cn-t-ease); }
.cn-lightbox::backdrop { background: rgba(0, 0, 0, 0.45); }
.cn-lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; border-block-end: 1px solid var(--cn-t-border); }
.cn-lightbox__count { font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-lightbox__btn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid var(--cn-t-border); background: var(--cn-t-bg); color: var(--cn-t-heading); cursor: pointer;
}
.cn-lightbox__btn:hover { border-color: var(--cn-t-heading); }
.cn-lightbox__btn:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-lightbox__stage {
  flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden;
  direction: ltr; padding: 16px; touch-action: pan-y;
}
.cn-lightbox__img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; user-select: none; -webkit-user-select: none; }
.cn-lightbox__stage.is-zoomed { display: block; overflow: auto; padding: 0; touch-action: auto; }
.cn-lightbox__stage.is-zoomed .cn-lightbox__img { width: 200%; max-width: none; max-height: none; height: auto; cursor: zoom-out; }
.cn-lightbox__nav { position: absolute; top: 50%; translate: 0 -50%; }
.cn-lightbox__nav--prev { inset-inline-start: 16px; }
.cn-lightbox__nav--next { inset-inline-end: 16px; }
@media (max-width: 749px) { .cn-lightbox__nav { top: auto; inset-block-end: 16px; translate: none; } }
@keyframes cn-tpl-fade { from { opacity: 0; } to { opacity: 1; } }
html.cn-scroll-lock { overflow: hidden; }

/* ---------- product grids (collection, search, related, cart) ---------- */
.cn-tgrid { display: grid; grid-template-columns: repeat(var(--cn-cols-m, 2), minmax(0, 1fr)); gap: 24px 12px; }
.cn-tgrid__item { min-width: 0; }
@media (min-width: 750px) { .cn-tgrid { grid-template-columns: repeat(var(--cn-cols-t, 3), minmax(0, 1fr)); gap: 32px var(--cn-t-gap); } }
@media (min-width: 990px) { .cn-tgrid { grid-template-columns: repeat(var(--cn-cols-d, 4), minmax(0, 1fr)); } }
@media (max-width: 749px) {
  .cn-tgrid--m-slider {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; padding-block-end: 4px;
  }
  .cn-tgrid--m-slider::-webkit-scrollbar { display: none; }
  .cn-tgrid--m-slider .cn-tgrid__item { flex: 0 0 calc(84% / var(--cn-cols-m, 2)); scroll-snap-align: start; }
}

/* ---------- related products ---------- */
.cn-related .cn-tpl-head { margin-block-end: 24px; }

/* ---------- collection ---------- */
.cn-colbanner { margin-block-end: 28px; }
.cn-colbanner--align-center { text-align: center; }
.cn-colbanner__title { margin: 0; }
.cn-colbanner__desc { margin-block-start: 10px; color: var(--cn-t-muted); max-width: 68ch; }
.cn-colbanner--align-center .cn-colbanner__desc { margin-inline: auto; }
.cn-colbanner__count { margin: 10px 0 0; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-colbanner__media { overflow: hidden; border-radius: var(--cn-t-radius); background: var(--cn-t-surface); }
.cn-colbanner__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cn-colbanner--split { display: grid; gap: 20px; }
.cn-colbanner--split .cn-colbanner__media { aspect-ratio: 16 / 9; }
@media (min-width: 750px) {
  .cn-colbanner--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center; }
  .cn-colbanner--split .cn-colbanner__media { aspect-ratio: auto; order: 2; }
  .cn-colbanner--split.cn-colbanner--small .cn-colbanner__media { height: 220px; }
  .cn-colbanner--split.cn-colbanner--medium .cn-colbanner__media { height: 320px; }
  .cn-colbanner--split.cn-colbanner--large .cn-colbanner__media { height: 440px; }
}
.cn-colbanner--overlay { position: relative; overflow: hidden; border-radius: var(--cn-t-radius); display: grid; }
.cn-colbanner--overlay > * { grid-area: 1 / 1; }
.cn-colbanner--overlay .cn-colbanner__media { border-radius: 0; position: relative; }
.cn-colbanner--overlay .cn-colbanner__media::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--cn-overlay, 0.35)); }
.cn-colbanner--overlay.cn-colbanner--small { min-height: 220px; }
.cn-colbanner--overlay.cn-colbanner--medium { min-height: 320px; }
.cn-colbanner--overlay.cn-colbanner--large { min-height: 440px; }
.cn-colbanner--overlay .cn-colbanner__text { position: relative; z-index: 1; align-self: end; padding: 28px; color: #fff; }
.cn-colbanner--overlay .cn-colbanner__title,
.cn-colbanner--overlay .cn-colbanner__desc,
.cn-colbanner--overlay .cn-colbanner__count { color: #fff; }
.cn-colbanner--overlay.cn-colbanner--align-center .cn-colbanner__text { align-self: center; }

.cn-collection__toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  padding-block-end: 16px; margin-block-end: 20px; border-block-end: 1px solid var(--cn-t-border);
}
.cn-collection__toolbar-start { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cn-collection__count { margin: 0; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-collection__sort { display: inline-flex; align-items: center; gap: 10px; }
.cn-collection__sort-label { font-size: 0.875rem; color: var(--cn-t-muted); white-space: nowrap; }
.cn-collection__sort .cn-select { min-width: 180px; }
.cn-collection__filter-btn { display: inline-flex; align-items: center; }
.cn-collection__filter-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding-inline: 5px; border-radius: 999px;
  background: var(--cn-t-heading); color: var(--cn-t-bg); font-size: 0.75rem; font-weight: 600;
}
@media (max-width: 749px) {
  .cn-collection__sort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cn-collection__sort .cn-select { min-width: 0; }
}
@media (min-width: 990px) { .cn-collection .cn-collection__toolbar .cn-collection__filter-btn--drawer-only { display: none; } }
.cn-collection__chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 20px; }
.cn-collection__chips .cn-ico { color: var(--cn-t-muted); }
.cn-collection__clear { padding: 4px 6px; border: 0; background: none; color: var(--cn-t-text); font: inherit; font-size: 0.8125rem; text-decoration: underline; cursor: pointer; }
.cn-collection__layout { display: block; }
.cn-collection__results { min-width: 0; }
@media (min-width: 990px) {
  .cn-collection__layout--sidebar { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 40px; align-items: start; }
}

/* filters: a drawer by default, a sidebar on desktop when chosen */
.cn-facets { position: fixed; inset: 0; z-index: var(--z-drawer, 1000); visibility: hidden; pointer-events: none; transition: visibility 0s linear var(--cn-t-dur); }
.cn-facets.is-open { visibility: visible; pointer-events: auto; transition: none; }
.cn-facets__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity var(--cn-t-dur) var(--cn-t-ease); }
.cn-facets.is-open .cn-facets__scrim { opacity: 1; }
.cn-facets__panel {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: min(380px, 90vw);
  display: flex; flex-direction: column; background: var(--cn-t-bg); color: var(--cn-t-text);
  transform: translateX(-100%); transition: transform var(--cn-t-dur) var(--cn-t-ease);
}
[dir="rtl"] .cn-facets__panel { transform: translateX(100%); }
.cn-facets.is-open .cn-facets__panel { transform: none; }
.cn-facets__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-block-end: 1px solid var(--cn-t-border); }
.cn-facets__title { margin: 0; }
.cn-facets__close { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--cn-t-heading); cursor: pointer; }
.cn-facets__close:hover { background: var(--cn-t-surface); }
.cn-facets__body { flex: 1; min-height: 0; overflow-y: auto; padding-inline: 20px; overscroll-behavior: contain; }
.cn-facets__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 20px; border-block-start: 1px solid var(--cn-t-border); }
@media (min-width: 990px) {
  .cn-collection__layout--sidebar .cn-facets { position: static; visibility: visible; pointer-events: auto; z-index: auto; }
  .cn-collection__layout--sidebar .cn-facets__scrim,
  .cn-collection__layout--sidebar .cn-facets__head,
  .cn-collection__layout--sidebar .cn-facets__foot { display: none; }
  .cn-collection__layout--sidebar .cn-facets__panel { position: static; width: auto; transform: none; background: none; transition: none; }
  .cn-collection__layout--sidebar .cn-facets__body { padding: 0; overflow: visible; }
  .cn-collection__layout--sidebar .cn-facet:first-child .cn-facet__summary { padding-block-start: 0; }
}

.cn-facet { border-block-end: 1px solid var(--cn-t-border); }
.cn-facet__summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px;
  list-style: none; cursor: pointer; font-weight: 600; font-size: 0.9375rem; color: var(--cn-t-heading);
}
.cn-facet__summary::-webkit-details-marker { display: none; }
.cn-facet__summary:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-facet__chevron { transition: transform var(--cn-t-dur) var(--cn-t-ease); color: var(--cn-t-muted); }
.cn-facet[open] .cn-facet__chevron { transform: rotate(180deg); }
.cn-facet--sort { padding-block: 14px; }
.cn-facet__title { margin: 0 0 8px; font-weight: 600; font-size: 0.9375rem; color: var(--cn-t-heading); }
.cn-facet__list { display: grid; gap: 4px; padding-block-end: 14px; max-height: 300px; overflow-y: auto; }
.cn-facet__count { margin-inline-start: auto; font-size: 0.8125rem; color: var(--cn-t-muted); }
.cn-facet__links { list-style: none; margin: 0; padding: 0 0 14px; display: grid; gap: 2px; }
.cn-facet__link { display: flex; align-items: center; gap: 8px; padding-block: 5px; color: var(--cn-t-text); text-decoration: none; font-size: 0.9375rem; }
.cn-facet__link:hover { color: var(--cn-t-primary); }
.theme-root .cn-facet__link.is-active, .cn-facet__link.is-active { color: var(--cn-t-primary); font-weight: 600; }

.cn-checkrow { position: relative; display: flex; align-items: center; gap: 10px; min-height: 34px; cursor: pointer; font-size: 0.9375rem; }
.cn-checkrow input { position: absolute; margin: 0; opacity: 0; }
.cn-checkrow__box {
  flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 4px;
  border: 1px solid var(--cn-t-muted); background: var(--cn-t-bg); color: transparent;
  transition: background-color var(--cn-t-dur) var(--cn-t-ease), border-color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-checkrow input:checked + .cn-checkrow__box { background: var(--cn-t-primary); border-color: var(--cn-t-primary); color: var(--cn-t-on-primary); }
.cn-checkrow input:focus-visible + span { outline: 2px solid var(--cn-t-primary); outline-offset: 2px; }
.cn-checkrow__swatch { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--cn-swatch, var(--cn-t-surface)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); }
.cn-checkrow input:checked + .cn-checkrow__swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 0 2px var(--cn-t-bg), 0 0 0 3.5px var(--cn-t-heading); }
.cn-checkrow input:checked ~ .cn-checkrow__label { font-weight: 600; color: var(--cn-t-heading); }

.cn-price-filter { display: grid; gap: 10px; padding-block-end: 16px; margin: 0; }
.cn-price-filter__row { display: flex; align-items: flex-end; gap: 8px; }
.cn-price-filter__field { flex: 1; display: grid; gap: 4px; min-width: 0; }
.cn-price-filter__label { font-size: 0.75rem; color: var(--cn-t-muted); }
.cn-price-filter__dash { padding-block-end: 10px; color: var(--cn-t-muted); }
.cn-price-filter input {
  width: 100%; min-height: 40px; padding-inline: 10px; margin: 0; border: 1px solid var(--cn-t-border); border-radius: var(--cn-t-radius);
  background: var(--cn-t-bg); color: var(--cn-t-text); font: inherit; font-size: 0.9375rem;
}
.cn-price-filter input:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 1px; }
.cn-price-filter__hint { margin: 0; font-size: 0.75rem; color: var(--cn-t-muted); }

/* pagination + load more */
.cn-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-block-start: 48px; }
.cn-pagination__pages { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.cn-pagination__page, .cn-pagination__step {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 40px; height: 40px; padding-inline: 10px;
  border-radius: var(--cn-t-radius); color: var(--cn-t-text); text-decoration: none; font-size: 0.9375rem;
  transition: background-color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-pagination__page:hover, .cn-pagination__step:hover { background: var(--cn-t-surface); }
.theme-root .cn-pagination__page.is-current, .cn-pagination__page.is-current { background: var(--cn-t-heading); color: var(--cn-t-bg); font-weight: 600; }
.cn-pagination__step { border: 1px solid var(--cn-t-border); }
.cn-pagination__step.is-disabled { opacity: 0.4; pointer-events: none; }
.cn-pagination__gap { display: inline-flex; align-items: center; min-width: 24px; justify-content: center; color: var(--cn-t-muted); }
@media (max-width: 749px) { .cn-pagination__step-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } }

.cn-loadmore { display: grid; justify-items: center; gap: 12px; margin-block-start: 48px; }
.cn-loadmore__count { margin: 0; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-loadmore__bar { width: min(220px, 60%); height: 2px; background: var(--cn-t-border); border-radius: 2px; overflow: hidden; }
.cn-loadmore__bar span { display: block; height: 100%; background: var(--cn-t-heading); transition: width var(--cn-t-dur) var(--cn-t-ease); }
.theme-root .cn-loadmore .cn-btn { min-width: 200px; }

/* ---------- cart page ---------- */
.cn-cart-page__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-block-end: 24px; }
.cn-cart-page__title { margin: 0; }
.cn-shipbar { margin-block-end: 24px; padding: 14px 16px; border: 1px solid var(--cn-t-border); border-radius: var(--cn-t-radius); }
.cn-shipbar__text { margin: 0 0 10px; font-size: 0.9375rem; }
.cn-shipbar__track { height: 6px; border-radius: 999px; background: var(--cn-t-surface); overflow: hidden; }
.cn-shipbar__track span { display: block; height: 100%; border-radius: inherit; background: var(--cn-t-success); transition: width 400ms var(--cn-t-ease); }
.cn-cart-page__layout { display: grid; gap: 32px; align-items: start; }
@media (min-width: 990px) { .cn-cart-page__layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; } }
.cn-cart-page__lines { min-width: 0; }
.cn-cart-page__labels { display: none; }
.cn-cart-lines { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--cn-t-border); }
.cn-cart-line {
  display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: 12px 16px; align-items: start;
  grid-template-areas: "media info total" "media qty qty" "note note note";
  padding-block: 20px; border-block-end: 1px solid var(--cn-t-border);
  transition: opacity var(--cn-t-dur) var(--cn-t-ease);
}
.cn-cart-line.is-pending { opacity: 0.5; pointer-events: none; }
.cn-cart-line__media { grid-area: media; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cn-t-radius); background: var(--cn-t-surface); }
.cn-cart-line__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cn-cart-line__info { grid-area: info; min-width: 0; display: grid; gap: 4px; }
.cn-cart-line__name { color: var(--cn-t-heading); font-weight: 600; text-decoration: none; line-height: 1.35; }
.cn-cart-line__name:hover { text-decoration: underline; }
.cn-cart-line__variant, .cn-cart-line__unit { margin: 0; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-cart-line__qty { grid-area: qty; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.cn-cart-line__remove { padding: 4px 0; border: 0; background: none; color: var(--cn-t-muted); font: inherit; font-size: 0.8125rem; text-decoration: underline; cursor: pointer; }
.cn-cart-line__remove:hover { color: var(--cn-t-error); }
.cn-cart-line__total { grid-area: total; margin: 0; font-weight: 600; color: var(--cn-t-heading); text-align: end; white-space: nowrap; }
.cn-cart-line__note { grid-area: note; }
.cn-cart-line__note[hidden] { display: none; }
@media (min-width: 750px) {
  .cn-cart-page__labels {
    display: grid; grid-template-columns: minmax(0, 1fr) 170px 110px; gap: 16px; padding-block-end: 10px;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cn-t-muted);
  }
  .cn-cart-page__labels span:last-child { text-align: end; }
  .cn-cart-line { grid-template-columns: 96px minmax(0, 1fr) 170px 110px; grid-template-areas: "media info qty total" "note note note note"; gap: 8px 16px; }
  .cn-cart-line__qty { flex-direction: column; align-items: flex-start; gap: 6px; }
}
.cn-cart-summary { display: grid; gap: 4px; padding: 24px; border-radius: var(--cn-t-radius); background: var(--cn-t-surface); }
@media (min-width: 990px) { .cn-cart-summary { position: sticky; top: calc(var(--cn-sticky-offset, 0px) + 20px); } }
.cn-cart-summary__rows:empty { display: none; }
.cn-cart-summary__row { display: flex; justify-content: space-between; gap: 16px; margin: 0; padding-block: 6px; font-size: 0.9375rem; }
.cn-cart-summary__row--discount { color: var(--cn-t-success); }
.cn-cart-summary__row--total { margin-block-start: 4px; padding-block-start: 12px; border-block-start: 1px solid var(--cn-t-border); font-size: 1.125rem; color: var(--cn-t-heading); }
.cn-cart-summary__rows:empty + .cn-cart-summary__row--total { margin-block-start: 0; padding-block-start: 0; border-block-start: 0; }
.cn-cart-summary__hint { margin: 4px 0 0; font-size: 0.8125rem; color: var(--cn-t-muted); }
.cn-cart-summary__hint--center { text-align: center; margin-block-start: 10px; }
.cn-cart-summary__note { margin-block-start: 12px; border-block: 1px solid var(--cn-t-border); }
.cn-cart-summary__note summary { display: flex; align-items: center; justify-content: space-between; padding-block: 12px; cursor: pointer; list-style: none; font-weight: 600; font-size: 0.9375rem; color: var(--cn-t-heading); }
.cn-cart-summary__note summary::-webkit-details-marker { display: none; }
.cn-cart-summary__note[open] summary .cn-disclosure__chevron { transform: rotate(180deg); }
.cn-cart-summary .cn-cart-summary__textarea {
  display: block; width: 100%; min-height: 88px; margin-block-end: 14px; padding: 10px 12px; resize: vertical;
  border-width: 1px; border-style: solid; border-radius: var(--cn-t-radius); background: var(--cn-t-bg); color: var(--cn-t-text); font: inherit; font-size: 0.9375rem;
}
/* Border colour at class weight: the base input's hover / focus / invalid colours keep winning. */
:where(.cn-cart-summary) .cn-cart-summary__textarea { border-color: var(--cn-t-border); }
.theme-root .cn-cart-summary__checkout { margin-block-start: 16px; }
.cn-cart-recs { margin-block-start: 64px; }
.cn-cart-recs .cn-tpl-head__title { margin-block-end: 20px; }

/* ---------- search ---------- */
.cn-search-page__head { max-width: 680px; margin-inline: auto; text-align: center; margin-block-end: 32px; }
.cn-search-page__title { margin: 0; }
.cn-search-page__form { display: flex; gap: 8px; margin: 0; }
.cn-search-page__field { position: relative; flex: 1; min-width: 0; display: block; }
.cn-search-page__icon { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; color: var(--cn-t-muted); pointer-events: none; }
.cn-search-page__form .cn-search-page__input {
  width: 100%; min-height: 48px; margin: 0; padding-inline: 42px 14px;
  border-width: 1px; border-style: solid; border-radius: var(--cn-t-radius); background: var(--cn-t-bg); color: var(--cn-t-text); font: inherit;
}
:where(.cn-search-page__form) .cn-search-page__input { border-color: var(--cn-t-border); }
.cn-search-page__form .cn-search-page__input:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: 1px; }
.theme-root .cn-search-page__form .cn-btn { min-height: 48px; }
.cn-search-page__group + .cn-search-page__group { margin-block-start: 40px; }
.cn-search-page__group-title { margin: 0; }
.cn-search-page__group > .cn-search-page__group-title { margin-block-end: 14px; }
.cn-search-page__controls { display: flex; flex-wrap: wrap; gap: 10px 16px; }
.cn-search-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cn-search-col {
  display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--cn-t-border); border-radius: var(--cn-t-radius);
  color: inherit; text-decoration: none; transition: border-color var(--cn-t-dur) var(--cn-t-ease);
}
.cn-search-col:hover { border-color: var(--cn-t-heading); }
.cn-search-col__media { flex: none; width: 56px; height: 56px; overflow: hidden; border-radius: calc(var(--cn-t-radius) * 0.75); background: var(--cn-t-surface); }
.cn-search-col__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cn-search-col__text { display: grid; min-width: 0; }
.cn-search-col__name { font-weight: 600; color: var(--cn-t-heading); }
.cn-search-col__count { font-size: 0.8125rem; color: var(--cn-t-muted); }
.cn-search-page__popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-block-start: 8px; }

/* ---------- blog + article cards ---------- */
.cn-blog__head { margin-block-end: 20px; }
.cn-blog__filters { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 32px; }
.cn-articles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px 24px; }
@media (min-width: 750px) { .cn-articles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 990px) { .cn-articles { grid-template-columns: repeat(var(--cn-cols-d, 3), minmax(0, 1fr)); } }
.cn-article-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cn-article-card__media { display: block; overflow: hidden; border-radius: var(--cn-t-radius); background: var(--cn-t-surface); aspect-ratio: 3 / 2; }
.cn-article-card__media--square { aspect-ratio: 1 / 1; }
.cn-article-card__media--portrait { aspect-ratio: 4 / 5; }
.cn-article-card__media--wide { aspect-ratio: 16 / 9; }
.cn-article-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--cn-t-ease); }
.cn-article-card:hover .cn-article-card__media img { transform: scale(1.03); }
.cn-article-card__body { display: grid; gap: 8px; align-content: start; }
.cn-article-card__meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0; font-size: 0.8125rem; color: var(--cn-t-muted); }
.cn-article-card__cat { color: var(--cn-t-primary); font-weight: 600; }
.cn-article-card__title { margin: 0; }
.cn-article-card__title a { color: inherit; text-decoration: none; }
.cn-article-card__title a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cn-article-card__excerpt {
  margin: 0; color: var(--cn-t-muted); font-size: 0.9375rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.cn-article-card__tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; font-size: 0.8125rem; }
.cn-article-card__tag { color: var(--cn-t-muted); text-decoration: none; }
.cn-article-card__tag:hover { color: var(--cn-t-primary); }
.cn-article-card__more { justify-self: start; margin-block-start: 4px; }
.cn-article-card--featured { margin-block-end: 40px; padding-block-end: 40px; border-block-end: 1px solid var(--cn-t-border); }
.cn-article-card--featured .cn-article-card__title { font-size: calc(clamp(1.5rem, 3vw, 2rem) * var(--cn-t-scale)); }
.cn-article-card--featured .cn-article-card__excerpt { -webkit-line-clamp: 4; font-size: 1rem; }
@media (min-width: 750px) {
  .cn-article-card--featured { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
}

/* ---------- article page ---------- */
.cn-article-page__inner { margin-inline: auto; max-width: 760px; }
.cn-article-page__inner--narrow { max-width: 640px; }
.cn-article-page__inner--wide { max-width: 960px; }
.cn-article-page__head { display: grid; gap: 12px; margin-block-end: 28px; }
.cn-article-page__head--center { text-align: center; justify-items: center; }
.cn-article-page__cat { font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cn-t-primary); text-decoration: none; }
.cn-article-page__title { margin: 0; }
.cn-article-page__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; font-size: 0.875rem; color: var(--cn-t-muted); }
.cn-article-page__head--center .cn-article-page__meta { justify-content: center; }
.cn-article-page__hero { margin-block-end: 32px; overflow: hidden; border-radius: var(--cn-t-radius); background: var(--cn-t-surface); }
.cn-article-page__hero img { display: block; width: 100%; height: auto; }
.cn-article-page__hero--full { border-radius: 0; margin-block: calc(var(--cn-pt, 32px) * -0.6) 32px; }
.cn-article-page__hero--full img { max-height: 70vh; object-fit: cover; }
@media (min-width: 750px) { .cn-article-page__hero--full { margin-block-start: calc(var(--cn-pt, 32px) * -1); } }
.cn-article-page__body { font-size: 1.0625rem; line-height: 1.75; }
.cn-article-page__tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 32px 0 0; }
.cn-article-page__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  margin-block-start: 40px; padding-block-start: 20px; border-block-start: 1px solid var(--cn-t-border);
}
.cn-article-page__related { margin-block-start: 64px; padding-block-start: 48px; border-block-start: 1px solid var(--cn-t-border); }
.cn-article-page__related .cn-tpl-head__title { margin-block-end: 24px; }

/* ---------- page ---------- */
.cn-page__inner { margin-inline: auto; max-width: 800px; }
.cn-page__inner--narrow { max-width: 640px; }
.cn-page__inner--wide { max-width: none; }
.cn-page__title { margin: 0; }
.cn-page__title--center { text-align: center; }
.cn-page__body { line-height: 1.75; }

/* ---------- 404 ---------- */
.cn-404-page__inner { max-width: 560px; margin-inline: auto; text-align: center; display: grid; gap: 14px; justify-items: center; }
.cn-404-page__code { margin: 0; font-size: clamp(4rem, 12vw, 6rem); font-weight: 700; line-height: 1; color: var(--cn-t-border); letter-spacing: -0.02em; }
.cn-404-page__title { margin: 0; }
.cn-404-page__text { margin: 0; color: var(--cn-t-muted); }
.cn-404-page__search { width: 100%; margin-block-start: 8px; }
.cn-404-page__actions { margin-block-start: 4px; }

/* ---------- sign in ---------- */
.cn-login__card { max-width: 460px; margin-inline: auto; padding: 32px 24px; border: 1px solid var(--cn-t-border); border-radius: calc(var(--cn-t-radius) * 1.5); background: var(--cn-t-bg); }
@media (min-width: 750px) { .cn-login__card { padding: 40px; } }
.cn-login__card--plain { border: 0; padding-inline: 0; background: none; }
.cn-login__title { margin: 0; text-align: center; }
.cn-login__text { margin: 10px 0 0; text-align: center; color: var(--cn-t-muted); font-size: 0.9375rem; }
.cn-login__tabs { display: grid; grid-template-columns: 1fr 1fr; margin-block-start: 24px; border-block-end: 1px solid var(--cn-t-border); }
.cn-login__tab {
  padding: 12px 8px; border: 0; background: none; color: var(--cn-t-muted); font: inherit; font-weight: 600; cursor: pointer;
  box-shadow: inset 0 -2px 0 transparent; transition: color var(--cn-t-dur) var(--cn-t-ease), box-shadow var(--cn-t-dur) var(--cn-t-ease);
}
.cn-login__tab:hover { color: var(--cn-t-heading); }
.cn-login__tab.is-active { color: var(--cn-t-heading); box-shadow: inset 0 -2px 0 var(--cn-t-heading); }
.cn-login__tab:focus-visible { outline: 2px solid var(--cn-t-primary); outline-offset: -2px; }
.cn-login__form { display: grid; gap: 16px; margin-block-start: 24px; }
.cn-login__form[hidden] { display: none; }
.cn-login__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 399px) { .cn-login__row { grid-template-columns: 1fr; } }
.cn-login .cn-field { display: grid; gap: 6px; margin: 0; }
.cn-login .cn-field > label { font-size: 0.875rem; font-weight: 600; color: var(--cn-t-heading); }
.cn-login__forgot { justify-self: end; font-size: 0.875rem; font-weight: 500; margin-block-start: -6px; }
.theme-root .cn-login .cn-btn--wide { min-height: 50px; }

/* ---------- motion: Theme settings → Animation, and the visitor's reduce-motion preference ---------- */
.theme-root[data-motion="none"] :is(.cn-product, .cn-related, .cn-collection, .cn-cart-page, .cn-search-page, .cn-blog, .cn-article-page, .cn-page, .cn-404-page, .cn-login, .cn-lightbox) *,
.theme-root[data-motion="none"] :is(.cn-lightbox) {
  transition-duration: 0s !important; animation: none !important;
}
.theme-root[data-motion="subtle"] .cn-article-card:hover .cn-article-card__media img { transform: none; }
@media (prefers-reduced-motion: reduce) {
  :is(.cn-product, .cn-related, .cn-collection, .cn-cart-page, .cn-search-page, .cn-blog, .cn-article-page, .cn-page, .cn-404-page, .cn-login) *,
  .cn-lightbox { transition-duration: 0s !important; animation: none !important; scroll-behavior: auto !important; }
  .cn-article-card:hover .cn-article-card__media img { transform: none; }
}

/* Product title size setting (Small · Medium · Large): Medium is the size it has always had. */
.cn-product__title--sm { font-size: calc(clamp(1.5rem, 3vw, 2rem) * var(--cn-scale, 1)); }
.cn-product__title--lg { font-size: calc(clamp(2.5rem, 5vw, 3.5rem) * var(--cn-scale, 1)); }