/* luxe.css: Atelier Alpino update layer for skisises.com (prototype build) */
/* latin-ext */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(https://fonts.gstatic.com/s/albertsans/v4/i7dOIFdwYjGaAMFtZd_QA1ZVYFeQGQyUV3U.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: optional;
  src: url(https://fonts.gstatic.com/s/albertsans/v4/i7dOIFdwYjGaAMFtZd_QA1ZbYFeQGQyU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bodonimoda/v28/aFTQ7PxzY382XsXX63LUYJSESKjWXFBPgas.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/bodonimoda/v28/aFTQ7PxzY382XsXX63LUYJSKSKjWXFBP.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Metric-matched fallbacks (measured in Chrome, tools/.cache): the font swap shifts nothing */
@font-face { font-family: 'Bodoni Fallback'; src: local('Georgia'); size-adjust: 104.56%; ascent-override: 108.07%; descent-override: 38.26%; line-gap-override: 0%; }
@font-face { font-family: 'Albert Fallback'; src: local('Arial'), local('Helvetica'); size-adjust: 102.52%; ascent-override: 92.67%; descent-override: 24.39%; line-gap-override: 0%; }

/* Generated by tools/palette.mjs: edit the OKLCH values there, not here. */
:root {
  --stone: #F5F5F1; /* oklch(0.97 0.006 105) */
  --snow: #FBFBF8; /* oklch(0.986 0.004 105) */
  --lichen: #E6EAE2; /* oklch(0.932 0.011 128) */
  --ink: #131914; /* oklch(0.205 0.014 150) */
  --ink-2: #424A43; /* oklch(0.4 0.016 150) */
  --ink-3: #5F6760; /* oklch(0.505 0.014 150) */
  --forest-950: #0B170E; /* oklch(0.19 0.024 152) */
  --forest-900: #152519; /* oklch(0.245 0.03 152) */
  --on-dark: #ECEEE7; /* oklch(0.945 0.01 120) */
  --on-dark-2: #B3BAB0; /* oklch(0.78 0.016 135) */
  --green-800: #254B27; /* oklch(0.375 0.075 145) */
  --green-700: #356938; /* oklch(0.47 0.095 145) */
  --green-100: #E2F3DE; /* oklch(0.945 0.032 140) */
  --brick: #913E23; /* oklch(0.47 0.12 38) */
  --error: #AF2B25; /* oklch(0.5 0.17 28) */
  --green-500: #59A44B; /* brand */
  --green-300: #93C586; /* brand */
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--ink) 28%, transparent);
  --line-on-dark: color-mix(in srgb, var(--on-dark) 18%, transparent);
}

/* ---------- tokens: the new theme settings (fonts, scale, spacing, motion) ---------- */
:root {
  --font-display: 'Bodoni Moda', 'Bodoni Fallback', Georgia, serif;
  --font-text: 'Albert Sans', 'Albert Fallback', Arial, sans-serif;

  /* five display sizes, ratio ~1.25 mobile / ~1.333 desktop, capped at 6rem */
  --fs-d1: clamp(2.75rem, 1.6rem + 4.6vw, 6rem);
  --fs-d2: clamp(2.125rem, 1.55rem + 2.4vw, 3.75rem);
  --fs-d3: clamp(1.75rem, 1.4rem + 1.3vw, 2.625rem);
  --fs-d4: clamp(1.375rem, 1.22rem + 0.6vw, 1.75rem);
  --fs-d5: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;
  --lh-tight: 1.05;
  --lh-snug: 1.2;
  --lh-body: 1.55;
  --track-display: -0.02em;
  --track-caps: 0.08em;

  /* 4pt spacing */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --section: clamp(72px, 4rem + 6vw, 160px);
  --gutter: clamp(16px, 4vw, 64px);
  --container: 1440px;
  --header-h: 112px; --header-bar-h: 68px; --nav-h: 44px;
  --radius: 4px;

  /* motion: base unit 80ms; --m is 0 under reduced motion, so movement collapses while fades stay */
  --m: 1;
  --d-80: 80ms; --d-160: 160ms; --d-240: 240ms; --d-320: 320ms;
  --d-480: 480ms; --d-640: 640ms; --d-800: 800ms; --d-1200: 1200ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-mask: cubic-bezier(.76, 0, .24, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  --z-header: 100; --z-mega: 110; --z-chip: 300; --z-dialog: 400; --z-toast: 500;
  --focus: var(--green-700);
}
@media (min-width: 1024px) { :root { --fs-body: 1.0625rem; } }
@media (max-width: 1179px) { :root { --header-h: 64px; --header-bar-h: 64px; } }
/* phones: the header carries the search field on a second row */
@media (max-width: 767px) { :root { --header-h: 116px; } }
html.reduce-motion { --m: 0; }

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; min-height: 100dvh; background: var(--stone); color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-text);
  font-kerning: normal; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, picture, video, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote, dl, dd, ol, ul { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button, a, input, select, label, summary { touch-action: manipulation; }
table { border-collapse: collapse; }
[hidden] { display: none !important; }
main:focus { outline: none; }

h1, h2, h3, .display {
  font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-display);
  line-height: var(--lh-snug); text-wrap: balance; font-variation-settings: normal;
}
.d1 { font-size: var(--fs-d1); line-height: var(--lh-tight); }
.d2 { font-size: var(--fs-d2); line-height: 1.08; }
.d3 { font-size: var(--fs-d3); line-height: 1.12; }
.d4 { font-size: var(--fs-d4); line-height: var(--lh-snug); }
.d5 { font-size: var(--fs-d5); line-height: var(--lh-snug); }
p, li, dd { text-wrap: pretty; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); max-width: 46ch; }
.small { font-size: var(--fs-sm); }
.muted { color: var(--ink-2); }
.meta { font-size: var(--fs-sm); color: var(--ink-3); }
.label {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3);
}
.tabular { font-variant-numeric: tabular-nums; }
.nowrap { white-space: nowrap; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.scheme-forest { --focus: var(--green-300); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; left: var(--s4); top: var(--s4); z-index: 999; padding: var(--s3) var(--s4);
  background: var(--ink); color: var(--stone); border-radius: var(--radius); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.container { width: min(100% - 2 * var(--gutter), var(--container)); margin-inline: auto; }
.section { padding-block: var(--section); }
/* a page's first section starts where the collection pages do, 48px under the header (owner, 02/10: the other
   pages opened on 150px of empty space); heroes and the product page keep their own start */
main > :is(section, article).section:first-of-type { padding-top: var(--s7); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.section-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s4) var(--s6); margin-bottom: var(--s7); }
.section-head__title { max-width: 18ch; }
.section-head p { max-width: 52ch; color: var(--ink-2); }

/* schemes = theme colour schemes 1-4 */
.scheme-stone { background: var(--stone); color: var(--ink); }
.scheme-lichen { background: var(--lichen); color: var(--ink); }
.scheme-forest { background: var(--forest-950); color: var(--on-dark); }
.scheme-forest .muted, .scheme-forest .lead { color: var(--on-dark-2); }
/* text links only: a button keeps its own colours in a band or in rich text (02/10: the light green on light green
   of every a.button on forest under the pointer) */
.scheme-forest a:not(.button):hover { color: var(--green-300); }

/* icons: 1.5px stroke, as the theme setting */
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--ext { width: 0.85em; height: 0.85em; display: inline-block; vertical-align: -0.05em; margin-left: 0.2em; opacity: 0.7; }
#i-star { fill: currentColor; }

/* buttons: verb + object labels, 48px minimum, label never wraps */
.button {
  --bg: transparent; --fg: var(--ink); --bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 0 var(--s5); border-radius: var(--radius); border: 1px solid var(--bd);
  background: var(--bg); color: var(--fg); font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap; cursor: pointer; position: relative;
  transition: background-color var(--d-160) var(--ease-out), color var(--d-160) var(--ease-out), border-color var(--d-160) var(--ease-out), transform calc(var(--d-80) * var(--m) + .01ms) var(--ease-out);
}
.button:active { transform: scale(0.98); }
.button--primary { --bg: var(--green-800); --fg: var(--stone); --bd: var(--green-800); }
.button--primary:hover { --bg: color-mix(in srgb, var(--green-800) 86%, var(--ink)); }
.button--outline:hover, .button--secondary:hover { --bg: var(--ink); --fg: var(--stone); }
.button--on-dark { --bg: var(--on-dark); --fg: var(--forest-950); --bd: var(--on-dark); }
.button--on-dark:hover { --bg: var(--green-300); --bd: var(--green-300); }
.button--on-image { --bg: color-mix(in srgb, var(--snow) 92%, transparent); --fg: var(--ink); --bd: transparent; }
.button--on-image:hover { --bg: var(--snow); }
.button--ghost-light { --fg: var(--snow); --bd: color-mix(in srgb, var(--snow) 70%, transparent); }
.button--ghost-light:hover { --bg: var(--snow); --fg: var(--ink); }
.button--small { min-height: 40px; padding: 0 var(--s4); font-size: var(--fs-sm); }
.button--block { width: 100%; white-space: normal; text-wrap: balance; } /* full-width labels wrap on narrow phones */
.button[aria-busy="true"] { cursor: progress; }
/* the label stays (Vercel guidelines); a spinner appears beside it; small buttons swap label for spinner */
.button[aria-busy="true"]::after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 16px; height: 16px; margin-top: -8px;
  border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite;
}
.button--small[aria-busy="true"] { color: transparent; }
.button--small[aria-busy="true"]::after { right: auto; left: 50%; margin-left: -8px; border-color: var(--fg); border-right-color: transparent; }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
@keyframes spin { to { transform: rotate(360deg); } }

.icon-button {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; position: relative; color: inherit;
  transition: background-color var(--d-160) var(--ease-out);
}
.icon-button:hover { background: color-mix(in srgb, currentColor 8%, transparent); }

.link-arrow { display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; text-decoration: none; }
.link-arrow .icon { width: 18px; height: 18px; transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow > span, .link-underline { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }

.count-badge {
  position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--green-500); color: var(--ink); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.count-badge.is-bump { animation: bump calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
@keyframes bump { from { transform: translateY(-40%); opacity: 0; } }

/* forms: labels visible, inputs ≥16px so iOS never zooms */
.field__label { display: block; font-size: var(--fs-sm); font-weight: 500; margin-bottom: var(--s2); }
.field__input, .field select, textarea {
  width: 100%; min-height: 48px; padding: 0 var(--s4); font-size: 16px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--snow); color: var(--ink);
}
textarea { padding: var(--s3) var(--s4); min-height: 88px; resize: vertical; }
.field__input:focus-visible, textarea:focus-visible, select:focus-visible { outline-offset: 0; border-color: var(--focus); }
.field-row { display: flex; gap: var(--s2); }
.field-row .field__input { flex: 1; min-width: 0; }
.field__hint { font-size: var(--fs-xs); color: var(--ink-3); margin-top: var(--s2); }
.field__error { font-size: var(--fs-sm); color: var(--error); margin-top: var(--s2); }
.field__error.is-note { color: var(--ink-2); background: var(--lichen); padding: var(--s2) var(--s3); }
.scheme-forest .field__input { background: var(--forest-900); border-color: var(--line-on-dark); color: var(--on-dark); }
.scheme-forest .field__hint { color: var(--on-dark-2); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: 999px;
  border: 1px solid var(--line-strong); font-size: var(--fs-sm); text-decoration: none; background: transparent; white-space: nowrap;
  transition: background-color var(--d-160) var(--ease-out), border-color var(--d-160) var(--ease-out);
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"], .chip[aria-current="page"], .chip.is-active { background: var(--ink); color: var(--stone); border-color: var(--ink); }
.chip__count { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.chip[aria-pressed="true"] .chip__count, .chip.is-active .chip__count, .chip[aria-current="page"] .chip__count { color: var(--on-dark-2); }

.badge {
  display: inline-block; padding: 3px 8px; border-radius: 2px; font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  letter-spacing: 0.02em; background: var(--snow); color: var(--ink);
}
.badge--new { background: var(--green-100); color: var(--green-800); }
.badge--best { background: var(--ink); color: var(--snow); }
.badge--outline { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }
.badge--muted { background: var(--stone); color: var(--ink-3); }
.badge--sale { background: transparent; color: var(--brick); box-shadow: inset 0 0 0 1px currentColor; }

.price-list { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); font-variant-numeric: tabular-nums; }
.price { font-weight: 500; }
.price--sale { color: var(--brick); }
.price--compare { color: var(--ink-3); font-size: 0.92em; }
.price-list__off { font-size: var(--fs-xs); font-weight: 600; color: var(--brick); }
.price__from { font-weight: 400; color: var(--ink-3); }

.stars { display: inline-flex; gap: 1px; color: var(--ink); vertical-align: -3px; }
.stars .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }

/* long-form copy (pages, articles) */
.rte { max-width: 68ch; }
.rte > * + * { margin-top: 1em; }
.rte h2 { font-size: var(--fs-d4); margin-top: 1.8em; }
.rte h3 { font-family: var(--font-text); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; margin-top: 1.6em; }
.rte ul, .rte ol { padding-left: 1.2em; }
.rte li + li { margin-top: 0.4em; }
.rte a:not(.button) { color: var(--green-700); }
.rte img { margin-block: var(--s6); width: 100%; }
.rte blockquote { font-family: var(--font-display); font-size: var(--fs-d4); line-height: 1.3; padding-left: var(--s5); border-left: 1px solid var(--green-500); }
.rte table { width: 100%; font-size: var(--fs-sm); }
.rte th, .rte td { text-align: left; padding: var(--s3) var(--s2); border-bottom: 1px solid var(--line); vertical-align: top; }
/* a table always fits the text column (BlogSEO's four-column comparisons overflowed phones by up to 68px):
   fixed layout, words wrap inside their cell, smaller type on phones */
.rte table { table-layout: fixed; }
.rte th, .rte td { overflow-wrap: anywhere; hyphens: auto; }
@media (max-width: 639px) { .rte table { font-size: var(--fs-xs); } .rte th, .rte td { padding: var(--s2) 6px; } }

/* ---------- announcement bar ---------- */
.announcement-bar { background: var(--forest-950); color: var(--on-dark); text-align: center; font-size: var(--fs-sm); padding: 9px var(--gutter); letter-spacing: 0.01em; }
.announcement-bar__text { margin: 0 auto; }
@media (max-width: 639px) { .announcement-bar__extra { display: none; } }

/* ---------- header: logo centre, navigation below (Prestige layout as today), transparent over the hero on home and storia ---------- */
.header {
  position: sticky; top: 0; z-index: var(--z-header); background: var(--stone); color: var(--ink);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--d-320) var(--ease-out), color var(--d-320) var(--ease-out), border-color var(--d-320) var(--ease-out),
    transform calc(var(--d-320) * var(--m) + .01ms) var(--ease-out);
  view-transition-name: site-header;
}
.header__bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s5); height: var(--header-bar-h); }
.header__start { justify-self: start; display: flex; align-items: center; gap: var(--s2); margin-left: calc(-1 * var(--s2)); }
.header__end { justify-self: end; display: flex; align-items: center; gap: var(--s4); }
.header__burger { display: none; margin-left: -10px; }
.header__logo { display: grid; width: 156px; justify-self: center; }
.header__logo-img { grid-area: 1 / 1; width: 156px; height: auto; transition: opacity var(--d-320) var(--ease-out); }
.header__logo-img--white { opacity: 0; }
.header__nav { display: flex; justify-content: center; height: var(--nav-h); }
.header__menu { display: flex; gap: clamp(var(--s4), 2.2vw, var(--s8)); }
.header__link {
  display: inline-flex; align-items: center; height: var(--nav-h); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  position: relative; white-space: nowrap;
}
.header__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out);
}
.header__link:hover::after, .header__link[aria-expanded="true"]::after { transform: scaleX(1); }
.header__actions { display: flex; gap: var(--s1); margin-right: -10px; }

/* transparent over a dark hero: white logo and text until the sentinel leaves the viewport */
.header--transparent.is-over-hero { background: transparent; color: var(--snow); border-color: transparent; }
.header--transparent.is-over-hero .header__logo-img--colour { opacity: 0; }
.header--transparent.is-over-hero .header__logo-img--white { opacity: 1; }
.header--transparent { margin-bottom: calc(-1 * var(--header-h) - 1px); }
.header.is-hidden { transform: translateY(-100%); }
.header:has([aria-expanded="true"]) { background: var(--stone); color: var(--ink); border-color: var(--line); transform: none; }
.header:has([aria-expanded="true"]) .header__logo-img--colour { opacity: 1; }
.header:has([aria-expanded="true"]) .header__logo-img--white { opacity: 0; }
.header-sentinel { position: absolute; top: 0; height: 120px; width: 1px; pointer-events: none; }

@media (max-width: 1179px) {
  .header__bar { gap: var(--s2); }
  .header__burger { display: inline-grid; margin-left: -3px; } /* the lines meet the 16px gutter */
  .header__nav, .header__action--desktop, .header__locale { display: none; }
  .header__logo { justify-self: center; width: 136px; }
  .header__logo-img { width: 136px; }
  .header__actions { justify-self: end; }
}

/* ---------- mega menu ---------- */
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; background: var(--stone); color: var(--ink);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); z-index: var(--z-mega);
  opacity: 0; transform: translateY(calc(-8px * var(--m)));
  transition: opacity var(--d-160) var(--ease-out), transform calc(var(--d-160) * var(--m) + .01ms) var(--ease-out), display var(--d-160) allow-discrete;
}
.mega-menu.is-open { opacity: 1; transform: none; transition-duration: var(--d-320); }
@starting-style { .mega-menu.is-open { opacity: 0; transform: translateY(calc(-8px * var(--m))); } }
.mega-menu__inner { display: grid; grid-template-columns: 1fr minmax(240px, 22%); gap: var(--s8); padding-block: var(--s7) var(--s8); }
.mega-menu__groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s6) var(--s7); align-content: start; }
.mega-menu__group-title { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s3); }
.mega-menu__group-title a { text-decoration: none; }
.mega-menu__link {
  display: inline-flex; align-items: center; gap: var(--s3); padding-block: 5px; font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.25;
  text-decoration: none; letter-spacing: -0.01em;
}
.mega-menu__icon { width: 22px; height: 22px; flex: none; object-fit: contain; opacity: .85; }
.mega-menu__link--brand .mega-menu__icon { width: 28px; height: 28px; border-radius: 50%; opacity: 1; }
.mega-menu__link:hover .mega-menu__icon { opacity: 1; }
.mega-menu__link:hover { color: var(--green-700); }
.mega-menu.is-open .mega-menu__group { animation: mega-in calc(var(--d-320) * var(--m) + .01ms) var(--ease-out) both; }
.mega-menu.is-open .mega-menu__group:nth-child(2) { animation-delay: calc(40ms * var(--m)); }
.mega-menu.is-open .mega-menu__group:nth-child(3) { animation-delay: calc(80ms * var(--m)); }
.mega-menu.is-open .mega-menu__group:nth-child(4) { animation-delay: calc(120ms * var(--m)); }
.mega-menu.is-open .mega-menu__group:nth-child(5) { animation-delay: calc(160ms * var(--m)); }
@keyframes mega-in { from { opacity: 0; transform: translateY(calc(8px * var(--m))); } }
.mega-menu__aside { display: grid; gap: var(--s4); align-content: start; }
.mega-menu__tile-link { display: block; text-decoration: none; }
.mega-menu__tile-media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lichen); }
.mega-menu__tile-media img { width: 100%; height: 100%; object-fit: cover; }
.mega-menu__tile.is-packshot .mega-menu__tile-media img { object-fit: contain; padding: 12%; mix-blend-mode: multiply; }
.mega-menu__tile figcaption { display: flex; align-items: center; justify-content: space-between; margin-top: var(--s3); font-size: var(--fs-sm); font-weight: 500; }
.mega-menu__tile figcaption .icon { width: 18px; height: 18px; }
.mega-menu__all { font-size: var(--fs-sm); }
/* Servizi: the three pictures of the new home, one per service; Brand: only the way to every brand */
.mega-menu--services .mega-menu__inner { grid-template-columns: minmax(200px, 1fr) 3fr; }
.mega-menu__services { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.mega-menu__tile--wide .mega-menu__tile-media { aspect-ratio: 1213 / 752; }
.mega-menu__all-brands { width: 100%; justify-content: space-between; }

/* ---------- dialogs: drawers, search ---------- */
dialog { padding: 0; border: 0; max-width: none; max-height: none; color: var(--ink); background: var(--snow); }
dialog::backdrop { background: color-mix(in srgb, var(--forest-950) 46%, transparent); opacity: 0; transition: opacity var(--d-320) linear, display var(--d-320) allow-discrete, overlay var(--d-320) allow-discrete; }
dialog[open]::backdrop { opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }
html:has(dialog[open]) { overflow: clip; }

.drawer {
  position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); height: 100dvh; display: flex; flex-direction: column;
  transform: translateX(100%); opacity: 1;
  transition: transform calc(var(--d-320) * var(--m) + .01ms) var(--ease-drawer), display var(--d-320) allow-discrete, overlay var(--d-320) allow-discrete;
}
/* a closed drawer is not rendered (the UA's dialog:not([open]) rule loses to display:flex above): nothing
   inside it is laid out, focusable or downloaded; the exit still plays through display allow-discrete */
dialog.drawer:not([open]) { display: none; }
.drawer--left { inset: 0 auto 0 0; transform: translateX(-100%); }
.drawer[open] { transform: none; transition-duration: calc(var(--d-480) * var(--m) + .01ms); }
@starting-style { .drawer[open] { transform: translateX(100%); } .drawer--left[open] { transform: translateX(-100%); } }
html.reduce-motion .drawer { transition: opacity var(--d-160) linear, display var(--d-160) allow-discrete, overlay var(--d-160) allow-discrete; transform: none; opacity: 0; }
html.reduce-motion .drawer[open] { opacity: 1; }
@starting-style { html.reduce-motion .drawer[open] { opacity: 0; } }
/* bottom sheets on phones (data-sheet; 10-dialogs.js): the drawer rises from the bottom with a handle, rounded on
   top, at the height its resting points give (inline height) or its content's; dragging follows the finger, the
   release snaps */
.sheet__handle { display: none; }
@media (max-width: 767px) {
  .drawer.drawer--sheet { inset: auto 0 0 0; width: 100%; height: auto; max-height: calc(100dvh - var(--s7)); border-radius: 16px 16px 0 0; transform: translateY(100%); }
  .drawer.drawer--sheet[open] { transform: none; }
  @starting-style { .drawer.drawer--sheet[open] { transform: translateY(100%); } }
  .drawer--sheet.is-dragging { transition: none; }
  .drawer--sheet.is-snapping { transition: height var(--d-240) var(--ease-out), translate var(--d-240) var(--ease-out); }
  .sheet__handle { display: block; position: relative; flex: none; height: 22px; touch-action: none; cursor: grab; }
  .sheet__handle::before { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line-strong); }
  .drawer--sheet [data-sheet-grip] { touch-action: none; }
  .drawer--sheet > .drawer__head { min-height: 52px; padding-top: 0; }
}
/* the sizes of a card on a phone (sizeSheet in 30-cart.js) */
.size-sheet { gap: var(--s4); padding: 0 var(--gutter) calc(var(--s5) + env(safe-area-inset-bottom)); }
.size-sheet__head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
.size-sheet__head img { width: 64px; height: 80px; object-fit: contain; background: #fff; }
.size-sheet__brand { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.size-sheet__title { font-size: var(--fs-sm); line-height: 1.35; }
.size-sheet__price { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
.size-sheet__price s { margin-left: var(--s1); font-weight: 400; color: var(--ink-3); }
.size-sheet__sizes { margin: 0; padding: 0; border: 0; min-width: 0; }
.size-sheet__sizes legend { margin-bottom: var(--s2); font-size: var(--fs-sm); }
.size-sheet__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--s2); }
.size-sheet__grid .size-chip { min-height: 48px; }
.size-sheet__view { justify-self: start; }
.drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s4) var(--s3) var(--s5); border-bottom: 1px solid var(--line); min-height: 64px; }
.drawer__title { font-size: var(--fs-d5); }
.drawer__count { font-family: var(--font-text); font-size: var(--fs-sm); color: var(--ink-3); letter-spacing: 0; }
.drawer__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--s5); }
.drawer__foot { border-top: 1px solid var(--line); padding: var(--s4) var(--s5); display: grid; gap: var(--s3); background: var(--snow); }
.cart-drawer__foot { gap: var(--s2); padding-block: var(--s3) calc(var(--s3) + env(safe-area-inset-bottom)); }
.cart-drawer__foot .cart-totals div:not(:first-child) { font-size: var(--fs-xs); color: var(--ink-2); }
.cart-drawer__foot .express__btn { min-height: 40px; }

.drawer-nav__list > li { border-bottom: 1px solid var(--line); }
.drawer-nav__link { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: var(--s4) 0; font-family: var(--font-display); font-size: var(--fs-d4); text-decoration: none; text-align: left; }
.drawer-nav__link .icon { width: 20px; height: 20px; color: var(--ink-3); }
.drawer-nav__panel { position: absolute; inset: 0; background: var(--snow); padding: var(--s4) var(--s5) var(--s7); overflow-y: auto; animation: panel-in calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
@keyframes panel-in { from { transform: translateX(calc(24px * var(--m))); opacity: 0; } }
.drawer-nav__back { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; font-weight: 500; color: var(--ink-2); }
.drawer-nav__all { margin: var(--s3) 0 var(--s5); font-family: var(--font-display); font-size: var(--fs-d4); }
.drawer-nav__all a { text-decoration: none; }
.drawer-nav__group { font-size: var(--fs-sm); color: var(--ink-3); margin: var(--s5) 0 var(--s2); }
.drawer-nav__sublink { display: block; padding: 10px 0; font-size: 1.0625rem; text-decoration: none; }
/* the menu's foot in half the height (owner, 02/10): the three links in one row, the selectors 40px high */
.drawer-nav__foot { gap: var(--s2); padding-block: var(--s2) calc(var(--s2) + env(safe-area-inset-bottom)); }
.drawer-nav__foot a { text-decoration: none; }
.drawer-nav__utility { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.drawer-nav__utility a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 52px; font-size: var(--fs-xs); font-weight: 500; text-align: center; line-height: 1.2; }
.drawer-nav__utility .icon { width: 22px; height: 22px; }
.drawer-nav__foot .locale--drawer { margin-top: 0; }
.drawer-nav__foot .locale--drawer .locale__btn { min-height: 40px; font-size: var(--fs-sm); }
.drawer-nav__foot .preview-link { min-height: 28px; font-size: var(--fs-xs); }
.drawer-nav__locale { font-size: var(--fs-sm); color: var(--ink-3); padding-top: var(--s2); }
.drawer-nav .drawer__body { position: relative; }

.search-dialog { position: fixed; inset: 0 0 auto 0; width: 100%; max-height: min(88dvh, 820px); background: var(--stone); border-bottom: 1px solid var(--line);
  transform: translateY(calc(-16px * var(--m))); opacity: 0;
  transition: opacity var(--d-240) var(--ease-out), transform calc(var(--d-320) * var(--m) + .01ms) var(--ease-out), display var(--d-240) allow-discrete, overlay var(--d-240) allow-discrete; }
.search-dialog[open] { transform: none; opacity: 1; }
@starting-style { .search-dialog[open] { transform: translateY(calc(-16px * var(--m))); opacity: 0; } }
.search-dialog__inner { display: grid; grid-template-rows: auto 1fr; grid-template-columns: minmax(0, 1fr); max-height: inherit; }
.search-dialog__form { display: flex; align-items: center; gap: var(--s3); height: 88px; border-bottom: 1px solid var(--line-strong); }
.search-dialog__icon { color: var(--ink-3); }
.search-dialog__input { flex: 1; min-width: 0; border: 0; background: transparent; font-family: var(--font-display); font-size: var(--fs-d4); outline: none; }
.search-dialog__input::-webkit-search-cancel-button { display: none; }
.search-dialog__body { overflow-y: auto; overscroll-behavior: contain; padding-block: var(--s6) var(--s7); }
.search-dialog__label { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s3); }
.search-dialog__body [data-recent-wrap] { margin-top: var(--s7); }
.search-results { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: var(--s7); }
.search-results__side h3, .search-results__main h3 { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-3); letter-spacing: 0; margin-bottom: var(--s3); }
.search-results__side ul { display: grid; gap: var(--s2); margin-bottom: var(--s6); }
.search-results__side a { text-decoration: none; font-size: 1.0625rem; }
.search-results__side mark, .search-hit mark { background: none; color: var(--green-700); font-weight: 600; }
.search-results__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: var(--s5); }
.search-results > *, .search-hit { min-width: 0; }
.search-hit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); text-decoration: none; font-size: var(--fs-sm); }
.search-hit__media { aspect-ratio: 1; background: var(--lichen); }
.search-hit__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.search-hit__brand { color: var(--ink-3); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.search-results__all { margin-top: var(--s6); }
.search-empty { max-width: 52ch; }
.search-empty h3 { font-family: var(--font-display); font-size: var(--fs-d4); margin-bottom: var(--s3); }
@media (max-width: 767px) { .search-results { grid-template-columns: 1fr; gap: var(--s5); } .search-dialog { max-height: 100dvh; height: 100dvh; } .search-dialog__form { height: 72px; } }

/* ---------- product card: no white box, packshot multiplied onto lichen ---------- */
product-card { display: block; position: relative; }
.product-card__media { position: relative; z-index: 1; aspect-ratio: 4 / 5; background: var(--lichen); overflow: hidden; isolation: isolate; }
/* z-index 1: the heart and quick-add sit above the title link's stretched ::after (which covers the info area) */
.product-card__image-link { position: absolute; inset: 0; display: block; }
.product-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 9% 7%; mix-blend-mode: multiply; transition: opacity var(--d-480) var(--ease-out); }
.product-card__img--secondary { opacity: 0; }
/* touch screens never show the second photo: not rendered, so the lazy image is never downloaded */
@media not ((hover: hover) and (pointer: fine)) { .product-card__img--secondary { display: none; } }
/* a phone swipes through the card's pictures (owner, 02/10); a pointer keeps the hover crossfade */
.product-card__img--slide, .product-card__dots { display: none; }
@media not ((hover: hover) and (pointer: fine)) {
  /* the scroller paints the card's surface itself: Safari blends the packshots (multiply) only within a scroller's own
     layer, so on a transparent scroller their white showed as a white box once the photos could swipe (owner, 03/10) */
  .product-card__image-link { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; background-color: inherit; isolation: isolate; }
  .product-card__image-link::-webkit-scrollbar { display: none; }
  .product-card__image-link > .product-card__img--primary, .product-card__image-link > .product-card__img--slide { position: relative; inset: auto; display: block; flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
  .product-card__dots { display: flex; position: absolute; left: 50%; bottom: 10px; translate: -50% 0; gap: 4px; z-index: 2; pointer-events: none; }
  .product-card__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgb(19 25 20 / .22); transition: background-color var(--d-160) var(--ease-out); }
  .product-card__dots i.is-current { background: var(--ink); }
}
@media (hover: hover) and (pointer: fine) {
  product-card:hover .product-card__img--secondary { opacity: 1; }
  product-card:hover .product-card__img--primary:has(+ .product-card__img--secondary) { opacity: 0; }
}
.product-card__badges { position: absolute; left: var(--s3); top: var(--s3); max-width: calc(100% - 60px); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); z-index: 1; }
.product-card__badges .badge--outline { background: var(--snow); } /* legible over the packshot */
.product-card__wish { position: absolute; right: 2px; top: 2px; width: 44px; height: 44px; display: grid; place-items: center; z-index: 2; color: var(--ink); }
.product-card__wish .icon { width: 20px; height: 20px; transition: fill var(--d-160) var(--ease-out), transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.product-card__wish[aria-pressed="true"] .icon { fill: var(--ink); }
.product-card__wish:active .icon { transform: scale(0.88); }
.product-card__quick { position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); z-index: 2; }
.product-card__quick-toggle, .product-card__quick-add {
  display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; min-height: 44px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--snow) 94%, transparent); font-size: var(--fs-sm); font-weight: 500;
  position: absolute; left: var(--s2); right: var(--s2); bottom: var(--s2); width: auto;
}
.product-card__quick .product-card__quick-toggle { position: static; width: 100%; }
.product-card__quick-toggle .icon { width: 18px; height: 18px; }
.product-card__sizes { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--s3); border-radius: var(--radius); background: var(--snow); box-shadow: 0 1px 0 var(--line), 0 12px 32px -18px rgb(19 25 20 / 0.35); margin-bottom: var(--s2); }
.product-card__sizes:not([hidden]) { animation: rise calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(calc(8px * var(--m))); } }
@media (hover: hover) and (pointer: fine) {
  .product-card__quick-toggle, .product-card__quick-add { opacity: 0; transform: translateY(calc(8px * var(--m))); transition: opacity var(--d-240) var(--ease-out), transform calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
  product-card:hover .product-card__quick-toggle, product-card:focus-within .product-card__quick-toggle,
  product-card:hover .product-card__quick-add, product-card:focus-within .product-card__quick-add { opacity: 1; transform: none; }
  .product-card__quick-hint { display: inline; }
}
@media (hover: none), (pointer: coarse) {
  .product-card__quick-toggle { left: auto; width: 44px; padding: 0; border-radius: 50%; }
  .product-card__quick .product-card__quick-toggle { width: 44px; margin-left: auto; }
  .product-card__quick-toggle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* one-size items say what they do: no blind "+" */
  .product-card__quick-add { left: auto; width: auto; padding: 0 14px; min-height: 40px; border-radius: 999px; font-size: 13px; }
  .product-card__quick-hint { display: none; }
}
.product-card__info { padding-top: var(--s3); display: grid; gap: 3px; }
.product-card__brand { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.product-card__title { font-family: var(--font-text); font-size: 0.9375rem; font-weight: 400; line-height: 1.35; letter-spacing: 0; text-wrap: pretty; }
.product-card__title a { text-decoration: none; }
/* the name always takes two lines: a row's colours and prices line up, and the body-font swap cannot
   rewrap a name from one line to two and push the price down (the only CLS left in the lab run) */
.product-card__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-height: calc(2em * 1.35); }
.product-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.product-card__colour { display: block; color: var(--ink-3); }
.product-card .price-list { font-size: 0.9375rem; margin-top: 2px; }
.product-card.is-archived .product-card__img { opacity: 0.55; }
/* colours (assets/card-color-swatches.css, restyled): 28px thumbnails of each colourway, the current one ringed;
   always one row high, scrolling sideways when a model has many colours */
.card-swatches-wrapper { height: 34px; margin: 2px 0 var(--s1); display: flex; align-items: center; position: relative; z-index: 1; }
.card-swatches { display: flex; gap: 6px; max-width: 100%; overflow-x: auto; padding: 3px 2px; margin: 0; list-style: none; scrollbar-width: none; }
.card-swatches::-webkit-scrollbar { display: none; }
.card-swatches__link { position: relative; display: block; width: 28px; height: 28px; padding: 2px; border-radius: 50%; background: var(--snow); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow var(--d-160) var(--ease-out); }
.card-swatches__link img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; mix-blend-mode: multiply; }
.card-swatches__link:hover, .card-swatches__link:focus-visible { box-shadow: inset 0 0 0 1px var(--ink-3); }
.card-swatches__link.is-selected { box-shadow: inset 0 0 0 1.5px var(--ink); }
.card-swatches__link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* while a colour is previewed, the card shows that photo and not the hover one */
.product-card.is-color-previewing .product-card__img--primary { opacity: 1 !important; }
.product-card.is-color-previewing .product-card__img--secondary { opacity: 0 !important; }
@media (max-width: 699px) { .card-swatches-wrapper { height: 32px; } .card-swatches { gap: 5px; } .card-swatches__link { width: 26px; height: 26px; } }
/* the model's own rating, between name and price (the live card's Judge.me badge) */
.product-card__rating { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.product-card__rating .rating-stars .icon { width: 14px; height: 14px; }

.size-chip {
  min-width: 44px; min-height: 40px; padding: 0 var(--s3); border-radius: var(--radius); border: 1px solid var(--line-strong);
  font-size: var(--fs-sm); font-variant-numeric: tabular-nums; background: var(--snow);
}
.size-chip:hover:not(:disabled) { border-color: var(--ink); }
.size-chip:disabled { color: var(--ink-3); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-3) 60%, transparent); cursor: not-allowed; background: transparent; }

/* ---------- rails: native scroll-snap; product rails sized and paged like the live sliders ---------- */
.rail { position: relative; --rail-card: 240px; --rail-gap: 28px; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 22%); gap: var(--s5);
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-block: 4px var(--s2);
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__controls { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s5); }
.rail__progress { flex: 1; height: 1px; background: var(--line); position: relative; overflow: hidden; margin-right: var(--s4); }
.rail__progress span { position: absolute; inset: 0; background: var(--ink); transform-origin: left; transform: scaleX(var(--progress, 0.2)); transition: transform var(--d-160) linear; }
@media (max-width: 767px) { .rail__track { grid-auto-columns: 68%; gap: var(--s4); } .rail__controls .icon-button { display: none; } }
.full-bleed-rail .rail__track { padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); }
/* product rails: four cards and a peek of the fifth on laptops and desktops (owner, 03/10: the live 240/210/185px
   cards were too small on a laptop, six in view), three on tablets, two on phones; round arrows over the photos.
   The rail is a size container, so the card width (and the arrows' height, half the photo) follows its own width */
.rail--products { container-type: inline-size; --rail-gap: 24px; --rail-card: calc((100cqw - 3 * var(--rail-gap)) / 4.25); }
.rail--products .rail__track { grid-auto-columns: var(--rail-card); gap: var(--rail-gap); }
@media (max-width: 1023px) { .rail--products { --rail-gap: 18px; --rail-card: calc((100cqw - 2 * var(--rail-gap)) / 3.25); } }
@media (max-width: 600px) { .rail--products .rail__track { grid-auto-columns: calc((100% - 12px) / 2); gap: 12px; } }
.rail--products .rail__controls { display: contents; }
.rail--products .rail__progress { display: none; }
.rail--products :is([data-rail-prev], [data-rail-next]) {
  position: absolute; z-index: 3; top: calc(var(--rail-card) * 0.625); transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--snow) 88%, transparent); border: 1.5px solid var(--line-strong); color: var(--ink);
  transition: opacity var(--d-160) linear, border-color var(--d-160) linear;
}
.rail--products [data-rail-prev] { left: 12px; }
.rail--products [data-rail-next] { right: 12px; }
.rail--products :is([data-rail-prev], [data-rail-next]):hover:not(:disabled) { border-color: var(--ink-2); }
.rail--products :is([data-rail-prev], [data-rail-next]):disabled { opacity: .25; cursor: default; }
.rail--products.is-static :is([data-rail-prev], [data-rail-next]) { display: none; }
@media (max-width: 600px) { .rail--products :is([data-rail-prev], [data-rail-next]) { display: none; } }
/* cards past the first screenful are not laid out until they come near the screen, and their lazy photos
   wait with them: the hero keeps the bandwidth. Their stand-in height stays under a real card's, so the
   row never grows when they render. */
.rail--products .rail__track > :nth-child(n+6) { content-visibility: auto; contain-intrinsic-size: auto 240px auto 300px; }
@media (max-width: 600px) { .rail--products .rail__track > :nth-child(n+3) { content-visibility: auto; contain-intrinsic-size: auto 160px auto 260px; } }

/* ---------- breadcrumbs ---------- */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.breadcrumbs li + li::before { content: "/"; margin-right: var(--s2); color: var(--line-strong); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }

/* ---------- accordion (<details> + interpolate-size) ---------- */
.accordion { border-top: 1px solid var(--line); }
.accordion details { border-bottom: 1px solid var(--line); interpolate-size: allow-keywords; }
.accordion summary { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); min-height: 60px; cursor: pointer; list-style: none; font-weight: 500; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary .icon { transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.accordion details[open] summary .icon { transform: rotate(45deg); }
.accordion details::details-content { block-size: 0; overflow: clip; transition: block-size calc(var(--d-240) * var(--m) + .01ms) var(--ease-out), content-visibility var(--d-240) allow-discrete; }
.accordion details[open]::details-content { block-size: auto; }
.accordion__body { padding-bottom: var(--s5); color: var(--ink-2); }
.accordion__body > * + * { margin-top: 0.8em; }

/* ---------- toast ---------- */
.toast-region { position: fixed; left: 50%; bottom: calc(var(--s5) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--s2); width: min(92vw, 440px); pointer-events: none; }
.toast { pointer-events: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); padding: var(--s3) var(--s3) var(--s3) var(--s5); background: var(--forest-950); color: var(--on-dark); border-radius: var(--radius); font-size: var(--fs-sm); box-shadow: 0 16px 40px -20px rgb(11 23 14 / 0.6); animation: rise calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
.toast button { pointer-events: auto; color: var(--green-300); font-weight: 600; min-height: 40px; padding: 0 var(--s3); }
/* hosted inside an open drawer: sit at its bottom edge */
.drawer > .toast-region { position: absolute; left: var(--s4); right: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); transform: none; width: auto; }
.modal > .toast-region { position: absolute; left: var(--s4); right: var(--s4); top: var(--s4); bottom: auto; transform: none; width: auto; }

/* ---------- preview chip (prototype only) ---------- */
.preview-chip {
  position: fixed; left: var(--s4); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: var(--z-chip);
  display: flex; align-items: center; gap: var(--s3); padding: 6px 6px 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--snow) 92%, transparent); box-shadow: 0 0 0 1px var(--line), 0 8px 24px -16px rgb(19 25 20 / 0.5);
  font-size: var(--fs-xs); backdrop-filter: blur(8px);
}
.preview-chip__label { font-weight: 600; letter-spacing: 0.02em; }
.preview-chip__live { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border-radius: 999px; background: var(--ink); color: var(--stone); text-decoration: none; }
.preview-chip__live .icon { width: 12px; height: 12px; margin-left: 4px; }
body:has(.sticky-atc.is-visible) .preview-chip { bottom: calc(var(--sticky-h, 84px) + env(safe-area-inset-bottom)); }
/* phones: no floating chip over content (the live WhatsApp bubble lesson); the link lives in the menu drawer and footer */
@media (max-width: 767px) { .preview-chip { display: none; } }
.preview-link { display: none; }
@media (max-width: 767px) { .preview-link { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); } }

/* ---------- design comments (prototype only) ---------- */
.preview-chip__comment { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; border-radius: 999px; background: var(--green-800); color: var(--stone); font-weight: 600; }
.preview-chip__comment .icon { width: 14px; height: 14px; }
.comment-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-grid; place-items: center; background: var(--green-300); color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.comment-count[hidden] { display: none; }
.comment-fab { display: none; -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
  .comment-fab { position: fixed; right: var(--s3); bottom: calc(var(--s4) + env(safe-area-inset-bottom)); z-index: var(--z-chip); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--green-800); color: var(--stone); box-shadow: 0 0 0 2px var(--snow), 0 10px 24px -12px rgb(19 25 20 / 0.7); }
  .comment-fab .icon { width: 22px; height: 22px; }
  .comment-fab .comment-count { position: absolute; top: -4px; right: -4px; }
  body:has(.sticky-atc.is-visible) .comment-fab { bottom: calc(var(--sticky-h, 84px) + env(safe-area-inset-bottom)); }
}
.comment-bar { position: fixed; left: 50%; top: calc(var(--s3) + env(safe-area-inset-top)); transform: translateX(-50%); z-index: var(--z-toast); width: max-content; max-width: calc(100vw - 2 * var(--s3));
  display: flex; align-items: center; gap: var(--s2); padding: 6px 6px 6px var(--s4); border-radius: 999px; background: var(--ink); color: var(--stone); font-size: var(--fs-sm); box-shadow: 0 12px 32px -16px rgb(19 25 20 / 0.8); }
.comment-bar[hidden] { display: none; }
.comment-bar__hint { margin-right: var(--s2); }
.comment-bar button { min-height: 36px; padding: 0 var(--s3); border-radius: 999px; font-weight: 600; }
.comment-bar__list { background: color-mix(in srgb, var(--stone) 16%, transparent); }
.comment-bar__exit { background: var(--stone); color: var(--ink); }
html.is-commenting body, html.is-commenting body a, html.is-commenting body button, html.is-commenting body label { cursor: crosshair; }
html.is-commenting .comment-bar button, html.is-commenting .preview-chip :is(a, button), html.is-commenting .comment-fab { cursor: pointer; }
html.is-commenting main { outline: 2px dashed color-mix(in srgb, var(--green-500) 70%, transparent); outline-offset: -4px; }
.comment-pins { position: absolute; top: 0; left: 0; width: 100%; height: 0; z-index: 90; }
.comment-pin { position: absolute; width: 28px; height: 28px; margin: -28px 0 0 0; border-radius: 50% 50% 50% 0; display: grid; place-items: center;
  background: var(--green-500); color: var(--ink); font-size: 12px; font-weight: 700; box-shadow: 0 0 0 2px var(--snow), 0 6px 14px -6px rgb(19 25 20 / 0.7); }
.comment-dialog textarea { width: 100%; }
.comment-list { display: grid; gap: var(--s5); }
.comment-item { display: grid; gap: var(--s2); padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.comment-item__where { font-size: var(--fs-sm); color: var(--ink-2); }
.comment-item__n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-500); color: var(--ink); font-size: 11px; font-weight: 700; margin-right: 4px; }
.comment-item__text { white-space: pre-wrap; }
.comments__more { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 767px) { .comment-bar { border-radius: 16px; flex-wrap: wrap; justify-content: center; padding: var(--s2) var(--s3); } .comment-bar__hint { width: 100%; text-align: center; margin: 0; } }

/* ---------- switch ---------- */
.toggle { display: inline-flex; align-items: center; gap: var(--s3); min-height: 44px; font-size: var(--fs-sm); }
.toggle__track { width: 36px; height: 20px; border-radius: 10px; background: var(--line-on-dark); position: relative; transition: background-color var(--d-160) linear; }
.toggle__thumb { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--on-dark); transition: transform var(--d-160) var(--ease-out); }
.toggle[aria-checked="true"] .toggle__track { background: var(--green-500); }
.toggle[aria-checked="true"] .toggle__thumb { transform: translateX(16px); background: var(--forest-950); }

/* ---------- reassurance ---------- */
.reassurance { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--s5); }
.reassurance li { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-sm); line-height: 1.45; }
.reassurance .icon { width: 22px; height: 22px; margin-top: 1px; }
.reassurance strong { font-weight: 600; display: block; }

/* ---------- footer ---------- */
.footer { padding-top: var(--s9); font-size: var(--fs-sm); }
.footer a { text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer__top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s8); padding-bottom: var(--s8); border-bottom: 1px solid var(--line-on-dark); }
.footer__title { font-size: var(--fs-d3); margin-bottom: var(--s3); }
.footer__lead { color: var(--on-dark-2); max-width: 42ch; margin-bottom: var(--s5); font-size: var(--fs-body); }
.footer__newsletter .field__label { color: var(--on-dark); }
.footer__reassurance { align-content: center; }
.footer__reassurance .icon { color: var(--green-300); }
.footer__columns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s6); padding-block: var(--s7); }
.footer__heading { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s4); color: var(--on-dark); }
.footer__col ul { display: grid; gap: 10px; color: var(--on-dark-2); }
.footer__shop { color: var(--on-dark-2); display: grid; gap: var(--s3); align-content: start; }
.footer__shop address { font-style: normal; }
.hours div { display: flex; justify-content: space-between; gap: var(--s4); }
.hours dt { color: var(--on-dark); }
.footer__social { display: flex; gap: var(--s4); }
.footer__follow { display: grid; gap: var(--s3); justify-items: start; margin-top: var(--s2); }
.footer__shop-follow { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; padding: 0 var(--s4); border-radius: 999px; background: #5A31F4; color: #fff; font-weight: 600; font-size: var(--fs-sm); }
.footer__shop-follow:hover { background: #4524C4; }
.footer__preferred { color: var(--on-dark); font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-on-dark); }
.footer__preferred .icon { width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; }
.footer__legal { flex: 1 1 100%; max-width: 110ch; }
.footer__legal a { color: inherit; }
.payment-methods { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 100%; }
.payment-icon { display: block; width: 38px; height: 24px; border-radius: 3px; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s4) var(--s6); padding-block: var(--s5) var(--s8); border-top: 1px solid var(--line-on-dark); color: var(--on-dark-2); font-size: var(--fs-xs); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer__prefs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); min-width: 0; }
@media (max-width: 1023px) {
  .footer__top { grid-template-columns: 1fr; gap: var(--s7); }
  .footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) { .footer__columns { grid-template-columns: 1fr; } .footer__bottom { padding-bottom: 88px; } }

/* ---------- cart drawer ---------- */
.free-shipping { padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line); background: var(--stone); }
.free-shipping__text { font-size: var(--fs-sm); margin-bottom: var(--s2); }
.free-shipping__text strong { font-weight: 600; font-variant-numeric: tabular-nums; }

/* numbers that roll to their new value (rollText in luxe.js): one reel per digit, an invisible digit holds its place
   and its baseline, the reel turns by whole lines and lands without overshoot, left to right */
.roll { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll__r { position: relative; display: inline-block; overflow: clip; }
.roll__ph { visibility: hidden; }
.roll__s { position: absolute; inset: 0 auto auto 0; display: flex; flex-direction: column; translate: 0 calc(var(--p) * -1lh); }
.roll__s.is-go { transition: translate 640ms var(--ease-out) calc(160ms + var(--i) * 50ms); }
.roll__s > span { height: 1lh; }

/* hand-drawn marks (doodle in luxe.js): the shop's green, drawn once */
.doodle-mark { position: relative; display: inline-block; }
.doodle { position: absolute; max-width: none; overflow: visible; pointer-events: none; } /* wider than the words it marks */
/* the stroke scales with the mark (no non-scaling-stroke: its dashes would not cover a stretched path), so it is
   thicker where the mark is stretched, as a marker pen is */
.doodle path { fill: none; stroke: var(--green-500); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.doodle--under path { stroke-width: 4; }
.doodle--loop path { stroke-width: 2.2; }
.doodle.is-drawing path { animation: doodle-draw 760ms var(--ease-out) 260ms both; }
@keyframes doodle-draw { from { stroke-dashoffset: 1; } }
.doodle--under { left: -2%; width: 104%; bottom: -0.42em; height: 0.55em; }
.doodle--loop { left: -14%; top: -22%; width: 128%; height: 146%; }
.doodle-mark--loop { padding-inline: .12em; }
.free-shipping__bar { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.free-shipping__bar span { display: block; height: 100%; background: var(--green-500); transform-origin: left; transform: scaleX(var(--pct, 0)); transition: transform calc(var(--d-640) * var(--m) + .01ms) var(--ease-out); }
.cart-lines { display: grid; gap: var(--s5); }
.cart-lines, .cart-suggest__list { grid-template-columns: minmax(0, 1fr); }
.cart-line { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--s3); align-items: start; }
.cart-line__media { aspect-ratio: 4 / 5; background: var(--lichen); }
.cart-line__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.cart-line__brand { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.cart-line__title { font-size: var(--fs-sm); line-height: 1.35; }
.cart-line__title a { text-decoration: none; }
.cart-line__meta { font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; }
.cart-line__price { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; text-align: right; }
.cart-line__actions { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.qty button { width: 36px; height: 36px; display: grid; place-items: center; }
.qty button .icon { width: 16px; height: 16px; }
.qty output { min-width: 24px; text-align: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.cart-line__remove { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; min-height: 36px; }
.cart-line.is-new { animation: rise calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
.cart-empty { display: grid; gap: var(--s3); padding: var(--s5) 0; }
.cart-empty__title { font-family: var(--font-display); font-size: var(--fs-d4); }
.cart-empty__links { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.cart-suggest { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }
.cart-suggest__title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--s4); }
.cart-suggest__list { display: grid; gap: var(--s4); }
.mini-card { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: center; }
.mini-card__media { aspect-ratio: 1; background: var(--lichen); display: block; }
.mini-card__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.mini-card__brand { font-size: 10px; font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.mini-card__title { font-size: var(--fs-sm); line-height: 1.3; }
.mini-card__title a { text-decoration: none; }
.mini-card__price { font-size: var(--fs-xs); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.cart-note summary { font-size: var(--fs-sm); text-decoration: underline; cursor: pointer; list-style: none; min-height: 32px; display: flex; align-items: center; }
.cart-note textarea { margin-top: var(--s2); }
.cart-totals { display: grid; gap: var(--s1); font-size: var(--fs-sm); }
.cart-totals div { display: flex; justify-content: space-between; }
.cart-totals div:first-child { font-size: var(--fs-body); font-weight: 600; }
.cart-totals dd { font-variant-numeric: tabular-nums; }
.express { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.express--2 { grid-template-columns: repeat(2, 1fr); }
.cart-continue { margin-top: var(--s4); }
.express__btn { display: grid; place-items: center; min-height: 44px; border-radius: var(--radius); border: 1px solid var(--line-strong); font-size: var(--fs-sm); font-weight: 600; text-decoration: none; }
.express__btn:hover { border-color: var(--ink); }
.cart-drawer__trust { display: flex; align-items: center; justify-content: center; gap: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
.cart-drawer__trust .icon { width: 15px; height: 15px; }

/* ---------- header actions: the theme's icons at their sizes (24px, the bag 26px), a search field you can see,
   the live red cart count (assets/cart-feedback.css) ---------- */
.header__actions { align-items: center; }
a[href^="tel:"], .nowrap { white-space: nowrap; }
.header__actions .icon { width: 24px; height: 24px; }
.header__bag .icon { width: 26px; height: 26px; }
/* phones and tablets: the bag the size of the other icons, and its count inside the screen with its pulse ring
   (owner, 02/10) */
@media (max-width: 1179px) {
  .header__bag .icon { width: 24px; height: 24px; }
  .header__actions { margin-right: -4px; }
  .header__bag .count-badge { top: 4px; right: 4px; }
}
.header__search { display: inline-flex; align-items: center; gap: 10px; height: 42px; min-width: 230px; padding: 0 var(--s4) 0 var(--s3); margin-right: var(--s2);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; color: inherit; font-size: var(--fs-sm); transition: border-color var(--d-160) linear, background-color var(--d-160) linear; }
.header__search .icon { width: 20px; height: 20px; }
.header__search-label { opacity: .75; }
.header__search:hover { border-color: currentColor; background: color-mix(in srgb, currentColor 5%, transparent); }
/* below 1180px the field becomes a lens next to the burger: two icons a side keep the logo centred */
.header__search-touch { display: none; }
.header__search-touch .icon { width: 24px; height: 24px; }
@media (max-width: 1179px) { .header__search-touch { display: inline-grid; } }
/* phones: a visible search field under the logo row, as inviting as the desktop one (owner, 02/10); the lens
   gives way to it */
.header__searchbar { display: none; }
@media (max-width: 767px) {
  .header__search-touch { display: none; }
  .header__searchbar { display: block; padding-bottom: var(--s2); }
  .header__searchbar-btn { display: flex; align-items: center; gap: 10px; width: 100%; height: 44px; padding: 0 var(--s4); border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--snow) 70%, transparent); color: inherit; font-size: var(--fs-sm); }
  .header__searchbar-btn .icon { width: 20px; height: 20px; }
  .header__searchbar-btn span { opacity: .75; }
  .header--transparent.is-over-hero .header__searchbar-btn { background: color-mix(in srgb, #000 14%, transparent); border-color: color-mix(in srgb, currentColor 45%, transparent); }
}
.header__bag .count-badge { --badge: #DC2626; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--badge); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 18px; box-shadow: 0 0 0 2px var(--stone); }
.header--transparent.is-over-hero .header__bag .count-badge { box-shadow: 0 0 0 2px rgb(255 255 255 / .9); }
html:not(.reduce-motion) .header__bag .count-badge:not([hidden]) { animation: cart-pulse 2.4s ease-out infinite; }
html:not(.reduce-motion) .header__bag .count-badge.is-bump { animation: cart-bump .5s cubic-bezier(.2, .9, .3, 1.4); }
@keyframes cart-pulse { 0% { box-shadow: 0 0 0 2px var(--stone), 0 0 0 0 rgb(220 38 38 / .5); } 70% { box-shadow: 0 0 0 2px var(--stone), 0 0 0 8px rgb(220 38 38 / 0); } 100% { box-shadow: 0 0 0 2px var(--stone), 0 0 0 0 rgb(220 38 38 / 0); } }
@keyframes cart-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---------- Shopify's country and language selectors (header, mobile menu, footer) ----------
   One bordered pill (owner, 02/10): flag and "Italia (EUR €)", a thin divider, "Italiano" */
.locale { position: relative; display: inline-flex; align-items: stretch; font-size: var(--fs-sm);
  border: 1px solid var(--line-strong); border-radius: 12px; background: color-mix(in srgb, var(--snow) 70%, transparent); }
.locale__item { position: relative; display: flex; }
.locale__item + .locale__item::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: var(--line-strong); }
.locale__btn { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4); font-weight: 500; white-space: nowrap; border-radius: 0; transition: background-color var(--d-160) var(--ease-out); }
.locale__item:first-child .locale__btn { border-radius: 11px 0 0 11px; }
.locale__item:last-child .locale__btn { border-radius: 0 11px 11px 0; }
.locale__btn > .icon { display: none; }
.locale__btn:hover, .locale__btn[aria-expanded="true"] { background: color-mix(in srgb, currentColor 6%, transparent); }
.locale__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.locale__flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: 0 0 0 1px rgb(19 25 20 / .12); }
.locale__pop { position: absolute; top: calc(100% + 8px); left: 0; z-index: var(--z-mega); width: max-content; min-width: 240px; max-height: min(60vh, 420px); overflow-y: auto; overscroll-behavior: contain;
  padding: var(--s3); background: var(--snow); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -24px rgb(19 25 20 / .45); }
.locale__pop[hidden] { display: none; }
.locale__title { font-size: var(--fs-xs); color: var(--ink-3); padding: var(--s1) var(--s2) var(--s2); }
.locale__opt { display: flex; align-items: center; gap: var(--s2); width: 100%; min-height: 40px; padding: 0 var(--s2); border-radius: var(--radius); text-align: left; }
.locale__opt:hover { background: var(--lichen); }
.locale__opt[aria-pressed="true"] { font-weight: 600; background: color-mix(in srgb, var(--green-500) 14%, transparent); }
.locale__cur { color: var(--ink-3); font-variant-numeric: tabular-nums; }
/* over the hero and on the forest footer the pill follows the text colour */
.header--transparent.is-over-hero .locale, .scheme-forest .locale { border-color: color-mix(in srgb, currentColor 35%, transparent); background: transparent; }
.header--transparent.is-over-hero .locale__item + .locale__item::before, .scheme-forest .locale__item + .locale__item::before { background: color-mix(in srgb, currentColor 35%, transparent); }
/* mobile menu: the pill spans the menu; a list opens inside the same frame, under both halves */
.locale--drawer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; margin-top: var(--s3); }
.locale--drawer .locale__item { display: contents; }
.locale--drawer .locale__item::before { display: none; }
.locale--drawer .locale__btn { grid-row: 1; width: 100%; justify-content: center; min-width: 0; }
.locale--drawer .locale__item + .locale__item .locale__btn { border-left: 1px solid var(--line-strong); }
.locale--drawer .locale__pop { position: static; grid-column: 1 / -1; grid-row: 2; width: auto; min-width: 0; max-height: 300px; margin: 0; box-shadow: none; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 11px 11px; }
/* footer: the lists open upwards */
.locale--footer .locale__pop { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.drawer-nav__sublink { display: flex; align-items: center; gap: var(--s3); }
.drawer-nav__icon { width: 22px; height: 22px; flex: none; object-fit: contain; opacity: .85; }

/* ---------- WhatsApp, the -10% teaser and the cookie banner ---------- */
.wa-btn { position: fixed; left: var(--s5); bottom: calc(var(--s5) + env(safe-area-inset-bottom)); z-index: var(--z-chip);
  display: inline-flex; align-items: center; gap: var(--s3); text-decoration: none; color: var(--ink); }
.wa-btn__logo { width: 52px; height: 52px; padding: 12px; border-radius: 50%; background: #25D366; color: #fff; box-shadow: 0 0 0 3px var(--snow), 0 10px 24px -12px rgb(19 25 20 / .7); flex: none; }
.wa-btn__label { padding: 6px 10px; border-radius: var(--radius); background: var(--snow); font-size: var(--fs-sm); box-shadow: 0 0 0 1px var(--line); }
.wa-btn:hover .wa-btn__logo { transform: scale(1.04); }
/* the "-10%" newsletter popup (sections/newsletter-popup.liquid restyled in the brand green, live behaviour):
   open, it is a card at the bottom right (phones: across the bottom); shrunk, the title bar on desktop and a round
   "-10%" bubble level with WhatsApp on phones. The container has no box: only its card or bubble take taps */
.nl-pop { position: fixed; inset: auto 0 calc(0px + env(safe-area-inset-bottom)) 0; height: 0; z-index: var(--z-chip); pointer-events: none; }
.nl-pop[hidden] { display: none; }
.nl-pop__card { position: absolute; right: var(--s6); bottom: var(--s6); width: min(380px, calc(100% - 2 * var(--s4))); pointer-events: auto;
  background: var(--green-800); color: var(--stone); border-radius: calc(var(--radius) * 2); box-shadow: 0 18px 40px -20px rgb(11 23 14 / .85);
  animation: rise calc(var(--d-480) * var(--m) + .01ms) var(--ease-out) backwards;
  transition: opacity var(--d-240) var(--ease-out), transform var(--d-320) var(--ease-out), visibility 0s; }
.nl-pop__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px; padding: var(--s3) var(--s2) var(--s3) var(--s5); }
.nl-pop__title { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.2; color: var(--snow); }
.nl-pop__head .icon-button { color: var(--stone); }
.nl-pop__head .icon-button:focus-visible { outline-color: var(--green-300); }
.nl-pop__toggle .icon + .icon { display: none; rotate: 180deg; }
.nl-pop[data-state="collapsed"] .nl-pop__toggle .icon:first-child { display: none; }
.nl-pop[data-state="collapsed"] .nl-pop__toggle .icon + .icon { display: block; }
.nl-pop[data-state="collapsed"] .nl-pop__head { cursor: pointer; }
/* the body folds away (grid rows 1fr → 0fr), the title bar stays */
.nl-pop__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
.nl-pop__body > * { min-height: 0; overflow: hidden; padding: 0 var(--s5); }
.nl-pop__body > :not([hidden]) { padding-bottom: var(--s5); }
.nl-pop[data-state="collapsed"] .nl-pop__body { grid-template-rows: 0fr; }
.nl-pop[data-state="collapsed"] .nl-pop__body > * { padding-bottom: 0; visibility: hidden; transition: visibility 0s var(--d-320); }
.nl-pop__text { font-size: var(--fs-sm); line-height: 1.5; color: color-mix(in srgb, var(--stone) 88%, transparent); margin-bottom: var(--s4); }
.nl-pop__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); }
.nl-pop__form .field__input { min-height: 48px; background: var(--snow); border-color: transparent; color: var(--ink); }
.nl-pop__form .button { --bg: var(--on-dark); --fg: var(--forest-950); --bd: var(--on-dark); }
.nl-pop__form .button:hover { --bg: var(--green-300); --bd: var(--green-300); }
.nl-pop__privacy { margin-top: var(--s3); font-size: var(--fs-xs); line-height: 1.45; color: color-mix(in srgb, var(--stone) 82%, transparent); }
.nl-pop__privacy a { color: inherit; }
.nl-pop__done p { font-size: var(--fs-sm); line-height: 1.5; }
.nl-pop__code-label { margin-top: var(--s4); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: color-mix(in srgb, var(--stone) 80%, transparent); }
.nl-pop__code { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin: var(--s2) 0 var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s4); border: 1px dashed color-mix(in srgb, var(--stone) 60%, transparent); border-radius: var(--radius); }
.nl-pop__code span { font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.nl-pop__code .button { --fg: var(--stone); --bd: color-mix(in srgb, var(--stone) 70%, transparent); }
.nl-pop__code .button:hover { --bg: var(--stone); --fg: var(--ink); }
.nl-pop__done .meta { color: color-mix(in srgb, var(--stone) 75%, transparent); }
.nl-pop__bubble { display: none; }
/* phones: across the bottom when open; shrunk, a 56px bubble whose centre is level with WhatsApp's (48px at 12px) */
@media (max-width: 699px) {
  .nl-pop__card { left: var(--s3); right: var(--s3); bottom: var(--s3); width: auto; }
  .nl-pop__bubble { display: grid; place-items: center; position: absolute; right: var(--s3); bottom: 8px; width: 56px; height: 56px; border-radius: 50%; pointer-events: auto;
    background: var(--green-800); color: var(--snow); font-weight: 700; font-size: 1rem; letter-spacing: .01em; box-shadow: 0 0 0 3px var(--snow), 0 10px 24px -12px rgb(19 25 20 / .7);
    transition: opacity var(--d-240) var(--ease-out), transform var(--d-320) var(--ease-out), visibility 0s; }
  .nl-pop__bubble:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
  .nl-pop[data-state="open"] .nl-pop__bubble { opacity: 0; transform: scale(.6); visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, var(--d-320); }
  .nl-pop[data-state="collapsed"] .nl-pop__card { opacity: 0; transform: translateY(16px) scale(.98); visibility: hidden; pointer-events: none; transition-delay: 0s, 0s, var(--d-320); }
  .nl-pop[data-state="collapsed"] .nl-pop__body { transition: none; }
}
/* reduced motion: the card and the bubble only fade */
html.reduce-motion .nl-pop :is(.nl-pop__card, .nl-pop__bubble) { transform: none; }
/* the preview chip sits above WhatsApp on the left */
.preview-chip { bottom: calc(var(--s5) + 64px + env(safe-area-inset-bottom)); }
body:has(.sticky-atc.is-visible) .preview-chip { bottom: calc(var(--sticky-h, 84px) + 64px + env(safe-area-inset-bottom)); }
body:has(.sticky-atc.is-visible) .wa-btn { bottom: calc(var(--sticky-h, 84px) + env(safe-area-inset-bottom)); }
body:has(.sticky-atc.is-visible) .nl-pop { bottom: calc(var(--sticky-h, 84px) - var(--s3) + env(safe-area-inset-bottom)); }
.cookie-banner { position: fixed; left: 50%; bottom: calc(var(--s5) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-dialog);
  width: min(520px, calc(100% - 2 * var(--s4))); padding: var(--s6) var(--s6) var(--s4); background: var(--snow); color: var(--ink);
  border-radius: calc(var(--radius) * 2); box-shadow: 0 0 0 1px var(--line), 0 24px 60px -24px rgb(11 23 14 / .55); animation: cookie-in calc(var(--d-480) * var(--m) + .01ms) var(--ease-out) both; }
@keyframes cookie-in { from { opacity: 0; translate: 0 calc(12px * var(--m)); } }
.cookie-banner[hidden] { display: none; }
/* no x (owner, 03/10): "Declina" on the first layer closes without consent */
.cookie-banner__title { font-family: var(--font-display); font-size: var(--fs-d4); line-height: 1.1; margin-bottom: var(--s2); }
.cookie-banner__text { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; margin-bottom: var(--s4); }
.cookie-banner__accept { width: 100%; min-height: 52px; font-size: 1rem; }
.cookie-banner__more { display: flex; justify-content: center; align-items: center; gap: var(--s1); margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
.cookie-banner__more button { min-height: 32px; padding: 0 var(--s1); color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner__prefs { display: grid; gap: var(--s3); }
.cookie-banner__prefs .check { font-size: var(--fs-sm); }
html.has-cookie-banner :is(.wa-btn, .comment-fab, .nl-pop) { visibility: hidden; }
@media (max-width: 767px) {
  .wa-btn { left: var(--s3); bottom: calc(var(--s3) + env(safe-area-inset-bottom)); }
  .wa-btn__label { display: none; }
  .wa-btn__logo { width: 48px; height: 48px; padding: 11px; }
  .cookie-banner { left: 0; right: 0; bottom: 0; transform: none; width: auto; border-radius: calc(var(--radius) * 3) calc(var(--radius) * 3) 0 0; padding: var(--s5) var(--s5) calc(var(--s3) + env(safe-area-inset-bottom)); }
  /* product page: WhatsApp only with the sticky add-to-cart bar, above it (it hid the price: journey P1) */
  .template-product .wa-btn { display: none; }
  body:has(.sticky-atc.is-visible).template-product .wa-btn { display: inline-flex; }
  /* the review tool's own button: on the right edge, clear of WhatsApp and the teaser */
  .comment-fab { bottom: auto; top: 58%; right: var(--s2); width: 44px; height: 44px; }
  body:has(.sticky-atc.is-visible) .comment-fab { bottom: auto; }
}

/* ---------- look viewer (native-imm.js of the update): over the page, two columns from 760px ---------- */
.look-viewer { width: min(1040px, calc(100% - 48px)); height: min(720px, calc(100dvh - 48px)); margin: auto; border-radius: var(--radius); overflow: hidden;
  opacity: 0; transform: translateY(calc(12px * var(--m))) scale(.985); transition: opacity var(--d-320) var(--ease-out), transform var(--d-320) var(--ease-out), display var(--d-320) allow-discrete, overlay var(--d-320) allow-discrete; }
.look-viewer[open] { opacity: 1; transform: none; }
@starting-style { .look-viewer[open] { opacity: 0; transform: translateY(calc(12px * var(--m))) scale(.985); } }
.look-viewer:not([open]) { display: none; }
.look-viewer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: 100%; }
.look-viewer__media { position: relative; margin: 0; background: var(--lichen); overflow: hidden; touch-action: pan-y; }
.look-viewer__media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.look-viewer__nav { position: absolute; top: 50%; translate: 0 -50%; background: color-mix(in srgb, var(--snow) 88%, transparent); }
.look-viewer__nav--prev { left: var(--s3); }
.look-viewer__nav--next { right: var(--s3); }
.look-viewer__panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; }
.look-viewer__head { position: relative; padding: var(--s5) calc(var(--s5) + 48px) var(--s4) var(--s5); border-bottom: 1px solid var(--line); }
.look-viewer__head h2 { margin-top: var(--s1); }
.look-viewer__close { position: absolute; top: var(--s3); right: var(--s3); }
.look-viewer .look-viewer__pieces { overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 var(--s5); list-style: none; }
.look-viewer__piece { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto; gap: var(--s2) var(--s4); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.look-viewer__thumb { grid-column: 1; grid-row: span 2; }
.look-viewer__buy { grid-column: 2 / -1; display: grid; justify-items: start; gap: var(--s2); min-width: 0; }
.look-viewer__buy .look-viewer__sizes, .look-viewer__buy .look-viewer__help, .look-viewer__buy .look-viewer__actions { margin-top: 0; }
.look-viewer__thumb { display: block; background: var(--lichen); border-radius: var(--radius); overflow: hidden; }
.look-viewer__thumb img { width: 80px; height: 100px; object-fit: contain; mix-blend-mode: multiply; }
.look-viewer__info { display: grid; gap: 2px; min-width: 0; }
.look-viewer__brand { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.look-viewer__name a { color: var(--ink); font-weight: 600; text-decoration: none; }
.look-viewer__name a:hover { text-decoration: underline; }
.look-viewer__price { font-variant-numeric: tabular-nums; }
.look-viewer__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s2) 0 0; padding: 0; border: 0; }
.look-viewer__sizes .size-chip { position: relative; min-width: 44px; min-height: 40px; padding: 0 10px; display: inline-grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.look-viewer__sizes .size-chip input { position: absolute; inset: 0; opacity: 0; cursor: inherit; }
.look-viewer__sizes .size-chip:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); font-weight: 600; }
.look-viewer__sizes .size-chip:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a sold-out size is a button with the bell (as on the product page): a tap opens the back-in-stock popup */
.look-viewer__sizes .size-chip.is-sold { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); background: transparent; border-style: dashed; font: inherit; font-size: var(--fs-sm); }
.look-viewer__sizes .size-chip.is-sold > span { text-decoration: line-through; }
.look-viewer__sizes .size-chip.is-sold .icon { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) { .look-viewer__sizes .size-chip.is-sold:hover { border-color: var(--ink); color: var(--ink); } }
.look-viewer__sizes .size-chip.is-sold:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.look-viewer__sizes .size-chip.is-single { border-style: dashed; }
.look-viewer__help { display: flex; flex-wrap: wrap; gap: 0 var(--s4); margin-top: var(--s1); }
.look-viewer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); margin-top: var(--s2); }
.look-viewer__add { min-width: 116px; }
.look-viewer__view { font-size: var(--fs-sm); }
.look-viewer__piece.is-added .look-viewer__name::after { content: 'Nel carrello'; display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 11px; font-weight: 600; background: var(--green-100); color: var(--green-800); vertical-align: 2px; }
.look-viewer__piece.is-soldout .look-viewer__thumb img, .look-viewer__piece.is-gone .look-viewer__thumb img { opacity: 0.55; }
.look-viewer__hint { display: none; font-size: var(--fs-xs); color: var(--error); }
.look-viewer__piece.is-missing .look-viewer__hint { display: block; }
.look-viewer__piece.is-missing .look-viewer__sizes .size-chip:not(.is-sold) { border-color: var(--error); }
.look-viewer__sold { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); font-size: var(--fs-sm); }
.look-viewer__foot { display: grid; gap: var(--s3); padding: var(--s4) var(--s5) var(--s5); border-top: 1px solid var(--line); background: var(--snow); }
.look-viewer__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); font-variant-numeric: tabular-nums; }
.look-viewer__total strong { font-size: 1.125rem; }
.look-viewer__save { color: var(--brick); font-size: var(--fs-sm); }
[data-lv-add][aria-disabled="true"] { opacity: .55; }
.look-viewer__status:empty { display: none; }
.look-viewer__status { font-size: var(--fs-sm); color: var(--green-800); }
.look-viewer__links { margin: 0; }
.look-viewer__trust { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 759px) {
  .look-viewer { width: 100%; height: 100dvh; border-radius: 0; }
  .look-viewer__inner { grid-template-columns: 1fr; grid-template-rows: auto auto; overflow-y: auto; overscroll-behavior: contain; }
  .look-viewer__media { aspect-ratio: 4 / 5; max-height: 58dvh; }
  .look-viewer__panel { grid-template-rows: auto auto auto; }
  .look-viewer .look-viewer__pieces { overflow: visible; }
  .look-viewer__thumb { grid-row: 1; }
  .look-viewer__buy { grid-column: 1 / -1; }
  .look-viewer__foot { position: sticky; bottom: 0; }
  .look-viewer__head { padding-right: calc(var(--s5) + 48px); }
  .look-viewer__close { position: fixed; top: var(--s3); right: var(--s3); z-index: 2; background: color-mix(in srgb, var(--snow) 90%, transparent); }
}

/* ---------- phones: the looks as a vertical reel (the live native-imm.js idea, owner 02/10). One look per screen,
   full-bleed photo, native scroll-snap moves one look per swipe; the pieces open in a sheet from the bottom ---------- */
.look-reel { width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--forest-950); color: var(--on-dark); overflow: hidden; }
.look-reel::backdrop { background: var(--forest-950); }
.look-reel { opacity: 0; transition: opacity var(--d-320) var(--ease-out), display var(--d-320) allow-discrete, overlay var(--d-320) allow-discrete; }
.look-reel[open] { opacity: 1; }
@starting-style { .look-reel[open] { opacity: 0; } }
.look-reel:not([open]) { display: none; }
.look-reel__track { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.look-reel__track::-webkit-scrollbar { display: none; }
.look-reel__slide { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; background: var(--forest-950); }
/* the photo ends on the panel and keeps its bottom (the shoes), as live; when the space left would crop more
   than about a tenth of it (short screens), the whole photo shows on the dark ground instead */
.look-reel__media { position: relative; min-height: 0; overflow: hidden; container-type: size; }
.look-reel__photo { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
@container (min-aspect-ratio: 13 / 20) { .look-reel__photo { object-fit: contain; } }
.look-reel__media::before, .look-reel__media::after { content: ""; position: absolute; inset-inline: 0; pointer-events: none; z-index: 1; }
.look-reel__media::before { top: 0; height: 120px; background: linear-gradient(rgb(6 12 8 / .5), transparent); }
.look-reel__media::after { bottom: 0; height: 40px; background: linear-gradient(transparent, var(--forest-950)); }
/* the photo settles as it arrives (the hero's 1.04 to 1), only the look in view */
html:not(.reduce-motion) .look-reel__slide.is-current .look-reel__photo { animation: reel-settle var(--d-800) var(--ease-out) both; }
@keyframes reel-settle { from { scale: 1.04; } }
/* a double tap saves the look: the heart rises over the photo */
.look-reel__burst { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; pointer-events: none; opacity: 0; color: var(--snow); }
.look-reel__burst .icon { width: 96px; height: 96px; fill: currentColor; stroke: none; filter: drop-shadow(0 4px 16px rgb(0 0 0 / .35)); }
.look-reel__media.is-burst .look-reel__burst { animation: reel-burst var(--d-800) var(--ease-out); }
@keyframes reel-burst { 0% { opacity: 0; scale: .6; } 25% { opacity: 1; scale: 1.08; } 60% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1; } }
html.reduce-motion .look-reel__media.is-burst .look-reel__burst { animation: reel-burst-still var(--d-800) linear; }
@keyframes reel-burst-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
.look-reel__info { display: grid; gap: var(--s3); padding: var(--s2) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); background: var(--forest-950); }
.look-reel__head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 2px; margin-right: calc(-1 * var(--s2)); }
.look-reel__title { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.01em; color: var(--snow); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-wrap: balance; }
.look-reel__icon { color: var(--snow); }
.look-reel__icon[aria-pressed="true"] .icon { fill: currentColor; }
.look-reel__icon:focus-visible { outline-color: var(--green-300); }
/* every piece in sight, no sideways scrolling (owner, 02/10: no popup scrolls sideways): up to 64px each, narrower
   when a look has many pieces on a small phone */
.look-reel .look-reel__strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 64px); gap: var(--s2); margin: 0; padding: 2px 0; list-style: none; }
.look-reel__piece { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: var(--on-dark); text-align: left; font-variant-numeric: tabular-nums; }
.look-reel__piece-img { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--lichen); }
.look-reel__piece-img img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.look-reel__piece.is-out .look-reel__piece-img img { opacity: .5; }
.look-reel__piece-price { font-size: 0.6875rem; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; }
.look-reel__piece:focus-visible { outline: 2px solid var(--green-300); outline-offset: 2px; }
.look-reel__shop { width: 100%; min-height: 48px; }
.look-reel__top { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: calc(var(--s3) + env(safe-area-inset-top)) var(--s3) 0 var(--s4); pointer-events: none; }
.look-reel__top > * { pointer-events: auto; }
.look-reel__logo { position: absolute; left: 50%; translate: -50% 0; top: calc(var(--s3) + env(safe-area-inset-top) + 10px); display: block; line-height: 0; }
.look-reel__logo img { width: 117px; height: auto; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.look-reel__count { margin: 0; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: var(--snow); text-shadow: 0 1px 2px rgb(0 0 0 / .4); }
.look-reel__close { color: var(--snow); background: rgb(6 12 8 / .32); border-radius: 50%; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
/* where the shopper is: one dash per look down the right edge, the current one long and white */
.look-reel__progress { position: absolute; z-index: 2; right: 6px; top: 50%; translate: 0 -50%; display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; pointer-events: none; filter: drop-shadow(0 0 2px rgb(0 0 0 / .45)); }
.look-reel__progress li { width: 3px; height: 10px; border-radius: 2px; background: rgb(255 255 255 / .38); transition: height var(--d-240) var(--ease-out), background-color var(--d-240) var(--ease-out); }
.look-reel__progress li.is-current { height: 22px; background: var(--snow); }
/* the last screen: where the reel goes on */
.look-reel__end { display: grid; grid-template-rows: none; place-content: center; gap: var(--s5); padding: var(--s6); text-align: center; background: var(--forest-950); }
.look-reel__end .d3 { color: var(--snow); }
.look-reel__end::before, .look-reel__end::after { content: none; }
.look-reel.is-end :is(.look-reel__count, .look-reel__progress) { opacity: 0; }
/* the pieces: a sheet from the bottom over the photo, which stays visible above it */
.look-reel__scrim { position: absolute; inset: 0; z-index: 3; background: rgb(6 12 8 / .45); opacity: 0; transition: opacity var(--d-320) var(--ease-out); }
.look-reel.is-sheet .look-reel__scrim { opacity: 1; }
.look-reel__scrim[hidden] { display: block; visibility: hidden; }
.look-reel__sheet { position: absolute; inset: auto 0 0; z-index: 4; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; max-height: 86%; background: var(--stone); color: var(--ink); border-radius: 16px 16px 0 0;
  translate: 0 100%; transition: translate var(--d-480) var(--ease-drawer), visibility 0s var(--d-480); visibility: hidden; box-shadow: 0 -12px 40px rgb(6 12 8 / .35); }
.look-reel.is-sheet .look-reel__sheet { translate: 0 0; visibility: visible; transition: translate var(--d-480) var(--ease-drawer), visibility 0s; }
.look-reel__sheet.is-dragging { transition: none; }
.look-reel__grab { display: grid; place-items: center; height: 24px; touch-action: none; cursor: grab; }
.look-reel__grab::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.look-reel__sheet .look-viewer__head { padding: 0 calc(var(--s4) + 44px) var(--s3) var(--s4); touch-action: none; } /* pulled down by its title too */
.look-reel__sheet .look-viewer__count { display: none; } /* the reel's own count stays in sight above */
.look-reel__sheet-close { position: absolute; top: 18px; right: var(--s2); }
.look-reel__sheet .look-viewer__pieces { overflow-y: auto; overscroll-behavior: contain; margin: 0; padding: 0 var(--s4); list-style: none; }
.look-reel__sheet .look-viewer__piece { grid-template-columns: 72px minmax(0, 1fr) auto; }
.look-reel__sheet .look-viewer__thumb { grid-row: 1; }
.look-reel__sheet .look-viewer__thumb img { width: 72px; height: 90px; }
.look-reel__sheet .look-viewer__buy { grid-column: 1 / -1; }
.look-reel__sheet .look-viewer__foot { padding: var(--s3) var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); }
html.reduce-motion .look-reel__sheet, html.reduce-motion .look-reel__scrim { transition-duration: .01ms; }

/* the Gift Card in the menu (proposal, 02/10): the last item, with its little gift icon */
.header__item--gift .header__link { display: inline-flex; align-items: center; gap: 6px; color: var(--green-700); }
.header__item--gift .icon { width: 18px; height: 18px; }
.header--transparent.is-over-hero .header__item--gift .header__link { color: inherit; }
.drawer-nav__link--gift { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); color: var(--green-700); }
.drawer-nav__gift { width: 48px; height: auto; mix-blend-mode: multiply; }
/* reduced motion: the marks are drawn and the numbers written at once */
html.reduce-motion .doodle path { animation: none; }
html.reduce-motion .roll__s { transition: none; }

/* ================= HOME ================= */
/* hero: picture at full opacity from the first frame; height capped so the 2048x768 source is never upscaled at 1x */
.hero { position: relative; display: grid; min-height: min(768px, 86svh); overflow: hidden; isolation: isolate; color: var(--snow); }
.hero__media, .hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media img { object-fit: cover; object-position: 50% 62%; transform-origin: 50% 70%; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 23 14 / 0.38) 0%, rgb(11 23 14 / 0) 26%, rgb(11 23 14 / 0) 46%, rgb(11 23 14 / 0.62) 100%); }
.hero__content { position: relative; align-self: end; padding-bottom: clamp(40px, 7vw, 96px); padding-top: calc(var(--header-h) + 48px); display: grid; gap: var(--s5); justify-items: start; }
.hero__title { color: var(--snow); max-width: 12ch; font-weight: 400; }
.hero__title .line { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.04em; }
.hero__title .line > span { display: block; }
.hero__eyebrow { margin-bottom: var(--s3); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.06em; color: color-mix(in srgb, var(--snow) 92%, transparent); }
.hero__sub { max-width: 44ch; font-size: var(--fs-lead); line-height: 1.5; color: color-mix(in srgb, var(--snow) 92%, transparent); }
.hero__actions { display: flex; gap: var(--s3); flex-wrap: wrap; }
@media (max-width: 767px) { .hero { min-height: min(133vw, 88svh); } .hero__media img { object-position: 50% 50%; } }

/* Uomo / Donna split, asymmetric 7/5, the second tile offset down. From tablets up the photos take their height from
   the window, not their width (owner, 03/10: on a laptop the Uomo tile was taller than the screen): the pair and
   their names fit in one view */
.split__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(var(--s5), 4vw, var(--s9)); align-items: start; }
.split__tile--b { margin-top: clamp(40px, 9vh, 120px); }
@media (min-width: 768px) {
  .split__tile--a .split__media { aspect-ratio: auto; height: clamp(320px, 62vh, 580px); }
  .split__tile--b .split__media { aspect-ratio: auto; height: clamp(280px, 50vh, 470px); }
}
.split__link { display: block; }
.split__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--lichen); }
.split__media--still { background: var(--lichen); }
.split__media--still img { object-fit: contain !important; padding: 10%; mix-blend-mode: multiply; }
.split__media img { width: 100%; height: 100%; object-fit: cover; transition: transform calc(var(--d-1200) * var(--m) + .01ms) var(--ease-out); }
.split__text { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); margin-top: var(--s5); flex-wrap: wrap; }
.split__title { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .split__tile:hover .split__media img { transform: scale(1.025); } }
/* Bambini, Accessori, Sport: a row of three squares under the two big tiles */
.split__more { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(var(--s4), 3vw, var(--s7)); margin-top: clamp(var(--s7), 6vw, var(--s9)); }
.split__media--square { aspect-ratio: 1; }
.split__mini-title { margin-top: var(--s4); font-family: var(--font-display); font-size: var(--fs-d4); font-weight: 400; line-height: 1.1; }
.split__mini:hover .split__media img { transform: scale(1.025); }
@media (max-width: 767px) { .split__more { gap: var(--s3); margin-top: var(--s6); } .split__mini-title { margin-top: var(--s2); font-size: 1.125rem; } }
/* phones: both worlds in one glance, side by side, the second still a step lower */
/* phones: two equal tiles side by side, aligned (owner, 03/10: the offset second tile looked crooked by mistake) */
@media (max-width: 767px) { .split__grid { grid-template-columns: 1fr 1fr; gap: var(--s3); } .split__tile--b { margin-top: 0; } .split__text { margin-top: var(--s3); gap: var(--s1); } .split__text .link-arrow { font-size: var(--fs-sm); } }

/* Nuovi arrivi */
.tabs { display: flex; gap: var(--s2); }
.featured__all { margin-top: var(--s5); }

/* looks rail: sticky + scroll-linked travel on desktop; native scroll-snap elsewhere */
.looks-rail { padding-block: var(--section); }
.looks-rail__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s5) var(--s7); margin-bottom: var(--s7); }
.looks-rail__head .lead { max-width: 48ch; }
.looks-rail__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); scrollbar-width: none; overscroll-behavior-x: contain; }
.looks-rail__viewport::-webkit-scrollbar { display: none; }
.looks-rail__track { display: flex; gap: var(--s5); padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2)); width: max-content; }
.look-card { width: clamp(260px, 26vw, 400px); scroll-snap-align: start; }
.look-card__link { display: grid; gap: var(--s3); text-decoration: none; }
.look-card__media { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--stone); }
.look-card__media img { width: 100%; height: 100%; object-fit: cover; }
.look-card__title { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.25; }
.look-card__meta { display: flex; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--fs-sm); color: var(--ink-3); margin-top: var(--s1); font-variant-numeric: tabular-nums; }
.looks-rail.is-pinned { padding-block: 0; }
.looks-rail.is-pinned .looks-rail__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.looks-rail.is-pinned .looks-rail__viewport { overflow: visible; }
.looks-rail.is-pinned .looks-rail__track { will-change: transform; }
@media (max-width: 1023px) { .looks-rail__head { grid-template-columns: 1fr; } .look-card { width: 72vw; } }

/* sport band (forest) with the ridge line */
.sport-band { position: relative; --ridge-h: clamp(100px, 15.56vw, 224px); padding-block: calc(var(--ridge-h) + clamp(32px, 2vw + 24px, 56px)) var(--section); overflow: hidden; }
/* the drawing keeps its proportions (slice): one design unit is --u pixels, the labels sit on the same grid */
.ridge { position: absolute; left: 0; top: -1px; width: 100%; height: calc(var(--ridge-h) + 1px); container-type: inline-size; }
.ridge svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ridge__peaks { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; --u: max(100cqw / 2560, var(--ridge-h) / 224); }
/* a thin flag from the summit up, the name and the height beside it */
.ridge__peak { position: absolute; left: calc(50% + (var(--x) - 720) * var(--u)); top: calc(100% - (160 - var(--y)) * var(--u)); translate: 0 calc(-100% - 4px);
  display: grid; padding: 0 0 10px 6px; border-left: 1px solid color-mix(in oklch, var(--ink) 38%, transparent); font-size: 11px; line-height: 1.2; white-space: nowrap; }
.ridge__peak--left { translate: calc(-100% + 1px) calc(-100% - 4px); padding: 0 6px 10px 0; border-left: 0; border-right: 1px solid color-mix(in oklch, var(--ink) 38%, transparent); text-align: right; }
.ridge__name { color: var(--ink-2); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ridge__m { color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 699px) { .ridge__peak--wide { display: none; } .ridge__peak { font-size: 10px; padding-bottom: 6px; } }
/* the sky is the colour of the section before (the page's stone on the home); the far range a paler green-grey; the
   near range the band's own forest, so the band starts with the skyline */
.ridge__sky { fill: var(--stone); }
.ridge__far { fill: color-mix(in oklch, var(--stone) 84%, var(--forest-950)); }
.ridge__near { fill: var(--forest-950); }
.ridge__line { fill: none; stroke: var(--green-500); stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.sport-band__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s7) clamp(var(--s6), 5vw, var(--s9)); align-items: center; }
.sport-band__intro { grid-column: 1 / -1; }
.sport-band__media { margin: 0; aspect-ratio: 1; overflow: hidden; }
.sport-band__media img { width: 100%; height: 100%; object-fit: cover; }
/* the Sport menu's sections side by side: Montagna, Corsa, Open-Air */
.sport-band__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.sport-group__title { margin-bottom: var(--s4); font-family: var(--font-display); font-size: var(--fs-d4); font-weight: 400; line-height: 1.2; }
.sport-index { border-top: 1px solid var(--line-on-dark); }
.sport-index li { border-bottom: 1px solid var(--line-on-dark); }
.sport-index__link { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: var(--s3); min-height: 52px; padding: var(--s3) 0; text-decoration: none; }
/* the menu's hand-drawn icons are dark line drawings: light on the forest band */
.sport-index__icon { width: 28px; height: 28px; filter: invert(1); opacity: 0.85; }
.sport-index__name { font-weight: 500; }
.sport-index__link .icon { width: 18px; height: 18px; color: var(--green-300); transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.sport-index__link:hover .icon { transform: translateX(4px); }
.sport-index__link:hover .sport-index__name { color: var(--green-300); }
@media (max-width: 1023px) {
  .sport-band__grid { grid-template-columns: minmax(0, 1fr); }
  .sport-band__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 639px) { .sport-band__groups { grid-template-columns: minmax(0, 1fr); gap: var(--s6); } }

/* manifesto: the single centred moment of the page */
.manifesto__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--s6), 6vw, var(--s10)); align-items: center; }
.manifesto__media img { width: 100%; filter: grayscale(1) contrast(1.02); }
.manifesto__media figcaption { margin-top: var(--s3); }
.manifesto__text { display: grid; gap: var(--s5); justify-items: center; text-align: center; max-width: 30em; margin-inline: auto; }
.manifesto__text .muted { max-width: 46ch; }
.manifesto__year { font-family: var(--font-display); font-size: var(--fs-d5); color: var(--green-700); letter-spacing: 0.04em; }
.manifesto__quote { font-weight: 400; }
.manifesto__eyebrow { font-size: var(--fs-sm); color: var(--green-700); font-weight: 600; }
@media (max-width: 1023px) { .manifesto__grid { grid-template-columns: 1fr; } }

/* logo list */
/* the header's Brand menu as a wall: each logo in a white circle, the name under it */
.logos__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s6) var(--s4); margin: 0; padding: 0; list-style: none; }
.logos__item { display: grid; justify-items: center; gap: var(--s3); text-decoration: none; text-align: center; }
.logos__circle { display: grid; place-items: center; width: clamp(72px, 9vw, 104px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px var(--line); transition: box-shadow var(--d-240) var(--ease-out), translate calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.logos__circle img { width: 82%; height: 82%; object-fit: contain; }
.logos__name { font-size: var(--fs-sm); line-height: 1.25; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .logos__item:hover .logos__circle { box-shadow: 0 0 0 1px var(--ink); translate: 0 -2px; } .logos__item:hover .logos__name { color: var(--ink); } }
@media (max-width: 767px) { .logos__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s3); } }

/* services: three equal columns (owner, 03/10: the large rental beside two small ones was out of proportion), the
   live home's illustrations at one ratio; a sideways scroller on phones (below) */
.services__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6) clamp(var(--s5), 3vw, var(--s7)); }
.service--large { display: grid; gap: var(--s3); align-content: start; }
.service { display: grid; gap: var(--s3); align-content: start; }
.service__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.service .service__eyebrow + h3 { margin-top: calc(-1 * var(--s2)); }
.service__media { overflow: hidden; background: var(--lichen); }
.service .service__media { aspect-ratio: 16 / 10; }
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service h3 a { text-decoration: none; }
.service h3 a::after { content: ""; position: absolute; inset: 0; }
.service { position: relative; }
.service .link-arrow { position: relative; z-index: 1; }
.service__text { display: grid; gap: var(--s3); max-width: 52ch; }
.services__hours { text-align: right; }
@media (max-width: 1023px) { .services__hours { text-align: left; } }

/* reviews */
.reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; border-top: 1px solid var(--line); padding-top: var(--s7); }
.reviews__score p { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.reviews__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
.reviews__quote { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.35; margin-bottom: var(--s3); }
@media (max-width: 1023px) { .reviews__grid { grid-template-columns: 1fr; gap: var(--s6); } .reviews__list { grid-template-columns: 1fr; } }

/* journal teaser */
.journal-teaser__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(var(--s5), 4vw, var(--s8)); }
.journal-teaser__side { display: grid; gap: var(--s6); align-content: start; }
.article-card { display: grid; gap: var(--s3); align-content: start; position: relative; }
.article-card__media { display: block; overflow: hidden; background: var(--lichen); }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; }
.article-card__title a { text-decoration: none; }
.article-card__title a::after { content: ""; position: absolute; inset: 0; }
.journal-teaser__side .article-card { grid-template-columns: 40% 1fr; column-gap: var(--s4); }
.journal-teaser__side .article-card .article-card__media-link { grid-row: span 2; }
.article-card__excerpt { max-width: 60ch; }
@media (max-width: 1023px) { .journal-teaser__grid { grid-template-columns: 1fr; } }

/* ================= COLLECTION ================= */
.collection-hero { padding-block: var(--s7) var(--s6); }
.collection-hero__inner { display: grid; gap: var(--s4); }
.collection-hero__title { display: flex; align-items: center; gap: var(--s5); }
.collection-hero__logo { width: 72px; height: 72px; mix-blend-mode: multiply; filter: grayscale(1); }
.collection-hero__desc { max-width: 60ch; }
ul.type-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s5); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
.type-chips::-webkit-scrollbar { display: none; }
/* the live type tiles: hand-drawn icon, type, count; a scrolling row */
ul.type-tiles { display: flex; gap: var(--s3); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--s5); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-snap-type: x proximity; }
.type-tiles::-webkit-scrollbar { display: none; }
.type-tiles > li { flex: none; scroll-snap-align: start; }
/* the rows start on the page margin: the snap stops there (scroll-padding), never at the screen edge. From
   768px they stay inside the margins on both sides (4px of room keeps the focus ring visible); phones swipe
   them edge to edge */
ul.type-chips, ul.type-tiles { scroll-padding-inline: var(--gutter); }
@media (min-width: 768px) {
  ul.type-chips, ul.type-tiles { margin-inline: -4px; padding-inline: 4px; scroll-padding-inline: 4px; }
}
.type-tile { display: grid; grid-template-columns: 44px auto; grid-template-rows: auto auto; column-gap: var(--s3); align-items: center; min-width: 168px; min-height: 68px; padding: var(--s3) var(--s4) var(--s3) var(--s3);
  background: var(--lichen); border: 1px solid transparent; border-radius: calc(var(--radius) * 2); text-align: left; transition: border-color var(--d-160) linear, background-color var(--d-160) linear; }
.type-tile__icon { grid-row: 1 / span 2; width: 44px; height: 44px; object-fit: contain; mix-blend-mode: multiply; }
.type-tile__icon--all { display: grid; place-items: center; color: var(--ink-2); }
.type-tile__icon--all .icon { width: 26px; height: 26px; }
.type-tile__label { font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; }
.type-tile__count { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.type-tile:hover { border-color: var(--line-strong); }
.type-tile.is-active { background: var(--snow); border-color: var(--ink); }
@media (max-width: 767px) { .type-tile { min-width: 148px; min-height: 60px; } .type-tile__icon { width: 38px; height: 38px; } .type-tile { grid-template-columns: 38px auto; } }
/* brand pages: "Per chi" above the types, one tight pair of rows */
.chip-rows > .type-chips:not(:last-child) { padding-bottom: var(--s3); }
.toolbar { position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in srgb, var(--stone) 94%, transparent); backdrop-filter: blur(10px); border-block: 1px solid var(--line); }
.toolbar__inner { display: flex; align-items: center; gap: var(--s4); min-height: 60px; }
/* the filters button is the strongest thing in the toolbar (owner, 02/10): a filled pill with the count */
.toolbar__filters { display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s5) 0 var(--s4); border-radius: 999px; background: var(--green-800); color: var(--snow); font-weight: 600; box-shadow: 0 1px 2px rgb(19 25 20 / .18); transition: background-color var(--d-160) var(--ease-out); }
.toolbar__filters:hover { background: color-mix(in srgb, var(--green-800) 86%, var(--ink)); }
.toolbar__filters:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.toolbar__filters .icon { width: 20px; height: 20px; }
.toolbar__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--green-300); color: var(--forest-950); font-size: 11px; font-weight: 700; }
.applied { display: flex; gap: var(--s2); flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.chip--remove { min-height: 34px; padding: 0 var(--s2) 0 var(--s3); gap: 4px; background: var(--snow); }
.chip--remove .icon { width: 14px; height: 14px; }
.toolbar__results { margin-left: auto; white-space: nowrap; }
.toolbar__sort select { appearance: none; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23131914' stroke-width='1.5'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right center / 18px; padding: 0 24px 0 8px; min-height: 44px; font-weight: 500; cursor: pointer; }
.density { display: flex; gap: 0; }
.density .icon-button { width: 40px; height: 40px; color: var(--ink-3); }
.density .icon-button[aria-pressed="true"] { color: var(--ink); }
.density .icon { width: 18px; height: 18px; }
.product-grid { --cols: 4; display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--s7) var(--s5); padding-block: var(--s6) var(--s8); }
.product-grid[data-density="2"] { --cols: 2; }
/* a look in the grid: one column like a product (3:4) where there are three or four, both columns on a phone (4:5),
   as live (look_span_2col 2, 3col and desktop 1) */
.grid-look { grid-column: span 1; }
.grid-look__card { display: grid; gap: var(--s2); align-content: start; }
.grid-look__frame { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--lichen); }
.grid-look__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transition: scale calc(var(--d-480) * var(--m) + .01ms) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .grid-look__frame:hover img { scale: 1.03; } }
.grid-look__chip { position: absolute; top: var(--s3); left: var(--s3); padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--stone); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .02em; }
.grid-look__thumbs { position: absolute; left: var(--s3); right: var(--s3); bottom: var(--s3); display: flex; gap: 6px; }
.grid-look__thumb { width: 2.125rem; height: 2.75rem; border-radius: 4px; overflow: hidden; background: var(--snow); box-shadow: 0 2px 8px rgb(0 0 0 / .18); }
.grid-look__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6%; }
.grid-look__title { font-size: var(--fs-sm); font-weight: 500; }
.grid-look__title a { text-decoration: none; }
.grid-look__meta { font-size: var(--fs-sm); color: var(--ink-2); }
.grid-look__stock { font-size: var(--fs-xs); color: var(--green-700); }
.grid-look__stock.is-partial { color: var(--ink-3); }
@media (max-width: 1023px) { .product-grid { --cols: 3; } .toolbar__results { display: none; } }
@media (max-width: 767px) {
  .product-grid { --cols: 2; gap: var(--s6) var(--s3); }
  .grid-look, .grid-gift { grid-column: span 2; }
  .grid-look__frame { aspect-ratio: 4 / 5; }
  .grid-look__thumb { width: 2.75rem; height: 3.5rem; }
  .grid-look__title { font-size: 1rem; }
  /* the Gift Card across a phone's two columns: picture and words side by side */
  .gift-tile { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: none; align-items: center; }
  .gift-tile__media { aspect-ratio: 1; }
  .density [data-density="4"] .icon { display: none; }
  .applied { display: none; }
  .toolbar__inner { gap: var(--s2); justify-content: space-between; }
  /* the filters pill keeps its size; the sort menu gives way on narrow phones */
  .toolbar__filters { flex: none; padding: 0 var(--s4) 0 var(--s3); }
  .toolbar__sort { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; }
  .toolbar__sort select { min-width: 0; max-width: 100%; text-overflow: ellipsis; }
  .density { flex: none; }
}
.load-more { display: grid; justify-items: center; gap: var(--s3); padding-bottom: var(--section); }
.load-more__bar { width: 200px; height: 2px; background: var(--line); }
.load-more__bar span { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(var(--pct, 0)); transition: transform calc(var(--d-480) * var(--m) + .01ms) var(--ease-out); }
.empty-state { padding-block: var(--s9); display: grid; gap: var(--s4); justify-items: center; text-align: center; max-width: 60ch; margin-inline: auto; }
.empty-state__actions { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; }
.facet { border-bottom: 1px solid var(--line); }
.facet summary { display: flex; justify-content: space-between; align-items: center; min-height: 56px; font-weight: 500; cursor: pointer; list-style: none; }
.facet summary::-webkit-details-marker { display: none; }
.facet[open] summary .icon { transform: rotate(45deg); }
.facet summary .icon { width: 18px; height: 18px; transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.facet__body { padding-bottom: var(--s5); }
.facet__list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.check { display: flex; align-items: center; gap: var(--s3); min-height: 40px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--green-800); }
.check input:disabled ~ * { color: var(--ink-3); opacity: 0.6; }
.check__n { margin-left: auto; color: var(--ink-3); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.facet__sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.size-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.size-toggle span { display: inline-grid; place-items: center; min-width: 48px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.size-toggle input:checked + span { background: var(--ink); color: var(--stone); border-color: var(--ink); }
.size-toggle input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
.size-toggle input:disabled + span { color: var(--ink-3); text-decoration: line-through; cursor: not-allowed; }
.price-range { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.facets__foot { grid-template-columns: auto 1fr; }

/* FAQ (GEO FAQ app block restyled) */
.faq-block__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); }
@media (max-width: 1023px) { .faq-block__grid { grid-template-columns: 1fr; gap: var(--s5); } }

/* ================= PRODUCT ================= */
.product { padding-block: var(--s5) var(--s8); }
.product .breadcrumbs { margin-bottom: var(--s5); }
.product__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.product__media-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.product__media { display: block; background: var(--lichen); aspect-ratio: 1; overflow: hidden; cursor: zoom-in; }
.product__media--main { grid-column: 1 / -1; aspect-ratio: 5 / 5.4; }
.product__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.product__media-list:has(> :only-child) .product__media--main { aspect-ratio: 1; }
.product__dots { display: none; }
.product__info-inner { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); }
.product__brand { font-size: var(--fs-sm); font-weight: 600; letter-spacing: var(--track-caps); text-transform: uppercase; }
.product__brand a { text-decoration: none; color: var(--ink-2); }
.product__title { margin-top: -6px; }
.product__colour { color: var(--ink-2); margin-top: -10px; }
.product__price { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); font-size: 1.125rem; }
.product__badges { display: flex; flex-wrap: wrap; gap: var(--s1); list-style: none; margin: 0; padding: 0; font-size: 1rem; }
.product__installments { font-size: var(--fs-sm); color: var(--ink-2); margin-top: -8px; }
.product__rating { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none; }
.product__rating:hover span { text-decoration: underline; }
.product__option-label { font-size: var(--fs-sm); font-weight: 500; }
.product__option-label strong { font-weight: 600; }
.sibling-list { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s2); }
.sibling { display: block; width: 56px; height: 56px; background: var(--lichen); border: 1px solid transparent; }
.sibling img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 4px; }
.sibling.is-current { border-color: var(--ink); }
.sibling:hover { border-color: var(--line-strong); }
.size-picker { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: var(--s3); }
.size-picker legend { float: left; padding: 0; }
.link-small { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.2em; min-height: 32px; color: var(--ink-2); }
.link-small .icon { width: 18px; height: 18px; }
.size-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.size-grid.is-single { display: none; }
.size-option { position: relative; display: grid; place-items: center; align-content: center; min-height: 52px; padding: 6px 4px; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; text-align: center; background: var(--snow); }
.size-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.size-option__label { font-size: var(--fs-sm); font-weight: 500; font-variant-numeric: tabular-nums; }
.size-option__stock { font-size: 11px; color: var(--green-700); line-height: 1.2; font-variant-numeric: tabular-nums; }
.size-option__stock.is-low { color: var(--amber, #8a5a00); }
.size-option__stock--notify { display: inline-flex; align-items: center; gap: 3px; }
.size-option__stock--notify .icon { width: 12px; height: 12px; }
.size-option::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: 5px; height: 2px; background: var(--green-500); transform: scaleX(0); transition: transform calc(var(--d-160) * var(--m) + .01ms) var(--ease-out); }
.size-option:has(input:checked) { border-color: var(--ink); }
.size-option:has(input:checked)::after { transform: scaleX(1); }
.size-option:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.size-option:hover { border-color: var(--ink); }
.size-option--sold { background: transparent; border-style: dashed; }
.size-option--sold .size-option__label { color: var(--ink-3); text-decoration: line-through; }
.size-option--sold .size-option__stock { color: var(--ink-2); }
.size-option--sold:hover .size-option__stock { color: var(--ink); text-decoration: underline; }
.size-picker.is-invalid .size-option:not(.size-option--sold) { border-color: var(--error); }
.product__size-help { justify-self: start; margin-top: -6px; }
.product__buy { display: grid; grid-template-columns: 1fr auto; gap: var(--s2); }
.product__buy .button { min-height: 56px; font-size: 1rem; }
.product__wish { width: 56px; height: 56px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.product__wish[aria-pressed="true"] .icon { fill: var(--ink); }
.product__vto { min-height: 48px; }
.product__form { display: grid; gap: var(--s4); }
/* no rules above or below (owner, 02/10) */
.product__promises { display: grid; gap: var(--s3); padding: var(--s2) 0; font-size: var(--fs-sm); }
.product__promises li { display: flex; gap: var(--s3); align-items: flex-start; }
.product__promises .icon { width: 20px; height: 20px; color: var(--green-700); flex: none; }
.product__promises strong { font-weight: 600; }
.product__archived { padding: var(--s4); background: var(--lichen); font-size: var(--fs-sm); }
.specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.specs dt { font-size: var(--fs-xs); color: var(--ink-3); }
.specs dd { color: var(--ink); }
@media (max-width: 1023px) {
  .product__grid { grid-template-columns: 1fr; }
  .product__info-inner { position: static; }
  .product__media-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .product__media-list::-webkit-scrollbar { display: none; }
  .product__media, .product__media--main { flex: 0 0 100%; aspect-ratio: 1; scroll-snap-align: center; }
  /* the photos' position as in Instagram stories (owner, 03/10): one dash per photo on the photo's bottom edge, the
     current one in the shop's green; no row of its own under the photo */
  .product__gallery { position: relative; }
  .product__dots { position: absolute; z-index: 2; bottom: 0; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); display: flex; gap: 4px; padding: 0 var(--gutter) 10px; pointer-events: none; }
  .product__dot { flex: 1 1 0; min-width: 0; height: 24px; display: flex; align-items: flex-end; pointer-events: auto; }
  .product__dot::before { content: ""; width: 100%; height: 3px; border-radius: 2px; background: rgb(19 25 20 / .14); transition: background-color var(--d-160) linear; }
  .product__dot[aria-current]::before { background: var(--green-500); }
}
.sticky-atc { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: color-mix(in srgb, var(--snow) 96%, transparent); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: var(--s3) 0 calc(var(--s3) + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
.sticky-atc.is-visible { transform: none; }
.sticky-atc__inner { display: flex; align-items: center; gap: var(--s3) var(--s4); }
.sticky-atc__thumb { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; flex: none; } /* no tile of its own: the packshot's white melts into the bar */
.sticky-atc__info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sticky-atc__title { font-size: var(--fs-sm); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sticky-atc__title span[translate] { font-weight: 600; }
.sticky-atc__price .price-list { font-size: var(--fs-sm); gap: 6px; }
.sticky-atc__size { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--snow); font-size: var(--fs-sm); white-space: nowrap; flex: none; }
.sticky-atc__size:hover { border-color: var(--ink); }
.sticky-atc__size strong { font-weight: 600; }
.sticky-atc__size .size-option__stock:empty { display: none; }
.sticky-atc__size .icon { width: 16px; height: 16px; transition: transform calc(var(--d-160) * var(--m) + .01ms) var(--ease-out); }
.sticky-atc__size[aria-expanded="true"] { border-color: var(--ink); }
.sticky-atc__size[aria-expanded="true"] .icon { transform: rotate(180deg); }
.sticky-atc__add { min-height: 48px; flex: none; }
/* sizes open upwards from the bar, like the theme's sticky select, with the counts of the grid above */
.sticky-atc__sheet { position: absolute; left: 0; right: 0; bottom: 100%; background: var(--snow); border-top: 1px solid var(--line); box-shadow: 0 -16px 32px -16px rgb(18 24 19 / .18); padding: var(--s4) 0 var(--s5); max-height: min(60vh, 420px); overflow-y: auto; }
.sticky-atc__sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s3); }
.sticky-atc__sheet-title { font-weight: 600; }
.sticky-atc__sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; }
.sticky-size[aria-pressed="true"] { border-color: var(--ink); }
.sticky-size[aria-pressed="true"]::after { transform: scaleX(1); }
.sticky-size:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sticky-atc__hint { margin-top: var(--s3); font-size: var(--fs-sm); color: var(--ink-2); }
html:not(.reduce-motion) .sticky-atc__sheet:not([hidden]) { animation: sheet-in calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
@keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } }
/* phones: the photo, the brand and the name stay (owner, 03/10: "perdo foto prodotto, titolo e brand"), in three short
   lines beside the photo (brand, name, price), then the size and "Aggiungi"; the sale line runs on top */
@media (max-width: 639px) {
  .sticky-atc__add-more, .sticky-atc__price .price-list__off, .sticky-atc__size-label { display: none; }
  .sticky-atc__inner { flex-wrap: wrap; gap: var(--s2); }
  .sticky-atc__info { display: contents; }
  .sticky-atc__thumb { width: 44px; height: 52px; }
  .sticky-atc__text { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
  .sticky-atc__title { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 13px; line-height: 1.25; }
  .sticky-atc__title > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .sticky-atc__brand { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
  .sticky-atc__price .price-list { font-size: 13px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; }
  .sticky-atc--sale .sale-line--compact { order: -1; flex: 1 0 100%; margin: 0 0 2px; }
  .sticky-atc__size { padding: 0 var(--s2); gap: 4px; }
  .sticky-atc__add { padding: 0 var(--s4); }
}
/* the sale line of snippets/sale-countdown.liquid: "Prezzo scontato" and the weekly countdown */
.sale-line { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: var(--s2); font-size: var(--fs-xs); font-weight: 600; color: var(--brick); }
.sale-line__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
html:not(.reduce-motion) .sale-line__dot { animation: sale-pulse 2s ease-in-out infinite; }
@keyframes sale-pulse { 50% { opacity: .35; } }
.sale-line__timer { font-variant-numeric: tabular-nums; word-spacing: 1px; }
.sale-line__part { white-space: nowrap; }
.sale-line__part b { font-weight: 700; }
.sale-line__unit { font-weight: 500; }
.sale-line--compact { margin-top: 0; }
.complete-look__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.complete-look__media .look-card { width: auto; }
.complete-look__pieces { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--s5); margin-top: var(--s6); }
.product-grid--compact { padding-block: 0; }
@media (max-width: 1023px) { .complete-look__grid { grid-template-columns: 1fr; } }
.brand-block { padding-block: var(--s8); }
.brand-block__inner { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s6); align-items: center; }
.brand-block__text { display: grid; gap: var(--s3); }
.brand-block__intro { max-width: 62ch; color: color-mix(in srgb, var(--on-dark) 82%, transparent); line-height: 1.6; text-wrap: pretty; }
.brand-block__logo { width: 96px; height: 96px; background: #fff; display: grid; place-items: center; border-radius: 50%; overflow: hidden; }
.brand-block__logo img { width: 78%; height: 78%; object-fit: contain; }
@media (max-width: 767px) { .brand-block__inner { grid-template-columns: 1fr; } }

/* modal (VTO, back-in-stock) */
.modal { width: min(92%, 480px); border-radius: var(--radius); background: var(--snow); opacity: 0; transform: translateY(calc(8px * var(--m)));
  transition: opacity var(--d-240) var(--ease-out), transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out), display var(--d-240) allow-discrete, overlay var(--d-240) allow-discrete; }
.modal[open] { opacity: 1; transform: none; }
@starting-style { .modal[open] { opacity: 0; transform: translateY(calc(8px * var(--m))); } }
.modal__inner { padding: var(--s6); display: grid; gap: var(--s4); }
.modal__actions { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); }
/* ---------- popups never scroll sideways (owner, 02/10): everything inside wraps to the popup's width ---------- */
dialog { overflow-x: hidden; }
.modal__inner, .drawer__body { overflow-x: hidden; }
.modal__inner { grid-template-columns: minmax(0, 1fr); }
.modal__inner > *, .drawer__body > * { min-width: 0; }
.modal__actions { flex-wrap: wrap; }
.modal__actions > .button { flex: 1 1 auto; }
dialog .button { white-space: normal; text-align: center; }
dialog table { width: 100%; table-layout: fixed; }
dialog th, dialog td { white-space: normal; overflow-wrap: anywhere; }
/* ---------- the back-in-stock app's popups, restyled: wishlist heart (wishlist-heart.js) and "Avvisami"
   (back-in-stock-widget.js on the product page, bis-mini.js on the looks). Same steps and copy as live ---------- */
.wish-modal .modal__inner, .bis-modal .modal__inner { position: relative; max-height: min(88dvh, 820px); overflow-y: auto; }
.wish-modal__product, .bis-modal__head { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s4); align-items: start; }
.wish-modal__product img, .bis-modal__head img { width: 64px; height: 80px; object-fit: contain; background: var(--lichen); border-radius: var(--radius); mix-blend-mode: multiply; }
.wish-modal__brand { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.wish-modal__title { font-family: var(--font-body); font-size: var(--fs-body); font-weight: 600; line-height: 1.35; margin-top: 2px; }
.wish-modal__price { margin-top: 2px; font-variant-numeric: tabular-nums; }
.wish-modal__close, .bis-modal__head .icon-button { margin: -10px -10px 0 0; }
.wish-modal__close--corner { position: absolute; top: var(--s3); right: var(--s3); margin: 0; }
.wish-modal__form { display: grid; gap: var(--s4); }
.wish-sizes { margin: 0; padding: 0; border: 0; }
.wish-sizes__label { margin-bottom: var(--s2); font-size: var(--fs-sm); font-weight: 600; }
.wish-sizes__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(82px, 1fr)); gap: 6px; }
.wish-size { position: relative; display: grid; justify-items: center; gap: 2px; padding: 8px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-align: center; cursor: pointer; }
.wish-size input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: inherit; }
.wish-size__label { font-size: var(--fs-sm); font-weight: 600; }
.wish-size__sub { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--green-800); }
.wish-size__sub .icon { width: 12px; height: 12px; }
.wish-size.is-sold .wish-size__sub { color: var(--amber, #8a5a00); }
.wish-size:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.wish-size:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.wish-modal__note, .bis-modal__note { font-size: var(--fs-xs); color: var(--ink-3); }
.wish-modal__saving { font-size: var(--fs-sm); color: var(--ink-2); }
.wish-modal__done, .bis-modal__done { display: grid; justify-items: center; gap: var(--s3); text-align: center; }
.wish-modal__done .modal__actions, .bis-modal__done .modal__actions { justify-content: center; }
.wish-modal__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--green-100); color: var(--green-800); }
.wish-modal__icon .icon { width: 26px; height: 26px; }
.wish-modal__icon--heart { background: #fde7ef; color: #d91f46; }
.wish-modal__badge { padding: 2px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: var(--fs-xs); font-weight: 600; }
.bis-modal__product { font-size: var(--fs-sm); }
.bis-modal__head h2 + .bis-modal__product { margin-top: var(--s1); color: var(--ink-2); }
.bis-modal__variant { font-size: var(--fs-sm); color: var(--ink-3); }
.size-dialog .drawer__body table { margin-block: var(--s4) var(--s6); }
.size-dialog .button { gap: var(--s2); }

/* PhotoSwipe (the theme's lightbox), restyled */
.pswp { --pswp-bg: var(--stone); --pswp-root-z-index: 100000; width: 100%; height: 100%; z-index: var(--pswp-root-z-index); touch-action: none; opacity: .003; contain: layout style size; outline: 0; display: none; position: fixed; top: 0; left: 0; }
.pswp--open { display: block; }
.pswp img { max-width: none; }
.pswp, .pswp__bg { will-change: opacity; transform: translateZ(0); }
.pswp__bg { opacity: .005; background: var(--pswp-bg); }
.pswp, .pswp__scroll-wrap { overflow: hidden; }
.pswp__scroll-wrap, .pswp__bg, .pswp__container, .pswp__item, .pswp__img, .pswp__zoom-wrap { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }
.pswp__img, .pswp__zoom-wrap { width: auto; height: auto; }
.pswp__img { mix-blend-mode: multiply; }
.pswp--click-to-zoom.pswp--zoom-allowed .pswp__img { cursor: zoom-in; }
.pswp--click-to-zoom.pswp--zoomed-in .pswp__img { cursor: grab; }
.pswp__item { z-index: 1; overflow: hidden; }
.pswp__hidden { display: none !important; }
.pswp__button { position: relative; display: grid; place-items: center; width: 48px; height: 48px; margin: 12px; background: var(--snow); border-radius: 50%; cursor: pointer; }
.pswp__top-bar { position: absolute; top: 0; right: 0; z-index: 10; display: flex; }
.pswp__button svg { width: 24px; height: 24px; fill: var(--ink); }
.pswp__counter { position: absolute; left: 24px; top: 24px; font-size: var(--fs-sm); }
.pswp__preloader { display: none; }

/* ================= CART, CHECKOUT, WISHLIST, SEARCH ================= */
.cart-page__grid, .checkout-mock__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; margin-top: var(--s6); }
.cart-lines--page .cart-line { grid-template-columns: 120px 1fr auto; padding-bottom: var(--s5); border-bottom: 1px solid var(--line); }
.cart-summary { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); padding: var(--s6); background: var(--snow); border: 1px solid var(--line); }
.free-shipping--inline { padding: 0; border: 0; background: none; }
.cart-summary__reassurance { grid-template-columns: 1fr; gap: var(--s3); margin-top: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--line); }
.checkout-steps { display: grid; gap: var(--s3); margin-block: var(--s6); }
.checkout-steps li { display: flex; align-items: center; gap: var(--s3); color: var(--ink-3); }
.checkout-steps span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--fs-sm); }
.checkout-steps .is-done { color: var(--green-700); }
.checkout-steps .is-current { color: var(--ink); font-weight: 600; }
.checkout-lines { display: grid; gap: var(--s4); }
.checkout-line { display: grid; grid-template-columns: 64px 1fr auto; gap: var(--s3); align-items: center; font-size: var(--fs-sm); }
.checkout-line img { width: 64px; height: 64px; object-fit: contain; background: var(--lichen); mix-blend-mode: multiply; }
.wishlist-page .lead, .search-page .search-page__form { margin-top: var(--s4); }
.wish-item { display: grid; gap: var(--s3); align-content: start; }
.wish-buy { display: grid; gap: var(--s2); }
.search-results--single { grid-template-columns: 1fr; }
.search-page__form { display: flex; gap: var(--s2); max-width: 640px; }
.search-page__side { display: grid; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 1023px) { .cart-page__grid, .checkout-mock__grid { grid-template-columns: 1fr; } .cart-summary { position: static; } }

/* ================= LOOKBOOK + LOOK ================= */
.lookbook__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
.lookbook__item .look-card { width: auto; }
.lookbook__season { margin: calc(-1 * var(--s5)) 0 var(--s6); }
.lookbook__archive { margin-top: var(--s8); font-size: var(--fs-sm); color: var(--ink-2); }
.lookbook__archive summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s2); font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; }
.lookbook__archive summary .icon { width: 18px; height: 18px; transition: transform calc(var(--d-240) * var(--m) + .01ms) var(--ease-out); }
.lookbook__archive[open] summary .icon { transform: rotate(180deg); }
.lookbook__archive ul { display: grid; margin-top: var(--s2); }
.lookbook__archive li a { display: flex; align-items: center; min-height: 44px; border-bottom: 1px solid var(--line); }
.lookbook__item.is-wide { grid-column: span 2; }
.lookbook__item.is-wide .look-card__media { aspect-ratio: 8 / 5; }
@media (max-width: 1023px) { .lookbook__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639px) { .lookbook__grid { grid-template-columns: 1fr; } .lookbook__item.is-wide { grid-column: auto; } .lookbook__item.is-wide .look-card__media { aspect-ratio: 4 / 5; } }
.look-page .breadcrumbs { margin-bottom: var(--s5); }
/* desktop: the photos and, under them, the description; the pieces beside both (owner, 02/10). Phones: photos,
   pieces, description */
.look-page__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "media info" "lead info"; gap: var(--s6) clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.look-page__media { grid-area: media; }
.look-page__info { grid-area: info; }
.look-page__lead { grid-area: lead; }
.look-page__media { display: grid; grid-template-columns: 2fr 1fr; gap: var(--s3); align-items: start; }
.look-page__photo { background: var(--lichen); }
.look-page__photo img { width: 100%; height: auto; }
.look-page__info { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); }
.look-pieces { display: grid; gap: 0; border-top: 1px solid var(--line); }
.look-piece { display: grid; grid-template-columns: auto 80px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: var(--s2) var(--s4); align-items: start; padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.look-piece__n { grid-column: 1; grid-row: span 2; align-self: start; font-family: var(--font-display); font-size: var(--fs-d5); color: var(--green-700); width: 24px; }
.look-piece__media { grid-column: 2; grid-row: span 2; display: block; aspect-ratio: 1; background: var(--lichen); }
.look-piece__media img { width: 100%; height: 100%; object-fit: contain; padding: 6%; mix-blend-mode: multiply; }
.look-piece__title { font-size: var(--fs-sm); }
.look-piece__title a { text-decoration: none; }
.look-piece__info { grid-column: 3; min-width: 0; }
.look-piece__wish { grid-column: 4; grid-row: 1; margin: -10px -10px 0 0; }
.look-piece__buy { grid-column: 3 / -1; display: grid; gap: var(--s3); justify-items: start; min-width: 0; }
.look-piece__hint { font-size: var(--fs-xs); color: var(--error); }
.look-piece__help { display: flex; flex-wrap: wrap; gap: 0 var(--s5); margin-top: calc(-1 * var(--s1)); }
.look-piece__help .product__size-help, .look-viewer__help .product__size-help { margin-top: 0; }
.look-piece__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); }
.look-piece__add { min-width: 128px; }
.look-piece__add .icon, .look-viewer__add .icon { width: 16px; height: 16px; }
.look-piece.is-missing .look-size:not(.is-sold) span { border-color: var(--error); }
/* phones: the sizes and buttons take the width under the photo too */
@media (max-width: 767px) { .look-piece { column-gap: var(--s3); } .look-piece__media { grid-row: 1; } .look-piece__buy { grid-column: 2 / -1; } }
.look-sizes { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.look-size { position: relative; }
.look-size input { position: absolute; opacity: 0; pointer-events: none; }
.look-size > span:not(.visually-hidden) { display: inline-grid; place-items: center; min-width: 44px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; background: var(--snow); }
.look-size input:checked + span { background: var(--ink); color: var(--stone); border-color: var(--ink); }
.look-size input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a sold-out size is a button with the bell (as on the product page): a tap opens the back-in-stock popup */
button.look-size { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.look-size.is-sold > span:not(.visually-hidden) { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-3); background: transparent; border-style: dashed; text-decoration: line-through; }
.look-size.is-sold > span > .icon { width: 12px; height: 12px; }
@media (hover: hover) and (pointer: fine) { button.look-size.is-sold:hover > span { border-color: var(--ink); color: var(--ink); } }
button.look-size:focus-visible { outline: none; }
button.look-size:focus-visible > span { outline: 2px solid var(--focus); outline-offset: 2px; }
.look-size.is-single > span:not(.visually-hidden) { border-style: dashed; }
.look-piece.is-added .look-piece__title::after { content: 'Nel carrello'; display: inline-block; margin-left: 8px; padding: 1px 6px; font-size: 11px; font-weight: 600; background: var(--green-100); color: var(--green-800); }
.look-piece.is-unavailable .look-piece__media img { opacity: 0.5; }
.look-form { display: grid; gap: var(--s4); }
.look-form__total { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.0625rem; }
.look-page__eyebrow, .lookbook__tagline { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.look-page__count { color: var(--ink-2); }
.look-page__lead { color: var(--ink-2); max-width: 62ch; }
.lookbook__tagline { margin-bottom: var(--s2); }
.rental-hero__eyebrow, .rental-quote__eyebrow, .rental-info__eyebrow { margin-bottom: var(--s2); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.rental-hero__eyebrow { color: color-mix(in srgb, var(--snow) 80%, transparent); }
.rental-hero__note { margin-top: var(--s2); font-size: var(--fs-sm); color: color-mix(in srgb, var(--snow) 86%, transparent); }
.rental-quote__list-title { margin-top: var(--s4); font-weight: 600; }
.rental-info__body, .rental-terms__body { max-width: 72ch; }
.rental-cats { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: var(--s4) 0; list-style: none; }
.rental-cats__item { padding: var(--s2) var(--s4); border: 1px solid var(--line-strong); border-radius: 999px; font-size: var(--fs-sm); }
.lab__eyebrow { margin-bottom: var(--s2); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.lab__machine .lab__eyebrow { color: color-mix(in srgb, var(--snow) 75%, transparent); }
.lab__text { max-width: 68ch; margin-block: var(--s7); }
.stringing__services { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--s4); margin: var(--s7) 0 var(--s4); padding: 0; list-style: none; }
.stringing__service { display: grid; gap: var(--s1); height: 100%; padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.stringing__service:hover { border-color: var(--ink); }
.brands-page__eyebrow { margin-bottom: var(--s2); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.look-page__more { margin-top: var(--section); }
.look-page__more-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
/* every looks slider (the home's Daily Inspiration, "Altri look"): polaroids, the owner's pick (02/10, proposal B).
   A white frame with the deeper bottom edge for the caption, a slight tilt that straightens under the pointer,
   a soft shadow (no border). Same markup and image crops as the plain cards. */
.looks-polaroid .looks-rail__track { gap: var(--s6); padding-block: var(--s4) var(--s8); align-items: start; }
.looks-polaroid .look-card { width: clamp(220px, 21vw, 288px); padding: 12px 12px 20px; background: var(--snow);
  box-shadow: 0 1px 2px rgb(19 25 20 / 0.08), 0 16px 32px -18px rgb(19 25 20 / 0.45); rotate: -1.6deg;
  transition: rotate calc(var(--d-320) * var(--m) + .01ms) var(--ease-out), translate calc(var(--d-320) * var(--m) + .01ms) var(--ease-out), box-shadow calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
.looks-polaroid .look-card:nth-child(3n + 2) { rotate: 1.1deg; translate: 0 10px; }
.looks-polaroid .look-card:nth-child(3n) { rotate: -0.6deg; translate: 0 3px; }
@media (hover: hover) and (pointer: fine) {
  .looks-polaroid .look-card:hover { rotate: 0deg; translate: 0 -4px; box-shadow: 0 1px 2px rgb(19 25 20 / 0.08), 0 22px 40px -18px rgb(19 25 20 / 0.5); }
}
.looks-polaroid .look-card:focus-within { rotate: 0deg; }
.looks-polaroid .look-card__link { gap: var(--s4); }
.looks-polaroid .look-card__media { background: var(--lichen); }
/* the caption and date in Caveat, the live polaroids' hand (owner, 02/10) */
.looks-polaroid .look-card__title { font-family: 'Caveat', 'Segoe Script', 'Comic Sans MS', cursive; font-size: clamp(1.45rem, 1.9vw, 1.75rem); font-weight: 600; line-height: 1.1; letter-spacing: 0; color: #333; text-align: center; text-wrap: balance; padding-inline: var(--s2); }
.looks-polaroid .look-card__meta { justify-content: center; text-align: center; margin-top: 2px; font-family: 'Caveat', 'Segoe Script', cursive; font-size: 1.15rem; color: #888; }
.looks-polaroid .look-card__count { display: none; }
/* the tape: a strip at the top, in the live six colours */
.looks-polaroid .look-card { position: relative; }
.looks-polaroid .look-card__tape { position: absolute; top: -12px; left: 50%; z-index: 2; width: 64px; height: 24px; translate: -50% 0; border-radius: 2px; opacity: .82; background: #b5c8e2; box-shadow: 0 1px 2px rgb(0 0 0 / .08); }
.looks-polaroid .look-card:nth-child(6n + 2) .look-card__tape { background: #c8ddb5; }
.looks-polaroid .look-card:nth-child(6n + 3) .look-card__tape { background: #e2c8b5; }
.looks-polaroid .look-card:nth-child(6n + 4) .look-card__tape { background: #d4b5e2; }
.looks-polaroid .look-card:nth-child(6n + 5) .look-card__tape { background: #e2e2b5; }
.looks-polaroid .look-card:nth-child(6n) .look-card__tape { background: #b5e2d4; }
/* "Scopri il Look · N" on the photo, as live */
.look-card__media { position: relative; }
.look-card__pill { display: none; }
.looks-polaroid .look-card__pill { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 16px); padding: 5px 10px; border-radius: 16px; background: rgb(0 0 0 / .62); color: #fff; font-size: 11px; font-weight: 600; line-height: 1; white-space: nowrap; }
.looks-polaroid .look-card__pill .icon { width: 12px; height: 12px; }
.look-card__tape { display: none; }
.looks-polaroid .look-card__tape { display: block; }
/* the home's rail: larger frames */
.looks-rail.looks-polaroid .look-card { width: clamp(240px, 23vw, 340px); }
@media (max-width: 1023px) { .looks-polaroid .look-card, .looks-rail.looks-polaroid .look-card { width: min(68vw, 300px); } }
.looks-rail__track--static { padding-inline: 0; }
@media (max-width: 1023px) { .look-page__grid { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "media" "info" "lead"; row-gap: clamp(var(--s6), 5vw, var(--s9)); } .look-page__info { position: static; } }

/* ================= STORIA ================= */
.storia-hero { position: relative; min-height: min(86svh, 820px); display: grid; overflow: hidden; color: var(--snow); }
.storia-hero__media, .storia-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.storia-hero__shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgb(11 23 14 / 0.45), rgb(11 23 14 / 0.25) 40%, rgb(11 23 14 / 0.7)); }
.storia-hero__content { position: relative; align-self: end; padding-block: calc(var(--header-h) + 64px) clamp(48px, 8vw, 112px); display: grid; gap: var(--s4); }
.storia-hero__kicker { font-size: var(--fs-sm); letter-spacing: 0.04em; color: var(--green-300); }
.storia { padding-block: var(--section); }
.storia__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(var(--s6), 6vw, var(--s10)); }
.storia__sticky { position: sticky; top: calc(var(--header-h) + 10vh); height: 70vh; display: grid; grid-template-columns: 1fr 60px; align-items: start; }
.storia__year { font-family: var(--font-display); font-size: clamp(4rem, 2rem + 6vw, 8.5rem); line-height: 0.9; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: lining-nums; }
.storia__track { width: 60px; height: 100%; fill: none; stroke: var(--green-500); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.storia__chapters { display: grid; gap: clamp(96px, 14vw, 200px); }
.chapter { display: grid; gap: var(--s4); max-width: 62ch; }
.chapter__year { font-size: var(--fs-sm); font-weight: 600; color: var(--green-700); letter-spacing: 0.04em; }
.chapter p:not(.chapter__year) { color: var(--ink-2); }
.chapter__media { margin-top: var(--s4); }
.chapter__media img { width: 100%; height: auto; }
.chapter__media figcaption { margin-top: var(--s2); }
.storia-visit__inner { display: grid; gap: var(--s4); justify-items: start; max-width: 64ch; }
.storia-visit__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
@media (max-width: 1023px) { .storia__grid { grid-template-columns: 1fr; } .storia__rail { display: none; } }

/* ================= SERVICES ================= */
.rental-hero { position: relative; overflow: hidden; padding-block: var(--s8) var(--s8); }
.rental-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.rental-hero__content { position: relative; display: grid; gap: var(--s4); max-width: 900px; margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); }
.rental-hero .breadcrumbs ol, .rental-hero .breadcrumbs a { color: var(--on-dark-2); }
.rental-hero__hours { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); color: var(--on-dark-2); }
.rental-quote__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; }
.rental-quote { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s6); padding: var(--s6); background: var(--snow); border: 1px solid var(--line); }
.rental-quote__fields { display: grid; gap: var(--s4); align-content: start; }
.segmented { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px; gap: 2px; }
.segmented button { min-height: 40px; padding: 0 var(--s4); border-radius: 2px; font-size: var(--fs-sm); }
.segmented button[aria-checked="true"] { background: var(--ink); color: var(--stone); }
.segmented button:disabled { opacity: 0.4; cursor: not-allowed; }
.qty--big button { width: 44px; height: 44px; }
.qty--big output { min-width: 40px; font-size: 1.0625rem; }
.rental-quote__result { display: grid; gap: var(--s4); align-content: start; padding-left: var(--s6); border-left: 1px solid var(--line); }
.rental-quote__line { font-weight: 500; }
.rental-quote__add { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.rq-lines { display: grid; gap: var(--s2); }
.rq-line { display: grid; grid-template-columns: 1fr auto auto; gap: var(--s3); align-items: center; padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.rental-quote__alt a { display: inline-flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.rental-quote__note { font-size: var(--fs-sm); color: var(--green-700); background: var(--green-100); padding: var(--s3); }
.rental-quote__total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--line); padding-top: var(--s4); }
.rental-quote__total strong { font-family: var(--font-display); font-size: var(--fs-d3); font-weight: 400; }
@media (max-width: 1023px) { .rental-quote__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s5); } .rental-quote { grid-template-columns: minmax(0, 1fr); } .rental-quote__result { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s5); } }
.price-tables { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); margin-top: var(--s6); }
.price-table { overflow-x: auto; }
.price-table h3 { margin-bottom: var(--s3); }
.price-table table { width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.price-table th, .price-table td { text-align: left; padding: var(--s2) var(--s2) var(--s2) 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.price-table thead th { font-weight: 500; color: var(--ink-3); }
.price-table tbody th { font-weight: 500; white-space: normal; }
@media (max-width: 1023px) { .price-tables { grid-template-columns: 1fr; } }
.lab .breadcrumbs { margin-bottom: var(--s5); }
.lab__intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); margin-bottom: var(--s8); }
.lab__intro > div { display: grid; gap: var(--s4); }
.lab__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.lab__lists { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s8); }
.service-rows { border-top: 1px solid var(--line); margin-top: var(--s4); }
.service-row { display: grid; grid-template-columns: 1fr auto; gap: var(--s4); padding: var(--s4) 0; border-bottom: 1px solid var(--line); }
.service-row__name { font-family: var(--font-text); font-size: 1rem; font-weight: 600; letter-spacing: 0; }
.service-row p.muted { font-size: var(--fs-sm); }
.service-row__price { font-weight: 500; }
.lab__other-title { margin-top: var(--s7); }
.lab__machine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); align-items: center; margin-top: var(--s8); padding: var(--s6); }
.lab__machine img { width: 100%; height: auto; }
@media (max-width: 1023px) { .lab__intro, .lab__lists, .lab__machine { grid-template-columns: 1fr; gap: var(--s5); } }
.stringing__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--s8); align-items: center; }
.stringing__grid > div { display: grid; gap: var(--s4); justify-items: start; }
.stringing__media img { width: 100%; height: auto; }
.hours--light { min-width: 280px; font-size: var(--fs-sm); color: var(--ink-2); }
.hours--light dt { color: var(--ink); }
@media (max-width: 1023px) { .stringing__grid { grid-template-columns: 1fr; } }

/* ================= BRANDS, CONTACT, PAGES ================= */
.brands-filter { min-width: min(320px, 100%); }
.letters { position: sticky; top: var(--header-h); z-index: 10; background: var(--stone); border-block: 1px solid var(--line); margin-bottom: var(--s6); }
.letters ul { display: flex; flex-wrap: wrap; gap: 2px; padding-block: var(--s2); }
.letters a { display: grid; place-items: center; min-width: 36px; min-height: 36px; text-decoration: none; font-family: var(--font-display); font-size: 1.125rem; }
.letters a:hover { background: var(--lichen); }
.brands-group { display: grid; grid-template-columns: 96px 1fr; gap: var(--s5); padding-block: var(--s5); border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 64px); }
.brands-group__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s2) var(--s5); }
.brand-link { display: flex; align-items: center; gap: var(--s3); min-height: 48px; text-decoration: none; }
.brand-link img { width: 40px; height: 40px; mix-blend-mode: multiply; filter: grayscale(1); }
.brands-group__mono { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lichen); font-family: var(--font-display); }
.brand-link .chip__count { margin-left: auto; font-size: var(--fs-sm); }
.brand-link:hover span[translate] { text-decoration: underline; }
.contact-hero { padding-block: var(--s8); }
.contact-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
.contact-hero__grid > div { display: grid; gap: var(--s5); }
.contact-hero .breadcrumbs ol, .contact-hero .breadcrumbs a { color: var(--on-dark-2); }
.contact-hero__address { font-style: normal; font-size: var(--fs-lead); }
.contact-hero__actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.contact-hero__media img { width: 100%; height: auto; }
.contact-body__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); }
.contact-ways { display: grid; gap: var(--s4); align-content: start; }
.contact-ways__list { display: grid; gap: var(--s5); margin-top: var(--s3); }
.contact-ways__list li { display: flex; gap: var(--s4); }
.contact-ways__list .icon { color: var(--green-700); }
.contact-form { display: grid; gap: var(--s4); padding: var(--s6); background: var(--snow); border: 1px solid var(--line); }
.contact-form .button { justify-self: start; }
@media (max-width: 1023px) { .contact-hero__grid, .contact-body__grid { grid-template-columns: 1fr; } }
.page-generic__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--s8); }
.page-generic__grid header { display: grid; gap: var(--s4); align-content: start; }
.page-generic__help { margin-top: var(--s7) !important; padding-top: var(--s5); border-top: 1px solid var(--line); color: var(--ink-2); }
@media (max-width: 1023px) { .page-generic__grid { grid-template-columns: 1fr; gap: var(--s5); } }
.sitemap-group { margin-top: var(--s7); }
.sitemap-list { columns: 3 240px; column-gap: var(--s6); margin-top: var(--s4); }
.sitemap-list li { break-inside: avoid; padding: 4px 0; font-size: var(--fs-sm); }

/* ================= JOURNAL ================= */
.blog-page__lead { margin-bottom: var(--s8); }
.blog-page__lead .article-card--lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s7); align-items: center; }
.blog-page__lead .article-card__media-link { grid-row: span 4; }
.blog-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s7) var(--s5); }
@media (max-width: 1023px) { .blog-page__grid { grid-template-columns: 1fr 1fr; } .blog-page__lead .article-card--lead { grid-template-columns: 1fr; } }
@media (max-width: 639px) { .blog-page__grid { grid-template-columns: 1fr; } }
/* the articles BlogSEO publishes into the blog: a quiet list under the agents' articles (owner, 02/10) */
.blog-page__others { margin-top: var(--section); padding-top: var(--s7); border-top: 1px solid var(--line); }
.blog-page__others h2 { margin-bottom: var(--s5); }
.blog-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); margin: 0; padding: 0; list-style: none; }
.blog-others__link { display: grid; gap: 2px; padding-block: var(--s3); border-bottom: 1px solid var(--line); text-decoration: none; }
.blog-others__title { text-wrap: pretty; }
@media (hover: hover) and (pointer: fine) { .blog-others__link:hover .blog-others__title { text-decoration: underline; text-underline-offset: 3px; } }
@media (max-width: 767px) { .blog-others { grid-template-columns: 1fr; } }
.article-page__head { display: grid; gap: var(--s4); max-width: 920px; }
.article-page__cover { margin-block: var(--s7); }
.article-page__cover img { width: 100%; height: auto; }
.article-page__body { margin-inline: auto; font-size: 1.0625rem; line-height: 1.65; }
.article-page__body > p:first-of-type::first-letter { float: left; font-family: var(--font-display); font-size: 4.2em; line-height: 0.82; padding: 0.06em 0.08em 0 0; color: var(--green-800); }
.article-merch { margin-block: var(--s6) var(--s7); padding-top: var(--s4); border-top: 1px solid var(--line); }
.article-merch__title { font-size: var(--fs-sm); color: var(--ink-3); margin-bottom: var(--s4); }
.article-merch__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s4); }
.article-merch__plain { display: grid; gap: var(--s2); align-content: start; font-size: var(--fs-sm); color: inherit; text-decoration: none; }
.article-merch__media { display: block; aspect-ratio: 4 / 5; background: var(--lichen); }
.rte .article-merch__media img { width: 100%; height: 100%; object-fit: contain; padding: 8%; mix-blend-mode: multiply; }
.article-merch__collection { display: flex; align-items: center; gap: var(--s4); margin-top: var(--s5); padding: var(--s3) var(--s4); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); text-decoration: none; transition: border-color var(--d-160) var(--ease-out), background-color var(--d-160) var(--ease-out); }
.article-merch__collection:hover { border-color: var(--green-800); background: var(--snow); }
.article-merch__collection .icon { flex: none; margin-left: auto; }
.article-merch__logo { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--snow); border-radius: var(--radius); overflow: hidden; }
.article-merch__logo img { width: 100%; height: 100%; object-fit: contain; }
.article-merch__copy { display: grid; gap: 2px; min-width: 0; }
.article-merch__copy strong { font-family: var(--font-display); font-size: var(--fs-d5); font-weight: 400; line-height: var(--lh-snug); }
.article-merch__copy > span { font-size: var(--fs-sm); color: var(--ink-3); }
/* the article's rich-text rules must not reach the cards */
.rte .article-merch img { margin: 0; width: 100%; }
.rte .article-merch ul { padding-left: 0; }
.rte .article-merch li + li { margin-top: 0; }
.rte .article-merch a { color: inherit; }
.rte .article-merch .product-card__title { margin-top: 0; font-size: 0.9375rem; font-weight: 400; line-height: 1.35; }
.rte .article-merch .product-card :is(p, ul) { margin-top: 0; }
@media (max-width: 699px) {
  .article-merch__grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .article-merch__grid > * { scroll-snap-align: start; }
}
/* Agent articles: the territory agent's versioned blocks, styled by their data attributes (no class, no
   per-article work). A new block version the theme does not know keeps the agent's own look until it is added. */
.article-page__wrap { container-type: inline-size; }
.rte > :is([data-seo-geo-territory-route-map="v1"], [data-seo-geo-territory-landscapes="v2"], [data-seo-geo-territory-outfits="v2"]) {
  --w: min(1080px, 100cqi); width: var(--w); max-width: none; margin-inline: calc((100% - var(--w)) / 2); margin-block: var(--s7);
}
.article-page__body figcaption, .article-page__cover figcaption { margin-top: var(--s2); font-size: var(--fs-xs); line-height: 1.45; color: var(--ink-3); }
.article-page__cover figcaption a, .article-page__body figcaption a { color: inherit; }
.rte small { font-size: var(--fs-sm); color: var(--ink-3); }
:is([data-seo-geo-territory-map], [data-seo-geo-territory-route-map], [data-seo-geo-territory-gear]) > * + * { margin-top: var(--s3); }
/* departure: the agent's 16:9 frame holds Google's map once asked for (luxe.js); without JavaScript the
   agent's own "Apri il pin su Google Maps" link is the way */
.rte > [data-seo-geo-territory-map="v1"] { margin-block: var(--s7) var(--s6); }
html.no-js [data-seo-geo-territory-map] div:has(> iframe[data-sks-map]) { display: none; }
[data-seo-geo-territory-map] div:has(> iframe) { border-radius: var(--radius) !important; }
.map-facade { display: grid; gap: var(--s3); padding: var(--s5); background: var(--lichen); border-radius: var(--radius); }
.map-facade p { margin: 0; }
.map-facade__place { display: flex; align-items: center; gap: var(--s2); font-family: var(--font-display); font-size: var(--fs-d5); line-height: var(--lh-snug); }
.map-facade__place .icon { flex: none; color: var(--green-700); }
.map-facade__note { font-size: var(--fs-sm); color: var(--ink-3); }
.map-facade .button { justify-self: start; }
/* route map: wide, the credit under it */
.rte [data-seo-geo-territory-route-map] figure { margin: var(--s4) 0 0; }
.rte [data-seo-geo-territory-route-map] img { margin: 0; border-radius: var(--radius); }
/* real photos: a row of three with author and licence */
[data-seo-geo-territory-landscapes="v2"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--s5) var(--s4); }
[data-seo-geo-territory-landscapes="v2"] > :not(figure) { grid-column: 1 / -1; }
.rte [data-seo-geo-territory-landscapes="v2"] > * { margin: 0; }
[data-seo-geo-territory-landscapes="v2"] figure { display: grid; align-content: start; }
.rte [data-seo-geo-territory-landscapes="v2"] img { aspect-ratio: 4 / 3; object-fit: cover; margin: 0; border-radius: var(--radius); }
/* gear: a panel with the agent's category links, then its cards */
[data-seo-geo-territory-gear="v1"] { padding: var(--s5); background: var(--snow); border: 1px solid var(--line); border-radius: var(--radius); }
.rte [data-seo-geo-territory-gear] h3 { margin-top: 0; }
[data-seo-geo-territory-gear] .article-merch:last-child { margin-bottom: 0; }
/* the two AI looks: each picture beside the cards of its products (the agent writes them as siblings) */
[data-seo-geo-territory-outfits="v2"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); align-items: start; }
[data-seo-geo-territory-outfits="v2"] > *, [data-seo-geo-territory-landscapes="v2"] > * { min-width: 0; }
.rte [data-seo-geo-territory-outfits="v2"] > * { margin: 0; }
.rte [data-seo-geo-territory-outfits="v2"] img { margin: 0; border-radius: var(--radius); }
@media (min-width: 900px) {
  [data-seo-geo-territory-outfits="v2"] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--s6); }
  [data-seo-geo-territory-outfits="v2"] > :not(figure, .article-merch) { grid-column: 1 / -1; }
  [data-seo-geo-territory-outfits="v2"] > figure { grid-column: 1; }
  [data-seo-geo-territory-outfits="v2"] > .article-merch { grid-column: 2; padding-top: 0; border-top: 0; }
  [data-seo-geo-territory-outfits="v2"] .article-merch__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* the AI disclosure under a cover generated from product photos */
.rte [data-seo-geo-ai-image-disclosure] { font-size: var(--fs-sm); color: var(--ink-3); }
.rte [data-seo-geo-territory-outfit] img { margin: 0; border-radius: var(--radius); }
/* the customer-reviews agent's quotes: a Judge.me excerpt, never a name */
.rte blockquote.customer-review { font-size: var(--fs-d5); line-height: 1.45; padding: var(--s1) 0 var(--s1) var(--s5); }
.customer-review > p::before { content: '“'; }
.customer-review > p::after { content: '”'; }
.customer-review cite { display: block; margin-top: var(--s2); font-family: var(--font-text); font-size: var(--fs-sm); font-style: normal; color: var(--ink-3); }
.preferred-source { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4) var(--s6); margin-top: var(--s5); padding: var(--s5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--snow); }
.preferred-source > div { flex: 1 1 32ch; }
.preferred-source__title { font-weight: 600; margin-bottom: var(--s1); }
.article-page__foot { max-width: 68ch; margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--line); }

/* ================= ACCOUNT, 404 ================= */
.account-page__inner { max-width: 440px; display: grid; gap: var(--s4); }
.account-form { display: grid; gap: var(--s4); margin-top: var(--s3); }
.account-page__links { display: grid; gap: var(--s2); font-size: var(--fs-sm); }
.not-found__inner { display: grid; justify-items: center; text-align: center; gap: var(--s4); padding-block: var(--s5); }
.not-found__track { width: min(600px, 90vw); height: auto; fill: none; stroke: var(--green-500); stroke-width: 2; stroke-linecap: round; }
.not-found__track path { stroke-dasharray: 1; stroke-dashoffset: 0; }
html:not(.reduce-motion) .not-found__track path { animation: draw 2.4s var(--ease-mask) both; }
html:not(.reduce-motion) .not-found__track path + path { animation-delay: 160ms; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* ---------- size guide (the size service's brand table) and the size advisor ---------- */
.size-modal { width: min(94%, 560px); }
.size-modal .modal__inner { gap: var(--s4); max-height: min(88dvh, 820px); overflow-y: auto; }
.size-modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-top: calc(-1 * var(--s2)); }
.size-modal__head h2 { margin-top: 6px; }
.size-modal__product { margin-top: 2px; font-size: var(--fs-sm); color: var(--ink-3); }
.size-modal__table { border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; overscroll-behavior-x: contain; }
#size-guide { width: min(94%, 800px); } /* the brand tables run to 8 columns, as the live dialog (800px) */
/* a brand table keeps its columns readable: as wide as its content (at least the dialog), the box scrolls sideways
   with the size column held in place, as the live .sc-table-wrap does without the held column */
.size-modal__table table { table-layout: auto; width: max-content; min-width: 100%; }
.size-modal__table th, .size-modal__table td { white-space: nowrap; overflow-wrap: normal; }
.size-modal__table tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--snow); box-shadow: inset -1px 0 0 var(--line); }
.size-modal__table table:not(:has(thead)) tr:first-child > * { background: var(--lichen); font-weight: 600; font-size: var(--fs-xs); }
.size-modal__table p { margin: var(--s2) 12px; font-size: var(--fs-xs); color: var(--ink-2); }
.size-modal__table table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.size-modal__table th, .size-modal__table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); }
@media (max-width: 480px) { .size-modal__table table { font-size: var(--fs-xs); } .size-modal__table th, .size-modal__table td { padding: 8px 6px; } }
.size-modal__table thead th, .size-modal__table thead tr > :first-child { background: var(--lichen); font-weight: 600; font-size: var(--fs-xs); }
.size-modal__table tbody tr:last-child > * { border-bottom: 0; }
.size-modal__how summary { cursor: pointer; font-weight: 500; min-height: 40px; display: flex; align-items: center; }
.size-modal__how ul { padding-left: 1.2em; display: grid; gap: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.sz-progress { display: flex; gap: 6px; }
.sz-progress span { flex: 1; height: 3px; border-radius: 2px; background: var(--line); }
.sz-progress span.is-active { background: var(--green-700); }
.sz-step { display: grid; gap: var(--s4); }
.sz-step[hidden] { display: none; }
.sz-field { display: grid; gap: var(--s2); border: 0; padding: 0; margin: 0; min-width: 0; }
.sz-label { font-size: var(--fs-sm); font-weight: 600; }
.sz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sz-chip { min-width: 52px; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--snow); font-variant-numeric: tabular-nums; }
.sz-chip[aria-pressed="true"] { background: var(--ink); color: var(--stone); border-color: var(--ink); }
.sz-chips--cards .sz-chip { flex: 1; display: grid; gap: 2px; padding: var(--s3); text-align: center; }
.sz-chips--cards .sz-chip span { font-size: var(--fs-xs); opacity: .75; }
.sz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.sz-input { display: flex; align-items: center; gap: var(--s2); }
.sz-input .field__input { flex: 1; min-width: 0; }
.sz-input span { color: var(--ink-3); font-size: var(--fs-sm); }
.sz-result { display: grid; gap: var(--s3); text-align: center; padding: var(--s3) 0; }
.sz-result[hidden] { display: none; }
.sz-result__label { font-size: var(--fs-sm); color: var(--ink-2); }
.sz-result__size { font-family: var(--font-display); font-size: clamp(3rem, 2.4rem + 3vw, 4.5rem); line-height: 1; }
.sz-result__conf { font-size: var(--fs-sm); color: var(--green-700); }
.sz-result__warn { font-size: var(--fs-sm); color: var(--brick); }
.sz-disclaimer, .sz-help { font-size: var(--fs-xs); }
.sz-disclaimer .link-small, .sz-help a { font-size: inherit; min-height: 0; }
.sz-how { display: grid; gap: var(--s2); padding: var(--s3); background: var(--lichen); border-radius: var(--radius); }
.sz-how[hidden] { display: none; }

/* ---------- hand-drawn reassurance row (home under the hero; pre-footer elsewhere) ---------- */
.promises { background: var(--lichen); border-block: 1px solid var(--line); padding-block: clamp(var(--s7), 5vw, var(--s9)); }
.promises__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(var(--s5), 3vw, var(--s8)); }
.promises__icon { width: 48px; height: 48px; object-fit: contain; mix-blend-mode: multiply; margin-bottom: var(--s5); }
.promises__title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0.01em; margin-bottom: var(--s2); }
.promises__text { font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.5; }
.promises__text a { white-space: nowrap; }
@media (max-width: 899px) { .promises__list { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) {
  /* phones: one row that scrolls, like the live slider */
  .promises__list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: var(--s5); }
  .promises__list::-webkit-scrollbar { display: none; }
  .promises__item { flex: 0 0 72%; scroll-snap-align: start; }
}

/* ---------- pre-footer: reviews carousel, store rating, AI summary ---------- */
.prefooter-reviews { background: var(--stone); }
.prefooter-reviews__head { display: grid; justify-items: center; text-align: center; gap: var(--s3); margin-bottom: var(--s7); }
.prefooter-reviews__score { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.rail--reviews .rail__track { grid-auto-columns: minmax(260px, 30%); }
@media (max-width: 767px) { .rail--reviews .rail__track { grid-auto-columns: 82%; } }
.review-card figure { height: 100%; display: grid; align-content: start; gap: var(--s3); padding: var(--s5); background: var(--snow); border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); }
.review-card__quote { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.3; }
.prefooter-reviews__summary { max-width: 72ch; margin: var(--s7) auto 0; padding: var(--s6); text-align: center; background: var(--snow); border: 1px solid var(--line); border-radius: calc(var(--radius) * 2); }
.prefooter-reviews__summary blockquote { color: var(--ink-2); line-height: 1.6; }
.prefooter-reviews__summary figcaption { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s4); text-transform: uppercase; letter-spacing: var(--track-caps); font-size: 10px; }
.prefooter-reviews__summary figcaption .icon { width: 12px; height: 12px; fill: var(--green-500); stroke: none; }
.promises--prefooter { border-bottom: 0; }

/* ---------- "Scelti per te" in the cart: mini cards, sizes on demand ---------- */
.cart-suggest__why { margin: calc(-1 * var(--s2)) 0 var(--s3); }
.mini-card { grid-template-columns: 64px 1fr auto; row-gap: var(--s2); }
.mini-card__sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.mini-card__sizes[hidden] { display: none; }
.mini-card__sizes .size-chip { min-width: 44px; min-height: 40px; }
.cart-totals__delivery dd { font-weight: 500; }

/* ---------- home: the drawn shop front in "Chi siamo" keeps its own colours ---------- */
.manifesto__media--drawn img { filter: none; mix-blend-mode: multiply; max-width: 520px; }

.review-card figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--line-strong); }
.review-card figcaption a:hover { text-decoration-color: currentColor; }

/* ---------- product reviews (Judge.me block of the product page) ---------- */
.rating-stars { position: relative; display: inline-flex; vertical-align: -3px; color: var(--ink); }
.rating-stars .icon { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.rating-stars__base, .rating-stars__fill { display: inline-flex; gap: 1px; }
.rating-stars__base { color: color-mix(in srgb, var(--ink) 18%, transparent); }
.rating-stars__fill { position: absolute; inset: 0 auto 0 0; width: var(--fill); overflow: hidden; }
.rating-stars--lg .icon { width: 20px; height: 20px; }
.product-reviews__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s8); align-items: start; border-top: 1px solid var(--line); padding-top: var(--s7); }
.product-reviews__summary { display: grid; gap: var(--s3); justify-items: start; }
.product-reviews__score { display: flex; align-items: center; gap: var(--s3); margin-top: var(--s2); }
.product-reviews__value { font-family: var(--font-display); font-size: var(--fs-d2); line-height: 1; }
.product-reviews__empty { color: var(--ink-2); }
.product-reviews__how { max-width: 34ch; }
.rating-bars { display: grid; gap: 4px; width: min(100%, 280px); font-size: var(--fs-xs); color: var(--ink-2); margin-bottom: var(--s2); }
.rating-bars li { display: grid; grid-template-columns: 1ch 12px 1fr 2ch; align-items: center; gap: 6px; }
.rating-bars .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }
.rating-bars__track { height: 6px; background: var(--lichen); border-radius: 3px; overflow: hidden; }
.rating-bars__track span { display: block; height: 100%; background: var(--ink); }
.rating-bars__n { text-align: right; font-variant-numeric: tabular-nums; }
.review { display: grid; gap: var(--s2); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.review-list > .review:first-child { padding-top: 0; }
.review__head { display: flex; align-items: center; gap: var(--s3); }
.review__body { max-width: 68ch; }
.review__body--empty { color: var(--ink-3); }
.review__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.review__meta a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.review__meta a:hover { color: var(--ink); }
.product-reviews__others { margin-top: var(--s7); padding: var(--s5); background: var(--lichen); display: grid; gap: var(--s2); }
.product-reviews__others:first-child { margin-top: 0; }
.product-reviews__others-title { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.2; }
.review-list--compact .review { padding: var(--s4) 0; border-color: color-mix(in srgb, var(--ink) 10%, transparent); }
.review-list--compact .review:last-child { border-bottom: 0; padding-bottom: 0; }
.review-form__stars { border: 0; padding: 0; margin: var(--s4) 0; display: flex; flex-wrap: wrap; gap: var(--s2); }
.review-form__stars legend { margin-bottom: var(--s2); }
.review-form__stars label { position: relative; display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--s3); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: var(--fs-sm); cursor: pointer; }
.review-form__stars input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.review-form__stars label:has(input:checked) { border-color: var(--ink); font-weight: 600; }
.review-form__stars label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.review-modal textarea { width: 100%; margin: var(--s2) 0 var(--s4); }
@media (max-width: 1023px) { .product-reviews__grid { grid-template-columns: 1fr; gap: var(--s6); } }
/* while the bar's sizes are open, the floating buttons step aside instead of covering the first sizes */
body:has([data-sticky-sheet]:not([hidden])) :is(.preview-chip, .wa-btn, .nl-pop, .comment-fab) { opacity: 0; visibility: hidden; pointer-events: none; }

/* the live gender pills (custom.genere quick filters): male sign on blue, female sign on pink, as the theme */
ul.audience-pills { display: flex; flex-wrap: wrap; gap: var(--s2); padding-bottom: var(--s4); margin-bottom: var(--s4); border-bottom: 1px solid var(--line); }
.audience-pill { --pill: #e6f1ff; --pill-ink: #1d4f91; display: inline-flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s4) 0 6px; border-radius: 999px; border: 1.5px solid transparent; background: var(--pill); color: var(--ink); font-size: var(--fs-sm); font-weight: 600; transition: border-color var(--d-160) var(--ease-out), box-shadow var(--d-160) var(--ease-out); }
.audience-pill--f { --pill: #fde7ef; --pill-ink: #9b2d55; }
.audience-pill__icon { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: rgb(255 255 255 / .7); color: var(--pill-ink); }
.audience-pill__icon .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.audience-pill .chip__count { font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.audience-pill:hover { border-color: color-mix(in srgb, var(--pill-ink) 45%, transparent); }
.audience-pill[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 6px 16px -8px rgb(18 24 19 / .35); }
.audience-pill:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- FAQ (app block, FAQ page, articles) ---------- */
.faq-block__eyebrow { margin-bottom: var(--s2); font-size: var(--fs-sm); color: var(--ink-3); }
.faq-block__group { margin: var(--s7) 0 var(--s3); font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.faq-more { margin-top: var(--s3); }
.faq-links { display: flex; flex-wrap: wrap; gap: var(--s2); }
.faq-links .chip { text-decoration: none; }
.accordion__body table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.accordion__body th, .accordion__body td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.accordion__body th { font-weight: 600; color: var(--ink); }
.accordion__body ol, .accordion__body ul { padding-left: 1.2em; }
.accordion__body li + li { margin-top: 4px; }
.accordion__body a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }
.faq-page__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
.faq-page__head { display: grid; gap: var(--s4); }
.faq-page__summary { padding: var(--s4) var(--s5); background: var(--lichen); font-size: var(--fs-sm); color: var(--ink-2); max-width: 52ch; }
.faq-page__summary strong { color: var(--ink); }
.faq-page__search { display: flex; align-items: center; gap: var(--s2); max-width: 420px; min-height: 48px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: 999px; background: var(--snow); }
.faq-page__search:focus-within { border-color: var(--ink); outline: 2px solid var(--focus); outline-offset: 2px; }
.faq-page__search input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; outline: none; }
.faq-page__search .icon { width: 20px; height: 20px; color: var(--ink-3); }
.faq-page__topics .chips { flex-wrap: wrap; }
.faq-page__group + .faq-page__group { margin-top: var(--s8); }
.faq-page__group h2 { margin-bottom: var(--s3); scroll-margin-top: calc(var(--header-h) + var(--s5)); }
.faq-page__none { padding: var(--s5); background: var(--lichen); }
@media (max-width: 1023px) { .faq-page__grid { grid-template-columns: 1fr; } }
.article-faq { margin-top: var(--s8); padding-top: var(--s6); border-top: 1px solid var(--line); }
.rte .article-faq h2 { margin-top: 0; }
.rte .article-faq h3 { margin-top: var(--s5); padding-top: var(--s5); border-top: 1px solid var(--line); font-family: var(--font-display); font-size: var(--fs-d5); font-weight: 400; line-height: 1.25; }
.rte .article-faq h2 + h3 { border-top: 0; padding-top: 0; }
.rte .article-faq h3 ~ p { margin-top: var(--s2); color: var(--ink-2); }

/* the theme's infinite scroll: a 1px sentinel under the grid; cards after the first page skip rendering until
   they come near the viewport (the size they had is remembered) */
.load-more [hidden] { display: none !important; }
.load-more__sentinel { height: 1px; }
.product-grid > product-card:nth-child(n+9) { content-visibility: auto; contain-intrinsic-size: auto 420px; }
@media (max-width: 767px) { .product-grid > product-card:nth-child(n+9) { contain-intrinsic-size: auto 330px; } }

/* collection description as published: lead in view, the rest (merchant text and the agents' blocks) behind
   "Leggi di più", in the HTML */
.collection-desc { max-width: 72ch; }
.collection-desc .lead p { margin: 0; }
.collection-desc__more { margin-top: var(--s3); }
.collection-desc__more summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: 500; text-decoration: underline; text-underline-offset: 0.2em; min-height: 32px; }
.collection-desc__more summary::-webkit-details-marker { display: none; }
.collection-desc__more summary .icon { width: 16px; height: 16px; transition: transform calc(var(--d-160) * var(--m) + .01ms) var(--ease-out); }
.collection-desc__more[open] summary .icon { transform: rotate(180deg); }
.collection-desc__close, .collection-desc__more[open] .collection-desc__open { display: none; }
.collection-desc__more[open] .collection-desc__close { display: inline; }
.collection-desc__body { margin-top: var(--s4); color: var(--ink-2); }
.collection-desc__body h2, .collection-desc__body h3 { font-family: var(--font-display); font-size: var(--fs-d5); line-height: 1.2; color: var(--ink); margin: var(--s5) 0 var(--s2); }
.collection-desc__body ul { display: flex; flex-wrap: wrap; gap: var(--s2); padding: 0; margin: var(--s3) 0 0; list-style: none; }
.collection-desc__body li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s4); border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-size: var(--fs-sm); color: var(--ink); background: var(--snow); }
.collection-desc__body li a:hover { border-color: var(--ink); }
.collection-desc__body a[target="_blank"]::after { content: " ↗"; font-size: 0.85em; color: var(--ink-3); }

/* strategic internal links: "Marchi più cercati" under the home logos, the brand guide on six brand pages */
.logos__searched { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s5); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); }
.logos__searched-title { font-family: var(--font-text); font-size: var(--fs-sm); font-weight: 600; letter-spacing: 0; }
.brand-guide__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); padding-block: var(--s5); border-top: 1px solid var(--line); }
.brand-guide__link { display: inline-flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s5); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); text-decoration: none; transition: background-color var(--d-160) var(--ease-out), color var(--d-160) var(--ease-out); }
.brand-guide__link:hover, .brand-guide__link:focus-visible { background: var(--green-800); border-color: var(--green-800); color: var(--snow); }

/* size-help nudge: inline under the sizes after three different picks */
.size-nudge { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s2) var(--s3); margin-top: var(--s3); padding: var(--s3) var(--s3) var(--s3) var(--s4); background: var(--green-100); border-radius: var(--radius); font-size: var(--fs-sm); }
.size-nudge[hidden] { display: none; }
.size-nudge > .icon { color: var(--green-800); }
.size-nudge p { margin: 0; }
.size-nudge__cta { grid-column: 2; justify-self: start; min-height: 40px; }
.size-nudge__close { grid-column: 3; grid-row: 1; align-self: start; }
html:not(.reduce-motion) .size-nudge:not([hidden]) { animation: nudge-in var(--d-320) var(--ease-out); }
@keyframes nudge-in { from { opacity: 0; transform: translateY(8px); } }

/* Ski Sises Club: what the product or the order earns (the live widget shows only the balance) */
.club-card { display: grid; gap: var(--s1); margin-top: var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--radius); font-size: var(--fs-sm); }
.club-card__title { display: flex; align-items: center; gap: var(--s2); font-weight: 600; }
.club-card__title .icon, .club-line > .icon { width: 16px; height: 16px; color: var(--green-700); flex: none; }
.club-card p { margin: 0; }
.club-card .link-small { justify-self: start; }
.club-line { display: flex; gap: var(--s2); align-items: baseline; margin: var(--s3) 0; font-size: var(--fs-xs); color: var(--ink-2); }
.club-line .icon { width: 14px; height: 14px; flex: none; }
.club-line[hidden] { display: none; }
.club-line a { color: var(--green-700); }

/* withdrawal form (page recesso) */
.withdrawal__inner { max-width: 760px; }
.withdrawal__lead { margin-top: var(--s3); color: var(--ink-2); max-width: 65ch; }
.withdrawal__steps { display: flex; gap: var(--s5); margin: var(--s5) 0 var(--s4); padding: 0; list-style: none; font-size: var(--fs-sm); color: var(--ink-3); }
.withdrawal__steps li { padding-bottom: var(--s2); border-bottom: 2px solid transparent; }
.withdrawal__steps li[aria-current] { color: var(--ink); border-bottom-color: var(--green-700); font-weight: 600; }
.withdrawal__step { display: grid; gap: var(--s4); }
.withdrawal__step[hidden] { display: none; }
.withdrawal__step > .button { justify-self: start; }
.withdrawal__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); }
@media (max-width: 639px) { .withdrawal__grid { grid-template-columns: 1fr; } }
.withdrawal__declaration { padding: var(--s5); background: var(--snow); border-left: 2px solid var(--green-700); border-radius: 0 var(--radius) var(--radius) 0; display: grid; gap: var(--s3); }
.withdrawal__declaration p { margin: 0; }
.withdrawal__goods { font-weight: 600; }
.withdrawal__declaration dl { display: grid; gap: var(--s2); margin: 0; font-size: var(--fs-sm); }
.withdrawal__declaration dl div { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: var(--s3); }
.withdrawal__declaration dt { color: var(--ink-3); }
.withdrawal__declaration dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 639px) { .withdrawal__declaration dl div { grid-template-columns: 1fr; gap: 0; } }
.withdrawal__actions { display: flex; flex-wrap: wrap; gap: var(--s3); }
.withdrawal__done h3 { display: flex; align-items: center; gap: var(--s2); }
.withdrawal__done h3 .icon { color: var(--green-700); }
.withdrawal h3:focus { outline: none; }

/* search: query suggestions, result tabs, the pages list */
.search-suggest { margin-bottom: var(--s5); }
.search-tabs { display: flex; gap: var(--s5); margin: var(--s4) 0 var(--s5); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.search-tabs[hidden] { display: none; }
.search-tabs [role="tab"] { flex: none; padding: var(--s3) 0; border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; color: var(--ink-3); }
.search-tabs [role="tab"][aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green-700); }
.search-tabs [role="tab"]:focus-visible { outline-offset: 2px; }
.search-page__count { margin-top: var(--s3); }
.search-page__filters { margin-bottom: var(--s4); }
.search-page__types { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.search-page__more { text-align: center; margin-top: var(--s6); }
.search-page__sentinel { height: 1px; }
.search-pages { display: grid; gap: var(--s3); max-width: 60ch; }
.search-pages a { font-family: var(--font-display); font-size: var(--fs-d5); color: var(--ink); }
.chip--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line-strong); }

/* "Non sei sicuro della tua taglia?" with the live recommender's hanger (snippets/size-suggestions.liquid) */
.product__size-help { display: inline-flex; align-items: center; gap: var(--s2); }
.product__size-help .icon { width: 18px; height: 18px; }

/* "Scopri di più su di noi": the live product page's last section, the shop front drawing and its text */
.about-us { background: var(--lichen); }
.about-us__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s8); align-items: center; }
.about-us__media { margin: 0; }
.about-us__media img { width: 100%; max-width: 470px; height: auto; mix-blend-mode: multiply; }
.about-us__text { display: grid; gap: var(--s4); max-width: 56ch; }
.about-us__text p { color: var(--ink-2); line-height: 1.6; }
@media (max-width: 767px) { .about-us__grid { grid-template-columns: 1fr; gap: var(--s6); } .about-us__media img { max-width: 320px; } }

/* a portrait cover (no 2:1 crop): the picture at its own shape, centred */
.article-page__cover--portrait { display: grid; justify-items: center; }
.article-page__cover--portrait img { width: min(560px, 100%); height: auto; }

/* ---------- the Gift Card (02/10): its page, the recipient's page, the home band, the grid tile ---------- */
.gift-card-page .breadcrumbs { margin-bottom: var(--s5); }
.gift-card-page__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(var(--s6), 5vw, var(--s9)); align-items: start; }
/* the card's picture is a mock-up on white: shown on the paper-white ground, blended (multiply), never tilted */
.gift-card-page__media { position: relative; margin: 0; display: grid; place-items: center; padding: clamp(var(--s5), 4vw, var(--s8)); background: var(--snow); }
.gift-card-page__media img { width: 100%; max-width: 640px; height: auto; mix-blend-mode: multiply; }
.gift-card-page__media .badge { position: absolute; top: var(--s4); left: var(--s4); }
.gift-card-page__info { position: sticky; top: calc(var(--header-h) + var(--s5)); display: grid; gap: var(--s4); }
.gift-card-page__price { font-size: 1.375rem; font-variant-numeric: tabular-nums; }
.gift-card-form { display: grid; gap: var(--s4); }
.gift-card-form__amounts { margin: 0; padding: 0; border: 0; display: grid; gap: var(--s2); }
.gift-card-form__amounts legend { padding: 0; margin-bottom: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.gift-card-form__chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.gc-amount { position: relative; }
.gc-amount input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.gc-amount span { display: grid; place-items: center; min-height: 52px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--snow); font-variant-numeric: tabular-nums; font-weight: 500; }
.gc-amount input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.gc-amount input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .gc-amount:hover span { border-color: var(--ink); } }
.gift-card-form__recipient { display: grid; gap: var(--s3); padding: var(--s4); background: var(--snow); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line); }
.gift-card-form__recipient[hidden] { display: none; }
.gift-card-form__recipient .field { display: grid; gap: var(--s1); margin: 0; }
.gift-card-form .button--block { min-height: 56px; font-size: 1rem; }
.gift-card-page__how { display: flex; gap: var(--s3); align-items: flex-start; font-size: var(--fs-sm); color: var(--ink-2); }
.gift-card-page__how .icon { flex: none; color: var(--green-700); }
.gift-card-page__desc { color: var(--ink-2); }
@media (max-width: 1023px) { .gift-card-page__grid { grid-template-columns: 1fr; } .gift-card-page__info { position: static; } }

.gift-issued__inner { display: grid; justify-items: center; gap: var(--s4); max-width: 640px; text-align: center; }
.gift-issued__logo { width: 156px; height: auto; margin-bottom: var(--s3); }
.gift-issued__card { position: relative; margin: var(--s3) 0; width: min(420px, 100%); }
.gift-issued__card { background: var(--snow); }
.gift-issued__card img { width: 100%; height: auto; mix-blend-mode: multiply; }
.gift-issued__amount { position: absolute; right: 8%; bottom: 14%; padding: 4px 10px; border-radius: var(--radius); background: var(--ink); color: var(--stone); font-weight: 600; font-variant-numeric: tabular-nums; }
.gift-issued__meta { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gift-issued__code { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.gift-issued__code-label { width: 100%; font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.gift-issued__code-value { font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.gift-issued__qr { width: 160px; height: 160px; color: var(--ink); }
.gift-issued__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
@media print { .header, .footer, .announcement-bar, .prefooter, .wa-btn, .nl-pop, .preview-chip, .gift-issued__actions, .cookie-banner { display: none !important; } }

.gift-band { background: var(--lichen); }
.gift-band__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(var(--s6), 6vw, var(--s10, 96px)); align-items: center; }
.gift-band__media { margin: 0; padding: clamp(var(--s4), 3vw, var(--s7)); background: var(--snow); box-shadow: 0 1px 2px rgb(19 25 20 / 0.08), 0 22px 44px -26px rgb(19 25 20 / 0.45); }
.gift-band__media img { width: 100%; height: auto; mix-blend-mode: multiply; transition: scale calc(var(--d-480) * var(--m) + .01ms) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gift-band__media a:hover img { scale: 1.02; } }
.gift-band__body { display: grid; gap: var(--s4); justify-items: start; max-width: 56ch; }
.gift-band__title-link { text-decoration: none; }
.gift-band__label { margin-top: var(--s2); font-size: var(--fs-sm); color: var(--ink-2); }
.gift-band__amounts { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.gift-band__amounts .chip { font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .gift-band__grid { grid-template-columns: 1fr; } .gift-band__media { max-width: 420px; } }

.grid-gift { display: grid; }
.gift-tile { display: grid; grid-template-rows: auto 1fr; gap: var(--s3); text-decoration: none; height: 100%; }
.gift-tile__media { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 6%; background: var(--snow); box-shadow: inset 0 0 0 1px var(--green-100); }
.gift-tile__media img { width: 100%; height: auto; mix-blend-mode: multiply; transition: scale calc(var(--d-320) * var(--m) + .01ms) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .gift-tile:hover .gift-tile__media img { scale: 1.03; } }
.gift-tile__body { display: grid; gap: 2px; align-content: start; }
.gift-tile__title { font-size: var(--fs-sm); }
.gift-tile__price { font-variant-numeric: tabular-nums; }
.gift-tile__amounts { font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ---------- the live home's newsletter band and the Trustpilot TrustBox under it (02/10) ---------- */
.newsletter-home__inner { display: grid; justify-items: center; gap: var(--s3); max-width: 720px; text-align: center; }
.newsletter-home__eyebrow { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--green-300); }
.newsletter-home__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s2); width: min(520px, 100%); margin-top: var(--s3); }
.newsletter-home__form .field__input { min-height: 52px; background: var(--snow); border-color: transparent; color: var(--ink); }
.newsletter-home__form .button { min-height: 52px; }
.newsletter-home__consent { max-width: 56ch; font-size: var(--fs-xs); color: var(--on-dark-2); }
.newsletter-home__consent a { color: inherit; }
@media (max-width: 479px) { .newsletter-home__form { grid-template-columns: 1fr; } }
.trustbox { display: flex; justify-content: center; padding: var(--s5) var(--gutter); border-bottom: 1px solid var(--line); }
.trustbox__button { display: inline-flex; align-items: center; gap: var(--s3); min-height: 48px; padding: 0 var(--s5); border-radius: var(--radius); background: var(--snow); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
.trustbox__brand { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.trustbox__brand .icon { width: 16px; height: 16px; color: #00b67a; fill: currentColor; }
@media (hover: hover) and (pointer: fine) { .trustbox__button:hover { box-shadow: 0 0 0 1px var(--ink); } }

/* the product page's "Condividi" (live share block) */
.share { margin-top: var(--s4); }
.share__toggle { display: inline-flex; align-items: center; gap: var(--s2); min-height: 40px; font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-2); }
.share__toggle .icon { width: 16px; height: 16px; }
.share__list { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s2) 0 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.share__list[hidden] { display: none; }

/* the stand-in of Shopify's sign-in page (customer accounts) */
.account-page--hosted .account-page__inner { max-width: 420px; text-align: left; }
.account-page__logo { width: 156px; height: auto; margin: 0 auto var(--s6); display: block; }
.account-page--hosted .account-form { display: grid; gap: var(--s4); margin-top: var(--s4); }
.account-page__alt { margin-top: var(--s4); text-align: center; }
.account-page__legal { margin-top: var(--s6); text-align: center; font-size: var(--fs-sm); }

/* Shopify's express button (Shop Pay) and "Altre opzioni di pagamento", under "Aggiungi al carrello" as live */
.product__express { display: grid; gap: var(--s1); margin-top: var(--s2); }
.shop-pay { --bg: #5a31f4; --fg: #fff; --bd: #5a31f4; min-height: 48px; font-weight: 500; }
.shop-pay:hover { --bg: #4a22e0; --bd: #4a22e0; }
.shop-pay__mark { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; font-style: italic; }
.product__express-more { justify-self: start; font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 3px; color: var(--ink-2); min-height: 32px; }

/* CRM proposals (02/10): WhatsApp in the product page's back-in-stock popup, the separate marketing boxes */
.bis-modal__phone { display: grid; gap: var(--s1); }
.bis-modal__phone-row { display: grid; grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr); gap: var(--s2); }
.bis-modal__marketing, .wish-modal__marketing { font-size: var(--fs-sm); }
.newsletter-home__form { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; }
.newsletter-home__interests { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); margin: var(--s2) 0 0; padding: 0; border: 0; }
.newsletter-home__interests legend { width: 100%; margin-bottom: var(--s2); font-size: var(--fs-xs); color: var(--on-dark-2); text-align: center; }
.chip-check { position: relative; }
.chip-check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip-check span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s4); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-on-dark); font-size: var(--fs-sm); color: var(--on-dark); }
.chip-check input:checked + span { background: var(--on-dark); color: var(--forest-950); }
.chip-check input:focus-visible + span { outline: 2px solid var(--green-300); outline-offset: 2px; }
@media (max-width: 639px) { .newsletter-home__form { grid-template-columns: 1fr; } }
.look-page__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3); }
.look-page__save[aria-pressed="true"] .icon { fill: currentColor; }
/* the notizie blog's category (snippets/blog-category*.liquid): on the cards and above the article title */
.article-card__cat { color: var(--green-700); font-weight: 500; }
.article-page__cat { margin-bottom: var(--s2); font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--green-700); }
/* the size advisor's alternatives in the advised size (the size service's two groups) */
.sz-alts { display: grid; gap: var(--s3); margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); }
.sz-alts__title { font-weight: 600; font-size: var(--fs-sm); }
.sz-alts__list { display: grid; gap: var(--s2); margin: 0; padding: 0; list-style: none; }
.sz-alt { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--s3); align-items: center; text-decoration: none; }
.sz-alt img { width: 64px; height: 80px; object-fit: contain; background: var(--lichen); mix-blend-mode: multiply; }
.sz-alt > span { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-sm); }
.sz-alt__brand { font-size: var(--fs-xs); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); }
.sz-alt__price { font-variant-numeric: tabular-nums; }
.sz-alts { text-align: left; }

/* "Servizi in negozio" on phones: columns that scroll sideways, as the live home (owner, 02/10), each card the
   same size, the next one showing at the edge */
@media (max-width: 767px) {
  .services__grid { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .services__grid::-webkit-scrollbar { display: none; }
  .services__grid > .service { flex: 0 0 82%; scroll-snap-align: start; }
  .service--large .service__media, .service:not(.service--large) .service__media { aspect-ratio: 4 / 3; }
  .service--large h3 { font-size: var(--fs-d4); }
}

/* the product page's pictures on white (owner, 02/10) */
.product__media { background: #fff; }

/* ================= MOTION (CSS first) =================
   Tokens in tokens.css. --m is 0 under reduced motion: movement collapses, fades stay.
   Hidden starting states exist only under html.motion-ready (set by luxe.js once it runs), so a page
   whose script fails never hides content. */

/* 1. hero entrance, pure CSS: the image is painted at full opacity on the first frame and settles;
      the authored headline lines rise from their masks; the links are ready by ~1.2s */
@keyframes hero-settle { from { transform: scale(1.04); } to { transform: none; } }
@keyframes line-rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(calc(12px * var(--m))); } to { opacity: 1; transform: none; } }
html:not(.reduce-motion) .hero__media img { animation: hero-settle var(--d-1200) var(--ease-out) both; animation-duration: 2400ms; }
html:not(.reduce-motion) .hero__title .line > span { animation: line-rise 900ms var(--ease-out) both; }
html:not(.reduce-motion) .hero__title .line:nth-child(2) > span { animation-delay: 120ms; }
html:not(.reduce-motion) .hero__sub { animation: fade-up var(--d-800) var(--ease-out) 360ms both; }
html:not(.reduce-motion) .hero__actions { animation: fade-up var(--d-800) var(--ease-out) 480ms both; }

/* 11. word-mask titles (built at build time) and image reveals: Persuade / Experience pages only */
.mask-title .w { display: inline-block; overflow: clip; overflow-clip-margin: 0.1em; vertical-align: top; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.mask-title .w > span { display: inline-block; }
html.motion-ready:not(.reduce-motion)[data-mode="persuade"] .mask-title:not(.is-in) .w > span,
html.motion-ready:not(.reduce-motion)[data-mode="experience"] .mask-title:not(.is-in) .w > span { transform: translateY(105%); }
.mask-title.is-in .w > span { transition: transform var(--d-800) var(--ease-out); transition-delay: calc(var(--i) * 40ms); }

html.motion-ready:not(.reduce-motion)[data-mode="persuade"] .reveal-image:not(.is-in),
html.motion-ready:not(.reduce-motion)[data-mode="experience"] .reveal-image:not(.is-in) { clip-path: inset(100% 0 0 0); }
.reveal-image { clip-path: inset(0 0 0 0); }
.reveal-image.is-in { transition: clip-path var(--d-800) var(--ease-mask); }
.reveal-image img { transition: transform var(--d-1200) var(--ease-out); }
html.motion-ready:not(.reduce-motion) .reveal-image:not(.is-in) img { transform: scale(1.04); }

/* 12. ridge line, drawn once on entry */
html.motion-ready:not(.reduce-motion) .ridge:not(.is-in) .ridge__line { stroke-dashoffset: 1; }
.ridge.is-in .ridge__line { transition: stroke-dashoffset 1600ms var(--ease-mask); }
/* the peaks' names come in as the line reaches them */
html.motion-ready:not(.reduce-motion) .ridge:not(.is-in) .ridge__peak { opacity: 0; }
.ridge.is-in .ridge__peak { transition: opacity var(--d-480) var(--ease-out) calc(600ms + var(--x) * .6ms); }

/* 2. cross-document View Transitions (Chrome 126+, Safari 18.2+): a short crossfade; the header keeps its
      own name so it never flickers; the product image morphs via the shared name set in pageswap */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--d-240) var(--ease-out) both; }
::view-transition-new(root) { animation: vt-in var(--d-320) var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
::view-transition-group(product-media), ::view-transition-group(look-media) { animation-duration: var(--d-480); animation-timing-function: var(--ease-out); }
::view-transition-old(product-media), ::view-transition-new(product-media),
::view-transition-old(look-media), ::view-transition-new(look-media) { mix-blend-mode: normal; height: 100%; object-fit: cover; }
::view-transition { pointer-events: none; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
html.reduce-motion::view-transition-group(*), html.reduce-motion::view-transition-old(*), html.reduce-motion::view-transition-new(*) { animation: none !important; }

/* 14. article reading bar: scroll timeline where supported, nothing elsewhere */
.reading-bar { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: calc(var(--z-header) + 1); background: var(--green-500); transform-origin: left; transform: scaleX(0); }
@supports (animation-timeline: scroll()) {
  html:not(.reduce-motion) .reading-bar { animation: reading linear both; animation-timeline: scroll(root); }
  @keyframes reading { to { transform: scaleX(1); } }
}

/* reduced motion: movement off, short fades kept, end events still fire */
html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after {
  animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important;
}
html.reduce-motion .button[aria-busy="true"]::after { animation-duration: 0.8s !important; animation-iteration-count: infinite !important; }
@media (prefers-reduced-motion: no-preference) { html:not(.reduce-motion) { scroll-behavior: smooth; } }