/* soooks-theme:crown:169557:b70868709918b8df */
/* Crown — the theme's foundation: page defaults and type, the accent-word script, layout and section tones,
   buttons (pill + arrow chip + rolling label), circles and slider controls, form fields, the enhanced dropdown,
   quantity stepper, checks, badges and prices, notes and the toast, scroll reveals, rails, marquees, drawers and
   sheets, the header family (announcement strip, header layouts, menus, mega menus), product cards, the bag,
   quick view, search and the mobile menu, and the footer card.
   Tokens come from snippets/theme-vars.liquid (--cr-*). Hooks are data-cr-* attributes (never styled); states are
   is-* classes. Load order: crown-base → crown-sections → crown-templates. */

/* ================================================================ page */
.theme-root {
  --cr-dir: 1; /* direction sign for directional motion: 1 left-to-right, -1 right-to-left */
  font-family: var(--cr-body-font);
  font-size: var(--cr-text);
  line-height: 1.4;
  letter-spacing: var(--cr-ls-body);
  color: var(--cr-ink);
  background: var(--cr-bg);
  -webkit-font-smoothing: antialiased;
}
.theme-root *, .theme-root *::before, .theme-root *::after { box-sizing: border-box; }
[dir="rtl"] { --cr-dir: -1; }
[dir="ltr"] { --cr-dir: 1; }
.theme-root[data-motion="subtle"] { --cr-stagger: 30ms; }

/* Zero specificity: any class that sets these wins. */
:where(.theme-root) img { max-width: 100%; display: block; }
:where(.theme-root) a { color: inherit; text-decoration: none; }
:where(.theme-root) p { margin: 0 0 0.85em; }
:where(.theme-root) p:last-child { margin-bottom: 0; }
:where(.theme-root) :is(h1, h2, h3, h4, h5, h6) {
  margin: 0 0 0.45em;
  font-family: var(--cr-display-font);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: var(--cr-ls-heading);
  text-transform: var(--cr-heading-transform);
  color: var(--cr-heading);
  overflow-wrap: break-word;
}
:where(.theme-root) h1 { font-size: var(--cr-h1); }
:where(.theme-root) h2 { font-size: var(--cr-h2); }
:where(.theme-root) h3 { font-size: var(--cr-h3); }
:where(.theme-root) h4 { font-size: var(--cr-h4); }
:where(.theme-root) h5 { font-size: var(--cr-h5); }
:where(.theme-root) h6 { font-size: var(--cr-h6); }
/* Headings over pictures and coloured panels take the panel's colour. */
.theme-root .cr-onmedia :is(h1, h2, h3, h4, h5, h6) { color: inherit; }

/* [Bracketed] words in headings → <em class="cr-accent">, set in the accent (script / serif italic) face. */
.cr-accent {
  font-family: var(--cr-accent-font);
  font-style: var(--cr-accent-style);
  font-weight: 400;
  font-size: calc(1em * var(--cr-accent-scale));
  line-height: 0.8;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--cr-accent);
  -webkit-font-smoothing: auto;
}
:is(.cr-onmedia, .cr-footer) .cr-accent { color: inherit; }

.cr-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--cr-text-s);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cr-muted);
}

/* Parked above the page at the reading start (never off to a side, which would let a right-to-left page scroll
   sideways); it drops in on focus. */
.cr-skip {
  position: absolute; top: 0; inset-inline-start: 12px; z-index: 300;
  padding: 10px 18px;
  background: var(--cr-btn-bg); color: var(--cr-btn-ink);
  transform: translateY(-200%);
}
.cr-skip:focus { top: 12px; transform: none; }

.cr-vh {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ================================================================ layout */
.cr-wrap { max-width: var(--cr-width); margin-inline: auto; padding-inline: var(--cr-gutter); }
.cr-wrap--narrow { max-width: min(var(--cr-width), 880px); }
.cr-bleed { max-width: none; padding-inline: 0; }

.cr-section { padding-block: var(--cr-space); }
.cr-section--compact { padding-block: var(--cr-space-m); }
.cr-section--flush { padding-block: 0; }
.cr-section--alt { background: var(--cr-bg-alt); }
.cr-section--soft { background: var(--cr-bg-soft); }
.cr-section--dark { background: #101013; color: #d9d9de; }
.cr-section--dark :is(h1, h2, h3, h4, h5, h6) { color: #ffffff; }

/* Section heading row: the copy at the start, its controls (arrows / view-all) at the end. */
.cr-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(18px, 3vw, 34px); }
.cr-head__text { max-width: 720px; }
.cr-head__text > p { margin: 8px 0 0; color: var(--cr-muted); }
.cr-head--center { flex-direction: column; align-items: center; text-align: center; }
.cr-head h2 { margin-bottom: 0; }

/* ================================================================ buttons */
/* The pill: colours come from --btn-* so each variant only swaps the palette. */
.cr-btn {
  --btn-bg: var(--cr-btn-bg);
  --btn-ink: var(--cr-btn-ink);
  --btn-line: var(--cr-btn-bg);
  --btn-bg-h: var(--cr-btn-hover);
  --btn-ink-h: var(--cr-btn-ink);
  --btn-line-h: var(--cr-btn-hover);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 44px;
  padding: 12px 25px;
  border: 1px solid var(--btn-line);
  border-radius: var(--cr-btn-radius);
  background: var(--btn-bg);
  color: var(--btn-ink);
  font-family: var(--cr-display-font);
  font-size: var(--cr-text-m);
  font-weight: 600;
  letter-spacing: var(--cr-ls-heading);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--cr-dur-base) var(--cr-ease), color var(--cr-dur-base) var(--cr-ease), border-color var(--cr-dur-base) var(--cr-ease), transform 0.3s var(--cr-ease);
  -webkit-tap-highlight-color: transparent;
}
.theme-root .cr-btn, .theme-root a.cr-btn { color: var(--btn-ink); }
.cr-btn:hover, .theme-root .cr-btn:hover, .theme-root a.cr-btn:hover { background: var(--btn-bg-h); color: var(--btn-ink-h); border-color: var(--btn-line-h); }
.cr-btn:active { transform: scale(0.98); }
.cr-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.cr-btn--secondary { --btn-bg-h: var(--cr-bg); --btn-ink-h: var(--cr-btn-bg); --btn-line-h: var(--cr-btn-bg); }
.cr-btn--outline { --btn-bg: transparent; --btn-ink: var(--cr-heading); --btn-line: currentColor; --btn-bg-h: var(--cr-btn-bg); --btn-ink-h: var(--cr-btn-ink); --btn-line-h: var(--cr-btn-bg); }
.cr-btn--white { --btn-bg: #ffffff; --btn-ink: #101010; --btn-line: #ffffff; --btn-bg-h: #101010; --btn-ink-h: #ffffff; --btn-line-h: #101010; }
.cr-btn--white-outline { --btn-bg: transparent; --btn-ink: #ffffff; --btn-line: rgba(255,255,255,0.8); --btn-bg-h: #ffffff; --btn-ink-h: #101010; --btn-line-h: #ffffff; }
.cr-btn--glass { --btn-bg: rgba(255,255,255,0.16); --btn-ink: #ffffff; --btn-line: transparent; --btn-bg-h: rgba(255,255,255,0.3); --btn-ink-h: #ffffff; backdrop-filter: blur(6px); }
.cr-btn--sm { gap: 8px; min-height: 34px; padding: 8px 16px; font-size: var(--cr-text); }
.cr-btn--lg { min-height: 52px; padding: 15px 32px; }
.cr-btn--block { width: 100%; }

/* Keyboard focus: a fine ring standing off the control (white over pictures and dark panels). */
:is(.cr-btn, .cr-circle, .cr-arrow, .cr-iconbtn, .cr-pill, .cr-drawer__close):focus-visible { outline: 1.5px solid var(--btn-focus, var(--cr-heading)); outline-offset: 3px; }
:is(.cr-onmedia, .cr-section--dark, .cr-footer) :is(.cr-btn, .cr-circle, .cr-arrow), .cr-btn--white-outline, .cr-btn--glass { --btn-focus: #ffffff; }
.cr-iconbtn { --btn-focus: currentColor; }

/* Busy (adding to the bag): full strength — never reads as sold out — with a fine turning ring. */
.cr-btn.is-busy, .cr-btn.is-busy:disabled, .cr-circle.is-busy, .cr-pcard__atc--link.is-busy { opacity: 1; cursor: progress; }
.cr-btn.is-busy::after, .cr-circle.is-busy::after, .cr-pcard__atc--link.is-busy::after {
  content: "";
  flex: 0 0 auto;
  width: 14px; height: 14px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: cr-spin 0.8s linear infinite;
}
.cr-circle.is-busy { position: relative; }
.cr-circle.is-busy > svg { opacity: 0; }
.cr-circle.is-busy::after { position: absolute; inset: 0; margin: auto; }
.cr-pcard__atc--link.is-busy::after { display: inline-block; vertical-align: -2px; margin-inline-start: 8px; }
/* Added: the label rolls up to a tick (+ "Added to cart" on labelled buttons) for a moment. */
.cr-added { display: inline-flex; align-items: center; justify-content: center; gap: 8px; animation: cr-added-in var(--cr-dur-slow) var(--cr-ease) both; }
.cr-added svg { flex: 0 0 auto; width: 14px; height: 14px; }
@keyframes cr-added-in { from { opacity: 0; transform: translateY(70%); } }

/* The circled arrow inside pills: turns a quarter on hover. */
.cr-btn__chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: transform 0.45s var(--cr-ease);
}
.cr-btn__chip svg { width: 11px; height: 11px; }
.cr-btn:hover .cr-btn__chip { transform: rotate(45deg); }
.cr-btn--sm .cr-btn__chip { width: 20px; height: 20px; }
.theme-root[data-cr-arrows="false"] .cr-btn__chip { display: none; }
/* Right to left: the chip's arrow points the reading way and turns the mirrored quarter. (A chip whose arrow sits
   in a .cr-dir wrapper is already mirrored by it.) */
[dir="rtl"] .cr-btn__chip > svg { transform: scaleX(-1); }
[dir="rtl"] .cr-btn:hover .cr-btn__chip { transform: rotate(-45deg); }

/* The rolling label: a copy of the label waits below and rolls up on hover. */
.cr-roll { position: relative; display: inline-block; overflow: hidden; }
.cr-roll > span { display: block; transition: transform 0.5s var(--cr-ease); }
.cr-roll > span:last-child { position: absolute; inset: 0; transform: translateY(110%); }
.cr-btn:hover .cr-roll > span:first-child { transform: translateY(-110%); }
.cr-btn:hover .cr-roll > span:last-child { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .cr-roll > span, .cr-btn__chip { transition: none !important; }
}

/* Icon circles (quick view, quick add, card arrows). */
.cr-circle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: var(--cr-btn-bg);
  color: var(--cr-btn-ink);
  cursor: pointer;
  transition: background 0.35s var(--cr-ease), transform 0.35s var(--cr-ease);
}
.theme-root a.cr-circle { color: var(--cr-btn-ink); }
.cr-circle:hover { background: var(--cr-btn-hover); transform: scale(1.06); }
.cr-circle svg { width: 17px; height: 17px; }
.cr-circle--ghost { border: 1px solid currentColor; background: transparent; color: inherit; }
.cr-circle--ghost:hover { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-circle--sm { width: 34px; height: 34px; }
.cr-circle--sm svg { width: 14px; height: 14px; }

/* Slider arrows: rounded squares. */
.cr-arrows { display: inline-flex; gap: 8px; }
.cr-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 40px;
  border: 1px solid var(--cr-hairline);
  border-radius: 10px;
  background: var(--cr-bg-soft);
  color: var(--cr-heading);
  cursor: pointer;
  transition: background 0.22s, color 0.22s, opacity 0.22s;
}
.cr-arrow:hover { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-arrow[disabled] { opacity: 0.35; pointer-events: none; }
.cr-arrow svg { width: 16px; height: 16px; }
.cr-arrows--onmedia .cr-arrow { border-color: transparent; background: rgba(255,255,255,0.85); color: #101010; }
.cr-arrows--onmedia .cr-arrow:hover { background: #ffffff; }

/* Slider dots: the current one gets a fine ring. */
.cr-dots { display: flex; align-items: center; justify-content: center; gap: 8px; }
.cr-dots button {
  width: 8px; height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.35;
  cursor: pointer;
  transition: opacity 0.2s, box-shadow 0.2s;
}
.cr-dots button.is-active { position: relative; opacity: 1; box-shadow: 0 0 0 3px transparent, 0 0 0 1.5px currentColor inset, 0 0 0 5px transparent; }
.cr-dots button.is-active::after { content: ""; position: absolute; inset: -5px; border: 1px solid currentColor; border-radius: 50%; }

/* ================================================================ forms */
.cr-input, .theme-root select.cr-input, .theme-root textarea.cr-input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--cr-heading);
  border-radius: var(--cr-form-radius);
  background: var(--cr-bg);
  color: var(--cr-ink);
  font: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cr-input:focus { outline: none; border-color: var(--cr-accent); box-shadow: 0 0 0 1px var(--cr-accent); }
.cr-input::placeholder { color: var(--cr-muted); }
.theme-root textarea.cr-input { min-height: 110px; resize: vertical; border-radius: min(var(--cr-form-radius), 14px); }
.theme-root select.cr-input {
  appearance: none;
  padding-inline-end: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' fill='none'%3E%3Cpath d='m1 1 4.5 4.5L10 1' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
}
[dir="rtl"] .theme-root select.cr-input, .theme-root[dir="rtl"] select.cr-input { background-position: left 15px center; }
.cr-field { display: grid; gap: 6px; margin-bottom: 14px; }
.cr-field > label { font-size: var(--cr-text-s); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* The enhanced dropdown: crown-core.js wraps every theme <select> in .cr-dd. The native select stays (hidden) as
   the value everything reads; the pill button and the floating list are presentation only. */
.theme-root .cr-dd { position: relative; }
.theme-root .cr-dd > select.cr-input { display: none !important; }
.cr-dd__btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 46px;
  padding-block: 5px;
  padding-inline: 16px 14px;
  border: 1px solid var(--cr-heading);
  border-radius: var(--cr-form-radius);
  background: var(--cr-bg); color: var(--cr-ink);
  font: inherit; text-align: start;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.cr-dd__btn:focus-visible { outline: none; border-color: var(--cr-accent); box-shadow: 0 0 0 1px var(--cr-accent); }
.cr-dd__text { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.cr-dd__lab { font-size: var(--cr-text-xs); font-weight: 700; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cr-muted); }
.cr-dd__val { font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cr-dd__chev { flex: 0 0 auto; display: inline-flex; color: var(--cr-muted); transition: transform 0.35s var(--cr-ease); }
.cr-dd.is-open .cr-dd__chev { transform: rotate(180deg); }
.cr-dd__list {
  --dd-shift: 8px;
  position: absolute; top: calc(100% + 6px); inset-inline: 0; z-index: 80;
  max-height: min(300px, 42vh);
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--cr-hairline);
  border-radius: min(var(--cr-form-radius), 16px);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(var(--dd-shift)) scale(0.98);
  transform-origin: top center;
  transition: opacity 0.22s, visibility 0.3s, transform 0.3s var(--cr-ease);
}
.cr-dd--up .cr-dd__list { --dd-shift: -8px; top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.cr-dd.is-open .cr-dd__list { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.cr-dd__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  border-radius: max(calc(min(var(--cr-form-radius), 16px) - 6px), 0px);
  background: none;
  font: inherit; font-weight: 500; color: var(--cr-ink); text-align: start;
  cursor: pointer;
  transition: background 0.15s;
}
.cr-dd__opt:hover, .cr-dd__opt:focus-visible { outline: none; background: var(--cr-bg-alt); }
.cr-dd__opt[aria-selected="true"] { font-weight: 700; }
.cr-dd__opt[aria-selected="true"] .cr-dd__tick { opacity: 1; }
.cr-dd__opt:disabled { opacity: 0.45; cursor: not-allowed; }
.cr-dd__opt:disabled:hover { background: none; }
.cr-dd__tick { flex: 0 0 auto; display: inline-flex; color: var(--cr-accent); opacity: 0; transition: opacity 0.15s; }
.cr-coll__bar .cr-dd { min-width: 210px; }
@media (prefers-reduced-motion: reduce) {
  .cr-dd__list, .cr-dd__chev, .cr-dd__opt { transition: none; }
}

/* Quantity stepper: − field + in one rounded box. */
.cr-qty {
  display: inline-flex; align-items: center;
  overflow: hidden;
  border: 1px solid var(--cr-heading);
  border-radius: var(--cr-form-radius);
  background: var(--cr-bg);
}
.cr-qty button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 42px;
  border: none; background: none; color: inherit;
  font-size: 17px;
  cursor: pointer;
  transition: background 0.15s;
}
.cr-qty button:hover { background: var(--cr-bg-soft); }
.cr-qty input {
  width: 40px; height: 42px;
  border: none; background: none; color: inherit;
  font: inherit; font-weight: 600; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.cr-qty input::-webkit-outer-spin-button, .cr-qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.cr-qty--sm button { width: 30px; height: 32px; font-size: 15px; }
.cr-qty--sm input { width: 30px; height: 32px; font-size: var(--cr-text-s); }

/* Round tick boxes (square with --square). */
.cr-check { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
.cr-check input { position: absolute; opacity: 0; pointer-events: none; }
.cr-check i {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  border: 1px solid var(--cr-heading);
  border-radius: 50%;
  transition: background 0.15s, border-color 0.15s;
}
.cr-check i::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cr-btn-ink); transform: scale(0); transition: transform 0.15s; }
.cr-check input:checked + i { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); }
.cr-check input:checked + i::after { transform: scale(1); }
.cr-check--square i, .cr-check--square i::after { border-radius: 4px; }

/* ================================================================ badges, prices, stock */
.cr-flag {
  position: absolute; top: 12px; inset-inline-start: 12px; z-index: 2;
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  border-radius: 30px;
  background: var(--cr-badge-bg);
  color: var(--cr-badge-ink);
  font-size: var(--cr-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cr-flag--discount { background: var(--cr-discount-bg); color: var(--cr-discount-ink); }

.cr-price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cr-price__amount { font-family: var(--cr-display-font); font-weight: 600; letter-spacing: var(--cr-ls-heading); color: var(--cr-heading); }
.cr-price__was { font-size: 0.86em; color: var(--cr-muted); text-decoration: line-through; }
.cr-price__from { font-size: 0.86em; color: var(--cr-muted); }
.cr-price__chip { padding: 3px 8px; border-radius: 20px; background: var(--cr-discount-bg); color: var(--cr-discount-ink); font-size: var(--cr-text-xs); font-weight: 700; }
.cr-price--onmedia .cr-price__amount { color: inherit; }

.cr-stock { display: inline-flex; align-items: center; gap: 7px; font-size: var(--cr-text-s); color: var(--cr-ok); }
.cr-stock i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cr-stock--low { color: var(--cr-warn); }
.cr-stock--low i { animation: cr-pulse 1.6s ease-out infinite; }
.cr-stock--out { color: var(--cr-muted); }
@keyframes cr-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent); }
  75% { box-shadow: 0 0 0 6px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) { .cr-stock--low i { animation: none; } }

/* ================================================================ notes and the toast */
.cr-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 14px; border-radius: 12px; font-size: var(--cr-text-s); }
.cr-note[hidden] { display: none; }
.cr-note--error { background: color-mix(in srgb, #ff2828 9%, var(--cr-bg)); color: #c22525; }
.cr-note--success { background: color-mix(in srgb, var(--cr-ok) 10%, var(--cr-bg)); color: var(--cr-ok); }
.cr-note svg { flex: 0 0 auto; margin-top: 1px; }

.cr-toast {
  position: fixed; bottom: 26px; left: 50%; z-index: 260;
  padding: 12px 22px;
  border-radius: 40px;
  background: #101013; color: #ffffff;
  font-size: var(--cr-text);
  box-shadow: var(--cr-shadow);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s, transform 0.25s var(--cr-ease);
}
.cr-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.cr-toast--error { background: #b02a20; }

/* ================================================================ scroll reveals */
/* Sections and blocks marked .cr-reveal rise in once seen (crown-core.js adds is-in); data-cr-delay staggers
   siblings. Off (Theme settings → Reveal sections on scroll, Animation none, reduced motion): simply there. */
.cr-reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.05s var(--cr-ease), transform 1.05s var(--cr-ease); }
.cr-reveal.is-in { opacity: 1; transform: none; }
.cr-reveal[data-cr-delay="1"] { transition-delay: 0.12s; }
.cr-reveal[data-cr-delay="2"] { transition-delay: 0.24s; }
.cr-reveal[data-cr-delay="3"] { transition-delay: 0.36s; }
.cr-reveal[data-cr-delay="4"] { transition-delay: 0.48s; }
.cr-reveal--zoom { transform: scale(0.96); }
.cr-reveal--zoom.is-in { transform: scale(1); }
.cr-main[data-cr-reveals="false"] .cr-reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cr-reveal { opacity: 1; transform: none; transition: none; }
}
/* Grids and rails reveal as one group: the row stays put and its children rise in a short stagger (six steps at
   most). Children stay visible wherever motion is off. */
.cr-reveal.cr-reveal--stagger { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  .theme-root:not([data-motion="none"]) .cr-reveal--stagger:not(.is-in) > * { opacity: 0; }
}
.cr-reveal--stagger.is-in > * { animation: cr-rise var(--cr-dur-reveal) var(--cr-ease) backwards; }
.cr-reveal--stagger.is-in > :nth-child(2) { animation-delay: var(--cr-stagger); }
.cr-reveal--stagger.is-in > :nth-child(3) { animation-delay: calc(var(--cr-stagger) * 2); }
.cr-reveal--stagger.is-in > :nth-child(4) { animation-delay: calc(var(--cr-stagger) * 3); }
.cr-reveal--stagger.is-in > :nth-child(5) { animation-delay: calc(var(--cr-stagger) * 4); }
.cr-reveal--stagger.is-in > :nth-child(n+6) { animation-delay: calc(var(--cr-stagger) * 5); }
.cr-reveal--stagger.is-static > * { animation: none; }
.theme-root[data-motion="subtle"] .cr-reveal--stagger.is-in > * { animation-name: cr-fade-in; }
@keyframes cr-rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes cr-fade-in { from { opacity: 0; } }

/* ================================================================ rails (scroll-snap sliders) */
/* Sections set --rail-cols (and --rail-gap); the item width is derived here, so the narrower-screen widths below
   still win. */
.cr-rail {
  --rail-item: calc((100% - (var(--rail-cols, 4) - 1) * var(--rail-gap, 20px)) / var(--rail-cols, 4));
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-item);
  gap: var(--rail-gap, 20px);
  padding-bottom: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.cr-rail::-webkit-scrollbar { display: none; }
.cr-rail > * { min-width: 0; scroll-snap-align: start; }
.cr-rail.is-loading { opacity: 0.4; }
.cr-rail.is-dragging { scroll-snap-type: none; scroll-behavior: auto; cursor: grabbing; user-select: none; }
.theme-root[data-motion="none"] .cr-rail { scroll-behavior: auto; }
@media (max-width: 989px) { .cr-rail { --rail-item: 42%; } }
@media (max-width: 649px) { .cr-rail { --rail-item: 74%; } }
/* The thin progress line under rails on phones. */
.cr-railbar { height: 2px; margin-top: 14px; overflow: hidden; border-radius: 2px; background: var(--cr-hairline); }
.cr-railbar i { display: block; width: 20%; height: 100%; border-radius: 2px; background: var(--cr-heading); transition: transform 0.2s linear; }

/* ================================================================ marquees */
/* The track holds the content twice and travels half its width; right-to-left it starts at the right edge and
   travels the other way. */
.cr-marquee { position: relative; overflow: hidden; white-space: nowrap; }
.cr-marquee__track {
  display: inline-flex; align-items: center; gap: var(--mq-gap, 34px);
  padding-inline-end: var(--mq-gap, 34px);
  animation: cr-marquee calc(var(--mq-duration, 30s) / var(--cr-marquee-speed)) linear infinite;
  will-change: transform;
}
.cr-marquee:hover .cr-marquee__track { animation-play-state: paused; }
.cr-marquee--reverse .cr-marquee__track { animation-direction: reverse; }
[dir="rtl"] .cr-marquee__track { animation-name: cr-marquee-rtl; }
@keyframes cr-marquee { to { transform: translateX(-50%); } }
@keyframes cr-marquee-rtl { to { transform: translateX(50%); } }
@media (prefers-reduced-motion: reduce) { .cr-marquee__track { animation: none; } }
/* Theme editor only: the band holds still, so each word / picture can be pointed at and selected. */
.theme-root[data-design-mode="true"] .cr-marquee__track { animation-play-state: paused; }
.cr-marquee--display { font-family: var(--cr-display-font); font-weight: 600; letter-spacing: var(--cr-ls-heading); }
.cr-marquee__word { font-size: clamp(40px, 7vw, 110px); line-height: 1; }
.cr-marquee__word--outline { color: transparent; -webkit-text-stroke: 1.5px var(--cr-heading); }
:is(.cr-onmedia, .cr-section--dark) .cr-marquee__word--outline { -webkit-text-stroke-color: rgba(255,255,255,0.7); }
.cr-marquee__img { width: clamp(64px, 8vw, 120px); aspect-ratio: 1.6; object-fit: cover; border-radius: 60px; }
.cr-marquee__icon { display: inline-flex; align-items: center; gap: 12px; font-family: var(--cr-display-font); font-size: var(--cr-text-m); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.cr-marquee__icon svg { width: 16px; height: 16px; color: var(--cr-accent); }

/* ================================================================ scrim, drawers, sheets */
.cr-scrim {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
.cr-scrim.is-open { opacity: 1; visibility: visible; }

/* A floating panel inset from the reading-end edge (--left: the start edge); it slides in from its edge and
   leaves quicker than it arrives. */
.cr-drawer {
  position: fixed; top: 12px; bottom: 12px; inset-inline-end: 12px; z-index: 130;
  display: flex; flex-direction: column;
  width: min(430px, calc(100vw - 24px));
  overflow: hidden;
  border-radius: min(var(--cr-card-radius), 24px);
  background: var(--cr-bg);
  color: var(--cr-ink);
  box-shadow: var(--cr-shadow);
  visibility: hidden;
  transform: translateX(calc((100% + 30px) * var(--cr-dir)));
  transition: transform var(--cr-dur-base) var(--cr-ease-exit), visibility var(--cr-dur-base);
}
.cr-drawer.is-open { visibility: visible; transform: none; transition: transform var(--cr-dur-slow) var(--cr-ease), visibility 0s; }
.cr-drawer--left { inset-inline: 12px auto; transform: translateX(calc((-100% - 30px) * var(--cr-dir))); }
.cr-drawer--wide { width: min(500px, calc(100vw - 24px)); }
.cr-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 22px 14px; }
.cr-drawer__head h3 { margin: 0; font-size: var(--cr-h5); }
.cr-drawer__count { margin-inline-start: 6px; font-family: var(--cr-body-font); font-size: var(--cr-text-s); font-weight: 500; color: var(--cr-muted); }
.cr-drawer__close {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--cr-hairline);
  border-radius: 50%;
  background: none; color: inherit;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, transform 0.4s var(--cr-ease);
}
.cr-drawer__close:hover { background: var(--cr-btn-bg); color: var(--cr-btn-ink); transform: rotate(90deg); }
.cr-drawer__close svg { width: 14px; height: 14px; }
.cr-drawer__body { flex: 1 1 auto; padding: 4px 22px 20px; overflow-y: auto; overscroll-behavior: contain; }
.cr-drawer__foot { flex: 0 0 auto; padding: 14px 22px 20px; }

/* A sheet rising inside a drawer (order note, shipping information) over a dim layer. */
.cr-sheet-dim {
  position: absolute; inset: 0; z-index: 5;
  border-radius: inherit;
  background: rgba(0,0,0,0.35);
  opacity: 0; visibility: hidden;
  transition: opacity 0.42s, visibility 0.42s;
}
.cr-drawer.has-sheet .cr-sheet-dim { opacity: 1; visibility: visible; }
.cr-sheet {
  position: absolute; bottom: 0; inset-inline: 0; z-index: 6;
  padding: 20px 22px 24px;
  border-radius: min(var(--cr-card-radius), 24px) min(var(--cr-card-radius), 24px) 0 0;
  background: var(--cr-bg);
  box-shadow: 0 -12px 34px rgba(0,0,0,0.16);
  transform: translateY(105%);
  transition: transform 0.55s var(--cr-ease);
}
.cr-sheet.is-open { transform: none; }
.cr-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cr-sheet__head h4 { margin: 0; font-size: var(--cr-h6); }

/* Phones: the menu drawer is a bottom sheet. */
@media (max-width: 749px) {
  .cr-drawer--sheet {
    top: auto; bottom: 0; inset-inline: 0;
    width: 100%; height: auto; min-height: 60dvh; max-height: 92dvh;
    border-radius: 22px 22px 0 0;
    transform: translateY(105%);
  }
  .cr-drawer--sheet.is-open { transform: none; }
}

/* ================================================================ back to top */
.cr-backtop {
  position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 90;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid var(--cr-hairline);
  border-radius: 50%;
  background: var(--cr-bg);
  color: var(--cr-heading);
  box-shadow: var(--cr-shadow-soft);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
}
.cr-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.cr-backtop:hover { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }

/* ================================================================ shared media helpers */
.cr-media { position: relative; overflow: hidden; background: var(--cr-bg-alt); }
.cr-media img, .cr-media video { width: 100%; height: 100%; object-fit: cover; }
.cr-media--contain img { object-fit: contain; }
.cr-overlay::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0, var(--overlay, 0.45)) 100%);
  pointer-events: none;
}
.cr-overlay--full::after { background: rgba(0,0,0, var(--overlay, 0.35)); }

/* A vertical repeating ribbon of small capitals. */
.cr-ribbon {
  display: flex; align-items: center; gap: 26px;
  overflow: hidden;
  writing-mode: vertical-rl;
  font-size: var(--cr-text-s);
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cr-muted);
}
.cr-text-s { font-size: var(--cr-text-s); }
.cr-text-m { font-size: var(--cr-text-m); }
.cr-muted { color: var(--cr-muted); }

/* ================================================================ announcement strip */
/* Three zones: social / phone at the start, the rotating messages in the middle, a link / locale at the end. */
.cr-utilitybar { background: var(--cr-announce-bg); color: var(--cr-announce-ink); font-size: var(--cr-text-s); }
.cr-utilitybar--accent { background: var(--cr-utility-bg); color: var(--cr-utility-ink); }
.cr-utilitybar__row { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 34px; }
.cr-utilitybar__side { flex: 1 1 0; display: flex; align-items: center; gap: 14px; min-width: 0; }
.cr-utilitybar__side--end { justify-content: flex-end; }
.cr-utilitybar__social { display: inline-flex; align-items: center; gap: 10px; }
.cr-utilitybar__social a { display: inline-flex; opacity: 0.85; transition: opacity 0.2s; }
.cr-utilitybar__social a:hover { opacity: 1; }
.cr-utilitybar__social svg { width: 13px; height: 13px; }
.cr-utilitybar__msgs { position: relative; flex: 0 1 auto; min-height: 18px; overflow: hidden; text-align: center; }
.cr-utilitybar__msg { display: block; overflow: hidden; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.cr-utilitybar__msg[hidden] { display: none; }
.cr-utilitybar__link { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.cr-utilitybar__link svg { width: 13px; height: 13px; }
.cr-utilitybar__link:hover { text-decoration: underline; }
@media (max-width: 749px) {
  .cr-utilitybar__side { display: none; }
  .cr-utilitybar__msgs { flex: 1 1 auto; }
}

/* Language picker (snippets/language-picker.liquid; two published languages or more): a <details> whose button keeps
   the look of the line it sits in (utility bar link, footer locale, header icon row) and a floating list in the
   enhanced dropdown's look. --up opens it upward (the footer), --inline in the flow (the mobile menu). */
.cr-lang { position: relative; }
.cr-utilitybar .cr-lang { z-index: 120; } /* the list falls over the header below */
.cr-lang__toggle { cursor: pointer; list-style: none; user-select: none; }
.cr-lang__toggle::-webkit-details-marker { display: none; }
.cr-lang .cr-lang__chev { display: inline-flex; transition: transform 0.3s var(--cr-ease); }
.cr-lang .cr-lang__chev svg { width: 10px; height: 10px; }
.cr-lang[open] .cr-lang__chev { transform: rotate(180deg); }
.cr-lang__list {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 120;
  display: grid; min-width: 180px; max-height: min(320px, 60vh); overflow: auto;
  padding: 6px;
  border: 1px solid var(--cr-hairline);
  border-radius: min(var(--cr-form-radius), 16px);
  background: var(--cr-bg); color: var(--cr-ink);
  box-shadow: var(--cr-shadow);
  font-size: var(--cr-text); letter-spacing: normal; text-transform: none;
}
.cr-lang--up .cr-lang__list { top: auto; bottom: calc(100% + 8px); }
.cr-lang .cr-lang__opt {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px;
  border-radius: max(calc(min(var(--cr-form-radius), 16px) - 6px), 0px);
  font-weight: 500; color: var(--cr-ink); text-decoration: none;
  transition: background 0.15s;
}
.cr-lang .cr-lang__opt:hover, .cr-lang .cr-lang__opt:focus-visible { outline: none; background: var(--cr-bg-alt); text-decoration: none; }
.cr-lang .cr-lang__opt[aria-current] { font-weight: 700; }
.cr-lang__tick { display: inline-flex; color: var(--cr-accent); opacity: 0; }
.cr-lang__opt[aria-current] .cr-lang__tick { opacity: 1; }
.cr-lang--inline .cr-lang__list { position: static; min-width: min(240px, 100%); margin-top: 10px; box-shadow: none; }
/* Header icon row: globe + code in a pill as tall as the icons (desktop; the mobile menu has its own). */
.cr-lang__iconbtn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding-inline: 12px; border-radius: 21px; font-size: var(--cr-text-s); font-weight: 600; letter-spacing: 0.06em; transition: background 0.2s; }
.cr-lang__iconbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cr-lang__iconbtn > svg { width: 17px; height: 17px; }
.cr-lang--compact .cr-lang__chev { display: none; }
@media (max-width: 989px) { .cr-header__icons .cr-lang { display: none; } }
/* The announcement bar's picker (its "currency / language" option) stands in for the header's. */
:root:has(.cr-utilitybar [data-cr-lang]) .cr-header__icons [data-cr-lang] { display: none; }

/* ================================================================ header */
/* The wrap carries the sticky / transparent / border / hidden states (crown-header.js). */
.cr-header-wrap { position: relative; z-index: 80; transition: transform 0.5s var(--cr-ease); }
.cr-header-wrap.is-sticky { position: sticky; top: 0; }
.cr-header-wrap.is-hidden { transform: translateY(-110%); }
.cr-header { position: relative; background: var(--cr-header-bg); color: var(--cr-header-ink); }
.cr-header__row { display: flex; align-items: center; gap: 22px; min-height: var(--header-h, 66px); }
.cr-header--tall { --header-h: 76px; }
.cr-header--slim { --header-h: 56px; }
.cr-header__logo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; }
.cr-header__logo img { width: auto; max-width: var(--cr-logo-w, 100%); max-height: 44px; }
.cr-header__logotext { font-family: var(--cr-display-font); font-size: 26px; font-weight: 700; letter-spacing: var(--cr-ls-heading); color: inherit; }
.cr-header__nav { display: flex; align-items: center; }
.cr-header__icons { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; margin-inline-start: auto; }
.cr-header__icons--split { margin-inline-start: 0; }
.cr-iconbtn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: none;
  border-radius: 50%;
  background: none; color: inherit;
  cursor: pointer;
  transition: background 0.2s;
}
.cr-iconbtn:hover { background: color-mix(in srgb, currentColor 8%, transparent); }
.cr-iconbtn svg { width: 19px; height: 19px; }
.cr-iconbtn__badge {
  position: absolute; top: 2px; inset-inline-end: 0;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--cr-btn-bg); color: var(--cr-btn-ink);
  font-size: 10px; font-weight: 700;
}
.cr-burger { display: none; }
/* The bag count pulses whenever it changes. */
.cr-iconbtn__badge.is-bumped { animation: cr-bump 0.36s var(--cr-ease); }
@keyframes cr-bump { 40% { transform: scale(1.28); } }

/* Layouts. Centred menu: a three-column row (logo | menu | icons) — never an absolutely centred menu, which would
   become the positioning box of its mega panel and shrink the full-width panel to the menu's width. */
@media (min-width: 990px) {
  .cr-header--center .cr-header__row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .cr-header--center .cr-header__logo { justify-self: start; }
  .cr-header--center .cr-header__icons { justify-self: end; margin-inline-start: 0; }
}
.cr-header--left .cr-header__nav { margin-inline-start: 8px; }
.cr-header--right .cr-header__nav { margin-inline-start: auto; }
.cr-header--right .cr-header__icons { margin-inline-start: 12px; }

/* Pill: the menu and icons ride in a floating rounded bar. */
.cr-header--pill { background: transparent; }
.cr-header--pill .cr-header__row { min-height: 84px; }
.cr-header--pill .cr-header__pillbar {
  display: flex; align-items: center; gap: 4px;
  margin-inline-start: auto;
  padding-block: 6px;
  padding-inline: 22px 8px;
  border-radius: 50px;
  background: var(--cr-header-bg);
  color: var(--cr-header-ink);
  box-shadow: var(--cr-shadow-soft);
}
.cr-header--pill .cr-header__icons { margin-inline-start: 6px; }

/* Bar: one rounded (optionally gradient) bar inset from the page; its mega panel floats just below, as wide. */
.cr-header--bar { padding-block: 10px; background: transparent; }
.cr-header--bar .cr-header__barinner {
  position: relative; z-index: 6;
  display: flex; align-items: center; gap: 22px;
  width: 100%; min-height: 62px;
  padding-inline: 20px;
  border-radius: 18px;
  background: var(--header-gradient, var(--cr-header-bg));
  color: var(--cr-header-ink);
}
.cr-header--bar .cr-mega { top: calc(100% + 6px); border-radius: 24px; }
.cr-header--bar .cr-nav__link { padding-block: 24px; } /* the hover never breaks between the link and its panel */

/* Transparent over the first section: the header stays in flow and the next section is pulled up beneath it by
   the measured header height (--cr-header-pull, crown-header.js); solid again once scrolled. */
.cr-header-wrap.is-transparent:not(.is-solid) .cr-header { background: transparent; color: var(--transparent-ink, #ffffff); }
.cr-header-wrap.is-transparent { margin-bottom: var(--cr-header-pull, 0px); }
/* Not over media: clear over the page in the header's own text colour, nothing pulled beneath it. */
.cr-header-wrap.is-transparent--plain { --transparent-ink: var(--cr-header-ink); }
.cr-header-wrap.is-transparent.is-solid .cr-header { background: var(--cr-header-bg); box-shadow: 0 1px 0 var(--cr-header-line); }
.cr-header-wrap.is-transparent:not(.is-solid) .cr-header--pill .cr-header__pillbar { box-shadow: var(--cr-shadow-soft); }
.cr-header-wrap.is-border .cr-header { box-shadow: 0 1px 0 var(--cr-header-line); }

/* Menu links. */
.cr-nav { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
.cr-nav > li { position: relative; }
.cr-nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px;
  font-size: var(--cr-text);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: opacity 0.2s;
}
.cr-nav__link svg { width: 10px; height: 10px; opacity: 0.7; transition: transform 0.25s var(--cr-ease); }
.cr-nav > li:hover > .cr-nav__link { opacity: 0.55; }
.cr-nav > li:hover > .cr-nav__link svg { transform: rotate(180deg); }
.cr-nav__link--em { font-weight: 700; color: var(--cr-accent); }

/* Dropdowns (children, then grandchildren to the side). Hover intent: a panel waits a beat before closing and a
   touch before opening, so a pointer crossing the bar doesn't flash every panel. Keyboard: open while focus is on
   the link or inside. Not enough room (crown-header.js): --flip opens the other way. */
.cr-drop {
  position: absolute; top: 100%; inset-inline-start: 0; z-index: 90;
  min-width: 230px;
  padding: 14px 0;
  border-radius: 0 0 16px 16px;
  background: var(--cr-bg);
  color: var(--cr-ink);
  box-shadow: var(--cr-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(8px);
  transform-origin: top center;
  transition: opacity 0.35s var(--cr-ease), transform 0.35s var(--cr-ease), visibility 0.35s;
  transition-delay: 0.15s;
}
li:hover > .cr-drop, .cr-drop__item:hover > .cr-drop, .cr-drop.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s; }
:is(li, .cr-drop__item):has(> a:focus-visible, > .cr-drop :focus-visible) > .cr-drop { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s; }
.cr-drop__item { position: relative; }
.cr-drop__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 22px; font-size: var(--cr-text); font-weight: 600; }
.cr-drop__link svg { width: 12px; height: 12px; opacity: 0; transform: translateX(calc(-6px * var(--cr-dir, 1))); transition: opacity var(--cr-dur-fast), transform var(--cr-dur-fast) var(--cr-ease); }
.cr-drop__link:hover svg { opacity: 1; transform: none; }
[dir="rtl"] .cr-drop__link svg { transform: translateX(6px) scaleX(-1); }
[dir="rtl"] .cr-drop__link:hover svg { transform: scaleX(-1); }
.cr-drop__link:hover { color: var(--cr-accent); }
.cr-drop .cr-drop { top: -14px; inset-inline-start: 100%; border-radius: 16px; }
.cr-drop.cr-drop--flip { inset-inline: auto 0; }
.cr-drop .cr-drop.cr-drop--flip { inset-inline: auto 100%; }

/* Mega menu: a full-width panel under the header (a menu item named by a Mega menu block). */
.cr-mega {
  position: absolute; top: 100%; inset-inline: 0; z-index: 85;
  max-height: calc(100dvh - 140px);
  overflow-y: auto;
  border-radius: 0 0 min(var(--cr-card-radius), 26px) min(var(--cr-card-radius), 26px);
  background: var(--cr-bg);
  color: var(--cr-ink);
  box-shadow: var(--cr-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transform-origin: top center;
  transition: opacity var(--cr-dur-base) var(--cr-ease), transform var(--cr-dur-base) var(--cr-ease), visibility var(--cr-dur-base);
  transition-delay: 0.15s;
}
.cr-nav > li.has-mega { position: static; }
.cr-nav > li.has-mega:hover .cr-mega, .cr-mega.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s; }
.cr-nav > li.has-mega:has(:focus-visible) .cr-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0.08s; }
.cr-mega__grid {
  display: grid;
  grid-template-columns: var(--mega-cols, repeat(4, minmax(0, 1fr)));
  gap: 34px;
  max-width: var(--cr-width);
  margin-inline: auto;
  padding: 36px var(--cr-gutter) 40px;
}
.cr-mega__col h6 { margin-bottom: 14px; font-size: var(--cr-text-m); }
.cr-mega__col ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.cr-mega__col a { font-size: var(--cr-text); color: var(--cr-ink); transition: color 0.15s, transform var(--cr-dur-fast) var(--cr-ease); }
.cr-mega__col ul a { display: inline-block; }
.cr-mega__col a:hover { color: var(--cr-accent); }
.cr-mega__col ul a:hover { transform: translateX(calc(4px * var(--cr-dir, 1))); }
.cr-mega__promo { position: relative; aspect-ratio: 8/5; overflow: hidden; border-radius: 16px; }
.cr-mega__promo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.85s var(--cr-ease); }
.cr-mega__promo:hover img { transform: scale(1.05); }
.cr-mega__promo span {
  position: absolute; bottom: 12px; inset-inline-start: 12px;
  padding: 6px 13px;
  border-radius: 30px;
  background: rgba(255,255,255,0.92); color: #101010;
  font-size: var(--cr-text-s); font-weight: 700;
}
/* Rail style: the menu's children in large type beside up to four columns of grandchildren. */
.cr-mega__rail { display: grid; align-content: start; gap: 10px; }
.cr-mega__rail a {
  font-family: var(--cr-display-font);
  font-size: clamp(22px, 1.9vw, 30px);
  font-weight: 700;
  letter-spacing: var(--cr-ls-heading);
  color: var(--cr-heading);
  transition: color 0.2s, transform 0.3s var(--cr-ease);
}
.cr-mega__rail a:hover { color: var(--cr-accent); transform: translateX(calc(8px * var(--cr-dir, 1))); }

@media (max-width: 989px) {
  .cr-header__nav { display: none; }
  .cr-burger { display: inline-flex; }
  .cr-header--center .cr-header__logo { position: absolute; left: 50%; transform: translateX(-50%); }
  .cr-header--pill .cr-header__pillbar { padding: 6px; background: transparent; box-shadow: none; }
}

/* ================================================================ product card */
/* Tile (picture, then the info row: name + price beside the round quick add, swatches below) or overlay (a white
   info bar floating over the picture's foot, with its action circle). The picture is product art contained with
   breathing room; model photographs and placeholders fill the frame. A second view stacked on top fades in on
   hover while the first fades out (cut-outs would show through each other). */
.cr-pcard { position: relative; display: flex; flex-direction: column; min-width: 0; }
.cr-pcard__media-wrap { position: relative; }
.cr-pcard__media {
  position: relative; display: block;
  aspect-ratio: var(--card-ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--cr-pcard-radius);
  background: var(--cr-bg-alt);
}
.cr-pcard__media img { width: 100%; height: 100%; padding: 10%; object-fit: contain; transition: opacity 0.7s ease, transform 0.9s var(--cr-ease); }
.cr-pcard__media img[src*="-model-"], .cr-pcard__media img[src*="/ph-"] { padding: 0; object-fit: cover; }
.cr-pcard__alt { position: absolute; inset: 0; opacity: 0; }
.cr-pcard__media:hover .cr-pcard__alt { opacity: 1; }
.cr-pcard__media:hover img:first-child { transform: scale(1.03); }
.cr-pcard__media:hover:has(.cr-pcard__alt) img:first-child { opacity: 0; }

.cr-pcard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding-top: 12px; }
.cr-pcard__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cr-pcard__info { min-width: 0; }
.cr-pcard__vendor { font-size: var(--cr-text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cr-muted); }
.cr-pcard__name {
  display: -webkit-box;
  overflow: hidden;
  font-size: var(--cr-text);
  font-weight: 500;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.cr-pcard__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.cr-pcard__price .cr-price__amount { font-size: var(--cr-text); }
/* Theme settings → Product cards → Show stock status: a small line under the price. */
.cr-pcard__stock { display: flex; margin-top: 3px; font-size: var(--cr-text-xs); }
.cr-pcard--center .cr-pcard__stock { justify-content: center; }
.cr-pcard--center .cr-pcard__body { align-items: center; text-align: center; }

.cr-pcard--overlay .cr-pcard__media { aspect-ratio: var(--card-ratio, 3 / 4); }
.cr-pcard--overlay .cr-pcard__body {
  position: absolute; bottom: 10px; inset-inline: 10px;
  padding-block: 10px;
  padding-inline: 14px 54px;
  border-radius: calc(var(--cr-pcard-radius) - 4px);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow-soft);
}
.cr-pcard__actions { position: absolute; z-index: 3; display: flex; gap: 8px; }
.cr-pcard--tile .cr-pcard__actions { position: static; }
.cr-pcard--overlay .cr-pcard__actions { bottom: 16px; inset-inline-end: 16px; }

/* Quick view: the eye circle in a picture corner (top when the hover options panel takes the foot). */
.cr-pcard .cr-pcard__eye {
  position: absolute; bottom: 12px; inset-inline-end: 12px; z-index: 5;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s, transform 0.5s var(--cr-ease), background 0.3s;
}
.cr-pcard .cr-pcard__eye--top { top: 12px; bottom: auto; }
.cr-pcard .cr-pcard__eye--drawn { z-index: 3; } /* cards drawn by script (rail tabs, recently viewed) */
.cr-pcard:hover .cr-pcard__eye, .cr-pcard .cr-pcard__eye:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .cr-pcard .cr-pcard__eye { opacity: 1; transform: none; } }

/* Hover options: the first two options (swatches / pills) on a panel that rises over the picture's foot. */
.cr-pcard__opts {
  position: absolute; bottom: 10px; inset-inline: 10px; z-index: 4;
  display: grid; gap: 12px;
  padding: 14px 16px;
  border-radius: calc(var(--cr-pcard-radius) - 4px);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow-soft);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.55s var(--cr-ease);
}
.cr-pcard:hover .cr-pcard__opts, .cr-pcard__opts:focus-within { opacity: 1; pointer-events: auto; transform: none; }
@media (hover: none) { .cr-pcard__opts { display: none; } }
.cr-pcard__opts .cr-optname { display: block; margin-bottom: 7px; font-size: var(--cr-text-s); font-weight: 700; }
.cr-pcard__opts .cr-optname span { font-weight: 400; color: var(--cr-muted); }
.cr-pcard__opts .cr-pills { gap: 6px; }
.cr-pcard__opts .cr-pill { min-width: 0; padding: 7px 13px; border-radius: 30px; font-family: var(--cr-body-font); font-weight: 600; letter-spacing: 0; text-transform: none; }

/* Card blocks (a section on blocks): the choices a merchant makes on the Product card block and its parts. */
.cr-pcard--hover-none .cr-pcard__media:hover img:first-child,
.cr-pcard--hover-lift .cr-pcard__media:hover img:first-child { transform: none; }
.cr-pcard--hover-lift { transition: transform 0.5s var(--cr-ease); }
.cr-pcard--hover-lift:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .cr-pcard--hover-lift, .cr-pcard--hover-lift:hover { transition: none; transform: none; } }
.cr-pcard__name--sm { font-size: var(--cr-text-s); }
.cr-pcard__name--lg { font-size: var(--cr-text-l); }
.cr-pcard__name--lines-1 { -webkit-line-clamp: 1; }
.cr-pcard__name--lines-none { display: block; overflow: visible; -webkit-line-clamp: unset; }
.cr-pcard__badges { display: flex; flex-wrap: wrap; gap: 6px; } /* a badge part without a picture part */
.cr-pcard__badges .cr-flag { position: static; }
.cr-pcard__rating { display: inline-flex; align-items: center; gap: 6px; margin-block-start: 3px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-pcard__stars {
  --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E");
  display: inline-block;
  inline-size: 5.5em; block-size: 1.1em;
  font-size: 12px;
  background: linear-gradient(90deg, var(--cr-heading) var(--rating, 0%), color-mix(in srgb, var(--cr-heading) 20%, transparent) var(--rating, 0%));
  -webkit-mask: var(--star) 0 0 / 1.1em 1.1em repeat-x;
  mask: var(--star) 0 0 / 1.1em 1.1em repeat-x;
}
[dir="rtl"] .cr-pcard__stars { transform: scaleX(-1); }
.cr-pcard__rating--empty { opacity: 0.6; }
.cr-pcard--center .cr-pcard__rating { justify-content: center; }
.cr-pcard__atc { margin-block-start: 6px; }
.cr-pcard__atc.cr-btn { inline-size: 100%; }
.cr-pcard__atc--link { justify-self: start; padding: 0; border: 0; background: none; color: var(--cr-heading); font-size: var(--cr-text); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-pcard__atc--link:disabled { opacity: 0.45; cursor: not-allowed; }
.cr-pcard--center .cr-pcard__atc--link { align-self: center; }
.cr-pcard--overlay .cr-pcard__atc { margin-block-start: 8px; }
/* Theme editor only: a picked product that no longer exists. */
.cr-pcard--missing { gap: 8px; padding: 12px; border: 1px dashed var(--cr-hairline); border-radius: var(--cr-pcard-radius); }
.cr-missing { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 12px; border: 1px dashed var(--cr-muted); border-radius: calc(var(--cr-pcard-radius) - 4px); font-size: var(--cr-text-s); color: var(--cr-muted); text-align: center; }

/* ================================================================ mini card */
/* The horizontal card of the bag's suggestions, search results, the bundle tray, tags and the sticky bar. */
.cr-mini { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px; border-radius: 14px; background: var(--cr-bg); }
.cr-mini--card { box-shadow: var(--cr-shadow-soft); }
.cr-mini--line { border: 1px solid var(--cr-hairline); }
.cr-mini__img { flex: 0 0 auto; width: 58px; aspect-ratio: 4/5; overflow: hidden; border-radius: 10px; background: var(--cr-bg-alt); }
.cr-mini__img--square { aspect-ratio: 1; }
.cr-mini__img img { width: 100%; height: 100%; object-fit: cover; }
.cr-mini__body { flex: 1 1 auto; display: grid; gap: 2px; min-width: 0; }
.cr-mini__title { overflow: hidden; font-size: var(--cr-text); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cr-mini__meta { font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-mini__cta { flex: 0 0 auto; align-self: flex-end; font-size: var(--cr-text-s); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.cr-mini__cta:hover { color: var(--cr-accent); }

/* ================================================================ swatches and option pills */
/* button.cr-swatch > span.cr-swatch__chip, painted by crown-core.js (colour / picture / colour name). A sold-out
   value is faded and struck (::before); ::after is the name tooltip. */
.cr-swatches { display: flex; align-items: center; gap: 7px; }
.cr-swatch { position: relative; display: inline-flex; padding: 0; border: none; background: none; cursor: pointer; }
.cr-swatch__chip {
  display: inline-block;
  width: 20px; height: 20px;
  border: 1px solid var(--cr-hairline);
  border-radius: var(--swatch-radius, 50%);
  background: var(--sw, #ddd);
  background-position: center;
  background-size: cover;
  transition: transform 0.15s;
}
.cr-swatch:hover .cr-swatch__chip { transform: scale(1.12); }
.cr-swatch.is-active .cr-swatch__chip { box-shadow: 0 0 0 2px var(--cr-bg), 0 0 0 3.5px var(--cr-heading); }
.cr-swatch[data-available="false"] .cr-swatch__chip { opacity: 0.4; }
.cr-swatch[data-available="false"]::before { content: ""; position: absolute; top: 50%; left: 2px; right: 2px; z-index: 1; height: 1px; background: var(--cr-muted); pointer-events: none; transform: rotate(-32deg); }
.cr-swatch[data-tip]:hover::after, .cr-swatch[data-tip]:focus-visible::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; z-index: 20;
  padding: 5px 9px;
  border-radius: 6px;
  background: #1c1c1c; color: #fff;
  font-size: 12px; font-weight: 500; line-height: 1.2; letter-spacing: 0; text-transform: none;
  white-space: nowrap;
  pointer-events: none;
  transform: translateX(-50%);
}
.cr-swatch__more { align-self: center; font-size: 10px; font-weight: 700; color: var(--cr-muted); }
.cr-swatch__more:hover { color: var(--cr-heading); }
.cr-pdp .cr-swatch__chip, .cr-qv .cr-swatch__chip { width: 28px; height: 28px; }

.cr-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-pill {
  min-width: 46px;
  padding: 10px 14px;
  border: 1px solid var(--cr-line);
  border-radius: 8px;
  background: var(--cr-bg); color: var(--cr-ink);
  font-family: var(--cr-display-font); font-size: var(--cr-text-s); font-weight: 600;
  letter-spacing: 0.04em; text-align: center; text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cr-pill:hover { border-color: var(--cr-heading); }
.cr-pill.is-active { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-pill.is-off { opacity: 0.4; text-decoration: line-through; }

/* Right-to-left: a badge like "-19%" keeps its order (Arabic badge text still reads right to left). */
[dir="rtl"] :is(.cr-flag, .cr-price__chip) { unicode-bidi: plaintext; }
.cr-dir { display: inline-flex; }
[dir="rtl"] .cr-dir { transform: scaleX(-1); }
/* Right to left: previous / next and deeper / back chevrons point the reading way. */
[dir="rtl"] :is(.cr-arrow, .cr-pagination__btn, .cr-mnav__item, .cr-mnav__back) svg { transform: scaleX(-1); }

/* ================================================================ the bag (cart drawer) */
.cr-meter { margin: 4px 0 14px; }
.cr-meter__label { display: block; margin-bottom: 8px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-meter__label strong { color: var(--cr-ink); }
.cr-meter__bar { height: 4px; overflow: hidden; border-radius: 4px; background: var(--cr-hairline); }
.cr-meter__bar i { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--cr-heading); transition: width 0.9s var(--cr-ease); }
.cr-meter.is-done .cr-meter__bar i { background: var(--cr-ok); }

/* Lines: a framed row (picture, name / variant / price, quantity pill + remove). A line just added settles in once
   the drawer has begun to arrive; a changed quantity ticks into place. */
.cr-lines { display: grid; gap: 12px; }
.cr-line {
  display: flex; gap: 12px;
  padding: 10px;
  border: 1px solid var(--cr-hairline);
  border-radius: 16px;
  transition: opacity 0.25s, transform 0.3s var(--cr-ease);
}
.cr-line.is-busy { opacity: 0.55; pointer-events: none; }
.cr-line.is-entering { animation: cr-line-in var(--cr-dur-slow) var(--cr-ease) 0.2s backwards; }
.cr-line.is-updated :is(.cr-qty input, .cr-line__price) { animation: cr-tick-in var(--cr-dur-base) var(--cr-ease); }
@keyframes cr-line-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes cr-tick-in { from { opacity: 0; transform: translateY(5px); } }
.cr-line__img { flex: 0 0 auto; width: 82px; aspect-ratio: 4/5; overflow: hidden; border-radius: 12px; background: var(--cr-bg-alt); }
.cr-line__img img { width: 100%; height: 100%; object-fit: cover; }
.cr-line__body { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.cr-line__top { display: flex; justify-content: space-between; gap: 10px; }
.cr-line__title { font-size: var(--cr-text); font-weight: 600; }
.cr-line__variant { margin-top: 2px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-line__price { font-family: var(--cr-display-font); font-weight: 600; white-space: nowrap; }
.cr-line__bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.cr-line__remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border: 1px solid var(--cr-hairline);
  border-radius: 50%;
  background: none; color: var(--cr-muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.cr-line__remove:hover { border-color: var(--cr-discount-bg); background: var(--cr-discount-bg); color: #fff; }
.cr-line__remove svg { width: 14px; height: 14px; }

/* "You may also like": a one-card rail with dots. */
.cr-xsell { margin-top: 20px; }
.cr-xsell__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cr-xsell__head h4 { margin: 0; font-size: var(--cr-text-m); }

/* Foot: order note / shipping information openers between dashed rules, totals, View bag + Checkout. */
.cr-cartrow { display: flex; align-items: center; gap: 18px; padding: 12px 0; border-top: 1px dashed var(--cr-hairline); border-bottom: 1px dashed var(--cr-hairline); }
.cr-cartrow button { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; color: inherit; font: inherit; font-size: var(--cr-text-s); font-weight: 700; cursor: pointer; }
.cr-cartrow button svg { width: 15px; height: 15px; }
.cr-cartrow button:hover { color: var(--cr-accent); }
.cr-totals { display: grid; gap: 3px; padding-top: 12px; }
.cr-totals__sub { display: flex; justify-content: space-between; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-totals__grand { display: flex; align-items: baseline; justify-content: space-between; }
.cr-totals__grand strong { font-family: var(--cr-display-font); font-size: var(--cr-h5); font-weight: 600; }
.cr-totals__grand span { font-family: var(--cr-display-font); font-size: var(--cr-h5); font-weight: 700; }
.cr-drawer__cta { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin-top: 12px; }
.cr-drawer__cta .cr-btn svg { width: 15px; height: 15px; }
.cr-fineprint { margin-top: 10px; font-size: var(--cr-text-xs); color: var(--cr-muted); text-align: center; }

.cr-empty { display: grid; justify-items: center; gap: 14px; padding: 44px 10px; text-align: center; }
.cr-empty svg { width: 44px; height: 44px; opacity: 0.3; }
.cr-empty h4 { margin: 0; }
.cr-empty p { margin: 0; color: var(--cr-muted); }

/* ================================================================ quick view */
/* A wide drawer whose pictures take the whole top (bleeding past the body padding to the drawer's rounded top
   corners) with the close button floating over them. Theme settings → Quick view images: grid (two-up squares, 2px
   joints) or slider (one picture and a peek of the next, with arrows). The strip form (.cr-qv__gallery outside the
   quick view) is the product-page embed's. */
.cr-qv__gallery { display: flex; gap: 8px; margin-bottom: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 16px; }
.cr-qv__gallery::-webkit-scrollbar { display: none; }
.cr-qv__gallery img { flex: 0 0 82%; aspect-ratio: 4/5; object-fit: cover; border-radius: 12px; background: var(--cr-bg-alt); scroll-snap-align: start; }
.cr-qv.cr-drawer--wide { width: min(660px, calc(100vw - 24px)); }
.cr-qv .cr-drawer__head { position: absolute; top: 0; inset-inline-end: 0; z-index: 3; padding: 14px; }
.cr-qv .cr-drawer__close { background: var(--cr-bg); }
.cr-qv .cr-drawer__body { padding-top: 0; }
.cr-qv__media { position: relative; margin: 0 -22px 18px; }
.cr-qv .cr-qv__gallery { margin: 0; border-radius: 0; }
.cr-qv .cr-qv__gallery img { aspect-ratio: 1 / 1; border-radius: 0; }
.cr-qv .cr-qv__gallery--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; overflow: hidden; scroll-snap-type: none; }
.cr-qv .cr-qv__gallery--grid img { width: 100%; }
.cr-qv .cr-qv__gallery--slider { display: flex; align-items: flex-start; gap: 2px; overflow-x: auto; scroll-snap-type: x mandatory; }
.cr-qv .cr-qv__gallery--slider img { flex: 0 0 68%; width: 68%; min-width: 0; height: auto; scroll-snap-align: start; }
.cr-qv__nav { position: absolute; bottom: 14px; inset-inline-end: 14px; z-index: 2; display: flex; gap: 6px; }
.cr-qv__nav .cr-arrow { width: 36px; height: 36px; border: 1px solid var(--cr-hairline); border-radius: 50%; background: var(--cr-bg); color: var(--cr-ink); }
.cr-qv__nav .cr-arrow:hover { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-qv__loading { display: grid; place-items: center; padding: 60px 0; }
.cr-qv__title { margin-bottom: 4px; font-size: var(--cr-h5); }
.cr-qv__desc { margin-bottom: 12px; font-size: var(--cr-text); color: var(--cr-muted); }
.cr-qv__opt { margin-bottom: 14px; }
.cr-qv__opt > label { display: block; margin-bottom: 8px; font-size: var(--cr-text-s); font-weight: 700; }
.cr-qv__opt > label span { font-weight: 400; color: var(--cr-muted); }
.cr-qv__buys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 12px; }
.cr-qv__link { display: block; margin-top: 4px; font-size: var(--cr-text-s); text-align: center; text-decoration: underline; text-underline-offset: 3px; }
.cr-qv__link:hover { color: var(--cr-accent); }

/* The delivery / reassurance box and the share row (quick view and product page). */
.cr-infobox { display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; border-radius: 14px; background: var(--cr-bg-soft); font-size: var(--cr-text-s); }
.cr-infobox svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; }
.cr-infobox strong { display: block; }
.cr-infobox span { color: var(--cr-muted); }
.cr-share { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.cr-share a { display: inline-flex; opacity: 0.75; transition: opacity 0.2s, transform 0.2s; }
.cr-share a:hover { opacity: 1; transform: translateY(-2px); }
.cr-share svg { width: 16px; height: 16px; }
.cr-share__help { margin-inline-start: auto; border: none; background: none; color: inherit; font-family: inherit; font-size: var(--cr-text-s); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-share__help:hover { color: var(--cr-accent); }

/* ================================================================ search drawer */
.cr-search__form { position: relative; margin-bottom: 16px; }
.cr-search__form input { height: 50px; padding-inline: 20px 56px; border-radius: 40px; }
.cr-search__form .cr-circle { position: absolute; top: 4px; inset-inline-end: 5px; }
.cr-search__hintrow { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.cr-search__hint { padding: 7px 14px; border: 1px solid var(--cr-hairline); border-radius: 30px; background: none; color: inherit; font-size: var(--cr-text-s); cursor: pointer; transition: background 0.2s, color 0.2s; }
.cr-search__hint:hover { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-search__results { display: grid; gap: 10px; }
.cr-search__none { padding: 14px 0; }
.cr-search__viewall { margin-top: 14px; }
/* Count tabs (Products / Collections). */
.cr-tabs { display: flex; gap: 20px; margin-bottom: 14px; border-bottom: 1px solid var(--cr-hairline); }
.cr-tab {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 2px 12px;
  border: none; background: none;
  font: inherit; font-weight: 700; color: var(--cr-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.cr-tab__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--cr-bg-alt); color: var(--cr-muted);
  font-size: 11px; font-weight: 700;
}
.cr-tab.is-active { color: var(--cr-heading); }
.cr-tab.is-active .cr-tab__count { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-tab.is-active::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px; background: var(--cr-heading); }

/* ================================================================ mobile menu */
/* A bottom sheet on phones (a drawer above): large display-type rows; a parent slides to its own panel. */
.cr-mnav { display: grid; gap: 2px; padding-top: 6px; }
.cr-mnav__item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%;
  padding: 13px 4px;
  border: none; background: none;
  font-family: var(--cr-display-font);
  font-size: clamp(22px, 6vw, 28px);
  font-weight: 700;
  letter-spacing: var(--cr-ls-heading);
  color: var(--cr-heading);
  text-align: start;
  cursor: pointer;
}
.cr-mnav__item svg { flex: 0 0 auto; width: 18px; height: 18px; }
.cr-mnav__sub .cr-mnav__item { font-size: clamp(18px, 5vw, 22px); font-weight: 600; }
.cr-mnav__sub .cr-mnav__item--grand { padding-inline-start: 18px; font-size: 16px; font-weight: 500; }
.cr-mnav__back { display: inline-flex; align-items: center; gap: 8px; padding: 8px 0 14px; border: none; background: none; font: inherit; font-weight: 700; color: var(--cr-muted); cursor: pointer; }
.cr-mnav__back svg { width: 15px; height: 15px; }
.cr-mnav__panel[hidden] { display: none; }
.cr-mnav__foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 20px 4px 4px; border-top: 1px solid var(--cr-hairline); }
.cr-mnav__social { display: inline-flex; gap: 14px; }
.cr-mnav__social svg { width: 18px; height: 18px; }

/* ================================================================ footer */
/* A dark rounded card inset from the page: brand column (logo, about, social circles) beside the statement, the
   link / text columns and the subscribe field (accent button inside the pill); the bottom row carries the locale,
   legal links, payment marks and ©. Phones: the columns fold into accordions. */
.cr-footer-zone { padding: 0 12px 12px; background: var(--cr-bg); }
.cr-footer { overflow: hidden; border-radius: var(--cr-card-radius); background: var(--cr-footer-bg); color: var(--cr-footer-ink); }
.cr-footer__inner { padding: clamp(30px, 5vw, 64px) clamp(20px, 3.6vw, 56px) 0; }
.cr-footer__top { display: grid; grid-template-columns: minmax(240px, 340px) 1fr; gap: clamp(28px, 5vw, 80px); padding-bottom: clamp(26px, 4vw, 48px); }
.cr-footer__brand { display: grid; align-content: start; gap: 16px; }
.cr-footer__brand img { width: auto; max-height: 46px; }
.cr-footer__logotext { font-family: var(--cr-display-font); font-size: 30px; font-weight: 700; color: var(--cr-footer-heading); }
.cr-footer__brand p { margin: 0; font-size: var(--cr-text-s); line-height: 1.6; }
.cr-footer__social { display: flex; gap: 10px; }
.cr-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--cr-footer-line);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.cr-footer__social a:hover { border-color: var(--cr-footer-heading); background: var(--cr-footer-heading); color: var(--cr-footer-bg); }
.cr-footer__social svg { width: 15px; height: 15px; }
.cr-footer__right { display: grid; align-content: start; gap: clamp(22px, 3vw, 38px); }
.cr-footer__statement {
  max-width: 700px;
  padding-bottom: clamp(18px, 2.6vw, 30px);
  border-bottom: 1px solid var(--cr-footer-line);
  font-family: var(--cr-display-font);
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: var(--cr-ls-heading);
  color: var(--cr-footer-heading);
}
.cr-footer__cols { display: grid; grid-template-columns: repeat(var(--fcols, 3),minmax(0,1fr)); gap: 26px; }
.cr-footer__col h6 { margin-bottom: 15px; font-family: var(--cr-display-font); font-size: var(--cr-text-m); color: var(--cr-footer-heading); }
.cr-footer__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cr-footer__col a { font-size: var(--cr-text); color: var(--cr-footer-ink); transition: color 0.15s, transform var(--cr-dur-fast) var(--cr-ease); }
.cr-footer__col ul a { display: inline-block; }
.cr-footer__col a:hover { color: var(--cr-footer-heading); }
.cr-footer__col ul a:hover { transform: translateX(calc(3px * var(--cr-dir, 1))); }
.cr-footer__sub { display: grid; gap: 10px; }
.cr-footer__sub p { margin: 0; font-size: var(--cr-text-s); }
.cr-fsub { position: relative; max-width: 420px; }
.cr-fsub input {
  width: 100%; height: 52px;
  padding-block: 0;
  padding-inline: 20px 130px;
  border: 1px solid var(--cr-footer-line);
  border-radius: 50px;
  background: color-mix(in srgb, var(--cr-footer-heading) 6%, transparent);
  color: var(--cr-footer-heading);
  font: inherit;
}
.cr-fsub input::placeholder { color: var(--cr-footer-ink); }
.cr-fsub input:focus { outline: none; border-color: var(--cr-footer-accent); }
.cr-fsub button {
  position: absolute; top: 5px; bottom: 5px; inset-inline-end: 5px;
  padding-inline: 20px;
  border: none;
  border-radius: 40px;
  background: var(--cr-footer-accent);
  color: #151522;
  font-family: var(--cr-display-font); font-size: var(--cr-text); font-weight: 700;
  cursor: pointer;
  transition: filter 0.2s;
}
.cr-fsub button:hover { filter: brightness(1.08); }
.cr-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px clamp(20px, 3.6vw, 56px) 22px;
  border-top: 1px solid var(--cr-footer-line);
  font-size: var(--cr-text-s);
}
.cr-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; }
.cr-footer__legal a:hover { color: var(--cr-footer-heading); text-decoration: underline; text-underline-offset: 3px; }
.cr-footer__locale { display: inline-flex; align-items: center; gap: 8px; }
.cr-footer__locale svg { width: 15px; height: 15px; }
.cr-footer__bottom .cr-lang__list { inset-inline-end: auto; inset-inline-start: 0; }
.cr-footer__end { display: grid; justify-items: end; gap: 8px; }
.cr-footer__pay { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.cr-footer__pay svg { width: auto; height: 22px; border-radius: 4px; }
@media (max-width: 899px) {
  .cr-footer__top { grid-template-columns: 1fr; }
  .cr-footer__cols { grid-template-columns: 1fr 1fr; }
  .cr-footer__bottom { justify-content: center; }
}
@media (max-width: 649px) {
  .cr-footer__cols { grid-template-columns: 1fr; gap: 0; }
  .cr-footer__col { border-bottom: 1px solid var(--cr-footer-line); }
  .cr-footer__col h6 { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 14px 0; cursor: pointer; }
  .cr-footer__col h6::after { content: "+"; font-size: 18px; font-weight: 400; }
  .cr-footer__col.is-open h6::after { content: "–"; }
  .cr-footer__col ul { max-height: 0; overflow: hidden; transition: max-height 0.35s var(--cr-ease); }
  .cr-footer__col.is-open ul { max-height: 400px; padding-bottom: 14px; }
}

/* ================================================================ accordions */
/* Rows with a drawn plus that turns to a minus; the panel's height is animated by crown-core.js. */
.cr-acc { border-top: 1px solid var(--cr-line); }
.cr-acc__item { border-bottom: 1px solid var(--cr-line); }
.cr-acc__btn {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%;
  padding: 20px 2px;
  border: none; background: none;
  font-family: var(--cr-display-font); font-size: var(--cr-h6); font-weight: 600;
  letter-spacing: var(--cr-ls-heading);
  color: var(--cr-heading);
  text-align: start;
  cursor: pointer;
}
.cr-acc__btn i { position: relative; flex: 0 0 auto; width: 16px; height: 16px; }
.cr-acc__btn i::before, .cr-acc__btn i::after { content: ""; position: absolute; inset: 0; margin: auto; background: currentColor; transition: transform 0.3s var(--cr-ease); }
.cr-acc__btn i::before { width: 16px; height: 1.5px; }
.cr-acc__btn i::after { width: 1.5px; height: 16px; }
.cr-acc__item.is-open .cr-acc__btn i::after { transform: rotate(90deg); }
.cr-acc__panel { max-height: 0; overflow: hidden; transition: max-height 0.6s var(--cr-ease); }
.cr-acc__inner { padding: 0 2px 20px; color: var(--cr-muted); }
.cr-acc__inner table { width: 100%; border-collapse: collapse; font-size: var(--cr-text-s); }
.cr-acc__inner td, .cr-acc__inner th { padding: 8px 10px; border: 1px solid var(--cr-line); text-align: start; }

/* ================================================================ popups (size chart, newsletter) */
/* A centred card over a dim layer; it stays visible while it leaves. */
.cr-popup {
  position: fixed; inset: 0; z-index: 150;
  display: grid; place-items: center;
  padding: 20px;
  visibility: hidden;
  transition: visibility 0.3s;
}
.cr-popup.is-open { visibility: visible; }
.cr-popup__panel {
  position: relative; z-index: 2;
  width: min(680px, 100%);
  max-height: min(84dvh, 720px);
  padding: clamp(20px, 3.5vw, 36px);
  overflow-y: auto;
  border-radius: min(var(--cr-card-radius), 24px);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow);
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.45s, transform 0.5s var(--cr-ease);
}
.cr-popup.is-open .cr-popup__panel { opacity: 1; transform: none; }
.cr-popup:not(.is-open) .cr-popup__panel { transition: opacity 0.25s, transform 0.3s var(--cr-ease-exit); }
.cr-popup__close { position: absolute; top: 14px; inset-inline-end: 14px; }
.cr-popup__scrim { position: absolute; inset: 0; background: rgba(0,0,0,0.6); opacity: 0; transition: opacity 0.3s; }
.cr-popup.is-open .cr-popup__scrim { opacity: 1; }

/* ================================================================ zoom lightbox */
.cr-zoom {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,8,10,0.94);
  opacity: 0; visibility: hidden;
  transition: opacity var(--cr-dur-base) var(--cr-ease-exit), visibility var(--cr-dur-base);
}
.cr-zoom.is-open { opacity: 1; visibility: visible; transition: opacity var(--cr-dur-slow) var(--cr-ease), visibility 0s; }
.cr-zoom img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 8px; transform: scale(0.97); transition: transform var(--cr-dur-base) var(--cr-ease-exit); }
.cr-zoom.is-open img { transform: none; transition: transform var(--cr-dur-slow) var(--cr-ease); }
.cr-zoom__close { position: absolute; top: 20px; inset-inline-end: 20px; color: #fff; }
.cr-zoom__nav { position: absolute; top: 50%; inset-inline: 20px; display: flex; justify-content: space-between; pointer-events: none; transform: translateY(-50%); }
.cr-zoom__nav .cr-arrow { border-color: rgba(255,255,255,0.25); background: rgba(255,255,255,0.12); color: #fff; pointer-events: auto; }
.cr-zoom__count { position: absolute; bottom: 22px; left: 50%; font-size: var(--cr-text-s); color: rgba(255,255,255,0.75); transform: translateX(-50%); }

/* ================================================================ phones */
@media (max-width: 749px) {
  .cr-drawer__cta { grid-template-columns: 1fr; }
  .cr-footer-zone { padding: 0 8px 8px; }
  .cr-qv__buys { grid-template-columns: 1fr; }
}

/* ================================================================ product grid, loading */
/* Section grids set --grid-cols; narrower screens cap it. */
.cr-grid { display: grid; grid-template-columns: repeat(var(--grid-cols, 4),minmax(0,1fr)); gap: 24px 20px; }
@media (max-width: 1189px) { .cr-grid { --grid-cols: 3 !important; } }
@media (max-width: 899px) { .cr-grid { --grid-cols: 2 !important; gap: 20px 12px; } }
.cr-spin { width: 22px; height: 22px; border: 2px solid var(--cr-hairline); border-top-color: var(--cr-heading); border-radius: 50%; animation: cr-spin 0.8s linear infinite; }
@keyframes cr-spin { to { transform: rotate(360deg); } }

/* ================================================================ Header block sizes (md = the classic heading) */
.cr-head__heading--sm { font-size: var(--cr-h4); }
.cr-head__heading--lg { font-size: var(--cr-h1); }

/* soooks-theme:crown:169557:b70868709918b8df */
/* Crown — homepage and content sections, one block per section type, in the editor's order of appearance:
   bundle builder, slideshow, promo boxes, category pills, showcase banner, revealing text, editorial products,
   media gallery, collection switcher, countdown showcase, testimonials, blog cards, media grid, scrolling
   collections, shop the look, collections gallery, arc showcase, split slideshow, pinned showcase, spotlight trio,
   dual slideshow, product highlights, panel carousel, before / after, FAQ, image with text, collection list,
   newsletter popup, video, image banner, rich text, newsletter, Instagram feed, and the storewide popup.
   Builds on crown-base.css (tokens, buttons, cards, rails, reveals). */

/* ================================================================ bundle builder */
/* Product tiles with their own variant picker and Add, beside a sticky tray of slots that totals the bundle. */
.cr-bundle { display: grid; grid-template-columns: 1fr minmax(300px, 380px); align-items: start; gap: 26px; }
.cr-bundle__grid { display: grid; grid-template-columns: repeat(var(--bundle-cols, 3),minmax(0,1fr)); gap: 20px; }
.cr-bundle__item { display: flex; flex-direction: column; min-width: 0; }
.cr-bundle__item .cr-pcard__media { margin-bottom: 12px; }
.cr-bundle__item h6 { margin: 0 0 2px; font-family: var(--cr-body-font); font-size: var(--cr-text); font-weight: 600; }
.cr-bundle__price { margin-bottom: 10px; }
.cr-bundle__ctl { display: flex; align-items: stretch; gap: 8px; margin-top: auto; }
.cr-bundle__opts { position: relative; flex: 1 1 auto; min-width: 0; }
.cr-bundle__opts select { height: 42px; padding-block: 0; border-radius: 40px; font-size: var(--cr-text-s); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cr-bundle__opts .cr-dd__btn { min-height: 42px; border-radius: 40px; }
.cr-bundle__opts .cr-dd__val { font-size: var(--cr-text-s); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.cr-bundle__add { flex: 0 0 auto; }
.cr-bundle__tray {
  position: sticky; top: 90px;
  padding: 24px;
  border: 1px solid var(--cr-hairline);
  border-radius: var(--cr-card-radius);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow-soft);
}
.cr-bundle__tray h3 { margin-bottom: 6px; font-size: var(--cr-h5); text-align: center; }
.cr-bundle__tray > p { margin-bottom: 18px; font-size: var(--cr-text-s); color: var(--cr-muted); text-align: center; }
.cr-bundle__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cr-bundle__slot {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1;
  overflow: visible;
  border: 1.5px dashed var(--cr-line);
  border-radius: 14px;
  background: var(--cr-bg-soft);
  color: var(--cr-muted);
}
.cr-bundle__slot img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }
.cr-bundle__slot .cr-plus { font-size: 22px; font-weight: 300; }
.cr-bundle__slot-x {
  position: absolute; top: -7px; inset-inline-end: -7px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border: none;
  border-radius: 50%;
  background: var(--cr-btn-bg); color: var(--cr-btn-ink);
  cursor: pointer;
}
.cr-bundle__slot-x svg { width: 9px; height: 9px; }
.cr-bundle__total { display: flex; align-items: center; justify-content: space-between; padding: 14px 2px; border-top: 1px solid var(--cr-hairline); }
.cr-bundle__total strong { font-family: var(--cr-display-font); font-size: var(--cr-text-l); }
.cr-bundle__actions { display: grid; gap: 8px; }
@media (max-width: 989px) {
  .cr-bundle { grid-template-columns: 1fr; }
  .cr-bundle__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cr-bundle__tray { position: static; }
}
@media (max-width: 649px) {
  .cr-bundle__grid { grid-template-columns: 1fr 1fr; }
}

/* ================================================================ marquee band */
/* The marquee section is a flush band whose height comes from its gap setting (--mq-pad). */
.cr-marquee-band { padding-block: var(--mq-pad); }

/* ================================================================ slideshow */
/* Slides cross-fade in place (the active one sets the height); the copy rises line by line when its slide
   arrives. Optional USP strip over the hero's foot (frosted) or below it (band). */
.cr-slideshow { position: relative; overflow: hidden; }
.cr-slideshow--rounded { border-radius: var(--cr-card-radius); }
.cr-slideshow__track { display: flex; height: var(--hero-h, 86dvh); min-height: 480px; }
.cr-slideshow--short .cr-slideshow__track { --hero-h: 62dvh; min-height: 380px; }
.cr-slideshow--full .cr-slideshow__track { --hero-h: calc(100dvh - var(--hero-offset, 100px)); }
.cr-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1.15s ease, visibility 1.15s; }
.cr-slide.is-active { position: relative; z-index: 2; flex: 0 0 100%; min-width: 100%; opacity: 1; visibility: visible; }
.cr-slide__media, .cr-slide__media img, .cr-slide__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-slide__dim { position: absolute; inset: 0; background: rgba(0,0,0,var(--overlay)); }
.cr-slide__wrap { height: 100%; }
.cr-slide__inner { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: clamp(30px, 6vh, 80px); color: #fff; }
.cr-slide--top .cr-slide__inner { justify-content: flex-start; padding-top: clamp(40px, 9vh, 110px); }
.cr-slide--middle .cr-slide__inner { justify-content: center; }
.cr-slide__content { display: grid; justify-items: start; gap: 16px; max-width: 760px; }
.cr-slide--center .cr-slide__content { justify-items: center; margin-inline: auto; text-align: center; }
.cr-slide--right .cr-slide__content { justify-items: end; margin-inline-start: auto; text-align: end; }
.cr-slide__heading { margin: 0; font-size: var(--cr-h1); }
.cr-slide--h2 .cr-slide__heading { font-size: var(--cr-h2); }
.cr-slide__text { max-width: 560px; margin: 0; font-size: var(--cr-text-l); opacity: 0.9; }
.cr-slide__buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cr-slide__kicker { font-size: var(--cr-text-s); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.85; }
.cr-slide__content > * { opacity: 0; transform: translateY(24px); transition: opacity 1.05s var(--cr-ease), transform 1.05s var(--cr-ease); }
.cr-slide.is-active .cr-slide__content > * { opacity: 1; transform: none; }
.cr-slide.is-active .cr-slide__content > *:nth-child(2) { transition-delay: 0.15s; }
.cr-slide.is-active .cr-slide__content > *:nth-child(3) { transition-delay: 0.3s; }
.cr-slide.is-active .cr-slide__content > *:nth-child(4) { transition-delay: 0.45s; }
.theme-root[data-motion="subtle"] .cr-slide__content > * { transform: none; }
.cr-slideshow__arrows { position: absolute; inset-inline-end: var(--cr-gutter); bottom: 34px; z-index: 5; }
.cr-slideshow__dots { position: absolute; bottom: 18px; inset-inline: 0; z-index: 5; color: #fff; }
.cr-usp { position: relative; z-index: 4; background: rgba(16,16,16,0.32); color: #fff; backdrop-filter: blur(8px); }
.cr-usp--over { position: absolute; bottom: 0; inset-inline: 0; z-index: 4; }
.cr-usp--band { background: var(--cr-bg-soft); color: var(--cr-ink); backdrop-filter: none; }
.cr-usp__row { display: grid; grid-template-columns: repeat(var(--usp-cols, 4),minmax(0,1fr)); gap: 18px; padding: 18px 0; }
.cr-usp__item { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.cr-usp__icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,0.35); border-radius: 50%; }
.cr-usp__icon svg { width: 16px; height: 16px; }
.cr-usp__item strong { display: block; font-family: var(--cr-display-font); font-size: var(--cr-text-m); }
.cr-usp__item span { font-size: var(--cr-text-s); opacity: 0.75; }
@media (max-width: 899px) {
  .cr-usp__row { display: flex; grid-template-columns: 1fr; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .cr-usp__row::-webkit-scrollbar { display: none; }
  .cr-usp__item { flex: 0 0 78%; scroll-snap-align: start; }
}
/* With the strip over the hero, the copy, arrows and dots sit above it (--usp-h is measured by crown-sections.js;
   the values here are the fallback before it runs). On phones the arrows and dots get a row of their own between the
   buttons and the strip, so nothing overlaps whatever the copy's length. */
.cr-slideshow--usp { --usp-h: 76px; }
.cr-slideshow--usp .cr-slide__inner { padding-bottom: calc(var(--usp-h) + clamp(28px, 5vh, 64px)); }
.cr-slideshow--usp .cr-slideshow__arrows { bottom: calc(var(--usp-h) + 22px); }
.cr-slideshow--usp .cr-slideshow__dots { bottom: calc(var(--usp-h) + 14px); }
@media (max-width: 749px) {
  .cr-slideshow--usp { --usp-h: 96px; }
  .cr-slideshow--controls .cr-slide__inner { padding-bottom: calc(var(--usp-h, 0px) + 84px); }
  .cr-slideshow--controls .cr-slideshow__arrows { bottom: calc(var(--usp-h, 0px) + 16px); }
  .cr-slideshow--controls .cr-slideshow__dots { bottom: calc(var(--usp-h, 0px) + 34px); }
}

/* ================================================================ promo boxes */
/* Framed cards: picture (with a tag) beside the copy and a button; a big outlined number in the corner. */
.cr-promos { display: grid; grid-template-columns: repeat(var(--promo-cols, 3),minmax(0,1fr)); gap: 20px; }
.cr-promo {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--cr-hairline);
  border-radius: var(--cr-pcard-radius);
  background: var(--cr-bg);
}
.cr-promo__media { position: relative; overflow: hidden; }
.cr-promo__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--cr-ease); }
.cr-promo:hover .cr-promo__media img { transform: scale(1.05); }
.cr-promo__tag { position: absolute; bottom: 10px; inset-inline-start: 10px; font-family: var(--cr-display-font); font-size: var(--cr-text-l); font-weight: 700; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,0.5); text-transform: uppercase; }
.cr-promo__body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 18px; }
.cr-promo__body h4 { margin: 0; font-size: var(--cr-h6); }
.cr-promo__body p { margin: 0; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-promo__body .cr-btn { margin-top: auto; }
.cr-promo__num {
  position: absolute; inset-inline-end: 14px; bottom: 4px;
  font-family: var(--cr-display-font); font-size: clamp(54px, 5vw, 84px); font-weight: 700; line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cr-hairline);
  pointer-events: none;
}
@media (max-width: 989px) { .cr-promos { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .cr-promo__num { display: none; } } /* too narrow for the number and the button */

/* ================================================================ category pills */
/* Pills scattered over a soft blurred colour field; odd / every third pill sit a little off the line. */
.cr-scatter { position: relative; padding: clamp(30px, 5vw, 70px) 0; overflow: hidden; border-radius: var(--cr-card-radius); text-align: center; }
.cr-scatter--bleed { border-radius: 0; }
.cr-scatter__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(38% 55% at 18% 68%, color-mix(in srgb, var(--cr-accent) 16%, transparent), transparent 70%),
    radial-gradient(42% 60% at 82% 30%, color-mix(in srgb, var(--cr-utility-bg) 30%, transparent), transparent 72%),
    radial-gradient(50% 65% at 55% 85%, color-mix(in srgb, #f3c1d8 42%, transparent), transparent 75%);
  filter: blur(30px);
}
.cr-scatter h2 { position: relative; z-index: 2; margin-bottom: clamp(24px, 4vw, 50px); }
.cr-scatter__field { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 18px; max-width: 980px; min-height: 180px; margin-inline: auto; }
.cr-chip {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 16px 30px;
  border: 1px solid var(--cr-heading);
  border-radius: 60px;
  background: color-mix(in srgb, var(--cr-bg) 55%, transparent);
  font-size: var(--cr-text-l); font-weight: 500;
  backdrop-filter: blur(4px);
  transition: background 0.4s, color 0.4s, transform 0.5s var(--cr-ease);
}
.cr-chip:hover { background: var(--cr-btn-bg); color: var(--cr-btn-ink); transform: translateY(-3px) rotate(-1deg); }
.cr-chip--img { padding: 4px; border: 1px solid var(--cr-heading); }
.cr-chip--img img { width: 120px; height: 56px; object-fit: cover; border-radius: 50px; }
.cr-scatter__field .cr-chip:nth-child(odd) { transform: translateY(10px); }
.cr-scatter__field .cr-chip:nth-child(3n) { transform: translateY(-12px) rotate(1.5deg); }
.cr-scatter__field .cr-chip:nth-child(odd):hover, .cr-scatter__field .cr-chip:nth-child(3n):hover { transform: translateY(-3px); }

/* ================================================================ showcase banner */
/* A lifestyle picture with its copy and a picture-chip button beside a tinted panel carrying a rail of small
   product cards (picture + a floating name / price bar). */
.cr-showcase { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 460px; overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-showcase__media { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(22px, 3.4vw, 48px); color: #fff; }
.cr-showcase__media > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-showcase__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(200deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.45)); }
.cr-showcase__media > * { position: relative; z-index: 2; }
.cr-showcase__media h2 { max-width: 520px; font-size: var(--cr-h3); color: #fff; }
.cr-showcase__media p { max-width: 460px; font-size: var(--cr-text-s); opacity: 0.85; }
.cr-showcase__btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; }
.cr-showcase__btn .cr-btn img { width: 30px; height: 30px; margin-inline-start: -8px; object-fit: cover; border-radius: 50%; }
.cr-showcase__panel { position: relative; display: flex; align-items: center; overflow: hidden; background: color-mix(in srgb, var(--cr-ink) 55%, transparent); }
.cr-showcase__panel > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-showcase__rail { --rail-item: 46%; position: relative; z-index: 2; width: 100%; padding: 20px; }
.cr-showcase__card { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; background: var(--cr-bg-alt); }
.cr-showcase__card .cr-media { aspect-ratio: 3/4; background: transparent; }
.cr-showcase__cardbar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: -34px 10px 10px;
  padding-block: 9px;
  padding-inline: 13px 8px;
  border-radius: 11px;
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow-soft);
}
.cr-showcase__cardtext { min-width: 0; }
.cr-showcase__cardbar .t { display: block; overflow: hidden; font-size: var(--cr-text-s); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cr-showcase__cardbar .p { font-family: var(--cr-display-font); font-size: var(--cr-text-s); font-weight: 700; }
@media (max-width: 899px) {
  .cr-showcase { grid-template-columns: 1fr; }
  .cr-showcase__media { min-height: 340px; }
}

/* ================================================================ revealing text */
/* Each word starts faint and lights up as the paragraph scrolls through (crown-sections.js). */
.cr-revtext { text-align: center; }
.cr-revtext p {
  max-width: 1080px;
  margin: 0;
  margin-inline: auto;
  font-family: var(--cr-display-font);
  font-size: var(--rev-size, clamp(28px, 4.2vw, 64px));
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--cr-ls-heading);
}
.cr-revtext .w { color: color-mix(in srgb, var(--rev-ink, var(--cr-heading)) 22%, transparent); transition: color 0.35s linear; }
.cr-revtext .w.is-lit { color: var(--rev-ink, var(--cr-heading)); }

/* ================================================================ editorial products */
.cr-editorial { display: grid; grid-template-columns: repeat(var(--ed-cols, 2),minmax(0,1fr)); gap: 2px; }
.cr-editorial__tile { display: grid; justify-items: start; gap: 20px; padding: clamp(26px, 4vw, 60px) clamp(20px, 3vw, 52px); background: var(--ed-bg, var(--cr-bg-alt)); }
.cr-editorial__tile--alt { --ed-bg: var(--cr-bg-alt); }
.cr-editorial__tile--soft { --ed-bg: var(--cr-bg-soft); }
.cr-editorial__tile .cr-media { justify-self: center; width: min(58%, 340px); aspect-ratio: 4/5; border-radius: var(--cr-pcard-radius); box-shadow: var(--cr-shadow-soft); }
.cr-editorial__tile .cr-media img { transition: transform 1s var(--cr-ease); }
.cr-editorial__tile:hover .cr-media img { transform: scale(1.04); }
.cr-editorial__name { font-family: var(--cr-display-font); font-size: var(--cr-text-l); font-weight: 600; }
.cr-editorial__desc { max-width: 380px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-editorial__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; }
.cr-editorial__row .cr-price__amount { font-size: var(--cr-h6); }
@media (max-width: 899px) { .cr-editorial { grid-template-columns: 1fr; } }

/* ================================================================ media gallery */
/* A five-across rail of tall pictures / videos; a tagged product's mini card rises on hover (or stays). */
.cr-mediagal { --rail-item: calc((100% - 4 * var(--rail-gap, 16px)) / 5); }
.cr-mediagal__item { position: relative; aspect-ratio: 3/4.3; overflow: hidden; border-radius: var(--cr-pcard-radius); }
.cr-mediagal__item img, .cr-mediagal__item video { width: 100%; height: 100%; object-fit: cover; }
.cr-mediagal__item .cr-mini { position: absolute; bottom: 10px; inset-inline: 10px; box-shadow: var(--cr-shadow-soft); opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.55s var(--cr-ease); }
.cr-mediagal__item:hover .cr-mini, .cr-mediagal__item.is-tagged .cr-mini { opacity: 1; transform: none; }
.cr-mediagal__play { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(16,16,16,0.55); color: #fff; cursor: pointer; }
.cr-mediagal__play svg { width: 12px; height: 12px; }
.cr-mediagal__promo { background: var(--mg-bg); display: flex; align-items: center; justify-content: center; padding: 20px; color: #fff; text-align: center; }
.cr-mediagal__promo h4 { margin: 0; font-size: var(--cr-h5); color: inherit; }
@media (max-width: 989px) { .cr-mediagal { --rail-item: 44%; } }
@media (max-width: 649px) { .cr-mediagal { --rail-item: 70%; } }

/* Editorial products, expand style: the hovered tile widens, a picture slides in behind it (from the start, or the
   end for every second tile), the copy turns white and a rotating VIEW DETAIL badge appears at the picture. */
.cr-editorial--expand { display: flex; }
.cr-editorial--expand .cr-editorial__tile { position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; transition: flex-grow 0.9s var(--cr-ease); }
.cr-editorial--expand .cr-editorial__tile:hover { flex-grow: 1.42; }
.cr-editorial__hoverimg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cr-editorial__hoverimg img { width: 100%; height: 100%; object-fit: cover; transform: translateX(calc(var(--ed-slide, -101%) * var(--cr-dir, 1))); transition: transform 0.95s var(--cr-ease); }
.cr-editorial__tile--fromright .cr-editorial__hoverimg img { --ed-slide: 101%; }
.cr-editorial__tile:hover .cr-editorial__hoverimg img { transform: translateX(0); }
.cr-editorial--expand .cr-editorial__tile > *:not(.cr-editorial__hoverimg) { position: relative; z-index: 2; }
.cr-editorial__tile .cr-editorial__name,
.cr-editorial__tile .cr-editorial__desc { transition: color 0.55s ease 0.15s, text-shadow 0.55s ease 0.15s; }
.cr-editorial__tile:hover .cr-editorial__name,
.cr-editorial__tile:hover .cr-editorial__desc,
.cr-editorial__tile:hover .cr-price__amount { color: #ffffff; text-shadow: 0 1px 14px rgba(0,0,0,0.4); }
.cr-editorial__media-wrap { position: relative; justify-self: center; width: min(58%, 340px); }
.cr-editorial__media-wrap .cr-media { display: block; width: 100%; }
.cr-viewdetail {
  position: absolute; top: 50%; inset-inline-start: -34px; z-index: 3;
  display: grid; place-items: center;
  width: 92px; height: 92px;
  opacity: 0;
  scale: 0.6;
  transform: translateY(-50%);
  transition: opacity 0.55s ease 0.2s, scale 0.6s var(--cr-ease) 0.2s;
}
.cr-editorial__tile:hover .cr-viewdetail { opacity: 1; scale: 1; }
.cr-viewdetail svg.cr-viewdetail__ring { position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; animation: cr-rotate 9s linear infinite; }
.cr-viewdetail__ring text { font-size: 11.5px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase; fill: currentColor; }
.cr-viewdetail__dot { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #101013; color: #fff; transition: transform 0.3s var(--cr-ease); }
.cr-viewdetail:hover .cr-viewdetail__dot { transform: scale(1.1); }
.cr-viewdetail__dot svg { width: 16px; height: 16px; }
[dir="rtl"] .cr-viewdetail__dot svg { transform: scaleX(-1); }
@keyframes cr-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cr-viewdetail svg.cr-viewdetail__ring { animation: none; } }
@media (max-width: 899px) {
  .cr-editorial--expand { flex-direction: column; }
  .cr-editorial--expand .cr-editorial__tile:hover { flex-grow: 1; }
  .cr-viewdetail { display: none; }
}

/* ================================================================ collection switcher */
/* Two picture stages around a vertical ribbon: big labels over the start stage swap both stages' pictures; the
   active label is circled by hand. Phones: one stage. */
.cr-switcher { display: grid; grid-template-columns: 1fr auto 1fr; min-height: 520px; overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-switcher--bleed { border-radius: 0; }
.cr-switcher__stage { position: relative; }
.cr-switcher__stage .cr-media { position: absolute; inset: 0; background: var(--cr-bg-alt); }
.cr-switcher__stage .cr-media img { opacity: 0; transition: opacity 0.8s ease; }
.cr-switcher__stage .cr-media img.is-active { opacity: 1; }
.cr-switcher__labels { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 18px; padding: clamp(20px, 3.4vw, 50px); }
.cr-switcher__label {
  position: relative;
  padding: 6px 20px;
  border: none; background: none;
  font-family: var(--cr-display-font); font-size: clamp(26px, 2.6vw, 44px); font-weight: 600;
  letter-spacing: var(--cr-ls-heading);
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: opacity 0.2s;
}
.cr-switcher__label:not(.is-active) { opacity: 0.75; }
.cr-switcher__label.is-active::before { content: ""; position: absolute; inset: -4px -10px; border: 1.5px solid #fff; border-radius: 50%; transform: rotate(-4deg); }
.cr-switcher__label.is-active::after { content: "✦"; position: absolute; top: 0; inset-inline-start: -14px; font-size: 14px; }
.cr-switcher__ribbon { display: flex; align-items: stretch; justify-content: center; padding: 10px 6px; background: var(--cr-bg); }
@media (max-width: 899px) {
  .cr-switcher { grid-template-columns: 1fr; min-height: 0; }
  .cr-switcher__ribbon { display: none; }
  .cr-switcher__stage { aspect-ratio: 4/5; }
  .cr-switcher__stage + .cr-switcher__stage { display: none; }
}

/* ================================================================ countdown showcase */
/* A coloured panel (optional faded picture) with the heading and timer cells, beside two overlay cards. */
.cr-count { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); overflow: hidden; border-radius: var(--cr-card-radius); background: var(--count-bg, #391114); color: var(--count-ink, #ffffff); }
.cr-count__body { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: clamp(26px, 4vw, 60px); }
.cr-count__body > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.cr-count__body > * { position: relative; z-index: 2; }
.cr-count__body h2 { margin: 0; font-size: var(--cr-h2); color: inherit; }
.cr-count__text { max-width: 440px; opacity: 0.85; }
.cr-timer { display: flex; gap: 10px; }
.cr-timer__cell { min-width: 66px; padding: 10px 8px 8px; border-radius: 12px; background: #fff; color: #101010; text-align: center; }
.cr-timer__cell b { display: block; font-family: var(--cr-display-font); font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; line-height: 1; }
.cr-timer__cell span { font-size: var(--cr-text-xs); color: #777; text-transform: capitalize; }
.cr-count__grid { display: grid; grid-template-columns: 1fr 1fr; align-content: center; gap: 14px; padding: clamp(18px, 2.6vw, 34px); }
.cr-count__grid .cr-pcard--overlay .cr-pcard__media { aspect-ratio: 4/4.6; }
@media (max-width: 899px) { .cr-count { grid-template-columns: 1fr; } }

/* ================================================================ testimonials */
.cr-rail--quotes { --rail-cols: 2.15; }
.cr-quote { margin: 0; position: relative; display: grid; align-content: start; gap: 14px; min-height: 240px; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--cr-pcard-radius); background: var(--cr-bg-soft); }
.cr-quote__who { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--cr-hairline); }
.cr-quote__who img { width: 44px; height: 44px; object-fit: cover; border-radius: 50%; }
.cr-quote__who b { font-family: var(--cr-display-font); font-size: var(--cr-text-l); }
.cr-quote__mark { position: absolute; top: 20px; inset-inline-end: 22px; font-family: Georgia, serif; font-size: 54px; line-height: 0.6; color: var(--cr-heading); opacity: 0.9; }
.cr-quote h5 { margin: 0; font-size: var(--cr-text-l); }
.cr-quote blockquote { margin: 0; }
.cr-quote p { margin: 0; font-size: var(--cr-text); color: var(--cr-muted); }

/* ================================================================ blog cards */
/* Post cards in a white panel, columns split by dashed rules. Card blocks: picture shape, hover, alignment, title
   size, excerpt clamp, read-more link. */
.cr-blogpanel { padding: clamp(16px, 2.4vw, 30px); border-radius: var(--cr-card-radius); background: var(--cr-bg); }
.cr-blogpanel--bare { padding: 0; background: none; }
.cr-bloggrid { display: grid; grid-template-columns: repeat(var(--blog-cols, 3),minmax(0,1fr)); gap: 2px; }
.cr-acard { position: relative; display: grid; align-content: start; gap: 12px; padding: clamp(14px, 1.8vw, 24px); border-inline-end: 1px dashed var(--cr-hairline); }
.cr-acard:nth-child(3n) { border-inline-end: none; }
.cr-acard__img { aspect-ratio: 16/10.5; overflow: hidden; border-radius: var(--cr-pcard-radius); }
.cr-acard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--cr-ease); }
.cr-acard:hover .cr-acard__img img { transform: scale(1.05); }
.cr-acard__meta { display: flex; gap: 12px; font-size: var(--cr-text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--cr-muted); }
.cr-acard h4 { margin: 0; font-size: var(--cr-h6); }
.cr-acard p { margin: 0; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-acard .cr-circle--ghost { margin-top: 4px; }
@media (max-width: 989px) {
  .cr-bloggrid { grid-template-columns: 1fr; }
  .cr-acard { border-inline-end: none; border-bottom: 1px dashed var(--cr-hairline); }
}
.cr-acard__img--landscape { aspect-ratio: 4 / 3; }
.cr-acard__img--square { aspect-ratio: 1; }
.cr-acard__img--wide { aspect-ratio: 16 / 9; }
.cr-acard--hover-none:hover .cr-acard__img img, .cr-acard--hover-lift:hover .cr-acard__img img { transform: none; }
.cr-acard--hover-lift { transition: transform 0.5s var(--cr-ease); }
.cr-acard--hover-lift:hover { transform: translateY(-6px); }
@media (prefers-reduced-motion: reduce) { .cr-acard--hover-lift, .cr-acard--hover-lift:hover { transition: none; transform: none; } }
.cr-acard--align-center { justify-items: center; text-align: center; }
.cr-acard--align-center .cr-acard__meta { justify-content: center; }
.cr-acard--align-center .cr-acard__img { justify-self: stretch; }
.cr-acard h4.cr-acard__title--sm { font-size: var(--cr-text-m); }
.cr-acard h4.cr-acard__title--lg { font-size: var(--cr-h5); }
.cr-acard__excerpt--lines-2, .cr-acard__excerpt--lines-3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.cr-acard__excerpt--lines-2 { -webkit-line-clamp: 2; }
.cr-acard__excerpt--lines-3 { -webkit-line-clamp: 3; }
.cr-acard__more { display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin-block-start: 4px; font-size: var(--cr-text); font-weight: 600; color: var(--cr-heading); }
.cr-acard__more:hover { text-decoration: underline; text-underline-offset: 3px; }
.cr-acard--align-center .cr-acard__more { justify-self: center; }

/* ================================================================ media grid (collage) */
/* Rows are sized from the collage's own width (container query), so the cells keep their proportions whatever the
   screen: --collage-row is row height / collage width (short 0.16, medium 0.21, tall 0.27). */
.cr-collage-box { container-type: inline-size; }
.cr-collage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(max(180px, calc(100cqw * var(--collage-row, 0.21))), auto); gap: var(--collage-gap, 14px); }
.cr-collage__cell { position: relative; min-width: 0; min-height: 180px; overflow: hidden; border-radius: var(--cr-pcard-radius); }
.cr-collage__cell img, .cr-collage__cell video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--cr-ease); }
.cr-collage__cell:hover img { transform: scale(1.04); }
.cr-collage--bleed { padding-inline: var(--collage-gap); }
.cr-collage__cell--text { background: var(--tile-bg); color: var(--tile-ink); display: flex; flex-direction: column; justify-content: center; gap: 14px; min-height: 260px; padding: clamp(20px, 2.6vw, 44px); }
.cr-collage__cell--text h3 { margin: 0; font-size: var(--cr-h4); color: inherit; }
.cr-collage__cell--text p { margin: 0; opacity: 0.85; }
.cr-collage__overlay { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(16px, 2.2vw, 30px); background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5)); color: #fff; }
.cr-collage__overlay h3 { margin: 0 0 6px; font-size: var(--cr-h5); color: #fff; }
.cr-collage__overlay p { margin: 0; font-size: var(--cr-text-s); opacity: 0.85; }
.cr-collage__cell[data-span="3"] { grid-column: span 3; }
.cr-collage__cell[data-span="4"] { grid-column: span 4; }
.cr-collage__cell[data-span="5"] { grid-column: span 5; }
.cr-collage__cell[data-span="6"] { grid-column: span 6; }
.cr-collage__cell[data-span="7"] { grid-column: span 7; }
.cr-collage__cell[data-span="8"] { grid-column: span 8; }
.cr-collage__cell[data-span="12"] { grid-column: span 12; }
.cr-collage__cell[data-tall="true"] { grid-row: span 2; }
@media (max-width: 899px) {
  .cr-collage { grid-auto-rows: minmax(max(160px, calc(100cqw * 0.46)), auto); }
  .cr-collage__cell { min-height: 0; }
  .cr-collage__cell[data-span] { grid-column: span 12; }
  .cr-collage__cell[data-span="3"], .cr-collage__cell[data-span="4"], .cr-collage__cell[data-span="5"] { grid-column: span 6; }
  .cr-collage__cell--text { min-height: 220px; }
  .cr-collage__cell--text:not([data-tall="true"]) { grid-column: span 12; } /* a lone half-width text tile left a hole */
}

/* ================================================================ scrolling collections (shelf) */
/* A four-across rail of collection pictures: the name on top, an "Explore" bar rising on hover — or (info style)
   the name at the foot and a white card with the description sliding up on hover. */
.cr-shelf { --rail-item: calc((100% - 3 * var(--rail-gap, 16px)) / 4); }
.cr-shelf__card { position: relative; display: block; aspect-ratio: 4/4.4; overflow: hidden; border-radius: var(--cr-pcard-radius); }
.cr-shelf__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--cr-ease); }
.cr-shelf__card:hover img { transform: scale(1.05); }
.cr-shelf__name { position: absolute; top: 16px; inset-inline: 0; z-index: 2; font-family: var(--cr-display-font); font-size: var(--cr-h5); font-weight: 600; color: #fff; text-align: center; text-shadow: 0 2px 16px rgba(0,0,0,0.4); }
.cr-shelf__name sup { margin-inline-start: 3px; font-size: 0.5em; font-weight: 500; }
.cr-shelf__bar {
  position: absolute; bottom: 12px; inset-inline: 12px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.28);
  color: #fff;
  font-size: var(--cr-text-s); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  backdrop-filter: blur(6px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.5s, transform 0.55s var(--cr-ease);
}
.cr-shelf__card:hover .cr-shelf__bar { opacity: 1; transform: none; }
@media (hover: none) { .cr-shelf__bar { opacity: 1; transform: none; } }
@media (max-width: 989px) { .cr-shelf { --rail-item: 44%; } }
@media (max-width: 649px) { .cr-shelf { --rail-item: 66%; } }
.cr-shelf__info {
  position: absolute; bottom: 12px; inset-inline: 12px; z-index: 3;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--cr-bg);
  color: var(--cr-ink);
  transform: translateY(calc(100% + 14px));
  transition: transform 0.65s var(--cr-ease);
}
.cr-shelf__info h4 { margin: 0 0 6px; font-size: var(--cr-h6); }
.cr-shelf__info p { margin: 0; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-shelf__card--info { overflow: hidden; }
.cr-shelf__card--info:hover .cr-shelf__info, .cr-shelf__card--info:focus-visible .cr-shelf__info { transform: none; }
.cr-shelf__card--info .cr-shelf__bar { display: none; }
.cr-shelf__card--info .cr-shelf__name { top: auto; bottom: 18px; inset-inline: 20px auto; font-size: var(--cr-h5); text-align: start; transition: opacity 0.25s; }
.cr-shelf__card--info:hover .cr-shelf__name { opacity: 0; }
@media (hover: none) { .cr-shelf__info { position: static; margin-top: -60px; transform: none; } }

/* ================================================================ shop the look */
/* A picture with pulsing dots; hovering a dot shows its product's small picture; a click opens the look drawer. */
.cr-look { position: relative; overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-look img { display: block; width: 100%; }
.cr-look__dot {
  position: absolute; top: var(--y); left: var(--x); z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  box-shadow: 0 0 0 5px rgba(255,255,255,0.3);
  cursor: pointer;
  transition: transform 0.25s var(--cr-ease);
}
.cr-look__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #101010; }
.cr-look__dot::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(255,255,255,0.8); border-radius: 50%; animation: cr-dotpulse 2s ease-out infinite; }
@keyframes cr-dotpulse { 0% { transform: scale(0.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.cr-look__dot:hover { transform: scale(1.15); }
.cr-look__preview {
  position: absolute; top: calc(var(--y) - 30px); left: calc(var(--x) + 20px); z-index: 4;
  width: 88px; aspect-ratio: 4/5;
  overflow: hidden;
  border: 1px solid var(--cr-hairline);
  border-radius: 12px;
  background: var(--cr-bg, #fff);
  box-shadow: 0 14px 34px rgba(0,0,0,0.22);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(0.94);
  transition: opacity 0.25s, transform 0.3s var(--cr-ease);
}
.cr-look__preview img { width: 100%; height: 100%; padding: 10%; object-fit: contain; }
.cr-look__dot:hover + .cr-look__preview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cr-look__dot::after { animation: none; } }
.cr-look__intro { margin-bottom: 14px; }
.cr-look__item.is-picked { outline: 2px solid var(--cr-heading); border-radius: 14px; }

/* ================================================================ collections gallery */
/* Tall collection pictures edge to edge, each with a frosted EXPLORE bar. */
.cr-collgal { display: grid; grid-template-columns: repeat(var(--cg-cols, 3),minmax(0,1fr)); gap: 2px; }
.cr-collgal__item { position: relative; display: block; aspect-ratio: var(--cg-ratio, 3/4); overflow: hidden; }
.cr-collgal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--cr-ease); }
.cr-collgal__item:hover img { transform: scale(1.05); }
.cr-collgal__bar {
  position: absolute; bottom: 14px; inset-inline: 14px; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-radius: 6px;
  background: color-mix(in srgb, #9c8577 55%, transparent);
  color: #fff;
  font-size: var(--cr-text-s); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  backdrop-filter: blur(5px);
  transition: background 0.25s;
}
.cr-collgal__item:hover .cr-collgal__bar { background: rgba(16,16,16,0.75); }
@media (max-width: 899px) {
  .cr-collgal { grid-template-columns: 1fr; }
  .cr-collgal__item { aspect-ratio: 4/3; }
}

/* ================================================================ arc showcase */
/* A fan of tilted cards on a dark band under a huge outlined word; advancing slides the whole strip one slot while
   the cards re-tilt (crown-sections.js sets --arc-rot / --arc-y per card), so the fan reads as turning. */
.cr-arc { position: relative; overflow: hidden; background: var(--arc-bg); color: #fff; padding: clamp(40px, 6vw, 90px) 0 clamp(30px, 4vw, 60px); }
.cr-arc__word {
  position: absolute; top: clamp(30px, 6vw, 80px); left: 50%;
  font-family: var(--cr-display-font); font-size: clamp(70px, 14vw, 220px); font-weight: 700; line-height: 1;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255,255,255,0.22);
  pointer-events: none;
  user-select: none;
  transform: translateX(-50%);
}
.cr-arc__track {
  position: relative; z-index: 2;
  display: flex; justify-content: center;
  gap: var(--arc-gap, clamp(18px, 2.6vw, 44px));
  padding-top: clamp(50px, 9vw, 150px);
  transition: transform 0.7s var(--cr-ease);
  will-change: transform;
}
.cr-arc__card {
  position: relative;
  flex: 0 0 clamp(150px, 18vw, 260px);
  aspect-ratio: 3/4.2;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  transform: rotate(var(--arc-rot, 0deg)) translateY(var(--arc-y, 0px));
  transition: transform 0.7s var(--cr-ease);
}
.cr-arc__card img { width: 100%; height: 100%; object-fit: cover; }
.cr-arc__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.1), rgba(0,0,0,0.55) 85%); }
.cr-arc__card:hover { transform: rotate(0deg) translateY(calc(var(--arc-y, 0px) - 14px)); }
.cr-arc__label { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 16px 14px; color: #fff; text-align: center; }
.cr-arc__label span { display: block; margin-bottom: 6px; font-size: var(--cr-text-xs); letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.cr-arc__label b { display: block; font-family: var(--cr-display-font); font-size: var(--cr-text-l); font-weight: 700; line-height: 1.15; text-transform: uppercase; }
.cr-arc__nav { position: relative; z-index: 3; display: flex; justify-content: center; gap: 10px; margin-top: clamp(22px, 3.5vw, 44px); }
.cr-arc__nav .cr-arrow { width: 44px; height: 44px; border-color: rgba(255,255,255,0.4); border-radius: 50%; background: transparent; color: #fff; }
.cr-arc__nav .cr-arrow:hover { background: #fff; color: #101010; }

/* ================================================================ split slideshow */
/* Each slide: two half pictures (or a colour panel) with the heading and a product card centred over the seam. */
.cr-split { position: relative; overflow: hidden; }
.cr-split__slide { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; opacity: 0; visibility: hidden; transition: opacity 1.05s ease, visibility 1.05s; }
.cr-split__slide.is-active { position: relative; flex: 0 0 100%; min-width: 100%; min-height: min(88dvh, 760px); opacity: 1; visibility: visible; }
.cr-split__half { position: relative; background: var(--half-bg); }
.cr-split__half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-split__content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 30px; text-align: center; }
.cr-split__content .cr-mini--card { width: min(300px, 80%); background: var(--cr-bg); }
.cr-split__heading { max-width: 640px; margin: 0; font-size: var(--cr-h3); color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,0.35); }
/* Over two colour panels (no pictures) the heading takes the theme's heading colour, without the photo shadow. */
.cr-split__heading.cr-split--panelheading { color: var(--cr-heading); text-shadow: none; }
.cr-split__card { width: min(320px, 84%); overflow: hidden; border-radius: var(--cr-pcard-radius); background: var(--cr-bg); box-shadow: var(--cr-shadow); text-align: start; }
.cr-split__card .cr-media { aspect-ratio: 4/4.2; background: var(--cr-bg-alt); }
.cr-split__card .cr-split__cardbody { display: grid; gap: 3px; padding: 13px 16px 15px; text-align: center; }
.cr-split__card .cr-split__cardbody b { font-size: var(--cr-text); font-weight: 600; }
.cr-split__card .cr-split__cardbody span { font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-split__card .u { font-size: var(--cr-text-s); text-decoration: underline; text-underline-offset: 3px; opacity: 0; transition: opacity 0.25s; }
.cr-split__card:hover .u { opacity: 1; }
.cr-split__dots { position: absolute; top: 50%; inset-inline-end: 22px; z-index: 5; flex-direction: column; color: #fff; transform: translateY(-50%); }
@media (max-width: 749px) {
  .cr-split__slide { grid-template-columns: 1fr; }
  .cr-split__half:last-child { display: none; }
}

/* ================================================================ pinned showcase */
/* A scroll panorama. Cover panels stick to the top of the WHOLE pin container (each stays until the next has fully
   covered it); gap spacers between them pace the sweep and the tail gap holds the last one. Every panel's card sits
   in a viewport-fixed layer clipped by its panel (clip-path: overflow cannot clip a fixed descendant), so all cards
   paint at the same screen spot: the incoming panel's edge sweeps the old card's content away. The cards scale with
   the scroll (crown-sections.js: --pin-scale 0.6 → 1 as the section arrives, back to 0.6 as it leaves) and the
   picture drifts (--pin-par; the 18% bleed covers that travel). */
.cr-pin { position: relative; }
.cr-pin__gap { height: 60vh; }
.cr-pin__gap--tail { height: 30vh; }
.cr-pin__panel { position: sticky; top: 0; height: 100vh; overflow: hidden; clip-path: inset(0); }
.cr-pin__panel .cr-media { position: absolute; inset: -18% 0; background: #101013; }
.cr-pin__panel .cr-media img { transform: translateY(var(--pin-par, 0px)); will-change: transform; }
.cr-pin__hold { position: fixed; inset: 0; pointer-events: none; }
.cr-pin__card {
  position: absolute; top: 50%; inset-inline-start: clamp(16px, 4vw, 70px); z-index: 3;
  display: flex; flex-direction: column;
  width: min(480px, calc(100vw - 32px));
  height: min(76vh, 700px);
  overflow: hidden;
  border-radius: 14px;
  background: var(--pin-card-bg, #ced3d6);
  color: #17181b;
  opacity: 0.9;
  pointer-events: auto;
  transform: translateY(-50%) scale(var(--pin-scale, 1));
  transform-origin: center;
  transition: transform 0.45s var(--cr-ease); /* each scrubbed value glides in */
}
.cr-pin__cardhead { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid rgba(23, 24, 27, 0.14); font-size: var(--cr-text-s); font-weight: 700; }
.cr-pin__cardhead span:last-child { font-weight: 500; color: #55575c; }
.cr-pin__cardbody { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 22px; padding: 20px 26px; }
.cr-pin__cardbody h3 { max-width: 340px; margin: 0; font-size: clamp(24px, 2.1vw, 34px); color: inherit; }
.cr-pin__thumbs { display: flex; gap: 6px; padding: 0 22px 22px; }
.cr-pin__thumbs a { display: block; width: 72px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: #fff; transition: transform 0.25s var(--cr-ease), box-shadow 0.25s; }
.cr-pin__thumbs a:hover { box-shadow: var(--cr-shadow-soft); transform: translateY(-4px); }
.cr-pin__thumbs img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 749px) {
  .cr-pin__card { top: auto; bottom: 16px; height: auto; min-height: 62vh; transform: translateY(0) scale(var(--pin-scale, 1)); }
  .cr-pin__thumbs a { width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-pin { --pin-scale: 1 !important; }
  .cr-pin__card { transition: none; }
}

/* ================================================================ spotlight trio */
/* A 200vh scroll room with a sticky stage: it starts coloured with one framed, zoomed picture in the centre; past
   the halfway trigger (crown-sections.js adds is-past) the stage turns to the page colour, the picture shrinks into
   its frame, a ribbon line drifts in and the trio composes around it (heading, side cards, info card). */
.cr-spot { position: relative; height: 200vh; }
.cr-spot__stage {
  position: sticky; top: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100vh;
  overflow: hidden;
  background: var(--spot-bg, #131c3a);
  transition: background 1s ease;
}
.cr-spot.is-past .cr-spot__stage { background: var(--cr-bg); }
.cr-spot__ribbon {
  position: absolute; top: 52%; left: -2%; right: -2%; z-index: 1;
  width: 104%; height: clamp(120px, 24vh, 260px);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%);
  transition: opacity 1.1s ease 0.35s;
}
.cr-spot.is-past .cr-spot__ribbon { opacity: 1; }
.cr-spot__ribbon path { animation: cr-ribbon 8s ease-in-out infinite alternate; }
@keyframes cr-ribbon {
  from { d: path("M-20 210 C 260 60, 520 60, 780 180 S 1240 320, 1520 170 S 1880 40, 2020 120"); }
  to { d: path("M-20 130 C 260 250, 520 230, 780 110 S 1240 40, 1520 200 S 1880 290, 2020 170"); }
}
@media (prefers-reduced-motion: reduce) { .cr-spot__ribbon path { animation: none; } }
.cr-spot__head {
  position: relative; z-index: 2;
  max-width: 720px;
  margin-bottom: clamp(18px, 3vh, 40px);
  padding: 0 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s ease 0.25s, transform 1s var(--cr-ease) 0.25s;
}
.cr-spot.is-past .cr-spot__head { opacity: 1; transform: none; }
.cr-spot__head h2 { margin-bottom: 10px; font-size: var(--cr-h3); }
.cr-spot__head p { margin: 0; color: var(--cr-muted); }
.cr-spot__row { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(14px, 2vw, 26px); width: min(1160px, calc(100vw - 2 * var(--cr-gutter))); }
.cr-spot__side { opacity: 0; transition: opacity 1s ease 0.45s, transform 1s var(--cr-ease) 0.45s; }
.cr-spot__side--left { transform: translateX(-70px); }
.cr-spot__side--right { transform: translateX(70px); }
.cr-spot.is-past .cr-spot__side { opacity: 1; transform: none; }
.cr-spot__center { position: relative; z-index: 3; }
.cr-spot__panel { position: relative; aspect-ratio: 3/3.8; border-radius: 14px; background: var(--spot-bg, #131c3a); }
.cr-spot__panel > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transform: scale(1.55);
  transform-origin: center 40%;
  transition: transform 1.2s var(--cr-ease);
  will-change: transform;
}
.cr-spot.is-past .cr-spot__panel > img { transform: scale(1); }
.cr-spot__clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.cr-spot__frame { position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.6); border-radius: 14px; opacity: 1; pointer-events: none; transition: opacity 1s ease 0.5s; }
.cr-spot.is-past .cr-spot__frame { opacity: 0; }
.cr-spot__info {
  position: absolute; bottom: 0; inset-inline: 0 14%; z-index: 3;
  padding: 16px 20px 18px;
  border-radius: 0;
  border-start-end-radius: 12px;
  background: var(--cr-bg);
  color: var(--cr-ink);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s ease 0.7s, transform 0.9s var(--cr-ease) 0.7s;
}
.cr-spot.is-past .cr-spot__info { opacity: 1; transform: none; }
.cr-spot__info h4 { margin: 0 0 8px; font-size: var(--cr-h6); }
.cr-spot__info ul { display: grid; gap: 5px; margin: 0; padding: 0; padding-inline-start: 18px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-spot__info .cr-mini__cta { display: inline-block; margin-top: 10px; }
@media (max-width: 899px) {
  .cr-spot { height: 180vh; }
  .cr-spot__row { grid-template-columns: 1fr; width: min(420px, calc(100vw - 2 * var(--cr-gutter))); }
  .cr-spot__side { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-spot { height: auto; }
  .cr-spot__stage { position: static; height: auto; padding: var(--cr-space) 0; }
  .cr-spot__panel > img { transform: none; }
}

/* ================================================================ dual slideshow */
/* Two rounded slides side by side (a picture cell, or a colour panel with a ghost word), each pair advancing
   together with the arrows at the outer edges. */
.cr-dual { position: relative; }
.cr-dual__pair { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 16px; }
.cr-dual__cell { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(72dvh, 620px); padding: clamp(20px, 3vw, 44px); overflow: hidden; border-radius: var(--cr-card-radius); color: #fff; }
.cr-dual__cell { background: var(--cell-bg); }
.theme-root .cr-dual__cell .has-ink { color: var(--ink); }
.cr-dual__text { max-width: 420px; opacity: 0.85; }
.cr-dual__cell > img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-dual__cell::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(190deg, rgba(0,0,0,0.05), rgba(0,0,0,0.5)); }
.cr-dual__cell > *:not(img) { position: relative; z-index: 2; }
.cr-dual__cell h3 { margin: 0 0 8px; font-size: var(--cr-h4); color: inherit; }
.cr-dual__cell--panel { align-items: center; justify-content: flex-start; padding-top: clamp(30px, 4.5vw, 60px); text-align: center; }
.cr-dual__cell--panel::after { display: none; }
.cr-dual__ghost {
  position: absolute; top: 42%; left: 0; right: 0; z-index: 1 !important;
  font-family: var(--cr-display-font); font-size: clamp(50px, 7.5vw, 120px); font-weight: 700; line-height: 1;
  white-space: nowrap; text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.16);
  pointer-events: none;
}
.cr-dual__buttons { display: flex; flex-wrap: wrap; gap: 10px; }
/* Previous at the reading start, next at the reading end. */
.cr-dual__arrows-l { position: absolute; top: 50%; inset-inline-start: 14px; z-index: 6; transform: translateY(-50%); }
.cr-dual__arrows-r { position: absolute; top: 50%; inset-inline-end: 14px; z-index: 6; transform: translateY(-50%); }
@media (max-width: 899px) {
  .cr-dual__pair { grid-template-columns: 1fr; }
  .cr-dual__cell { min-height: 420px; }
}

/* ================================================================ product highlights */
/* Price-first gradient tiles in a three-across rail. Hover: coloured blinds drop in alternately, the picture fades
   back and a trio of feature icons rises over it, the copy turns white. */
.cr-hilite { --rail-item: calc((100% - 2 * var(--rail-gap, 20px)) / 3); }
.cr-hilite__tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  min-height: 380px;
  padding: clamp(20px, 2.4vw, 32px);
  overflow: hidden;
  border-radius: var(--cr-card-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cr-ink) 10%, var(--cr-bg-alt)), var(--cr-bg-alt) 70%);
  text-align: center;
  isolation: isolate;
}
.cr-hilite__tile h4 { margin: 0 0 2px; font-family: var(--cr-body-font); font-size: var(--cr-text-l); font-weight: 600; }
.cr-hilite__price { margin-bottom: 12px; font-family: var(--cr-display-font); font-size: var(--cr-h5); font-weight: 700; }
.cr-hilite__img { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.cr-hilite__img img { width: auto; max-width: 88%; max-height: 230px; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,0.22)); transition: transform 0.75s var(--cr-ease), opacity 0.6s ease, filter 0.6s ease; }
.cr-hilite__tile:hover .cr-hilite__img img { transform: translateY(-6px) scale(1.03); opacity: 0.14; filter: saturate(0.4); }
.cr-hilite__btns { display: flex; gap: 8px; margin-top: 14px; }
/* "Shop now" keeps the page colour behind its outline, hovered or not (until the tile's hover turns it white). */
.theme-root .cr-hilite__btns .cr-btn--outline { background: var(--cr-bg); }
@media (max-width: 989px) { .cr-hilite { --rail-item: 46%; } }
@media (max-width: 649px) { .cr-hilite { --rail-item: 76%; } }
.cr-hilite__blinds { position: absolute; inset: 0; z-index: 1; display: flex; overflow: hidden; border-radius: inherit; pointer-events: none; }
.cr-hilite__blinds i { flex: 1 1 0; background: var(--hilite-hover, #2e3a68); transform: scaleY(0); transition: transform 0.62s var(--cr-ease); }
.cr-hilite__blinds i:nth-child(odd) { transform-origin: top; }
.cr-hilite__blinds i:nth-child(even) { transform-origin: bottom; }
.cr-hilite__blinds i:nth-child(2) { transition-delay: 0.08s; }
.cr-hilite__blinds i:nth-child(3) { transition-delay: 0.16s; }
.cr-hilite__blinds i:nth-child(4) { transition-delay: 0.24s; }
.cr-hilite__blinds i:nth-child(5) { transition-delay: 0.32s; }
.cr-hilite__tile:hover .cr-hilite__blinds i { transform: scaleY(1); }
.cr-hilite__tile > *:not(.cr-hilite__blinds):not(.cr-hilite__feats) { position: relative; z-index: 2; }
.cr-hilite__tile h4, .cr-hilite__tile .cr-hilite__price { transition: color 0.45s 0.25s; }
.cr-hilite__tile:hover h4, .cr-hilite__tile:hover h4 a, .cr-hilite__tile:hover .cr-hilite__price { color: #ffffff; }
.cr-hilite__feats {
  position: absolute; top: 50%; left: 8%; right: 8%; z-index: 3;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  color: #fff;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40%);
  transition: opacity 0.55s ease 0.4s, transform 0.65s var(--cr-ease) 0.4s;
}
.cr-hilite__tile:hover .cr-hilite__feats { opacity: 1; transform: translateY(-50%); }
.cr-hilite__feat { display: grid; align-content: start; justify-items: center; gap: 8px; padding: 0 10px; }
.cr-hilite__feat + .cr-hilite__feat { border-inline-start: 1px solid rgba(255,255,255,0.22); }
.cr-hilite__feat i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(255,255,255,0.92); color: #1c2547; }
.cr-hilite__feat i svg { width: 16px; height: 16px; }
.cr-hilite__feat b { font-size: var(--cr-text-s); font-weight: 700; }
.cr-hilite__feat span { font-size: var(--cr-text-xs); opacity: 0.75; }
.cr-hilite__tile:hover .cr-btn--outline { --btn-ink: #14181f; --btn-line: #ffffff; background: #ffffff !important; }
/* "Shop now" itself hovered: the button fill and its ink, like every outline button (never white on white). */
.theme-root .cr-hilite__tile .cr-btn--outline:hover { border-color: var(--btn-line-h); background: var(--btn-bg-h) !important; color: var(--btn-ink-h); }
@media (hover: none) { .cr-hilite__blinds, .cr-hilite__feats { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .cr-hilite__blinds i { transition: none; }
  .cr-hilite__feats { transition: opacity 0.2s; }
}

/* ================================================================ panel carousel */
/* Colour-block slides (copy on a panel with a tilted light shape, picture beside) over an outlined ticker. */
.cr-panelcar__slide { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: min(92dvh, 780px); }
.cr-panelcar__text { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(26px, 4.5vw, 70px); overflow: hidden; background: var(--panel-bg, #26221f); color: var(--panel-ink, #ffffff); }
.cr-panelcar__text::before { content: ""; position: absolute; right: -18%; bottom: -30%; width: 75%; height: 90%; background: color-mix(in srgb, var(--panel-ink, #ffffff) 7%, transparent); transform: rotate(24deg); }
.cr-panelcar__text > * { position: relative; z-index: 2; }
.cr-panelcar__text h2 { margin: 0; font-size: var(--cr-h2); color: inherit; }
.cr-panelcar__text p { max-width: 480px; margin: 0; opacity: 0.8; }
.cr-panelcar__media { position: relative; }
.cr-panelcar__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-panelcar__ticker { border-block: 1px solid var(--cr-hairline); }
.cr-panelcar__ticker .cr-marquee__word { font-size: clamp(30px, 4.5vw, 70px); }
@media (max-width: 899px) {
  .cr-panelcar__slide { grid-template-columns: 1fr; }
  .cr-panelcar__media { position: relative; min-height: 320px; }
}

/* ================================================================ before / after */
/* The after picture is clipped from --ba-pos (crown-sections.js follows the drag); the handle sits on the seam. */
.cr-ba { position: relative; aspect-ratio: var(--ba-ratio, 16/8); overflow: hidden; border-radius: var(--cr-card-radius); user-select: none; touch-action: none; }
.cr-ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.cr-ba__after { clip-path: inset(0 0 0 var(--ba-pos, 50%)); }
.cr-ba__handle { position: absolute; top: 0; bottom: 0; left: var(--ba-pos, 50%); z-index: 3; width: 2px; background: #fff; cursor: ew-resize; transform: translateX(-1px); }
.cr-ba__handle::after {
  content: "⇤⇥";
  position: absolute; top: 50%; left: 50%;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #fff; color: #101010;
  font-size: 15px; font-weight: 700; letter-spacing: -2px;
  box-shadow: var(--cr-shadow-soft);
  transform: translate(-50%, -50%);
}
.cr-ba__tag { position: absolute; top: 16px; z-index: 2; padding: 6px 13px; border-radius: 30px; background: rgba(16,16,16,0.6); color: #fff; font-size: var(--cr-text-s); font-weight: 700; }
.cr-ba__tag--before { left: 16px; }
.cr-ba__tag--after { right: 16px; }

/* ================================================================ FAQ */
.cr-faq { display: grid; grid-template-columns: minmax(260px, 0.8fr) 1.4fr; gap: clamp(24px, 4vw, 70px); }
.cr-faq--stack { grid-template-columns: 1fr; }
.cr-faq__intro h2 { margin-bottom: 12px; }
.cr-faq__intro p { color: var(--cr-muted); }
@media (max-width: 899px) { .cr-faq { grid-template-columns: 1fr; } }

/* ================================================================ image with text */
.cr-iwt { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 70px); }
.cr-iwt__media { position: relative; aspect-ratio: var(--iwt-ratio, 5/4); overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-iwt__media img { width: 100%; height: 100%; object-fit: cover; }
.cr-iwt--flip .cr-iwt__media { order: 2; }
.cr-iwt__body { display: grid; justify-items: start; gap: 16px; max-width: 560px; }
.cr-iwt__body h2 { margin: 0; }
.cr-iwt__body p { margin: 0; color: var(--cr-muted); }
.cr-iwt__stats { display: flex; gap: clamp(20px, 3vw, 44px); margin-top: 8px; }
.cr-iwt__stat b { display: block; font-family: var(--cr-display-font); font-size: var(--cr-h4); font-weight: 700; }
.cr-iwt__stat span { font-size: var(--cr-text-s); color: var(--cr-muted); }
@media (max-width: 899px) {
  .cr-iwt { grid-template-columns: 1fr; }
  .cr-iwt--flip .cr-iwt__media { order: 0; }
}

/* ================================================================ collection list */
/* Rounded collection pictures with the name at the foot and a ghost arrow circle that fills and turns on hover. */
.cr-colllist { display: grid; grid-template-columns: repeat(var(--cl-cols, 4),minmax(0,1fr)); gap: 16px; }
.cr-colllist__card { position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--cr-pcard-radius); }
.cr-colllist__card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--cr-ease); }
.cr-colllist__card:hover img { transform: scale(1.06); }
.cr-colllist__card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(185deg, transparent 55%, rgba(0,0,0,0.5)); }
.cr-colllist__name { position: absolute; bottom: 16px; inset-inline-start: 18px; z-index: 2; font-family: var(--cr-display-font); font-size: var(--cr-h6); font-weight: 600; color: #fff; }
.cr-colllist__arrow { position: absolute; bottom: 12px; inset-inline-end: 14px; z-index: 2; color: #fff; opacity: 0.9; transition: transform 0.45s var(--cr-ease), background 0.3s; }
.cr-colllist__card:hover .cr-colllist__arrow { background: #fff; color: #101010; transform: rotate(45deg); }
[dir="rtl"] .cr-colllist__arrow svg { transform: scaleX(-1); }
[dir="rtl"] .cr-colllist__card:hover .cr-colllist__arrow { transform: rotate(-45deg); }
@media (max-width: 989px) { .cr-colllist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ================================================================ newsletter popup */
.cr-newspop .cr-popup__panel { display: grid; grid-template-columns: 0.85fr 1fr; width: min(680px, 100%); padding: 0; overflow: hidden; }
.cr-newspop__img { position: relative; min-height: 300px; }
.cr-newspop__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-newspop__body { display: grid; align-content: center; gap: 12px; padding: clamp(24px, 3.6vw, 44px) clamp(20px, 3vw, 38px); text-align: center; }
.cr-newspop__body h3 { margin: 0; font-size: var(--cr-h4); }
.cr-newspop__body p { margin: 0; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-newspop__body form { display: grid; gap: 10px; margin-top: 6px; }
@media (max-width: 649px) {
  .cr-newspop .cr-popup__panel { grid-template-columns: 1fr; }
  .cr-newspop__img { min-height: 180px; }
}

/* ================================================================ video */
/* A poster with an overlay (heading + frosted play circle) that fades once playing. */
.cr-video { position: relative; overflow: hidden; }
.cr-video--rounded { border-radius: var(--cr-card-radius); }
.cr-video video, .cr-video iframe { display: block; width: 100%; aspect-ratio: var(--video-ratio, 16/8); border: none; background: #000; object-fit: cover; }
.cr-video > img { width: 100%; aspect-ratio: var(--video-ratio); object-fit: cover; }
.cr-video__overlay { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; background: rgba(0,0,0,0.25); color: #fff; text-align: center; }
.cr-video__overlay h2 { margin: 0; color: inherit; }
.cr-video__play { display: inline-flex; align-items: center; justify-content: center; width: 74px; height: 74px; border: 1px solid rgba(255,255,255,0.6); border-radius: 50%; background: rgba(255,255,255,0.14); color: #fff; cursor: pointer; backdrop-filter: blur(5px); transition: transform 0.3s var(--cr-ease), background 0.2s; }
.cr-video__play:hover { background: rgba(255,255,255,0.28); transform: scale(1.08); }
.cr-video__play svg { width: 22px; height: 22px; margin-left: 3px; }
.cr-video.is-playing .cr-video__overlay { opacity: 0; pointer-events: none; transition: opacity 0.4s; }

/* ================================================================ image banner */
.cr-banner { position: relative; display: flex; align-items: flex-end; min-height: var(--banner-h, 480px); overflow: hidden; color: #fff; }
.cr-banner--rounded { border-radius: var(--cr-card-radius); }
.cr-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-banner__dim { position: absolute; inset: 0; background: rgba(0,0,0,var(--overlay)); }
.cr-banner__inner { position: relative; z-index: 2; display: grid; justify-items: start; gap: 12px; width: 100%; padding: clamp(22px, 3.6vw, 54px); }
.cr-banner--center .cr-banner__inner { align-self: center; justify-items: center; text-align: center; }
.cr-banner__inner h2 { margin: 0; color: inherit; }
.cr-banner__inner p { max-width: 520px; margin: 0; opacity: 0.88; }

/* ================================================================ text tabs (product rail) */
.cr-texttabs { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.cr-texttab {
  padding: 2px 0;
  border: none;
  border-bottom: 1.5px solid transparent;
  background: none;
  font-family: var(--cr-body-font); font-size: var(--cr-text-s); font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--cr-muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.cr-texttab:hover { color: var(--cr-heading); }
.cr-texttab.is-active { border-bottom-color: var(--cr-heading); color: var(--cr-heading); }
.cr-texttabs__sep { color: var(--cr-hairline); }

/* ================================================================ rich text */
.cr-richtext { display: grid; gap: 14px; }
.cr-richtext--center { justify-items: center; text-align: center; }
.cr-richtext--start { justify-items: start; }
.cr-richtext :is(h2, h4) { margin: 0; }
.cr-richtext__display { font-size: var(--cr-h1); }
.cr-richtext__text { max-width: 680px; }

/* ================================================================ newsletter (inline panel) */
/* A rounded panel (its own colours) with the footer's pill field; split: a picture beside the copy. */
.cr-newsinline {
  display: grid; justify-items: center; gap: 10px;
  padding: clamp(26px, 4vw, 54px);
  overflow: hidden;
  border-radius: var(--cr-card-radius);
  background: var(--news-bg, var(--cr-bg-soft));
  color: var(--news-ink, var(--cr-ink));
  text-align: center;
}
.cr-newsinline h3 { margin: 0; font-size: var(--cr-h4); color: inherit; }
.cr-newsinline p { max-width: 480px; margin: 0; opacity: 0.8; }
.cr-newsinline__form { width: min(420px, 100%); margin-top: 8px; }
.cr-newsinline--split { grid-template-columns: 0.9fr 1.1fr; justify-items: start; padding: 0; text-align: start; }
.cr-newsinline--split .cr-newsinline__media { position: relative; width: 100%; height: 100%; min-height: 280px; }
.cr-newsinline--split .cr-newsinline__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cr-newsinline--split .cr-newsinline__body { display: grid; gap: 10px; padding: clamp(24px, 3.6vw, 50px); }
@media (max-width: 749px) { .cr-newsinline--split { grid-template-columns: 1fr; } }
.cr-newsinline .cr-fsub input { border-color: color-mix(in srgb, currentColor 30%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); color: inherit; }
.cr-newsinline .cr-fsub button { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }

/* ================================================================ recently viewed */
.cr-recent.is-empty { display: none; }
.cr-recent__hint { font-size: 12px; }

/* ================================================================ Instagram feed */
/* The latest posts in a square (or portrait) grid: phone columns, at most four from 750px, the full count from
   1000px; a soft dim and zoom on hover, a badge for reels / albums; a dashed "connect" note in the editor. */
.cr-ig__grid { display: grid; grid-template-columns: repeat(var(--ig-cols-m), minmax(0, 1fr)); gap: var(--ig-gap); }
@media (min-width: 750px) { .cr-ig__grid { grid-template-columns: repeat(min(var(--ig-cols), 4), minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cr-ig__grid { grid-template-columns: repeat(var(--ig-cols), minmax(0, 1fr)); } }
.cr-ig__post { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: var(--cr-card-radius, 16px); background: color-mix(in srgb, currentColor 6%, transparent); }
.cr-ig--bleed .cr-ig__post { border-radius: 0; }
.cr-ig__grid--portrait .cr-ig__post { aspect-ratio: 4 / 5; }
.cr-ig__post img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.cr-ig__post::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / 0); transition: background .3s; }
.cr-ig__post:hover img { transform: scale(1.05); }
.cr-ig__post:hover::after { background: rgb(0 0 0 / .12); }
.cr-ig__post:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.cr-ig__badge { position: absolute; top: .55rem; inset-inline-end: .55rem; z-index: 1; display: inline-flex; padding: .35rem; border-radius: 999px; background: rgb(0 0 0 / .45); color: #fff; line-height: 0; }
.cr-ig__note { margin: 0; color: var(--cr-muted); }
.cr-ig__connect { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; border: 1px dashed var(--cr-hairline); border-radius: var(--cr-card-radius, 16px); color: var(--cr-muted); }
.cr-ig__connect p { margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .cr-ig__post img { transition: none; }
  .cr-ig__post:hover img { transform: none; }
}

/* ================================================================ storewide popup (sections/popup.liquid) */
/* The platform (window.Soooks.popup) sets data-state = opening → open → closing → closed and data-step on the root;
   Crown draws and moves it from those. Arrivals are slow and editorial (--pop-dur, the "Duration" setting), exits
   quicker and quieter (half of it, the exit ease). One panel, eleven shapes: the editorial split and editorial full
   screen, picture beside / above the copy, centred and compact cards, the floating side panel (Crown's drawer
   shape), the bottom sheet, and three that leave the page usable — corner card, floating notification, bar.
   Phones (≤ 749px) take the form the section chose (cr-pop--phone-*). Reduced motion: a short fade, nothing else. */
.cr-pop {
  --pop-bg: var(--cr-bg);
  --pop-ink: var(--cr-ink);
  --pop-head: var(--cr-heading);
  --pop-muted: var(--cr-muted);
  --pop-line: var(--cr-hairline);
  --pop-field: color-mix(in srgb, var(--pop-head) 24%, transparent);
  --pop-r: min(var(--cr-card-radius), 28px);
  --pop-exit: calc(var(--pop-dur, 0.9s) * 0.5);
  --pop-ws: 1;
  --pop-gap: 24px;
  --pop-pad: clamp(30px, 4vw, 54px);
  --pop-w: 560px;
  --pop-h: var(--cr-h4);
  --pop-from: translateY(28px) scale(0.985);
  --pop-to: translateY(12px);
  position: fixed; inset: 0; z-index: 145;
  display: grid; align-items: center; justify-items: center;
  padding: var(--pop-gap);
  color: var(--pop-ink);
  pointer-events: none;
}
.cr-pop[hidden] { display: none; }
.cr-pop[data-modal="false"] { z-index: 95; }
.cr-pop--tone-alt { --pop-bg: var(--cr-bg-alt); }
.cr-pop--tone-soft { --pop-bg: var(--cr-bg-soft); }
.cr-pop--tone-dark, .cr-pop--editorial {
  --pop-bg: #101013;
  --pop-ink: rgba(255, 255, 255, 0.86);
  --pop-head: #ffffff;
  --pop-muted: rgba(255, 255, 255, 0.64);
  --pop-line: rgba(255, 255, 255, 0.18);
  --pop-field: rgba(255, 255, 255, 0.36);
}
.cr-pop--r-square { --pop-r: 0px; }
.cr-pop--r-soft { --pop-r: 12px; }
.cr-pop--r-round { --pop-r: 32px; }
.cr-pop--w-narrow { --pop-ws: 0.84; }
.cr-pop--w-wide { --pop-ws: 1.18; }

/* Where cards sit (grid start / end follow the reading direction). */
.cr-pop--at-top-center { align-items: start; }
.cr-pop--at-bottom-center { align-items: end; }
.cr-pop--at-top-left { align-items: start; justify-items: start; }
.cr-pop--at-top-right { align-items: start; justify-items: end; }
.cr-pop--at-bottom-left { align-items: end; justify-items: start; }
.cr-pop--at-bottom-right { align-items: end; justify-items: end; }
.cr-pop--at-left { justify-items: start; }
.cr-pop--at-right { justify-items: end; }

/* ---------- the dim layer, the panel, the close button, the picture */
.cr-pop__overlay {
  position: absolute; inset: 0;
  background: rgb(12 12 14 / var(--pop-dim, 0.45));
  opacity: 0;
  pointer-events: auto;
  transition: opacity var(--pop-exit) var(--cr-ease-exit);
}
.cr-pop[data-state="open"] .cr-pop__overlay { opacity: 1; transition: opacity calc(var(--pop-dur) * 0.8) var(--cr-ease); }
.cr-pop__panel {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: min(calc(var(--pop-w) * var(--pop-ws)), 100%);
  max-height: 100%;
  overflow: hidden;
  border-radius: var(--pop-r);
  background: var(--pop-bg);
  color: var(--pop-ink);
  box-shadow: 0 34px 90px rgb(0 0 0 / 0.2), 0 6px 20px rgb(0 0 0 / 0.06);
  outline: none;
  pointer-events: auto;
  opacity: 0;
  transform: var(--pop-from);
  transition: opacity var(--pop-exit) var(--cr-ease-exit), transform var(--pop-exit) var(--cr-ease-exit), filter var(--pop-exit) var(--cr-ease-exit);
}
.cr-pop[data-state="closing"] .cr-pop__panel { transform: var(--pop-to); }
.cr-pop[data-state="open"] .cr-pop__panel {
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity calc(var(--pop-dur) * 0.6) var(--cr-ease) var(--pop-delay, 0s), transform var(--pop-dur) var(--cr-ease) var(--pop-delay, 0s), filter var(--pop-dur) var(--cr-ease) var(--pop-delay, 0s), box-shadow var(--pop-dur) var(--cr-ease);
}
.cr-pop[data-modal="false"] .cr-pop__panel { box-shadow: 0 18px 50px rgb(0 0 0 / 0.16), 0 2px 8px rgb(0 0 0 / 0.06); }
.cr-pop__close {
  position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 1px solid var(--pop-line);
  border-radius: 50%;
  background: var(--pop-bg);
  color: var(--pop-head);
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.45s var(--cr-ease);
}
.cr-pop__close:hover { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); transform: rotate(90deg); }
.cr-pop__close:focus-visible { outline: 2px solid var(--pop-head); outline-offset: 2px; }
.cr-pop__close svg { width: 14px; height: 14px; }
.cr-pop__media { position: relative; min-height: 0; overflow: hidden; background: var(--cr-bg-alt); }
.cr-pop__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- the copy */
.cr-pop__body {
  position: relative;
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; min-height: 0;
  padding: var(--pop-pad);
  overflow-y: auto;
  overscroll-behavior: contain;
  container-type: inline-size;
}
.cr-pop__shared, .cr-pop__step { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; text-align: start; }
.cr-pop__shared + .cr-pop__step, .cr-pop__step + .cr-pop__step { margin-top: 16px; }
.cr-pop__step[hidden], .cr-pop__part[hidden] { display: none; }
.cr-pop:is(.cr-pop--modal, .cr-pop--compact, .cr-pop--image, .cr-pop--sheet) :is(.cr-pop__shared, .cr-pop__step) { align-items: center; text-align: center; }
.cr-pop__heading {
  max-width: 15em;
  margin: 0;
  font-size: var(--pop-h);
  line-height: 0.98;
  color: var(--pop-head);
  text-wrap: balance;
}
.cr-pop--h-small { --pop-h: var(--cr-h6) !important; }
.cr-pop--h-medium { --pop-h: var(--cr-h5) !important; }
.cr-pop--h-large { --pop-h: var(--cr-h3) !important; }
.cr-pop--h-xlarge { --pop-h: var(--cr-h2) !important; }
:is(.cr-pop--tone-dark, .cr-pop--editorial) .cr-accent { color: inherit; }
.cr-pop__text { max-width: 44ch; margin: 0; font-size: var(--cr-text-m); line-height: 1.5; color: var(--pop-muted); }
.cr-pop__text--lead { font-size: var(--cr-text-l); line-height: 1.45; color: var(--pop-ink); }
.cr-pop__text--eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--cr-text-s); font-weight: 600; line-height: 1.2;
  letter-spacing: 0.18em; text-transform: uppercase;
}
.cr-pop__text--eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.6; }
.cr-pop:is(.cr-pop--modal, .cr-pop--compact, .cr-pop--image, .cr-pop--sheet) .cr-pop__text--eyebrow::before { display: none; }
.cr-pop__rte { max-width: 46ch; font-size: var(--cr-text-m); line-height: 1.55; color: var(--pop-muted); }
.cr-pop__rte a { color: var(--pop-head); text-decoration: underline; text-underline-offset: 3px; }
.cr-pop__rte :is(p, ul, ol) { margin: 0 0 0.6em; }
.cr-pop__rte :last-child { margin-bottom: 0; }
.cr-pop__btn { margin-top: 4px; }
.cr-pop__textlink {
  display: inline-flex; padding: 2px 0;
  border: 0; border-bottom: 1px solid currentColor;
  background: none;
  font-family: var(--cr-display-font); font-size: var(--cr-text-m); font-weight: 600;
  color: var(--pop-head);
  cursor: pointer;
  transition: opacity 0.25s;
}
.cr-pop__textlink:hover { opacity: 0.65; }
:is(.cr-pop--tone-dark, .cr-pop--editorial) .cr-btn {
  --btn-bg: #ffffff; --btn-ink: #101010; --btn-line: #ffffff;
  --btn-bg-h: rgba(255, 255, 255, 0.84); --btn-ink-h: #101010; --btn-line-h: rgba(255, 255, 255, 0.84);
}
:is(.cr-pop--tone-dark, .cr-pop--editorial) .cr-btn--outline {
  --btn-bg: transparent; --btn-ink: #ffffff; --btn-line: rgba(255, 255, 255, 0.6);
  --btn-bg-h: #ffffff; --btn-ink-h: #101010; --btn-line-h: #ffffff;
}

/* The signup: the field with the pill inside it (stacked when the copy column is narrow), name, consent, note. */
.cr-pop__form { display: grid; gap: 10px; width: 100%; max-width: 460px; margin-top: 6px; }
.cr-pop__field { position: relative; }
.cr-pop__input {
  width: 100%; height: 56px;
  padding-block: 0; padding-inline: 20px;
  border: 1px solid var(--pop-field);
  border-radius: var(--cr-form-radius);
  background: color-mix(in srgb, var(--pop-head) 3%, transparent);
  color: var(--pop-head);
  font: inherit; font-size: var(--cr-text-m);
  transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.cr-pop__input::placeholder { color: var(--pop-muted); }
.cr-pop__input:focus { outline: none; border-color: var(--pop-head); background: transparent; box-shadow: 0 0 0 3px color-mix(in srgb, var(--pop-head) 10%, transparent); }
.cr-pop__field .cr-pop__input { padding-inline-end: 168px; }
.cr-pop__submit {
  position: absolute; inset-block: 5px; inset-inline-end: 5px;
  min-height: 0;
  padding-inline: 14px 20px;
  border-radius: max(calc(var(--cr-form-radius) - 5px), 0px);
}
.cr-pop__submit:disabled { cursor: progress; }
.cr-pop__consent { align-items: flex-start; font-size: var(--cr-text-s); line-height: 1.45; color: var(--pop-muted); text-align: start; }
.cr-pop__consent i { margin-top: 1px; border-color: var(--pop-field); }
.cr-pop__note { margin: 0; font-size: var(--cr-text-s); }
.cr-pop__note[hidden] { display: none; }
.cr-pop__note[data-kind="error"] { color: #d23b33; }
.cr-pop__note[data-kind="success"] { color: var(--cr-ok); }
:is(.cr-pop--tone-dark, .cr-pop--editorial) .cr-pop__note[data-kind="error"] { color: #ff8a80; }
@container (max-width: 380px) {
  .cr-pop__field .cr-pop__input { padding-inline-end: 20px; }
  .cr-pop__submit { position: relative; inset: auto; width: 100%; min-height: 50px; margin-top: 10px; border-radius: var(--cr-btn-radius); }
}

/* The code: a dashed ticket; the copy chip says Copied for a moment (data-copied, set by the platform). */
.cr-pop__coupon { display: grid; gap: 10px; width: 100%; max-width: 460px; }
.cr-pop__coupon-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin: 0;
  font-size: var(--cr-text-s); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--pop-muted);
}
.cr-pop:is(.cr-pop--modal, .cr-pop--compact, .cr-pop--image, .cr-pop--sheet) .cr-pop__coupon-head { justify-content: center; }
.cr-pop__badge { padding: 5px 11px; border: 1px solid currentColor; border-radius: 40px; color: var(--pop-head); letter-spacing: 0.08em; }
.cr-pop__code {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; height: 60px;
  padding-block: 0; padding-inline: 22px 7px;
  border: 1px dashed color-mix(in srgb, var(--pop-head) 50%, transparent);
  border-radius: var(--cr-form-radius);
  background: color-mix(in srgb, var(--pop-head) 3%, transparent);
  color: var(--pop-head);
  font-family: var(--cr-display-font); font-size: calc(var(--cr-text-l) * 1.1); font-weight: 600; letter-spacing: 0.14em;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.cr-pop__code:hover { border-style: solid; }
.cr-pop__code:focus-visible { outline: 2px solid var(--pop-head); outline-offset: 2px; }
.cr-pop__code-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-pop__code-action {
  flex: 0 0 auto;
  display: inline-flex; align-items: center;
  height: 46px; padding-inline: 20px;
  overflow: hidden;
  border-radius: max(calc(var(--cr-form-radius) - 5px), 0px);
  background: var(--cr-btn-bg); color: var(--cr-btn-ink);
  font-family: var(--cr-body-font); font-size: var(--cr-text); font-weight: 600; letter-spacing: 0.02em;
}
:is(.cr-pop--tone-dark, .cr-pop--editorial) .cr-pop__code-action { background: #ffffff; color: #101010; }
.cr-pop__copied { display: none; align-items: center; gap: 6px; }
.cr-pop__code[data-copied] .cr-pop__copy { display: none; }
.cr-pop__code[data-copied] .cr-pop__copied { display: inline-flex; animation: cr-added-in var(--cr-dur-slow) var(--cr-ease) both; }

/* The countdown: tall figures split by hairlines. */
.cr-pop__countdown { display: grid; gap: 12px; }
.cr-pop__cd-label { font-size: var(--cr-text-s); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pop-muted); }
.cr-pop__cd-units { display: flex; }
.cr-pop__cd-unit { display: grid; gap: 6px; padding-inline: clamp(12px, 1.6vw, 22px); }
.cr-pop__cd-unit:first-child { padding-inline-start: 0; }
.cr-pop__cd-unit + .cr-pop__cd-unit { border-inline-start: 1px solid var(--pop-line); }
.cr-pop__cd-unit b { font-family: var(--cr-display-font); font-size: var(--cr-h5); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; color: var(--pop-head); }
.cr-pop__cd-unit small { font-size: var(--cr-text-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--pop-muted); }
.cr-pop:is(.cr-pop--modal, .cr-pop--compact, .cr-pop--image, .cr-pop--sheet) .cr-pop__countdown { justify-items: center; }
.cr-pop__countdown[data-expired] .cr-pop__cd-units { opacity: 0.45; }

/* A product (quick add) and a collection, as quiet framed rows. */
.cr-pop__product, .cr-pop__collection {
  display: grid; align-items: center; gap: 14px;
  width: 100%; max-width: 460px;
  padding: 10px;
  border: 1px solid var(--pop-line);
  border-radius: var(--cr-pcard-radius);
  color: var(--pop-ink);
  text-align: start;
  transition: border-color 0.3s;
}
.cr-pop__product { grid-template-columns: 74px minmax(0, 1fr) auto; }
.cr-pop__collection { grid-template-columns: 92px minmax(0, 1fr); }
a.cr-pop__collection:hover { border-color: var(--pop-head); }
.cr-pop__pmedia, .cr-pop__cmedia { display: block; aspect-ratio: 1; overflow: hidden; border-radius: max(calc(var(--cr-pcard-radius) - 4px), 0px); background: var(--cr-bg-alt); }
.cr-pop__pmedia img { width: 100%; height: 100%; padding: 8%; object-fit: contain; }
.cr-pop__cmedia img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--cr-ease); }
a.cr-pop__collection:hover .cr-pop__cmedia img { transform: scale(1.06); }
.cr-pop__pinfo, .cr-pop__cinfo { display: grid; gap: 4px; min-width: 0; }
.cr-pop__ptitle, .cr-pop__ctitle { font-family: var(--cr-display-font); font-size: var(--cr-text-m); font-weight: 600; line-height: 1.15; color: var(--pop-head); }
.cr-pop__ctitle { font-size: var(--cr-h6); }
.cr-pop__pinfo .cr-price { font-size: var(--cr-text); color: var(--pop-head); }
.cr-pop__pinfo .cr-price__amount { color: var(--pop-head); }
.cr-pop__pinfo :is(.cr-price__was, .cr-price__from) { color: var(--pop-muted); }
.cr-pop__clink { display: inline-flex; align-items: center; gap: 6px; font-size: var(--cr-text); color: var(--pop-muted); }
.cr-pop__clink svg { transform: scaleX(var(--cr-dir)); transition: transform 0.35s var(--cr-ease); }
a.cr-pop__collection:hover .cr-pop__clink svg { transform: scaleX(var(--cr-dir)) translateX(4px); }
.cr-pop__padd { white-space: nowrap; }

/* Free shipping: the line, then a hairline meter (--popup-progress, set by the platform). */
.cr-pop__ship { display: grid; gap: 12px; width: 100%; max-width: 460px; }
.cr-pop__ship p { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--cr-text-m); color: var(--pop-ink); }
.cr-pop__ship b { color: var(--pop-head); }
.cr-pop__ship svg { flex: 0 0 auto; color: var(--pop-head); }
.cr-pop__ship .cr-pop__ship-done, .cr-pop__ship[data-reached] .cr-pop__ship-away { display: none; }
.cr-pop__ship[data-reached] .cr-pop__ship-done { display: flex; }
.cr-pop__ship-bar { display: block; height: 3px; overflow: hidden; border-radius: 3px; background: var(--pop-line); }
.cr-pop__ship-bar i { display: block; width: var(--popup-progress, 0%); height: 100%; background: var(--pop-head); transition: width 1.2s var(--cr-ease) 0.3s; }

/* Success: a hairline ring with a tick above the message. */
.cr-pop__success { display: flex; flex-direction: column; align-items: inherit; gap: 16px; }
.cr-pop__success-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border: 1px solid var(--pop-line);
  border-radius: 50%;
  color: var(--pop-head);
}

/* ---------- layouts */
/* Editorial split: a near-full-height spread, a framed picture beside oversized type. */
.cr-pop--editorial-split { --pop-w: 1200px; --pop-pad: clamp(36px, 5.2vw, 88px); --pop-h: var(--cr-h3); }
.cr-pop--editorial-split .cr-pop__panel { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); height: min(780px, 100%); }
.cr-pop--editorial-split .cr-pop__media::after {
  content: ""; position: absolute; inset: 16px; z-index: 1;
  border: 1px solid rgb(255 255 255 / 0.5);
  border-radius: max(calc(var(--pop-r) - 12px), 0px);
  pointer-events: none;
}
.cr-pop--editorial-split .cr-pop__step, .cr-pop--editorial-split .cr-pop__shared { gap: 20px; }
.cr-pop--editorial-split .cr-pop__text--body { font-size: var(--cr-text-l); }
/* Editorial full screen: the picture is the page; the copy sits in its lower corner over a soft shade. */
.cr-pop--editorial { --pop-gap: 12px; --pop-w: 100vw; --pop-pad: clamp(32px, 6vw, 96px); --pop-h: var(--cr-h2); }
.cr-pop--editorial .cr-pop__panel { width: 100%; height: 100%; grid-template: minmax(0, 1fr) / minmax(0, 1fr); }
.cr-pop--editorial .cr-pop__media { grid-area: 1 / 1; background: #1a1a1d; }
.cr-pop--editorial .cr-pop__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgb(0 0 0 / 0.74), rgb(0 0 0 / 0.3) 45%, rgb(0 0 0 / 0.04) 75%), linear-gradient(to var(--pop-shade-to, left), rgb(0 0 0 / 0.58), transparent 62%);
}
.cr-pop--editorial.cr-pop--ph .cr-pop__media img { opacity: 0.45; }
.cr-pop--editorial .cr-pop__text { color: rgba(255, 255, 255, 0.84); }
[dir="rtl"] .cr-pop--editorial { --pop-shade-to: right; }
.cr-pop--editorial.cr-pop--img-end { --pop-shade-to: right; }
[dir="rtl"] .cr-pop--editorial.cr-pop--img-end { --pop-shade-to: left; }
.cr-pop--editorial .cr-pop__body { grid-area: 1 / 1; z-index: 1; justify-self: end; align-self: end; width: min(calc(640px * var(--pop-ws)), 100%); max-height: 100%; }
.cr-pop--editorial.cr-pop--img-end .cr-pop__body { justify-self: start; }
.cr-pop--editorial .cr-pop__close { top: 22px; inset-inline-end: 22px; border-color: transparent; background: rgb(255 255 255 / 0.92); color: #101010; }
.cr-pop--editorial .cr-pop__input { background: rgb(255 255 255 / 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
/* Picture beside the copy. */
.cr-pop--split { --pop-w: 900px; --pop-pad: clamp(30px, 3.8vw, 54px); }
.cr-pop--split .cr-pop__panel { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); min-height: min(540px, 100%); }
:is(.cr-pop--split, .cr-pop--editorial-split).cr-pop--img-end .cr-pop__media { order: 2; }
/* Picture above the copy; centred cards; compact. */
.cr-pop--image { --pop-w: 500px; --pop-pad: clamp(26px, 3.4vw, 44px); }
.cr-pop--image .cr-pop__media { aspect-ratio: 5 / 4; max-height: 44vh; }
.cr-pop--modal { --pop-w: 580px; --pop-pad: clamp(38px, 4.6vw, 60px); }
.cr-pop--compact { --pop-w: 400px; --pop-pad: 34px 30px 30px; --pop-h: var(--cr-h5); }
.cr-pop--compact .cr-pop__close { top: 12px; inset-inline-end: 12px; width: 32px; height: 32px; }
/* Side panel: Crown's floating inset drawer. */
.cr-pop--side { --pop-gap: 12px; --pop-w: 470px; --pop-pad: clamp(30px, 3vw, 44px); align-items: stretch; justify-items: end; }
.cr-pop--side.cr-pop--at-left { justify-items: start; }
.cr-pop--side .cr-pop__panel { height: 100%; grid-template-rows: auto minmax(0, 1fr); align-content: start; }
.cr-pop--side .cr-pop__media { aspect-ratio: 4 / 3; }
.cr-pop--side .cr-pop__body { justify-content: flex-start; padding-top: clamp(40px, 6vh, 64px); }
/* Bottom sheet: rises from the bottom edge, a grabber on top. */
.cr-pop--sheet { --pop-gap: 12px; --pop-w: 780px; --pop-pad: 40px clamp(28px, 4vw, 52px) 36px; --pop-h: var(--cr-h5); align-items: end; }
.cr-pop--sheet.cr-pop--media .cr-pop__panel { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.cr-pop--sheet .cr-pop__panel::before {
  content: ""; position: absolute; top: 10px; left: 50%; z-index: 2;
  width: 42px; height: 4px; margin-left: -21px;
  border-radius: 4px;
  background: var(--pop-line);
}
/* Corner card: no dim, the page stays usable (the floating notification has its own block after the motion). */
.cr-pop--corner { --pop-w: 370px; --pop-pad: 28px 26px 26px; --pop-h: var(--cr-h6); }
.cr-pop--corner .cr-pop__media { aspect-ratio: 16 / 10; }
.cr-pop--corner .cr-pop__close { top: 12px; inset-inline-end: 12px; width: 30px; height: 30px; }
.cr-pop--corner :is(.cr-pop__shared, .cr-pop__step) { gap: 10px; }
/* Bar: one floating line across the top or bottom; parts run side by side. */
.cr-pop--bar { --pop-gap: 12px; --pop-pad: 14px 64px; --pop-h: var(--cr-h6); align-items: end; }
.cr-pop--bar.cr-pop--at-top { align-items: start; }
.cr-pop--bar .cr-pop__panel { width: 100%; border-radius: min(var(--pop-r), 20px); }
.cr-pop--bar .cr-pop__body { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 26px; }
.cr-pop--bar :is(.cr-pop__shared, .cr-pop__step) { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 22px; margin: 0; }
.cr-pop--bar .cr-pop__text { max-width: none; font-size: var(--cr-text); }
.cr-pop--bar .cr-pop__text--eyebrow::before { display: none; }
.cr-pop--bar :is(.cr-pop__form, .cr-pop__coupon, .cr-pop__ship, .cr-pop__product, .cr-pop__collection) { width: min(400px, 100%); margin: 0; }
.cr-pop--bar .cr-pop__input { height: 46px; }
.cr-pop--bar .cr-pop__code { height: 46px; }
.cr-pop--bar .cr-pop__code-action { height: 34px; }
.cr-pop--bar .cr-pop__close { inset-block: 0; top: 0; margin-block: auto; width: 34px; height: 34px; }

/* ---------- motion: what each entrance starts from (the panel ends at rest, see data-state="open" above) */
.cr-pop--a-fade { --pop-from: none; --pop-to: none; }
.cr-pop--a-slide { --pop-from: translateY(70px); --pop-to: translateY(40px); }
.cr-pop--a-slide:is(.cr-pop--at-top-center, .cr-pop--at-top-left, .cr-pop--at-top-right) { --pop-from: translateY(-70px); --pop-to: translateY(-40px); }
.cr-pop--a-slide.cr-pop--at-left:not(.cr-pop--side) { --pop-from: translateX(calc(-70px * var(--cr-dir))); --pop-to: translateX(calc(-40px * var(--cr-dir))); }
.cr-pop--a-slide.cr-pop--at-right:not(.cr-pop--side) { --pop-from: translateX(calc(70px * var(--cr-dir))); --pop-to: translateX(calc(40px * var(--cr-dir))); }
.cr-pop--a-stagger { --pop-from: translateY(14px); --pop-to: translateY(8px); }
.cr-pop--a-blur { --pop-from: scale(1.035); --pop-to: scale(1.015); }
.cr-pop--a-blur .cr-pop__panel { filter: blur(18px); }
.cr-pop--a-blur[data-state="closing"] .cr-pop__panel { filter: blur(8px); }
.cr-pop--a-layered { --pop-from: translateY(40px); --pop-to: translateY(14px); --pop-delay: calc(var(--pop-dur) * 0.15); }
.cr-pop--a-image { --pop-from: translateY(16px); --pop-to: translateY(10px); }
.cr-pop--a-directional { --pop-from: translateX(calc(-56px * var(--cr-dir))); --pop-to: translateX(calc(-24px * var(--cr-dir))); }
.cr-pop--a-directional.cr-pop--img-end { --pop-from: translateX(calc(56px * var(--cr-dir))); --pop-to: translateX(calc(24px * var(--cr-dir))); }
.cr-pop--a-depth { --pop-from: perspective(1400px) translateY(48px) rotateX(8deg) scale(0.94); --pop-to: perspective(1400px) translateY(20px) rotateX(3deg) scale(0.97); }
.cr-pop--a-depth .cr-pop__panel { transform-origin: 50% 100%; box-shadow: 0 10px 30px rgb(0 0 0 / 0.12); }
.cr-pop--a-depth[data-state="open"] .cr-pop__panel { box-shadow: 0 50px 120px rgb(0 0 0 / 0.28), 0 8px 24px rgb(0 0 0 / 0.08); }
.cr-pop--a-depth[data-state="open"] .cr-pop__overlay { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
/* Side panels and sheets always travel from their edge; bars from theirs. */
.cr-pop--side { --pop-from: translateX(calc((100% + 40px) * var(--cr-dir))); --pop-to: translateX(calc((100% + 40px) * var(--cr-dir))); }
.cr-pop--side.cr-pop--at-left { --pop-from: translateX(calc((-100% - 40px) * var(--cr-dir))); --pop-to: translateX(calc((-100% - 40px) * var(--cr-dir))); }
.cr-pop--sheet { --pop-from: translateY(calc(100% + 40px)); --pop-to: translateY(calc(100% + 40px)); }
.cr-pop--bar:not(.cr-pop--a-fade) { --pop-from: translateY(calc(100% + 30px)); --pop-to: translateY(calc(100% + 30px)); }
.cr-pop--bar.cr-pop--at-top:not(.cr-pop--a-fade) { --pop-from: translateY(calc(-100% - 30px)); --pop-to: translateY(calc(-100% - 30px)); }
.cr-pop--side.cr-pop--a-fade, .cr-pop--sheet.cr-pop--a-fade { --pop-from: none; --pop-to: none; }

/* The picture: unveiled upwards and settling (image reveal), drawn across from its side (directional), or
   resolving a beat after the panel (layered, depth). */
.cr-pop[data-state="opening"]:is(.cr-pop--a-image, .cr-pop--a-directional, .cr-pop--a-layered) .cr-pop__media { clip-path: inset(var(--clip-t, 0) var(--clip-r, 0) 0 var(--clip-l, 0)); }
.cr-pop--a-image { --clip-t: 100%; }
.cr-pop--a-layered { --clip-t: 100%; }
.cr-pop--a-directional { --clip-r: 100%; }
.cr-pop--a-directional.cr-pop--img-end, [dir="rtl"] .cr-pop--a-directional { --clip-r: 0; --clip-l: 100%; }
[dir="rtl"] .cr-pop--a-directional.cr-pop--img-end { --clip-r: 100%; --clip-l: 0; }
.cr-pop[data-state="opening"]:is(.cr-pop--a-image, .cr-pop--a-directional, .cr-pop--a-layered, .cr-pop--a-depth) .cr-pop__media img { transform: scale(1.16); }
.cr-pop[data-state="open"]:is(.cr-pop--a-image, .cr-pop--a-directional, .cr-pop--a-layered) .cr-pop__media {
  clip-path: inset(0 0 0 0);
  transition: clip-path calc(var(--pop-dur) * 1.3) var(--cr-ease) calc(var(--pop-delay, 0s) + var(--pop-dur) * 0.08);
}
.cr-pop[data-state="open"]:is(.cr-pop--a-image, .cr-pop--a-directional, .cr-pop--a-layered, .cr-pop--a-depth) .cr-pop__media img {
  transition: transform calc(var(--pop-dur) * 1.8) var(--cr-ease) var(--pop-delay, 0s);
}

/* The copy: parts arrive one after another (staggered, layered, image and directional reveals). */
.cr-pop[data-state="opening"]:is(.cr-pop--a-stagger, .cr-pop--a-layered, .cr-pop--a-image, .cr-pop--a-directional) :is(.cr-pop__shared, .cr-pop__step) > * { opacity: 0; transform: var(--part-from, translateY(20px)); }
.cr-pop--a-directional { --part-from: translateX(calc(-24px * var(--cr-dir))); }
.cr-pop--a-directional.cr-pop--img-end { --part-from: translateX(calc(24px * var(--cr-dir))); }
.cr-pop[data-state="open"]:is(.cr-pop--a-stagger, .cr-pop--a-layered, .cr-pop--a-image, .cr-pop--a-directional) :is(.cr-pop__shared, .cr-pop__step) > * {
  transition: opacity calc(var(--pop-dur) * 0.8) var(--cr-ease), transform var(--pop-dur) var(--cr-ease);
  transition-delay: calc(var(--parts-at, var(--pop-dur) * 0.22) + var(--i, 0) * 75ms);
}
.cr-pop--a-stagger { --parts-at: calc(var(--pop-dur) * 0.12); }
.cr-pop--a-layered { --parts-at: calc(var(--pop-dur) * 0.45); }
:is(.cr-pop__shared, .cr-pop__step) > :nth-child(2) { --i: 1; }
:is(.cr-pop__shared, .cr-pop__step) > :nth-child(3) { --i: 2; }
:is(.cr-pop__shared, .cr-pop__step) > :nth-child(4) { --i: 3; }
:is(.cr-pop__shared, .cr-pop__step) > :nth-child(5) { --i: 4; }
:is(.cr-pop__shared, .cr-pop__step) > :nth-child(n+6) { --i: 5; }
/* A later step (signed up, code copied, the next screen) rises into place. */
.cr-pop[data-state="open"] .cr-pop__step ~ .cr-pop__step:not([hidden]) { animation: cr-pop-step calc(var(--pop-dur) * 0.8) var(--cr-ease) both; }
@keyframes cr-pop-step { from { opacity: 0; transform: translateY(16px); } }

/* ---------- floating notification: a small editorial card in a corner — a rounded thumbnail of the picture (or a
   hairline ring with the sparkle), the eyebrow, the accent heading, two lines of copy and ONE action (the first
   button, code or signup field); a countdown reads as one line. Product, collection, free-shipping meter and further
   buttons stay for the bigger layouts. No dim, no scroll lock, focus stays on the page. It drifts in from its side and
   resolves from a soft blur (about half the Duration setting); it leaves quicker, sliding back out. */
.cr-pop__thumb { display: none; }
.cr-pop.cr-pop--notification { --pop-w: 380px; --pop-gap: 24px; --pop-pad: 0px; --pop-h: 1.08rem; }
.cr-pop--notification:not(.cr-pop--a-fade) { --pop-from: translateX(calc(44px * var(--cr-dir))); --pop-to: translateX(calc(28px * var(--cr-dir))); }
.cr-pop--notification.cr-pop--at-bottom-left:not(.cr-pop--a-fade), .cr-pop--notification.cr-pop--at-top-left:not(.cr-pop--a-fade) { --pop-from: translateX(calc(-44px * var(--cr-dir))); --pop-to: translateX(calc(-28px * var(--cr-dir))); }
.cr-pop--notification:not([data-state="open"]):not(.cr-pop--a-fade) .cr-pop__panel { filter: blur(6px); }
.cr-pop.cr-pop--notification .cr-pop__panel {
  grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 16px;
  width: min(calc(var(--pop-w) * var(--pop-ws)), 400px, 100%); max-height: min(340px, calc(100dvh - 48px));
  padding: 18px 18px 18px 18px;
  border: 1px solid var(--pop-line); border-radius: min(var(--pop-r), 18px);
  box-shadow: 0 16px 44px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.04);
}
.cr-pop--notification .cr-pop__thumb { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid var(--pop-line); border-radius: 50%; color: var(--pop-head); transition: border-color 0.4s var(--cr-ease), background 0.4s var(--cr-ease); }
.cr-pop--notification .cr-pop__thumb--img { width: 68px; height: 84px; border: 0; border-radius: min(var(--pop-r), 10px); background: var(--cr-bg-alt); }
.cr-pop__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cr-pop__thumb-ok { display: none; }
.cr-pop--notification:is([data-step="success"], [data-step="claimed"]) .cr-pop__thumb:not(.cr-pop__thumb--img) { border-color: var(--pop-head); }
.cr-pop--notification:is([data-step="success"], [data-step="claimed"]) .cr-pop__thumb-icon { display: none; }
.cr-pop--notification:is([data-step="success"], [data-step="claimed"]) .cr-pop__thumb-ok { display: inline-flex; animation: cr-added-in var(--cr-dur-slow) var(--cr-ease) both; }
.cr-pop--notification:is([data-step="success"], [data-step="claimed"]) .cr-pop__thumb--img .cr-pop__thumb-ok { position: absolute; inset-block-end: -6px; inset-inline-end: -6px; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: var(--cr-btn-bg); color: var(--cr-btn-ink); box-shadow: 0 0 0 2px var(--pop-bg); }
.cr-pop.cr-pop--notification .cr-pop__body { padding: 0; align-self: center; overflow: visible; }
.cr-pop--notification :is(.cr-pop__shared, .cr-pop__step) { gap: 6px; }
.cr-pop--notification :is(.cr-pop__shared, .cr-pop__step) > :first-child { padding-inline-end: 26px; }
.cr-pop--notification .cr-pop__close { top: 8px; inset-inline-end: 8px; width: 32px; height: 32px; border-color: transparent; background: transparent; color: var(--pop-muted); }
.cr-pop--notification .cr-pop__close:hover { border-color: var(--pop-line); background: transparent; color: var(--pop-head); }
.cr-pop--notification .cr-pop__close svg { width: 12px; height: 12px; }
.cr-pop--notification .cr-pop__heading { max-width: none; font-size: var(--pop-h); line-height: 1.22; padding-inline-end: 26px; }
.cr-pop--notification .cr-pop__text--eyebrow { gap: 8px; font-size: 0.66rem; letter-spacing: 0.2em; }
.cr-pop--notification .cr-pop__text--eyebrow::before { width: 16px; }
.cr-pop--notification :is(.cr-pop__text, .cr-pop__rte):not(.cr-pop__text--eyebrow) { max-width: none; font-size: 0.84rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cr-pop--notification .cr-pop__rte :is(p, ul, ol) { margin: 0; }
/* the one action: what comes after it (and a second paragraph) is left out */
.cr-pop--notification :is(.cr-pop__product, .cr-pop__collection, .cr-pop__ship, .cr-pop__success-mark, .cr-pop__coupon-head) { display: none; }
.cr-pop--notification :is(.cr-pop__btn, .cr-pop__textlink, .cr-pop__form, .cr-pop__coupon):not([hidden]) ~ *,
.cr-pop--notification :is(.cr-pop__text--body, .cr-pop__text--lead, .cr-pop__rte):not([hidden]) ~ :is(.cr-pop__text--body, .cr-pop__text--lead, .cr-pop__rte) { display: none; }
.cr-pop--notification .cr-pop__success { gap: 6px; align-items: flex-start; }
.cr-pop.cr-pop--notification .cr-pop__btn { min-height: 34px; margin-top: 6px; padding: 7px 15px 7px 7px; gap: 8px; font-size: 0.8rem; border-radius: 40px; }
.cr-pop.cr-pop--notification .cr-pop__btn .cr-btn__chip { width: 20px; height: 20px; }
.theme-root[data-cr-arrows="false"] .cr-pop.cr-pop--notification .cr-pop__btn { padding-inline: 15px; }
.cr-pop--notification .cr-pop__textlink { margin-top: 4px; font-size: 0.82rem; }
.cr-pop--notification .cr-pop__form { gap: 6px; max-width: none; margin-top: 6px; }
.cr-pop--notification .cr-pop__form > .cr-pop__input { display: none; }
.cr-pop.cr-pop--notification .cr-pop__input { height: 42px; padding-inline: 14px; font-size: 0.84rem; border-radius: 40px; }
.cr-pop.cr-pop--notification .cr-pop__field .cr-pop__input { padding-inline-end: 112px; }
.cr-pop.cr-pop--notification .cr-pop__submit { position: absolute; inset-block: 4px; inset-inline-end: 4px; width: auto; min-height: 0; margin: 0; padding-block: 0; padding-inline: 5px 13px; gap: 7px; font-size: 0.78rem; border-radius: 40px; }
.cr-pop.cr-pop--notification .cr-pop__submit .cr-btn__chip { width: 22px; height: 22px; }
.theme-root[data-cr-arrows="false"] .cr-pop.cr-pop--notification .cr-pop__submit { padding-inline: 13px; }
.cr-pop--notification .cr-pop__consent { font-size: 0.72rem; }
.cr-pop--notification .cr-pop__note { font-size: 0.76rem; }
.cr-pop--notification .cr-pop__coupon { width: auto; max-width: 100%; margin-top: 6px; }
.cr-pop.cr-pop--notification .cr-pop__code { width: auto; height: 40px; gap: 12px; padding-inline: 14px 4px; font-size: 0.92rem; letter-spacing: 0.16em; border-radius: 40px; }
.cr-pop.cr-pop--notification .cr-pop__code-action { height: 30px; padding-inline: 12px; font-size: 0.74rem; border-radius: 40px; }
.cr-pop--notification .cr-pop__countdown { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.cr-pop--notification .cr-pop__cd-label { font-size: 0.66rem; letter-spacing: 0.18em; }
.cr-pop--notification .cr-pop__cd-units { display: inline-flex; direction: ltr; unicode-bidi: isolate; }
.cr-pop.cr-pop--notification .cr-pop__cd-unit { display: inline; padding: 0; border: 0; }
.cr-pop--notification .cr-pop__cd-unit + .cr-pop__cd-unit::before { content: ':'; color: var(--pop-muted); }
.cr-pop--notification .cr-pop__cd-unit b { font-size: 0.86rem; font-weight: 600; letter-spacing: 0.04em; }
.cr-pop--notification .cr-pop__cd-unit small { display: none; }

/* Gentler Animation setting: fades and short rises only. Reduced motion / Animation off: see the end. */
.theme-root[data-motion="subtle"] .cr-pop:not(.cr-pop--side):not(.cr-pop--sheet):not(.cr-pop--bar) { --pop-from: translateY(10px); --pop-to: none; }
.theme-root[data-motion="subtle"] .cr-pop .cr-pop__panel { filter: none; }
.theme-root[data-motion="subtle"] .cr-pop .cr-pop__media, .theme-root[data-motion="subtle"] .cr-pop .cr-pop__media img { clip-path: none; transform: none; }
.theme-root[data-motion="subtle"] .cr-pop :is(.cr-pop__shared, .cr-pop__step) > * { transform: none; }

/* ---------- theme editor: a part the platform hid for this visitor's conditions stays visible, dimmed
   (crown-core.js), so it can be selected and edited */
.theme-root[data-design-mode="true"] .cr-pop .is-off { opacity: 0.4; }

/* ---------- phones */
@media (max-width: 749px) {
  .cr-pop { --pop-gap: 12px; --pop-pad: 30px 22px 24px; }
  .cr-pop .cr-pop__panel { width: 100%; }
  .cr-pop:not(.cr-pop--editorial) .cr-pop__panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 0; }
  .cr-pop.cr-pop--img-end .cr-pop__media { order: 0; }
  .cr-pop:not(.cr-pop--editorial) .cr-pop__media { aspect-ratio: 16 / 10; max-height: 30vh; }
  .cr-pop:not(.cr-pop--editorial) .cr-pop__media::after { display: none; }
  .cr-pop :is(.cr-pop__shared, .cr-pop__step) { gap: 12px; }
  .cr-pop .cr-pop__text--body { font-size: var(--cr-text-m); }
  .cr-pop .cr-pop__close { top: 12px; inset-inline-end: 12px; width: 34px; height: 34px; }
  /* card (automatic for cards) and compact: centred, the compact one without its picture */
  .cr-pop:is(.cr-pop--phone-card, .cr-pop--phone-compact) { align-items: center; justify-items: stretch; }
  .cr-pop:is(.cr-pop--phone-card, .cr-pop--phone-compact) .cr-pop__panel { max-height: calc(100dvh - 24px); }
  .cr-pop--phone-compact:not(.cr-pop--editorial) .cr-pop__media { display: none; }
  .cr-pop--phone-compact { --pop-pad: 34px 22px 24px; }
  /* sheet: full width from the bottom edge, rounded on top, a grabber */
  .cr-pop--phone-sheet { --pop-gap: 0px; align-items: end; justify-items: stretch; }
  .cr-pop--phone-sheet .cr-pop__panel { max-height: 90dvh; border-radius: var(--pop-r) var(--pop-r) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .cr-pop--phone-sheet.cr-pop--editorial .cr-pop__panel { height: 82dvh; }
  .cr-pop--phone-sheet:not(.cr-pop--a-fade) { --pop-from: translateY(100%); --pop-to: translateY(100%); }
  .cr-pop--phone-sheet .cr-pop__panel::before {
    content: ""; position: absolute; top: 10px; left: 50%; z-index: 2;
    width: 42px; height: 4px; margin-left: -21px;
    border-radius: 4px;
    background: var(--pop-line);
  }
  /* full screen */
  .cr-pop--phone-full { --pop-gap: 0px; align-items: stretch; justify-items: stretch; }
  .cr-pop.cr-pop--phone-full .cr-pop__panel { height: 100%; max-height: none; border-radius: 0; }
  .cr-pop--phone-full:not(.cr-pop--editorial) .cr-pop__panel { grid-template-rows: auto minmax(0, 1fr); }
  .cr-pop--phone-full:not(.cr-pop--editorial) .cr-pop__media { aspect-ratio: auto; height: 42dvh; max-height: none; }
  .cr-pop--phone-full .cr-pop__close { top: max(14px, env(safe-area-inset-top)); }
  .cr-pop--editorial .cr-pop__body { width: 100%; }
  .cr-pop--editorial .cr-pop__media::after { background: linear-gradient(to top, rgb(0 0 0 / 0.84), rgb(0 0 0 / 0.55) 48%, rgb(0 0 0 / 0) 82%); }
  /* dock (corner card, notification): a card along the bottom */
  .cr-pop--phone-dock { align-items: end; justify-items: stretch; }
  /* the notification: the same small card, full width less the margins, never more than ~40% of the screen */
  .cr-pop.cr-pop--notification { --pop-gap: 12px; --pop-pad: 0px; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .cr-pop--notification:not(.cr-pop--a-fade), .cr-pop--notification.cr-pop--at-bottom-left:not(.cr-pop--a-fade), .cr-pop--notification.cr-pop--at-top-left:not(.cr-pop--a-fade) { --pop-from: translateY(calc(100% + 24px)); --pop-to: translateY(calc(100% + 24px)); }
  .cr-pop.cr-pop--notification .cr-pop__panel { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: none; width: 100%; max-height: 40dvh; padding: 14px; column-gap: 12px; overflow-y: auto; }
  .cr-pop--notification .cr-pop__thumb { width: 48px; height: 48px; }
  .cr-pop--notification .cr-pop__thumb--img { width: 52px; height: 64px; }
  .cr-pop.cr-pop--notification .cr-pop__close { top: 6px; inset-inline-end: 6px; width: 32px; height: 32px; }
  .cr-pop--phone-dock.cr-pop--corner .cr-pop__media { aspect-ratio: 16 / 7; }
  /* bar: the parts stack */
  .cr-pop--phone-bar { --pop-pad: 18px 52px 18px 18px; }
  .cr-pop--phone-bar .cr-pop__body, .cr-pop--phone-bar :is(.cr-pop__shared, .cr-pop__step) { flex-direction: column; align-items: flex-start; gap: 10px; text-align: start; }
  .cr-pop--phone-bar .cr-pop__close { inset-block: auto; top: 12px; margin: 0; }
  .cr-pop--phone-bar :is(.cr-pop__form, .cr-pop__coupon, .cr-pop__ship) { width: 100%; }
}

/* ---------- reduced motion, Animation off */
@media (prefers-reduced-motion: reduce) {
  .cr-pop .cr-pop__panel, .cr-pop[data-state] .cr-pop__panel { transform: none !important; filter: none !important; transition: opacity 0.2s linear !important; }
  .cr-pop .cr-pop__overlay { transition: opacity 0.2s linear !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .cr-pop[data-state] .cr-pop__media, .cr-pop[data-state] .cr-pop__media img { clip-path: none !important; transform: none !important; transition: none !important; }
  .cr-pop[data-state] :is(.cr-pop__shared, .cr-pop__step) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .cr-pop .cr-pop__step { animation: none !important; }
  .cr-pop__close, .cr-pop__close:hover { transition: none; transform: none; }
}
.theme-root[data-motion="none"] .cr-pop .cr-pop__panel, .theme-root[data-motion="none"] .cr-pop .cr-pop__overlay { transform: none !important; filter: none !important; transition: none !important; }
.theme-root[data-motion="none"] .cr-pop .cr-pop__media, .theme-root[data-motion="none"] .cr-pop .cr-pop__media img { clip-path: none !important; transform: none !important; transition: none !important; }
.theme-root[data-motion="none"] .cr-pop :is(.cr-pop__shared, .cr-pop__step) > * { opacity: 1 !important; transform: none !important; transition: none !important; }
.theme-root[data-motion="none"] .cr-pop .cr-pop__step { animation: none !important; }

/* soooks-theme:crown:169557:b70868709918b8df */
/* Crown — the page templates: the product page (edge gallery + floating buy box, the banner layout, the sticky buy
   bar; the Featured product section draws the same pieces), the collection and search pages (pill navigation, filter rail,
   toolbar, self-loading grid), cart, blog, article, page, contact, sign-in and 404.
   Builds on crown-base.css and crown-sections.css. */

/* ================================================================ sticky buy bar */
/* A floating card at the reading-end corner once the buy box has scrolled away. */
.cr-buybar {
  position: fixed; bottom: 18px; inset-inline-end: 18px; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  width: min(370px, calc(100vw - 36px));
  padding: 10px;
  border-radius: 18px;
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow);
  opacity: 0; visibility: hidden;
  transform: translateY(14px);
  transition: opacity 0.45s, transform 0.5s var(--cr-ease), visibility 0.5s;
}
.cr-buybar.is-visible { opacity: 1; visibility: visible; transform: none; }
.cr-buybar__img { flex: 0 0 auto; width: 56px; aspect-ratio: 4/5; overflow: hidden; border-radius: 10px; background: var(--cr-bg-alt); }
.cr-buybar__img img { width: 100%; height: 100%; object-fit: cover; }
.cr-buybar__body { flex: 1 1 auto; min-width: 0; }
.cr-buybar__title { overflow: hidden; font-size: var(--cr-text); font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }
.cr-buybar__meta { font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-buybar__price { font-family: var(--cr-display-font); font-size: var(--cr-text); font-weight: 700; }
.cr-buybar__close { position: absolute; top: 8px; inset-inline-end: 10px; display: inline-flex; padding: 4px; border: none; background: none; color: var(--cr-muted); cursor: pointer; }
.cr-buybar__close svg { width: 13px; height: 13px; }
.cr-buybar__close:hover { color: var(--cr-heading); }
.cr-buybar .cr-circle { align-self: flex-end; }

/* ================================================================ product page */
/* The gallery runs edge to edge (a swipe track with arrows at the start foot and a thumb column at the end); the
   buy box floats beside it as a sticky card (plain: no card). Computers: the picture fits the screen height and is
   never cropped. Phones: one column, the card overlapping the gallery's foot. */
.cr-pdp { position: relative; }
.cr-pdp__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 560px); align-items: start; gap: 0; }
.cr-pdp__gallery { position: relative; }
.cr-pdp__stage { position: relative; overflow: hidden; background: var(--cr-bg-alt); }
.cr-pdp__stage .cr-qv__gallery { margin: 0; border-radius: 0; }
.cr-pdp__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cr-pdp__track::-webkit-scrollbar { display: none; }
.cr-pdp__slide { position: relative; flex: 0 0 100%; aspect-ratio: var(--pdp-ratio, 4/5); cursor: zoom-in; scroll-snap-align: start; }
.cr-pdp__slide img, .cr-pdp__slide video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 990px) {
  .cr-pdp__slide { max-height: calc(100svh - 124px); }
  .cr-pdp__slide img { object-fit: contain; }
}
.cr-pdp__arrows { position: absolute; bottom: 18px; inset-inline-start: 18px; z-index: 4; }
.cr-pdp__thumbs { position: absolute; top: 18px; bottom: 18px; inset-inline-end: 18px; z-index: 4; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; scrollbar-width: none; }
.cr-pdp__thumbs::-webkit-scrollbar { display: none; }
.cr-pdp__thumbs button {
  flex: 0 0 auto;
  width: 62px; aspect-ratio: 4/5;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 10px;
  background: var(--cr-bg-alt);
  cursor: pointer;
  opacity: 0.85;
  transition: border-color var(--cr-dur-fast), opacity var(--cr-dur-fast);
}
.cr-pdp__thumbs button:hover { opacity: 1; }
.cr-pdp__thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.cr-pdp__thumbs button.is-active { border-color: var(--cr-heading); opacity: 1; }
.cr-pdp__buybox-col { padding: clamp(18px, 3vw, 44px); }
.cr-pdp__buybox {
  position: sticky; top: 84px;
  padding: clamp(20px, 2.6vw, 36px);
  border-radius: var(--cr-card-radius);
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow);
}
.cr-pdp--plain .cr-pdp__buybox { padding-inline: 0; border-radius: 0; box-shadow: none; }
.cr-pdp__title { margin-bottom: 6px; font-size: var(--cr-h4); }
.cr-pdp__ratings { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-stars { display: inline-flex; gap: 2px; color: var(--cr-heading); }
.cr-stars svg { width: 13px; height: 13px; }
.cr-pdp__price-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.cr-pdp__price-row .cr-price__amount { font-size: var(--cr-h6); }
.cr-pdp__shipnote { margin-bottom: 12px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-pdp__shipnote a, .cr-pdp__shipnote .u { text-decoration: underline; text-underline-offset: 2px; }
.cr-pdp__desc { margin-bottom: 14px; color: var(--cr-muted); }
.cr-pdp__sizechart { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px; padding: 0; border: none; background: none; color: inherit; font-size: var(--cr-text-s); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-pdp__sizechart svg { width: 16px; height: 16px; }
.cr-pdp__sizechart:hover { color: var(--cr-accent); }
.cr-pdp__stockline { margin: 2px 0 14px; }
.cr-pdp__qty { margin-bottom: 16px; }
.cr-pdp__qty > label { display: block; margin-bottom: 8px; font-size: var(--cr-text-s); font-weight: 700; }
.cr-pdp__buys { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cr-pdp__buys--single { grid-template-columns: 1fr; }
.cr-pdp__trust { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 16px; }
.cr-pdp__trust span { display: inline-flex; align-items: center; gap: 7px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-pdp__trust svg { width: 15px; height: 15px; }
.cr-pdp__meta { display: grid; gap: 4px; margin-top: 14px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-pdp__meta b { font-weight: 600; color: var(--cr-ink); }
.cr-pdp__below { max-width: 720px; padding: clamp(20px, 3vw, 44px) 0 0; }
@media (max-width: 749px) {
  .cr-pdp__grid { grid-template-columns: 1fr; }
  .cr-pdp__buybox-col { margin-top: -60px; padding: 14px var(--cr-gutter) 0; }
  .cr-pdp__buybox { position: static; }
  .cr-pdp__thumbs { display: none; }
  .cr-pdp__buys { grid-template-columns: 1fr; }
}
@media (max-width: 649px) {
  .cr-pdp__buybox { box-shadow: var(--cr-shadow-soft); }
}

/* Banner layout: a drifting / sliding strip of contained pictures with the buy box as one bar floating over its
   foot (identity at the start, options / quantity / buttons at the end, on a single 50px control rhythm). No
   overflow on the bar: its dropdowns must escape it. */
.cr-pdpb__hero { position: relative; }
.cr-pdpb__stage { position: relative; height: var(--pdpb-h, 64vh); min-height: 460px; }
.cr-pdpb__gallery { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.cr-pdpb__gallery::-webkit-scrollbar { display: none; }
/* Continuous drift (a scroll position written every frame): no snapping, no smooth scrolling, no arrows. */
.cr-pdpb__gallery.is-drifting { scroll-snap-type: none; scroll-behavior: auto; }
.cr-pdpb__gallery.is-drifting + .cr-arrows { display: none; }
.cr-pdpb__slide {
  position: relative;
  flex: 0 0 33.3334%;
  min-width: 340px; height: 100%;
  border-inline-end: 2px solid var(--cr-bg);
  background: var(--cr-bg-alt);
  cursor: zoom-in;
  scroll-snap-align: start;
}
.cr-pdpb__slide img { width: 100%; height: 100%; padding: 6%; object-fit: contain; }
/* One or two pictures share the stage between them (never repeated). */
.cr-pdpb__gallery--few .cr-pdpb__slide { flex-basis: calc(100% / var(--pdpb-n, 1)); }
.cr-pdpb__arrows { position: absolute; top: 18px; inset-inline-end: 18px; z-index: 6; }
.cr-pdpb__banner {
  position: absolute; bottom: 20px; inset-inline: var(--cr-gutter); z-index: 5;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px clamp(16px, 2vw, 28px);
  padding: 14px clamp(16px, 1.8vw, 24px);
  border-radius: 18px;
  background: var(--cr-bg);
  box-shadow: var(--cr-shadow);
}
.cr-pdpb__id { flex: 1 1 260px; display: flex; align-items: center; gap: 14px; min-width: 0; }
.cr-pdpb__thumb { flex: 0 0 auto; width: 56px; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: var(--cr-bg-alt); }
.cr-pdpb__thumb img { width: 100%; height: 100%; object-fit: cover; }
.cr-pdpb__info { display: grid; gap: 3px; min-width: 0; }
.theme-root .cr-pdpb__title { margin: 0; overflow: hidden; font-family: var(--cr-body-font); font-size: var(--cr-text-l); font-weight: 600; line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; }
.cr-pdpb__meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; }
.cr-pdpb__meta .cr-price { margin: 0; }
.cr-pdpb__form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-inline-start: auto; }
.cr-pdpb__form > script, .cr-pdpb__form > input[type="hidden"] { display: none !important; }
.cr-pdpb__cell { display: block; }
.cr-pdpb__cell .cr-dd { min-width: 168px; }
.cr-pdpb__cell .cr-dd__btn { min-height: 50px; }
.cr-pdpb__cell .cr-qty { height: 50px; border-radius: var(--cr-form-radius); }
.cr-pdpb__cell .cr-qty--sm button, .cr-pdpb__cell .cr-qty--sm input { height: 48px; }
.cr-pdpb__buy { display: flex; align-items: center; gap: 10px; }
.cr-pdpb__buy .cr-btn { min-height: 50px; }
/* Buy now: the true secondary action, an outline pill that fills on hover. */
.cr-pdpb__buy .cr-btn--secondary {
  --btn-bg: transparent;
  --btn-ink: var(--cr-heading);
  --btn-line: var(--cr-heading);
  --btn-bg-h: var(--cr-heading);
  --btn-ink-h: var(--cr-bg);
  --btn-line-h: var(--cr-heading);
}
.cr-pdpb__alt { display: grid; justify-items: center; gap: 4px; }
.cr-pdpb__more { font-size: var(--cr-text-xs); color: var(--cr-muted); text-decoration: underline; text-underline-offset: 3px; }
.cr-pdpb__more:hover { color: var(--cr-heading); }
/* The add-to-cart note floats above the bar instead of squeezing the button row. */
.cr-pdpb__banner .cr-note { position: absolute; bottom: calc(100% + 10px); inset-inline-end: 14px; z-index: 2; margin: 0; background: var(--cr-bg); box-shadow: var(--cr-shadow-soft); }
@media (max-width: 899px) {
  .cr-pdpb__slide { flex-basis: 72%; min-width: 0; }
  .cr-pdpb__gallery--one .cr-pdpb__slide { flex-basis: 100%; }
  .cr-pdpb__stage { min-height: 480px; }
  .cr-pdpb__banner { position: relative; bottom: 0; inset-inline: 0; margin: -28px var(--cr-gutter) 0; }
  .cr-pdpb__id { flex-basis: 100%; }
  .theme-root .cr-pdpb__title { white-space: normal; }
  .cr-pdpb__form { width: 100%; margin-inline-start: 0; }
  .cr-pdpb__cell { flex: 1 1 150px; }
  .cr-pdpb__cell .cr-dd { width: 100%; min-width: 0; }
  .cr-pdpb__buy { display: grid; grid-template-columns: 1fr 1fr; align-items: start; width: 100%; }
  .cr-pdpb__buy .cr-btn { width: 100%; }
  .cr-pdpb__buy:not(:has(.cr-pdpb__alt)) { grid-template-columns: 1fr; }
}

/* ================================================================ collection and search */
/* Head, pill navigation (picture pills), the toolbar (filter button, count, sort) over a dashed rule, then the
   layout: the filter rail opens inline at the start (its column grows from 0) — phones show it above the grid —
   and the grid loads its next pages by itself. */
.cr-coll__head { padding-top: clamp(20px, 3.4vw, 46px); }
.cr-coll__head h1 { margin-bottom: 10px; font-size: var(--cr-h2); }
.cr-coll__head > p { max-width: 640px; color: var(--cr-muted); }
.cr-collnav { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 4px; }
.cr-collnav__pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding-block: 7px;
  padding-inline: 8px 20px;
  border: 1px solid var(--cr-heading);
  border-radius: 50px;
  font-weight: 600;
  transition: background 0.2s, color 0.2s;
}
.cr-collnav__pill img { width: 34px; height: 34px; object-fit: cover; border-radius: 50%; }
.cr-collnav__pill:hover, .cr-collnav__pill.is-active { background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-coll__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; padding: 18px 0; border-top: 1px dashed var(--cr-hairline); }
.cr-coll__count { font-size: var(--cr-text-m); }
.cr-coll__count b { font-weight: 700; }
.cr-coll__count span { color: var(--cr-muted); }
.cr-filterbtn svg { width: 16px; height: 16px; }

.cr-coll__layout { display: grid; grid-template-columns: 0 1fr; transition: grid-template-columns 0.4s var(--cr-ease); }
.cr-coll__layout.is-filtering { grid-template-columns: 250px 1fr; gap: 30px; }
.cr-filters { overflow: hidden; opacity: 0; transition: opacity 0.3s 0.1s; }
.cr-coll__layout.is-filtering .cr-filters { opacity: 1; }
.cr-coll__layout.is-filtering.is-settled .cr-filters { overflow: visible; }
.cr-filters__inner { display: grid; align-content: start; gap: 24px; width: 250px; padding-bottom: 30px; }
.cr-filters h5 { margin: 0 0 12px; font-size: var(--cr-text-m); }
.cr-filters__list { display: grid; gap: 9px; }
.cr-filters__list .cr-check span { font-size: var(--cr-text); }
.cr-filters__list .cr-check .n { margin-inline-start: 4px; color: var(--cr-muted); }
.cr-filters__swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-filters__swatches .cr-swatch { width: 26px; height: 26px; border-radius: 8px; }
/* The swatch names open towards the page (the rail sits at its start edge). */
.cr-filters__swatches .cr-swatch[data-tip]:hover::after, .cr-filters__swatches .cr-swatch[data-tip]:focus-visible::after { left: 0; transform: none; }
[dir="rtl"] .cr-filters__swatches .cr-swatch[data-tip]:is(:hover, :focus-visible)::after { left: auto; right: 0; }
.cr-filters__sizes { display: flex; flex-wrap: wrap; gap: 8px; }
.cr-price-range { display: flex; align-items: center; gap: 8px; }
.cr-price-range input { width: 100%; }
.cr-filters__apply { width: 100%; margin-top: 10px; }
.cr-filters__clear { justify-self: start; padding: 0; border: none; background: none; color: var(--cr-muted); font-size: var(--cr-text-s); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-filters__clear:hover { color: var(--cr-heading); }
.cr-grid__sentinel { height: 1px; }
.cr-loadmore { display: grid; justify-items: center; gap: 10px; padding: 30px 0 6px; }
.cr-loadmore__count { font-size: var(--cr-text-s); color: var(--cr-muted); }
@media (max-width: 899px) {
  /* The rail is hidden here, so the products own the only column. */
  .cr-coll__layout, .cr-coll__layout.is-filtering { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cr-filters { display: none; }
  .cr-coll__layout.is-filtering .cr-filters { display: block; }
  .cr-filters__inner { width: 100%; padding-bottom: 20px; }
}
@media (max-width: 649px) {
  .cr-collnav__pill { padding-inline: 6px 14px; padding-block: 5px; font-size: var(--cr-text-s); }
  .cr-collnav__pill img { width: 28px; height: 28px; }
}

/* ================================================================ page heads, prose, breadcrumbs, pagination */
.cr-page-head { padding: clamp(24px, 4vw, 54px) 0 clamp(14px, 2vw, 26px); }
.cr-page-head h1 { margin-bottom: 8px; font-size: var(--cr-h2); }
.cr-page-head p { max-width: 640px; color: var(--cr-muted); }
.cr-prose { max-width: 760px; font-size: var(--cr-text-m); line-height: 1.7; }
.cr-prose h2, .cr-prose h3 { margin-top: 1.4em; }
.cr-prose img { border-radius: var(--cr-pcard-radius); }
.cr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding-top: 16px; font-size: var(--cr-text-s); color: var(--cr-muted); }
.cr-crumbs a:hover { color: var(--cr-heading); text-decoration: underline; text-underline-offset: 3px; }
.cr-crumbs svg { width: 11px; height: 11px; opacity: 0.6; }
.cr-pagination { display: flex; justify-content: center; gap: 8px; padding-top: 30px; }
.cr-pagination__num, .cr-pagination__btn, .cr-pagination__gap {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  padding: 0 8px;
  border: 1px solid var(--cr-hairline);
  border-radius: 12px;
  font-weight: 600;
}
.cr-pagination__num:hover, .cr-pagination__btn:hover { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); }
.cr-pagination__gap { border: none; }
.cr-pagination .is-current { border-color: var(--cr-btn-bg); background: var(--cr-btn-bg); color: var(--cr-btn-ink); }

/* ================================================================ cart page */
.cr-cartpage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); align-items: start; gap: clamp(24px, 4vw, 60px); }
.cr-cartpage__summary { position: sticky; top: 90px; display: grid; gap: 14px; padding: clamp(20px, 2.6vw, 34px); border-radius: var(--cr-card-radius); background: var(--cr-bg-soft); }
.cr-cartpage__summary h3 { margin: 0; font-size: var(--cr-h5); }
@media (max-width: 899px) {
  .cr-cartpage { grid-template-columns: 1fr; }
  .cr-cartpage__summary { position: static; }
}

/* ================================================================ sign-in */
.cr-auth { max-width: 440px; margin-inline: auto; padding: clamp(30px, 5vw, 60px) 0; }
.cr-auth__panel { display: grid; gap: 6px; padding: clamp(22px, 3vw, 38px); border: 1px solid var(--cr-hairline); border-radius: var(--cr-card-radius); background: var(--cr-bg); box-shadow: var(--cr-shadow-soft); }
.cr-auth__swap { margin-top: 14px; font-size: var(--cr-text-s); color: var(--cr-muted); text-align: center; }
.cr-auth__swap button { border: none; background: none; color: var(--cr-heading); font-family: inherit; font-size: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cr-auth__tabs { display: flex; justify-content: center; gap: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--cr-hairline); }
.cr-auth__tab { position: relative; padding: 8px 2px 12px; border: none; background: none; font: inherit; font-weight: 700; color: var(--cr-muted); cursor: pointer; }
.cr-auth__tab.is-active { color: var(--cr-heading); }
.cr-auth__tab.is-active::after { content: ""; position: absolute; bottom: -1px; inset-inline: 0; height: 2px; background: var(--cr-heading); }

/* ================================================================ article, 404, contact */
.cr-article__hero { aspect-ratio: 16/7; margin-bottom: clamp(20px, 3vw, 40px); overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-article__hero img { width: 100%; height: 100%; object-fit: cover; }
.cr-404 { display: grid; justify-items: center; gap: 18px; padding: clamp(50px, 9vw, 130px) 0; text-align: center; }
.cr-404 h1 { margin: 0; font-size: clamp(80px, 14vw, 190px); line-height: 0.9; }
.cr-404 p { color: var(--cr-muted); }
.cr-contact { display: grid; grid-template-columns: minmax(280px, 0.8fr) 1.2fr; gap: clamp(26px, 4.5vw, 70px); }
@media (max-width: 899px) { .cr-contact { grid-template-columns: 1fr; } }

/* Featured product (section): the product page's pieces inline — the gallery rounded, the buy box static beside it
   and vertically centred, the options stacked. */
.cr-pdp--embed .cr-pdp__grid { align-items: center; }
.cr-pdp--embed .cr-pdp__gallery { overflow: hidden; border-radius: var(--cr-card-radius); }
.cr-pdp--embed .cr-pdp__gallery > img { width: 100%; }
.cr-pdp--embed .cr-pdp__buybox { position: static; }
/* The options stack (product page and featured product). */
.cr-pdp__opts { display: grid; gap: 14px; margin-bottom: 14px; }
.cr-pdp__opts .cr-qv__opt { margin: 0; }
.cr-pdp__delivery { margin-bottom: 16px; }
.cr-pdp__below--wide { max-width: 100%; }
.cr-popup__title { margin-bottom: 14px; }
.cr-popup .cr-acc__inner { padding: 0; }

/* ================================================================ page / blog / article sections */
/* main-page, main-blog and main-article sit right under the header (no top padding). */
.cr-section--flush-top { padding-top: 0; }
.cr-page-head--center { text-align: center; }
.cr-page-head--center .cr-acard__meta { justify-content: center; }
.cr-page-head .cr-article__title { font-size: var(--cr-h3); }
.cr-article__body { margin-inline: auto; }
.cr-article__back { margin-top: 40px; text-align: center; }

/* ================================================================ contact form */
.cr-contact__info { display: grid; gap: 10px; margin-top: 20px; }
.cr-contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* ================================================================ cart page details */
.cr-cartpage .cr-lines { gap: 14px; }
.cr-cartpage .cr-empty { grid-column: 1/-1; }
.cr-cartpage__summary .cr-fineprint { margin: 0; text-align: start; }
.cr-cartpage__continue { justify-self: center; text-decoration: underline; text-underline-offset: 3px; }

/* ================================================================ search page details */
.cr-search__form--page { max-width: 560px; margin: 0 auto 34px; }
.cr-coll__bar--plain { padding-top: 0; border-top: none; }
.theme-root select.cr-input--auto { width: auto; }

/* ================================================================ sign-in details */
.cr-section--auth { padding-top: 2.5rem; }
.cr-auth__title { font-size: var(--cr-h4); text-align: center; }
.cr-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }