/* Vif · loud colour, cut loose.
   Display: Archivo at its widest (SIL OFL). Text: Figtree (SIL OFL).
   Warm white page, ink, one persimmon. Pill buttons whose label rolls and
   whose arrow turns; photographs on solid colour; motion everywhere, opt-in:
   a stored page without its script, or reduced motion, stays still and whole.
   All assets are local and original; commerce is owned by Custodian. */
@font-face {
  font-family: "Vif Display";
  src: url("./fonts/Archivo-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Vif Display";
  src: url("./fonts/Archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}
@font-face {
  font-family: "Vif Sans";
  src: url("./fonts/Figtree-latin.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  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;
}
@font-face {
  font-family: "Vif Sans";
  src: url("./fonts/Figtree-latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+A720-A7FF;
}
html.vif-storefront-template {
  scroll-padding-top: 120px;
}
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
body.vif-storefront-template {
  margin: 0;
}
.vif-storefront-template {
  --paper: #f4f2ee;
  --white: #ffffff;
  --stone: #e9e6e0;
  --stone-deep: #dedad3;
  --ink: #111111;
  --ink-soft: #2f2d2a;
  --muted: #5f5c57;
  --faint: #a19d96;
  --line: #dedad3;
  --accent: #ff4f1f;
  --on-photo: #ffffff;
  --display: "Vif Display", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --sans: "Vif Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-sm: 12px;
  --gutter: clamp(14px, 2vw, 28px);
  --ease: cubic-bezier(0.22, 0.8, 0.16, 1);
  --spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --vif-header-height: 112px;
  --sf-bg: #f4f2ee;
  --sf-surface: #ffffff;
  --sf-surface-alt: #e9e6e0;
  --sf-text: #111111;
  --sf-muted: #5f5c57;
  --sf-border: #dedad3;
  --sf-accent: #111111;
  --sf-accent-text: #ffffff;
  --sf-radius: 18px;
  --sf-radius-button: 999px;
  color: var(--ink);
  background: var(--paper);
  font: 400 15.5px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.vif-storefront-template *,
.vif-storefront-template *:before,
.vif-storefront-template *:after {
  box-sizing: border-box;
}
.vif-storefront-template :is(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}
/* Les boutons des pages de service (compte, aide, recherche) gardent la couleur de leur fond : la remise à zéro
   ci-dessus les rendait noirs sur noir (20/10, « Recevoir mon lien de connexion », « Envoyer ma demande »). */
.vif-storefront-template :is(.sf-form, .sf-buybox, .sf-search, .sf-filter-form) button,
.vif-storefront-template .sf-button {
  color: var(--sf-accent-text);
}
.vif-storefront-template button {
  cursor: pointer;
}
.vif-storefront-template a {
  color: inherit;
  text-decoration: none;
}
.vif-storefront-template :is(button, a, input, select, summary) {
  -webkit-tap-highlight-color: transparent;
}
.vif-storefront-template :is(button, a, summary):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.vif-storefront-template :is(input, select, textarea):focus-visible {
  outline: none;
}
.vif-storefront-template :is(button, a):disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.vif-storefront-template img {
  display: block;
  max-width: 100%;
  height: auto;
}
.vif-storefront-template :is(h1, h2, h3, p, figure) {
  margin: 0;
}
.vif-storefront-template :is(h1, h2) {
  font-family: var(--display);
  font-weight: 850;
  font-stretch: 125%;
  line-height: 0.94;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}
.vif-storefront-template h1 {
  font-size: clamp(38px, 4.6vw, 72px);
}
.vif-storefront-template h2 {
  font-size: clamp(28px, 3.1vw, 48px);
}
.vif-storefront-template h3 {
  font: 650 15.5px/1.3 var(--sans);
}
.vif-storefront-template p {
  overflow-wrap: anywhere;
}
.vif-storefront-template [hidden] {
  display: none !important;
}
.vif-storefront-template .native-theme-block {
  min-width: 0;
}
.vif-storefront-template .native-theme-block:empty {
  display: none;
}
.vif-storefront-template .wrap {
  width: calc(100% - var(--gutter) * 2);
  max-width: 1720px;
  margin-inline: auto;
}
.vif-storefront-template .sr-only,
.vif-storefront-template .native-variant-binding {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.vif-storefront-template .skip-link {
  position: fixed;
  top: -80px;
  left: 20px;
  z-index: 150;
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
}
.vif-storefront-template .skip-link:focus {
  top: 12px;
}
.vif-storefront-template .icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}
.vif-storefront-template .icon svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.7;
}
.vif-storefront-template .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  transition: background 0.2s ease, transform 0.3s var(--spring);
}
.vif-storefront-template .icon-button:hover:not(:disabled) {
  background: rgba(17, 17, 17, 0.07);
}
.vif-storefront-template .icon-button:active:not(:disabled) {
  transform: scale(0.92);
}

/* Buttons: pills. The label rolls up, the arrow turns in its orb, the fill warms. */
.vif-storefront-template .button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  padding: 12px 26px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font: 650 15px/1.2 var(--sans);
  letter-spacing: -0.005em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  isolation: isolate;
  transition:
    color 0.35s var(--ease),
    border-color 0.35s var(--ease),
    background 0.35s var(--ease),
    transform 0.35s var(--spring);
}
.vif-storefront-template .button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--accent);
  transform: translateY(101%);
  transition: transform 0.45s var(--ease);
}
.vif-storefront-template .button:hover:not(:disabled)::before {
  transform: none;
}
.vif-storefront-template .button:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--ink);
}
.vif-storefront-template .button:active:not(:disabled) {
  transform: scale(0.97);
}
.vif-storefront-template .button .icon,
.vif-storefront-template .button .icon svg {
  width: 17px;
  height: 17px;
}
.vif-storefront-template .vif-pill {
  gap: 14px;
  padding: 6px 6px 6px 26px;
}
.vif-roll {
  position: relative;
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
}
.vif-roll > span {
  display: block;
  transition: transform 0.45s var(--ease);
}
.vif-storefront-template .button:hover .vif-roll > span,
.vif-storefront-template a:hover > .vif-roll > span {
  transform: translateY(-100%);
}
.vif-orb {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  transition:
    transform 0.5s var(--spring),
    background 0.3s ease,
    color 0.3s ease;
}
.vif-orb > span.icon {
  transform: rotate(-45deg);
  transition: transform 0.5s var(--spring);
}
.vif-storefront-template .button:hover .vif-orb,
.vif-drop:hover .vif-orb {
  transform: scale(1.06);
  background: var(--ink);
  color: var(--white);
}
.vif-storefront-template .button:hover .vif-orb > span.icon,
.vif-drop:hover .vif-orb > span.icon {
  transform: rotate(0deg);
}
.vif-storefront-template .vif-pill-light {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.vif-storefront-template .vif-pill-light .vif-orb {
  background: var(--ink);
  color: var(--white);
}
.vif-storefront-template .vif-pill-ghost,
.vif-storefront-template :is(.button-outline, .button.secondary) {
  background: transparent;
  color: var(--ink);
}
.vif-storefront-template .vif-pill-ghost .vif-orb {
  background: var(--ink);
  color: var(--white);
}
.vif-storefront-template .vif-pill-ghost::before,
.vif-storefront-template :is(.button-outline, .button.secondary)::before {
  background: var(--ink);
}
.vif-storefront-template :is(.vif-pill-ghost, .button-outline, .button.secondary):hover:not(:disabled) {
  border-color: var(--ink);
  color: var(--white);
}
.vif-storefront-template .vif-pill-ghost:hover .vif-orb {
  background: var(--accent);
  color: var(--ink);
}
.vif-storefront-template .button-light {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.vif-storefront-template .text-link,
.vif-storefront-template .vif-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  cursor: pointer;
  transition: color 0.2s ease;
}
.vif-storefront-template :is(.text-link, .vif-more):hover {
  color: var(--accent);
}
.vif-storefront-template .vif-more .icon,
.vif-storefront-template .vif-more .icon svg {
  width: 15px;
  height: 15px;
}

/* Header: a running announcement, then a floating pill. */
.vif-header {
  position: sticky;
  top: 0;
  z-index: 60;
  width: 100%;
  pointer-events: none;
  transition: transform 0.45s var(--ease);
}
.vif-header > * {
  pointer-events: auto;
}
.vif-header.is-hidden {
  transform: translateY(-100%);
}
.vif-announcement {
  overflow: hidden;
  background: var(--ink);
  color: var(--white);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.vif-announcement-track,
.vif-ticker-track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.vif-announcement-track > div,
.vif-ticker-track > div {
  display: flex;
  align-items: center;
  flex: none;
}
.vif-announcement a {
  display: block;
  padding: 9px 26px;
  line-height: 16px;
}
.vif-announcement i {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.vif-navigation {
  padding-top: 10px;
}
.vif-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  height: 62px;
  padding: 0 8px 0 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  box-shadow: 0 10px 30px -18px rgba(17, 17, 17, 0.35);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.vif-bar-start {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.vif-desktop-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow: hidden;
  font-size: 14.5px;
  font-weight: 600;
  white-space: nowrap;
}
.vif-desktop-nav > a {
  padding: 9px 14px;
  border-radius: 999px;
  transition: background 0.2s ease, color 0.2s ease;
}
.vif-desktop-nav > a:hover,
.vif-desktop-nav > a[aria-current] {
  background: var(--ink);
  color: var(--white);
}
.vif-header .brand {
  display: block;
  font: 900 clamp(17px, 5.4vw, 28px) / 1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
  text-align: center;
  max-width: 300px;
  /* A long store name breaks between words, never inside one (« Heartma / de »). */
  overflow-wrap: break-word;
  text-wrap: balance;
}
.vif-header .brand img {
  max-height: 40px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  margin-inline: auto;
}
.vif-header .header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 2px;
}
.vif-header .vif-bag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 46px;
  margin-left: 6px;
  padding: 0 8px 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 14.5px;
  font-weight: 650;
  transition: background 0.25s ease, transform 0.3s var(--spring);
}
.vif-header .vif-bag:hover {
  background: var(--accent);
  color: var(--ink);
}
.vif-header .vif-bag:active {
  transform: scale(0.95);
}
.vif-header .vif-bag > .icon {
  display: none;
}
.vif-header .vif-bag .cart-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.vif-header .vif-bag:hover .cart-count {
  background: var(--ink);
  color: var(--white);
}
.vif-header-over {
  position: fixed;
  left: 0;
  right: 0;
}
.vif-header-over:not(.is-scrolled) .vif-bar {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  color: var(--on-photo);
}
.vif-header-over:not(.is-scrolled) .vif-desktop-nav > a:hover {
  background: var(--white);
  color: var(--ink);
}
.vif-header-over:not(.is-scrolled) .icon-button:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.2);
}
.vif-header-over:not(.is-scrolled) .brand img {
  filter: brightness(0) invert(1);
}

/* Home rhythm. */
body.vif-storefront-template,
.vif-storefront-template main {
  overflow-x: clip;
}
.vif-home {
  display: flex;
  flex-direction: column;
  gap: clamp(80px, 9vw, 150px);
  padding-bottom: clamp(80px, 8vw, 128px);
}
.vif-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: clamp(22px, 2.4vw, 34px);
}
.vif-section-heading h2 {
  max-width: 16ch;
  font-size: clamp(32px, 4vw, 64px);
}
.vif-heading-side {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}
.vif-page-title {
  font-size: clamp(38px, 5vw, 80px) !important;
}

/* Words that rise into place (the runtime splits them; without it they simply stand). */
.vif-split .vif-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.vif-split .vif-word > span {
  display: inline-block;
  transform: translateY(105%);
  transition: transform 0.9s var(--ease);
}
.vif-split.is-in .vif-word > span {
  transform: none;
}

/* Cover: the picture fills the screen, the brand slides across it. */
.vif-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ink);
  color: var(--on-photo);
}
.vif-hero-media {
  position: absolute;
  inset: -6% 0;
  margin: 0;
  transform: translate3d(0, var(--vif-shift, 0px), 0);
}
.vif-hero-media :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 40%;
}
.vif-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 10, 10, 0.32) 0%, rgba(10, 10, 10, 0) 22%),
    linear-gradient(0deg, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0.34) 34%, rgba(10, 10, 10, 0) 62%);
  pointer-events: none;
}
.vif-video-control {
  position: absolute;
  right: var(--gutter);
  top: calc(var(--vif-header-height) + 16px);
  z-index: 3;
  color: var(--on-photo);
  background: rgba(255, 255, 255, 0.18) !important;
}
.vif-hero-word {
  position: absolute;
  left: 0;
  right: 0;
  top: 25%;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.vif-hero-word > div {
  display: flex;
  width: max-content;
  will-change: transform;
}
.vif-hero-word span {
  padding-right: 0.25em;
  font: 900 clamp(120px, 21vw, 400px) / 0.8 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 2px rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.vif-hero-copy {
  position: relative;
  z-index: 2;
  /* The empty part of the copy lets the pointer reach the dots on the photograph. */
  pointer-events: none;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 40px;
  padding-bottom: clamp(28px, 3.4vw, 52px);
}
.vif-hero-copy :is(h1, .vif-hero-text, .vif-hero-actions, .vif-shot) {
  pointer-events: auto;
}
.vif-hero-copy h1 {
  max-width: 10ch;
  font-size: clamp(52px, 7.6vw, 136px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  white-space: pre-line;
}
.vif-hero-side {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 22px;
  padding-bottom: 6px;
}
.vif-hero-text {
  max-width: 38ch;
  font-size: 16.5px;
  font-weight: 500;
  line-height: 1.45;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}
.vif-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vif-hero.vif-plain {
  min-height: 0;
  padding: clamp(150px, 16vw, 230px) 0 clamp(48px, 6vw, 88px);
  background: var(--accent);
  color: var(--ink);
}
.vif-hero.vif-plain::after,
.vif-hero.vif-plain .vif-hero-word {
  display: none;
}
.vif-mini {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  align-items: center;
  font-size: 13.5px;
}
.vif-mini img {
  grid-row: 1 / span 2;
  width: 48px;
  height: 64px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--stone);
}
.vif-mini span:last-child {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Ticker: the collections and promises, faster when the page moves. */
.vif-ticker {
  margin-top: calc(clamp(80px, 9vw, 150px) * -1);
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  transform: rotate(-1.4deg) scale(1.02);
  white-space: nowrap;
}
.vif-ticker span {
  padding: 16px 28px;
  font: 850 clamp(24px, 2.6vw, 40px) / 1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.03em;
}
.vif-ticker i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
}

/* Rails: a row of cards that scrolls sideways. */
.vif-rail-arrows {
  display: flex;
  gap: 6px;
}
.vif-rail-arrows .icon-button {
  width: 52px;
  height: 52px;
  border: 1.5px solid var(--ink);
}
.vif-rail-arrows .icon-button:hover:not(:disabled) {
  background: var(--ink);
  color: var(--white);
}
.vif-rail-arrows [data-vif-step="-1"] > span.icon {
  transform: rotate(180deg);
}
.vif-product-section.is-static .vif-rail-arrows {
  display: none;
}
.vif-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(250px, 23vw, 360px);
  gap: 14px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--gutter), calc((100% - 1720px) / 2));
  padding: 0 max(var(--gutter), calc((100% - 1720px) / 2)) 6px;
  scrollbar-width: none;
}
.vif-rail::-webkit-scrollbar {
  display: none;
}
.vif-rail > .vif-card {
  scroll-snap-align: start;
}
.vif-catalog-grid,
.vif-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 14px;
}

/* Cards: colour-blocked photographs; on hover the second one, and the sizes to add. */
.vif-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.vif-card-media {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stone);
  isolation: isolate;
}
.vif-card-media .product-image-link {
  display: block;
  aspect-ratio: 3/4;
}
.vif-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity 0.45s ease,
    transform 1.1s var(--ease);
}
.vif-card-alternate {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.vif-card:hover .vif-card-alternate {
  opacity: 1;
}
.vif-card:hover .vif-card-media img {
  transform: scale(1.04);
}
.vif-stock {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.vif-storefront-template .vif-quick {
  position: absolute;
  top: 12px;
  right: 12px;
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    opacity 0.3s ease,
    transform 0.4s var(--ease),
    background 0.2s ease;
}
.vif-card:hover .vif-quick,
.vif-quick:focus-visible {
  opacity: 1;
  transform: none;
}
.vif-storefront-template .vif-quick:hover {
  background: var(--accent);
}
.vif-card-add {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  padding: 12px 12px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--ease);
}
.vif-card:hover .vif-card-add,
.vif-card-add:focus-within {
  opacity: 1;
  transform: none;
}
.vif-card-add > p {
  margin-bottom: 8px;
  font-size: 12.5px;
  font-weight: 700;
}
.vif-card-add > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.vif-card-add [data-vif-size] {
  min-width: 38px;
  height: 32px;
  padding: 0 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 12.5px;
  font-weight: 650;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.3s var(--spring);
}
.vif-card-add [data-vif-size]:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--white);
}
.vif-card-add [data-vif-size]:active:not(:disabled) {
  transform: scale(0.9);
}
.vif-card-add [data-vif-size]:disabled {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--faint);
  text-decoration: line-through;
  opacity: 1;
}
.vif-card .card-info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 14px 4px 0;
}
.vif-card .card-info h3 {
  font-size: 15.5px;
  font-weight: 650;
}
.vif-card .card-info h3 a:hover {
  color: var(--accent);
}
.vif-card-price {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vif-card-colour {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: 13.5px;
}

/* Drops: two campaign pictures that open as they come into view. */
.vif-drops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.vif-drops-1 {
  grid-template-columns: minmax(0, 1fr);
}
.vif-storefront-template .vif-drop {
  color: var(--on-photo);
}
.vif-drop {
  position: relative;
  display: block;
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stone-deep);
  color: var(--on-photo);
  isolation: isolate;
}
.vif-drops-1 .vif-drop {
  aspect-ratio: 16/9;
}
.vif-drop-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.vif-drop-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.vif-drop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 45%);
}
.vif-drop:hover .vif-drop-media img {
  transform: scale(1.05);
}
.vif-drop-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: clamp(20px, 2.4vw, 36px);
}
.vif-drop-title {
  font: 900 clamp(40px, 5.2vw, 92px) / 0.86 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.05em;
}
.vif-drop-text {
  max-width: 36ch;
  font-size: 15.5px;
  font-weight: 500;
}
.vif-drop-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 5px 5px 5px 20px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 650;
}
.vif-drop-cta .vif-orb {
  width: 36px;
  height: 36px;
  background: var(--ink);
  color: var(--white);
}

/* Tabs: the families, one grid at a time. */
.vif-tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border-radius: 999px;
  background: var(--white);
}
.vif-tablist [role="tab"] {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  font-size: 14.5px;
  font-weight: 650;
  transition: background 0.25s ease, color 0.25s ease;
}
.vif-tablist [role="tab"]:hover {
  background: var(--stone);
}
.vif-tablist [role="tab"][aria-selected="true"] {
  background: var(--ink);
  color: var(--white);
}
.vif-tab-panel {
  animation: vif-fade 0.4s ease;
}
.vif-tab-more {
  display: flex;
  justify-content: center;
  margin-top: 36px;
}

/* Lookbook: pinned while its pictures slide past. */
.vif-lookbook {
  position: relative;
}
.vif-lookbook-stage {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 3vw, 40px);
  overflow: hidden;
}
.vif-lookbook.is-pinned .vif-lookbook-stage {
  position: sticky;
  top: 0;
  height: 100vh;
}
.vif-lookbook-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.vif-lookbook-heading h2 {
  font-size: clamp(44px, 7vw, 120px);
  line-height: 0.86;
  letter-spacing: -0.05em;
}
.vif-lookbook-track {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 0 max(var(--gutter), calc((100% - 1720px) / 2));
  will-change: transform;
}
.vif-look-card {
  position: relative;
  flex: none;
  width: clamp(280px, 33vw, 560px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stone);
}
.vif-look-card img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.vif-look-card:hover img {
  transform: scale(1.05);
}
.vif-look-card span {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--white);
  font-size: 13.5px;
  font-weight: 650;
}
.vif-look-1 {
  margin-top: 8vh;
}
.vif-look-2 {
  margin-top: 3vh;
}

/* Story: the launderette and the words. */
.vif-story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(24px, 4vw, 72px);
  align-items: center;
}
.vif-story:not(.vif-photo) {
  grid-template-columns: minmax(0, 1fr);
  max-width: 900px;
}
.vif-story-media {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--stone);
}
.vif-story-media img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
}
.vif-story-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.vif-story-copy h2 {
  font-size: clamp(36px, 4.2vw, 72px);
  line-height: 0.9;
  white-space: pre-line;
}
.vif-story-copy > div {
  max-width: 44ch;
  color: var(--ink-soft);
  font-size: 16.5px;
}

/* Piece of the moment: the purchase column, on a white card. */
.vif-feature {
  display: flex;
  flex-direction: column;
  gap: clamp(22px, 2.4vw, 34px);
}
.vif-feature-heading h2 {
  font-size: clamp(32px, 4vw, 64px);
}
.vif-feature .product-layout {
  margin: 0 !important;
  padding: clamp(14px, 1.6vw, 22px);
  width: 100% !important;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-feature .product-heading h3 {
  font: 850 clamp(30px, 2.8vw, 46px) / 0.95 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
}
.vif-feature .product-purchase {
  position: static !important;
  padding-top: clamp(8px, 2vw, 28px) !important;
}

/* Closing: a last picture, a last shout. */
.vif-closing {
  position: relative;
  display: grid;
  place-items: start center;
  min-height: clamp(560px, 90vh, 960px);
  overflow: hidden;
  background: var(--accent);
  color: var(--ink);
  text-align: center;
}
.vif-closing.vif-photo {
  color: var(--on-photo);
  background: var(--ink);
}
.vif-closing-media {
  position: absolute;
  inset: -8% 0;
  margin: 0;
  transform: translate3d(0, var(--vif-shift, 0px), 0);
}
.vif-closing-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vif-closing.vif-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(10, 10, 10, 0.35), rgba(10, 10, 10, 0.05) 70%);
}
.vif-closing-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-block: clamp(64px, 9vw, 130px) 80px;
}
.vif-closing-copy h2 {
  font-size: clamp(64px, 12vw, 220px);
  line-height: 0.82;
  letter-spacing: -0.06em;
}
.vif-closing-copy > div {
  max-width: 40ch;
  font-size: 17px;
  font-weight: 550;
}
.vif-closing-copy .button {
  margin-top: 8px;
}

/* Promises. */
.vif-values {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.vif-values > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-value-index {
  font: 900 44px/1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.05em;
  color: var(--accent);
}
.vif-values h3 {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 750;
}
.vif-values > div > div {
  color: var(--muted);
  font-size: 14.5px;
}
.vif-values .text-link {
  margin-top: auto;
  padding-top: 10px;
  align-self: flex-start;
}

/* Footer: ink, the letter, the links, and the name across the page in persimmon. */
.vif-footer {
  position: relative;
  overflow: hidden;
  margin-top: 0;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--ink);
  color: var(--white);
}
.vif-footer-news {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 40px;
  padding: clamp(56px, 6vw, 96px) 0 clamp(40px, 4vw, 64px);
}
.vif-footer-news:not(:has(.cst-news)) {
  display: none;
}
.vif-footer-news h2 {
  font-size: clamp(30px, 3.4vw, 54px);
  margin-bottom: 12px;
}
.vif-footer-news p {
  color: rgba(255, 255, 255, 0.66);
  max-width: 40ch;
}
.vif-footer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: clamp(32px, 4vw, 56px) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.vif-footer-group > summary {
  display: block;
  list-style: none;
  pointer-events: none;
  margin-bottom: 14px;
}
.vif-footer-group > summary::-webkit-details-marker {
  display: none;
}
.vif-footer-group > summary h2 {
  font: 650 13.5px/1.3 var(--sans);
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.55);
}
.vif-footer-group > summary span.icon {
  display: none;
}
.vif-footer-group > nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  font-size: 16px;
  font-weight: 550;
}
.vif-footer a:hover {
  color: var(--accent);
}
.vif-footer-sign {
  margin: 0 0 -0.12em;
  padding-inline: var(--gutter);
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.8;
  letter-spacing: -0.06em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  user-select: none;
}
.vif-footer-bottom {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.vif-footer-bottom > nav {
  margin-left: auto;
}
.vif-payments {
  display: flex;
  gap: 6px;
}
.vif-payments img {
  height: 22px;
  width: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
}
.vif-storefront-template .vif-back-top {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + var(--hb-sticky-height, 0px));
  z-index: 40;
  width: 52px;
  height: 52px;
  background: var(--accent) !important;
  color: var(--ink);
  box-shadow: 0 10px 24px -12px rgba(17, 17, 17, 0.5);
}
.vif-back-top > span.icon {
  transform: rotate(-90deg);
}
.vif-storefront-template .cst-news {
  margin: 0;
  padding: 0;
  max-width: none;
  text-align: left;
}
.vif-footer-news .cst-news h2,
.vif-footer-news .cst-news > p,
.vif-newsletter-dialog .cst-news h2,
.vif-newsletter-dialog .cst-news > p {
  display: none;
}
.vif-storefront-template .cst-news form {
  justify-content: flex-start;
  margin: 0;
  gap: 6px;
  flex-wrap: nowrap;
  padding: 6px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
}
.vif-storefront-template .cst-news input[type="email"] {
  flex: 1;
  height: 48px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
}
.vif-storefront-template .cst-news input[type="email"]::placeholder {
  color: var(--muted);
}
.vif-storefront-template .cst-news button {
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-weight: 650;
}
.vif-storefront-template .cst-news button:hover:not(:disabled) {
  background: var(--accent);
  color: var(--ink);
}
.vif-footer .cst-news :is(small, p) {
  color: rgba(255, 255, 255, 0.55);
}

/* Catalogue. */
.vif-catalog {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(80px, 8vw, 128px);
}
.vif-catalog-heading,
.vif-collection-promotion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 22px;
}
.vif-catalog-heading p,
.vif-collection-promotion > div {
  color: var(--muted);
  font-size: 15px;
  max-width: 56ch;
}
.vif-collection-promotion h1 {
  font-size: clamp(36px, 3.4vw, 54px);
}
.vif-collection-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.vif-collection-links a {
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 450;
  white-space: nowrap;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.vif-collection-links a:hover {
  border-color: var(--ink);
}
.vif-collection-links a[aria-current] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.vif-filter-toolbar {
  position: sticky;
  top: calc(var(--vif-header-height) - 1px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 54px;
  margin-bottom: 20px;
  background: var(--paper);
  border-block: 1px solid var(--line);
}
.vif-filter-toolbar .button {
  min-height: 52px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-weight: 500;
  gap: 8px;
}
.vif-filter-toolbar .button:hover:not(:disabled) {
  background: none;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 5px;
}
.vif-filter-toolbar .button .icon,
.vif-filter-toolbar .button .icon svg {
  width: 17px;
  height: 17px;
}
.vif-filter-toolbar p {
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.vif-select {
  position: relative;
  margin-left: auto;
}
.vif-select select {
  -webkit-appearance: none;
  appearance: none;
  height: 52px;
  min-width: 0;
  padding: 0 24px 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  text-align: right;
  cursor: pointer;
}
.vif-select select:hover,
.vif-select select:focus-visible {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.vif-select > .icon {
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 14px;
  transform: translateY(-50%) rotate(90deg);
  pointer-events: none;
}
.vif-select > .icon svg {
  width: 14px;
  height: 14px;
}
.vif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 96px 16px;
  text-align: center;
  font-size: 18px;
}
.vif-catalog > .vif-search-form {
  max-width: 820px;
  margin: 8px 0 32px;
}

/* Filter drawer. */
.vif-storefront-template .vif-filter-dialog {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border-radius: var(--radius-sm);
}
.vif-storefront-template .vif-filter-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: vif-slide-left 0.36s var(--ease);
}
.vif-filter-dialog .vif-dialog-heading {
  padding: 18px 24px;
  margin: 0;
  border-bottom: 1px solid var(--line);
}
.vif-filter-dialog .vif-dialog-heading .text-link {
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}
.vif-filter-body {
  flex: 1;
  overflow: auto;
  padding: 0 24px 24px;
}
.vif-storefront-template .vif-filter-group {
  margin: 0;
  padding: 22px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .vif-filter-group > legend {
  float: left;
  width: 100%;
  margin-bottom: 14px;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
}
.vif-storefront-template .vif-filter-group > legend + * {
  clear: both;
}
.vif-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vif-chips label {
  position: relative;
}
.vif-chips input {
  position: absolute;
  opacity: 0;
}
.vif-chips span {
  display: block;
  min-width: 48px;
  padding: 9px 14px;
  border: 1px solid var(--line);
  background: var(--paper);
  text-align: center;
  font-size: 13px;
  font-weight: 450;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.vif-chips label:hover span {
  border-color: var(--ink);
}
.vif-chips input:checked + span {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.vif-chips input:focus-visible + span {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}
.vif-check {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 14px;
  cursor: pointer;
}
.vif-check input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1px solid var(--faint);
  border-radius: var(--radius-sm);
  background: var(--paper);
  display: grid;
  place-content: center;
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease;
}
.vif-check:hover input[type="checkbox"] {
  border-color: var(--ink);
}
.vif-check input[type="checkbox"]:checked {
  background: var(--ink);
  border-color: var(--ink);
}
.vif-check input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: translateY(-1px) rotate(-45deg);
}
.vif-check input[type="checkbox"]:focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}
.vif-filter-count {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.vif-switch {
  grid-template-columns: minmax(0, 1fr) auto;
}
.vif-switch > span {
  order: 1;
}
.vif-switch input[type="checkbox"] {
  order: 2;
  width: 40px;
  height: 22px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--stone-deep);
  place-content: center start;
}
.vif-switch input[type="checkbox"]::after,
.vif-switch input[type="checkbox"]:checked::after {
  content: "";
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 21, 19, 0.3);
  transform: none;
  transition: transform 0.25s var(--ease);
}
.vif-switch input[type="checkbox"]:checked {
  background: var(--ink);
}
.vif-switch input[type="checkbox"]:checked::after {
  transform: translateX(18px);
}
.vif-price-range input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  margin: 14px 0;
  background: linear-gradient(90deg, var(--ink) var(--fill, 100%), var(--line) var(--fill, 100%));
  cursor: pointer;
}
.vif-price-range input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 1px var(--ink);
}
.vif-price-range input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ink);
  border: 3px solid var(--paper);
}
.vif-price-range p {
  color: var(--muted);
  font-size: 14px;
}
.vif-price-range output {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.vif-filter-footer {
  padding: 16px 24px 24px;
  border-top: 1px solid var(--line);
}
.vif-filter-footer .button {
  width: 100%;
}

/* Product page: photographs two by two, the purchase column beside them. */
.vif-storefront-template .product-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: clamp(28px, 4.4vw, 88px);
  margin-top: 12px;
  margin-bottom: clamp(80px, 8vw, 128px);
  align-items: start;
}
.vif-storefront-template .product-gallery {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}
.vif-storefront-template .gallery-stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  outline-offset: -2px;
}
.vif-storefront-template .slide-content {
  aspect-ratio: 3/4;
  min-width: 0;
  overflow: hidden;
  background: var(--stone);
}
.vif-storefront-template .slide-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vif-storefront-template .gallery-thumbnails,
.vif-storefront-template .gallery-footnote,
.vif-storefront-template .gallery-navigation {
  display: none;
}
.vif-storefront-template .gallery-zoom {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  z-index: 3;
}
.vif-storefront-template .gallery-zoom:after {
  content: "+";
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
}
.vif-storefront-template .product-purchase {
  position: sticky;
  top: calc(var(--vif-header-height) + 28px);
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  max-width: 440px;
  padding-top: 12px;
}
.vif-storefront-template .product-heading {
  margin-bottom: 6px;
}
.vif-storefront-template .product-heading h1 {
  font: 850 clamp(30px, 2.8vw, 46px) / 0.95 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
}
.vif-storefront-template .product-review-summary {
  margin-top: 10px;
}
.vif-storefront-template .purchase-total {
  display: block;
  margin-bottom: 4px;
}
.vif-storefront-template .purchase-total > span {
  display: none;
}
.vif-storefront-template .purchase-total {
  margin: 6px 0 14px;
}
.vif-storefront-template .purchase-total > strong {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.vif-pdp-colour {
  margin: 2px 0 20px;
  font-size: 13.5px;
}
.vif-pdp-colour > span:first-child {
  color: var(--muted);
  margin-right: 4px;
}
.vif-storefront-template .pdp-description {
  color: var(--ink-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 26px;
}
.vif-storefront-template .product-purchase .pdp-description > :not(:first-child) {
  display: none;
}
.vif-storefront-template .pdp-description ul {
  padding-left: 20px;
  margin: 0;
}
.vif-storefront-template .pdp-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: var(--muted);
}
.vif-storefront-template .pdp-usps li {
  display: flex;
  gap: 6px;
  align-items: center;
}
.vif-storefront-template .pdp-usps .icon,
.vif-storefront-template .pdp-usps .icon svg {
  width: 14px;
  height: 14px;
  color: var(--ink);
}
.vif-storefront-template fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.vif-storefront-template .native-single-offer > .offer-radio,
.vif-storefront-template .component-choice > legend,
.vif-storefront-template .native-purchase-options > legend {
  display: none;
}
.vif-storefront-template .offer-options > legend {
  font-size: 14px;
  margin-bottom: 16px;
}
.vif-storefront-template .variant-fields {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.vif-storefront-template .aris-option {
  position: relative;
}
.vif-storefront-template .aris-option > label {
  display: block;
  margin-bottom: 10px;
  font-size: 13.5px;
  font-weight: 500;
}
.vif-storefront-template .aris-option > select {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
    var(--paper);
  cursor: pointer;
}
.vif-storefront-template .aris-option > select:hover,
.vif-storefront-template .aris-option > select:focus-visible {
  border-color: var(--ink);
}
.vif-storefront-template .aris-option:has(.variant-choice-options) > select {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.vif-storefront-template .variant-choice {
  border: 0;
  padding: 0;
  margin-bottom: 16px;
}
.vif-storefront-template .variant-choice-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 6px;
}
.vif-storefront-template .variant-choice-options button {
  min-width: 0;
  min-height: 46px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 450;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}
.vif-storefront-template .variant-choice-options button:hover:not(:disabled) {
  border-color: var(--ink);
}
.vif-storefront-template .variant-choice-options button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.vif-storefront-template .variant-choice-options button:disabled {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--faint);
  text-decoration: line-through;
  opacity: 1;
}
.vif-storefront-template .vif-colour-options {
  display: flex;
  flex-wrap: wrap;
}
.vif-storefront-template .vif-colour-options button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
}
.vif-storefront-template .vif-colour-options button img {
  width: 32px;
  height: 48px;
  object-fit: cover;
}
.vif-storefront-template .variant-choice-swatch {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--line);
}
.vif-storefront-template .size-guide-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.vif-storefront-template .size-guide-link .icon,
.vif-storefront-template .size-guide-link .icon svg {
  width: 14px;
  height: 14px;
}
.vif-storefront-template .native-offer-slot {
  margin-top: 12px;
}
.vif-storefront-template .native-preview-offer {
  border: 1px solid var(--line);
  background: var(--paper);
  margin-bottom: 8px;
  padding: 12px;
}
.vif-storefront-template .native-preview-offer .offer-radio {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vif-storefront-template .offer-visual img {
  width: 40px;
  height: 60px;
  object-fit: cover;
}
.vif-storefront-template .offer-description {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vif-storefront-template .offer-description .offer-saving,
.vif-storefront-template .offer-amount {
  font-size: 13px;
  color: var(--muted);
}
.vif-storefront-template .purchase-row {
  display: flex;
  gap: 8px;
  margin-top: 22px;
}
.vif-storefront-template .add-button {
  flex: 1;
  min-height: 54px;
  font-size: 14.5px;
}
.vif-storefront-template .add-button > .icon {
  display: none;
}
.vif-storefront-template .product-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 12px;
}
.vif-storefront-template .product-status[data-public-product-stock]:not(:empty):before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  border-radius: 50%;
  background: #4f7a52;
  vertical-align: 1px;
}
.vif-storefront-template .native-purchase-reassurance {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 8px;
  padding: 16px 0;
  border-block: 1px solid var(--line);
  font-size: 13px;
}
.vif-storefront-template .native-purchase-reassurance:not(:has(*)) {
  display: none;
}
.vif-storefront-template .native-return-reassurance {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
}
.vif-storefront-template .native-return-reassurance > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vif-storefront-template .native-return-reassurance .conditions-link {
  font-size: 12px;
  color: var(--muted);
  text-decoration: underline;
}
.vif-storefront-template .pdp-delivery-heading,
.vif-storefront-template .hb-return-terms {
  display: flex;
  gap: 12px;
  align-items: center;
}
.vif-storefront-template .pdp-delivery-estimate {
  margin-left: 32px;
  font-size: 12px;
  color: var(--muted);
}
.vif-storefront-template .pdp-delivery-estimate strong {
  font-weight: 400;
}
.vif-storefront-template .pdp-delivery-destination {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 12px 0;
}
.vif-storefront-template .pdp-delivery-destination select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.vif-storefront-template .native-packaging {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 13px;
}
.vif-storefront-template .product-details {
  margin-top: 28px;
}
.vif-storefront-template .product-details details {
  border-top: 1px solid var(--line);
  padding: 0;
}
.vif-storefront-template .product-details > :last-child details,
.vif-storefront-template .product-details > details:last-child {
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .product-details details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 54px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 500;
}
.vif-storefront-template .product-details details > summary::-webkit-details-marker {
  display: none;
}
.vif-storefront-template .product-details details > summary .icon,
.vif-storefront-template .product-details details > summary .icon svg {
  width: 16px;
  height: 16px;
}
.vif-storefront-template .product-details details > summary span.icon {
  transition: transform 0.25s var(--ease);
}
.vif-storefront-template .product-details details[open] > summary span.icon {
  transform: rotate(45deg);
}
.vif-storefront-template .product-details details > summary span.icon[data-aris-icon="chevron"] {
  transform: rotate(90deg);
}
.vif-storefront-template .product-details details[open] > summary span.icon[data-aris-icon="chevron"] {
  transform: rotate(-90deg);
}
.vif-storefront-template .product-details details > div {
  padding-bottom: 18px;
}
.vif-storefront-template .product-details :is(p, li) {
  margin: 0 0 8px;
  color: var(--ink-soft);
  font-size: 14px;
}
.vif-storefront-template .product-details ul {
  padding-left: 0;
  list-style: none;
}
.vif-storefront-template .product-details li strong {
  font-weight: 500;
  margin-right: 6px;
}
.vif-storefront-template .pdp-story {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: clamp(28px, 5vw, 96px);
  margin-bottom: clamp(80px, 8vw, 128px);
  align-items: end;
}
.vif-storefront-template .pdp-story > img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  background: var(--stone);
}
.vif-storefront-template .pdp-story > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.vif-storefront-template .pdp-story h2 {
  font-size: clamp(28px, 2.6vw, 42px);
  line-height: 1.04;
  white-space: pre-line;
}
.vif-storefront-template .pdp-story p {
  color: var(--muted);
  font-size: 15px;
  max-width: 42ch;
}
.vif-storefront-template .pdp-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: clamp(28px, 5vw, 96px);
  margin-bottom: clamp(80px, 8vw, 128px);
}
.vif-storefront-template .pdp-faq h2 {
  font-size: clamp(28px, 2.6vw, 42px);
}
.vif-storefront-template .faq-questions {
  border-top: 1px solid var(--ink);
}
.vif-storefront-template .faq-questions details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.vif-storefront-template .faq-questions summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: 500;
}
.vif-storefront-template .faq-questions summary::-webkit-details-marker {
  display: none;
}
.vif-storefront-template .faq-questions summary span.icon {
  transition: transform 0.25s var(--ease);
}
.vif-storefront-template .faq-questions details[open] summary span.icon {
  transform: rotate(45deg);
}
.vif-storefront-template .faq-questions details > div {
  padding-bottom: 20px;
  color: var(--muted);
  max-width: 62ch;
}
.vif-storefront-template .reviews-section {
  margin-block: 72px;
}
.vif-storefront-template .review-summary {
  display: flex;
  align-items: center;
  gap: 8px;
}
.vif-storefront-template .review-summary svg {
  width: 14px;
  height: 14px;
}
.vif-storefront-template .review-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.vif-storefront-template .review-card {
  padding: 26px;
  background: var(--stone);
}
.vif-storefront-template .review-card :is(h3, p) {
  margin-bottom: 12px;
}
.vif-storefront-template .related-section,
.vif-storefront-template .vif-product-document .vif-product-section {
  margin-bottom: clamp(80px, 8vw, 128px);
}
.vif-storefront-template .sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 10px 0;
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.vif-storefront-template .sticky-atc-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}
.vif-storefront-template .sticky-atc-photo {
  width: 36px;
  height: 54px;
  object-fit: cover;
}
.vif-storefront-template .sticky-atc-copy {
  flex: 1;
  min-width: 0;
  font-size: 13px;
}
.vif-storefront-template .sticky-atc-title {
  display: block;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vif-storefront-template .sticky-atc-details {
  display: flex;
  gap: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .sticky-atc-button {
  min-width: 220px;
}

/* Dialogs: search, menu, quick view, letter. */
.vif-storefront-template dialog {
  border: 0;
  background: var(--paper);
  color: var(--ink);
  padding: 24px;
  max-width: calc(100vw - 32px);
  max-height: calc(100dvh - 32px);
  overscroll-behavior: contain;
}
.vif-storefront-template dialog::backdrop {
  background: rgba(22, 21, 19, 0.36);
}
.vif-storefront-template .vif-dialog-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.vif-storefront-template .vif-dialog-heading h2 {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.vif-storefront-template .vif-close {
  margin-right: -10px;
}
.vif-storefront-template .vif-close:hover {
  opacity: 0.6;
}
.vif-storefront-template .vif-search-dialog {
  position: fixed;
  inset: 0 0 auto 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 22px var(--gutter) 44px;
  max-height: 100dvh;
  overflow: auto;
}
.vif-storefront-template .vif-search-dialog[open] {
  animation: vif-drop 0.32s var(--ease);
}
.vif-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 6px;
  margin-bottom: 36px;
}
.vif-search-form input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 6px 0;
  font-size: clamp(26px, 2.8vw, 40px);
  font-weight: 400;
  letter-spacing: -0.03em;
}
.vif-search-form input::placeholder {
  color: var(--faint);
}
.vif-search-form .button {
  min-height: 44px;
}
.vif-search-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 48px;
}
.vif-search-columns h3 {
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 12px;
}
.vif-search-columns nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  font-size: 16px;
}
.vif-search-columns nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vif-search-products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.vif-search-products .vif-mini {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.vif-search-products .vif-mini img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/4;
  margin-bottom: 8px;
}
.vif-storefront-template .vif-menu-dialog {
  position: fixed;
  inset: 0 auto 0 0;
  margin: 0;
  width: min(420px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 12px 20px 28px;
}
.vif-storefront-template .vif-menu-dialog[open] {
  display: flex;
  flex-direction: column;
  animation: vif-slide-left 0.36s var(--ease);
}
.vif-menu-dialog .vif-dialog-heading {
  min-height: 52px;
  margin-bottom: 12px;
}
.vif-menu-brand {
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -0.045em;
}
.vif-menu-primary {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--line);
}
.vif-menu-primary a {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
  font-weight: 450;
  letter-spacing: -0.03em;
}
.vif-menu-secondary {
  margin-top: auto;
  padding-top: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  font-size: 14px;
  color: var(--muted);
}
.vif-storefront-template .vif-quick-dialog {
  width: min(920px, calc(100vw - 32px));
  padding: 0;
}
.vif-storefront-template .vif-quick-dialog[open] {
  animation: vif-fade 0.3s ease;
}
.vif-quick-dialog > .vif-close {
  position: absolute;
  top: 12px;
  right: 22px;
  z-index: 2;
}
.vif-quick-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.vif-quick-image {
  background: var(--stone);
}
.vif-quick-image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}
.vif-quick-purchase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 56px 36px 36px;
}
.vif-quick-purchase h2 {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.vif-quick-price {
  font-size: 16px;
  font-variant-numeric: tabular-nums;
}
.vif-quick-description {
  color: var(--muted);
  font-size: 14px;
}
.vif-quick-purchase label {
  font-size: 13.5px;
  font-weight: 500;
  margin-top: 8px;
}
.vif-quick-purchase select {
  -webkit-appearance: none;
  appearance: none;
  height: 48px;
  padding: 0 40px 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 20px) 50% / 6px 6px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 15px) 50% / 6px 6px no-repeat,
    var(--paper);
}
.vif-quick-purchase .vif-quick-select-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip-path: inset(50%);
}
.vif-quick-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
  gap: 6px;
}
.vif-quick-chips button {
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 450;
}
.vif-quick-chips button:hover:not(:disabled) {
  border-color: var(--ink);
}
.vif-quick-chips button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.vif-quick-chips button:disabled {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--faint);
  text-decoration: line-through;
  opacity: 1;
}
.vif-quick-purchase .button {
  min-height: 52px;
  margin-top: 8px;
}
.vif-quick-purchase .text-link {
  align-self: flex-start;
  font-size: 13px;
}
.vif-storefront-template .vif-newsletter-dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 48px 36px 36px;
}
.vif-newsletter-dialog > .vif-close {
  position: absolute;
  top: 10px;
  right: 18px;
}
.vif-newsletter-dialog h2 {
  font-size: 28px;
  margin-bottom: 10px;
}
.vif-newsletter-dialog > p {
  color: var(--muted);
  margin-bottom: 24px;
}

/* Information, story, lookbook, notes and questions. */
.vif-storefront-template .vif-reading {
  padding: clamp(36px, 4vw, 64px) 0 clamp(80px, 8vw, 128px);
}
.vif-reading > h1 {
  font-size: clamp(36px, 3.4vw, 54px);
  margin-bottom: clamp(28px, 3vw, 44px);
}
.vif-reading .wrap {
  width: 100%;
}
.vif-reading .native-theme-block > img {
  width: 100%;
  aspect-ratio: 16/7;
  object-fit: cover;
  margin-bottom: 40px;
  background: var(--stone);
}
.vif-reading .native-theme-block > h2 {
  max-width: 18ch;
  font-size: clamp(30px, 3vw, 48px);
  white-space: pre-line;
  margin-bottom: 18px;
}
.vif-reading .native-theme-block > p {
  color: var(--ink-soft);
  font-size: 17px;
  max-width: 58ch;
  margin-bottom: 14px;
}
.vif-story-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 96px);
  align-items: start;
}
.vif-story-page h2 {
  font-size: clamp(30px, 3vw, 48px);
  white-space: pre-line;
}
.vif-story-page > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  max-width: 54ch;
  color: var(--ink-soft);
  font-size: 17px;
  line-height: 1.6;
}
.vif-story-page .vif-more {
  margin-top: 10px;
}
.vif-lookbook-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 12px;
}
.vif-lookbook-grid > :is(a, article) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.vif-lookbook-grid img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  background: var(--stone);
  margin-bottom: 8px;
}
.vif-lookbook-grid h2 {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.vif-lookbook-grid p {
  color: var(--muted);
  font-size: 14px;
}
.vif-lookbook-grid .text-link {
  align-self: flex-start;
  font-size: 13px;
}
.vif-reading[data-native-editorial-view="faq"] .native-theme-block {
  max-width: 880px;
  border-top: 1px solid var(--ink);
  margin-bottom: 32px;
}
.vif-reading details {
  border-bottom: 1px solid var(--line);
}
.vif-reading details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  cursor: pointer;
  list-style: none;
  font-size: 16px;
  font-weight: 500;
}
.vif-reading details summary::-webkit-details-marker {
  display: none;
}
.vif-reading details summary span.icon {
  transition: transform 0.25s var(--ease);
}
.vif-reading details[open] summary span.icon {
  transform: rotate(45deg);
}
.vif-reading details p {
  padding-bottom: 18px;
  color: var(--muted);
  max-width: 64ch;
}
.vif-reading .hb-page-intro {
  margin-bottom: clamp(32px, 4vw, 56px);
}
.vif-reading .hb-page-intro h1 {
  font-size: clamp(36px, 3.4vw, 54px);
  margin-bottom: 12px;
}
.vif-reading .hb-page-intro p {
  color: var(--muted);
  font-size: 16px;
  max-width: 60ch;
}
.vif-reading .hb-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: clamp(48px, 6vw, 88px);
}
.vif-reading .hb-service-card {
  padding: 26px;
  background: var(--stone);
}
.vif-reading .hb-service-card .icon {
  margin-bottom: 18px;
}
.vif-reading .hb-service-card h2 {
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}
.vif-reading .hb-service-card p {
  color: var(--muted);
  font-size: 14px;
}
.vif-reading .hb-information-body {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(32px, 6vw, 112px);
  align-items: start;
}
.vif-reading .hb-information-nav {
  position: sticky;
  top: calc(var(--vif-header-height) + 24px);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--ink);
}
.vif-reading .hb-information-nav a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
}
.vif-reading .hb-information-nav a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vif-reading .hb-information-nav .icon,
.vif-reading .hb-information-nav .icon svg {
  width: 14px;
  height: 14px;
}
.vif-reading .hb-policy {
  max-width: 720px;
  padding-top: 24px;
  margin-bottom: 56px;
  border-top: 1px solid var(--ink);
}
.vif-reading .hb-policy h2 {
  font-size: clamp(24px, 2vw, 32px);
  margin-bottom: 16px;
}
.vif-reading .hb-policy h3 {
  margin: 22px 0 6px;
  font-weight: 500;
}
.vif-reading .hb-policy :is(p, ul) {
  margin-bottom: 14px;
  color: var(--ink-soft);
}
.vif-reading .hb-policy ul {
  padding-left: 20px;
}
.vif-reading .hb-policy-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 720px;
  padding: 26px 30px;
  background: var(--stone);
}
.vif-reading .hb-policy-action p {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* The shared product dialog opens beside the template root, so it carries Vif itself. */
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) {
  --ink: #111111;
  --paper: #f4f2ee;
  --stone: #e9e6e0;
  --line: #dedad3;
  --muted: #5f5c57;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 22px 28px 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 "Vif Sans", "Helvetica Neue", Arial, sans-serif;
  box-shadow: 0 40px 90px -40px rgba(22, 21, 19, 0.5);
  overscroll-behavior: contain;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog)::backdrop {
  background: rgba(22, 21, 19, 0.36);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) > [data-aris-close] {
  float: right;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 24px;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) :focus-visible {
  outline: 1.5px solid var(--ink);
  outline-offset: 2px;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) [data-aris-dialog-content] {
  clear: both;
  padding-top: 8px;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) [data-aris-dialog-content] h2 {
  margin: 0 0 16px;
  font: 500 24px/1.1 "Vif Sans", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.025em;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) [data-aris-dialog-content] :is(p, li) {
  margin: 0 0 14px;
  color: var(--muted);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table-wrap {
  overflow: auto;
  border-top: 1px solid var(--ink);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table :is(th, td) {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table th {
  font-weight: 500;
  color: var(--muted);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table button {
  min-width: 52px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: 500 13px/1.2 "Vif Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) .size-table button[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) :is(.size-guide-apply, .button) {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--paper);
  font: 500 14px/1 "Vif Sans", "Helvetica Neue", Arial, sans-serif;
  cursor: pointer;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) :is(.size-guide-apply, .button):disabled {
  background: var(--stone);
  border-color: var(--stone);
  color: var(--muted);
  cursor: not-allowed;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog):has([data-aris-dialog-content] > img) {
  width: auto;
  max-width: min(980px, calc(100vw - 32px));
  padding: 0;
  background: var(--stone);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog):has([data-aris-dialog-content] > img) > [data-aris-close] {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) [data-aris-dialog-content] > img {
  display: block;
  max-height: calc(100dvh - 32px);
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  object-fit: contain;
}
:is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog):has([data-aris-dialog-content] > img) [data-aris-dialog-content] {
  padding: 0;
}

/* Shared commerce drawer. */
.vif-storefront-template .aris-native-cart {
  position: fixed;
  inset: 0 0 0 auto;
  margin: 0;
  width: 450px;
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  overflow: hidden;
}
.vif-storefront-template .aris-native-cart svg.icon {
  width: 24px;
  height: 24px;
}
.vif-storefront-template .aris-native-cart[open] {
  display: flex;
  flex-direction: column;
  animation: vif-slide 0.36s var(--ease);
}
.vif-storefront-template .drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .drawer-header h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.vif-storefront-template .drawer-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font: 500 12px/1 var(--sans);
}
.vif-storefront-template .drawer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 24px 24px;
}
.vif-storefront-template .drawer-footer {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.vif-storefront-template .drawer-checkout {
  display: flex;
  width: 100%;
  justify-content: space-between;
  min-height: 54px;
}
.vif-storefront-template .drawer-checkout-price {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .drawer-footer > .drawer-amount-note:first-child {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--ink);
}
.vif-storefront-template .drawer-footer > .drawer-amount-note:first-child strong {
  font-size: 20px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .drawer-footer > .drawer-checkout:disabled {
  margin-top: 16px;
  background: var(--stone);
  border-color: var(--stone);
  color: var(--muted);
  opacity: 1;
}
.vif-storefront-template .drawer-footer .demo-note,
.vif-storefront-template .drawer-amount-note {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}
.vif-storefront-template .continue-shopping {
  display: inline-flex;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.vif-storefront-template .cart-line {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .cart-line-image img {
  width: 80px;
  height: 120px;
  object-fit: cover;
  background: var(--stone);
}
.vif-storefront-template .cart-line h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}
.vif-storefront-template .cart-components {
  color: var(--muted);
  font-size: 13px;
}
.vif-storefront-template .cart-line-price {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .cart-line-price s {
  color: var(--muted);
}
.vif-storefront-template .cart-line-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.vif-storefront-template .quantity-control {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
}
.vif-storefront-template .quantity-control button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
}
.vif-storefront-template .quantity-control span {
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template [data-store-action="cart-line-remove"] {
  display: flex;
  padding: 4px;
  border: 0;
  background: none;
}
.vif-storefront-template .shipping-message {
  margin: 16px 0 8px;
  padding: 14px 16px;
  background: var(--stone);
  font-size: 13px;
}
.vif-storefront-template .shipping-track {
  height: 2px;
  margin-top: 10px;
  background: var(--stone-deep);
  overflow: hidden;
}
.vif-storefront-template .shipping-track span {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: width 0.5s var(--ease);
}
.vif-storefront-template .drawer-delivery {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--muted);
}
.vif-storefront-template .drawer-subtotal {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .aris-native-cart .empty-state {
  margin: auto 0;
  padding: 64px 24px;
  text-align: center;
}
.vif-storefront-template .aris-native-cart .empty-state h3 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 10px;
}
.vif-storefront-template .aris-native-cart .empty-state p {
  color: var(--muted);
  margin-bottom: 24px;
}
.vif-storefront-template .drawer-payment-icons {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.vif-storefront-template .cart-discount {
  margin-bottom: 20px;
}
.vif-storefront-template .cart-discount > label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
}
.vif-storefront-template .cart-discount-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.vif-storefront-template .cart-discount input {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.vif-storefront-template .cart-discount input:focus {
  border-color: var(--ink);
}
.vif-storefront-template .cart-discount .button {
  min-height: 46px;
  height: 46px;
  padding: 12px 20px;
}
.vif-storefront-template .cart-discount.is-applied p {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.vif-storefront-template .cart-discount-remove {
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  text-decoration: underline;
}
.vif-storefront-template .cart-discount-error {
  margin-top: 8px;
  font-size: 12px;
  color: #a1311c;
}
.vif-storefront-template .drawer-savings {
  padding: 14px 24px;
  background: var(--stone);
  font-size: 13px;
}
.vif-storefront-template .cart-page {
  padding: clamp(36px, 4vw, 64px) 0 clamp(80px, 8vw, 128px);
}
.vif-storefront-template .cart-page > h1 {
  margin-bottom: 28px;
}
.vif-storefront-template .vif-cart-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 32px 0;
  font-size: 18px;
}
.vif-storefront-template .cart-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  margin-top: 8px;
}
.vif-storefront-template .cart-page-aside {
  position: sticky;
  top: calc(var(--vif-header-height) + 20px);
  height: max-content;
  padding: 28px;
  background: var(--stone);
}
.vif-storefront-template .cart-page-aside h2 {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 20px;
}
.vif-storefront-template .cart-page-aside > .button {
  width: 100%;
  margin: 20px 0;
}
.vif-storefront-template .vif-cart-suggest {
  margin-top: clamp(56px, 6vw, 96px);
}
.vif-storefront-template .vif-cart-suggest > h2 {
  margin-bottom: 24px;
}

/* Reviews on the product page: a quiet ledger. */
.vif-storefront-template .review-stars {
  display: inline-flex;
  gap: 2px;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;
}
.vif-storefront-template .native-review-star {
  position: relative;
  display: inline-block;
  color: var(--line);
  font-family: Arial, sans-serif;
  line-height: 1;
}
.vif-storefront-template .native-review-star > span {
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  color: var(--ink);
  white-space: nowrap;
}
.vif-storefront-template .product-review-summary {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 13px;
}
.vif-storefront-template .product-review-summary > strong {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .product-review-summary > strong > span {
  color: var(--muted);
}
.vif-storefront-template .review-summary-link {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vif-storefront-template .product-reviews {
  margin-bottom: clamp(80px, 8vw, 128px);
  scroll-margin-top: calc(var(--vif-header-height) + 24px);
}
.vif-storefront-template .reviews-heading {
  margin-bottom: 28px;
}
.vif-storefront-template .reviews-layout {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
}
.vif-storefront-template .reviews-overview {
  position: sticky;
  top: calc(var(--vif-header-height) + 20px);
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .review-average {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.vif-storefront-template .review-average strong {
  font-size: 56px;
  font-weight: 450;
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .review-average span {
  color: var(--muted);
}
.vif-storefront-template .reviews-overview > .review-stars {
  margin-top: 12px;
  font-size: 16px;
}
.vif-storefront-template .review-total {
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 13px;
}
.vif-storefront-template .review-distribution {
  display: grid;
  gap: 2px;
}
.vif-storefront-template .review-distribution button {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 32px;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  font-variant-numeric: tabular-nums;
  text-align: left;
}
.vif-storefront-template .review-distribution button > span:first-child {
  display: inline-flex;
  gap: 3px;
}
.vif-storefront-template .review-distribution button > span:last-child {
  color: var(--muted);
  text-align: right;
}
.vif-storefront-template .review-distribution button[aria-pressed="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vif-storefront-template .review-distribution button:disabled {
  opacity: 0.4;
  cursor: default;
}
.vif-storefront-template .review-rating-track {
  height: 2px;
  background: var(--line);
}
.vif-storefront-template .review-rating-track > span {
  display: block;
  height: 100%;
  background: var(--ink);
}
.vif-storefront-template .review-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}
.vif-storefront-template .review-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.vif-storefront-template .review-toolbar select {
  -webkit-appearance: none;
  appearance: none;
  height: 40px;
  padding: 0 28px 0 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 9px) 52% / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 4px) 52% / 5px 5px no-repeat;
  color: var(--ink);
  font: 500 14px/1 var(--sans);
  cursor: pointer;
}
.vif-storefront-template .review-toolbar select:hover,
.vif-storefront-template .review-toolbar select:focus-visible {
  border-bottom-color: var(--ink);
  outline: none;
}
.vif-storefront-template .review-results {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.vif-storefront-template .review-item {
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .review-item-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.vif-storefront-template .review-item h3:empty {
  display: none;
}
.vif-storefront-template .review-item h3 {
  margin-top: 10px;
  font: 500 15px/1.4 var(--sans);
}
.vif-storefront-template .review-item time {
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
}
.vif-storefront-template .review-body {
  margin-top: 10px;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
}
.vif-storefront-template .review-author {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-top: 12px;
  font-size: 13px;
}
.vif-storefront-template .review-author strong {
  font-weight: 500;
}
.vif-storefront-template .review-origin {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vif-storefront-template .review-empty {
  padding: 24px 0;
  color: var(--muted);
}
.vif-storefront-template .review-more {
  min-height: 46px;
  margin-top: 22px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--sans);
  transition: background 0.2s ease, color 0.2s ease;
}
.vif-storefront-template .review-more:hover {
  background: var(--ink);
  color: var(--paper);
}

/* Cart page lines. */
.vif-storefront-template .cart-page [data-store-slot="cart-empty"] {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-top: 1px solid var(--ink);
  border-radius: var(--radius-sm);
  background: none;
  text-align: left;
}
.vif-storefront-template [data-store-slot="cart-lines"] {
  border-top: 1px solid var(--ink);
}
.vif-storefront-template [data-store-slot="cart-lines"]:empty {
  border-top: 0;
}
.vif-storefront-template .uncover-cart-line {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  align-items: start;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.vif-storefront-template .uncover-cart-line[aria-busy="true"] {
  opacity: 0.6;
}
.vif-storefront-template .uncover-cart-line__image {
  display: block;
  width: 112px;
  height: 168px;
  object-fit: cover;
  background: var(--stone);
}
.vif-storefront-template .uncover-cart-line__copy {
  min-width: 0;
}
.vif-storefront-template .uncover-cart-line__copy > strong {
  display: block;
  font-size: 16px;
  font-weight: 500;
}
.vif-storefront-template .uncover-cart-line__copy > p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
}
.vif-storefront-template .uncover-cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 20px;
  margin-top: 18px;
}
.vif-storefront-template .uncover-cart-line__stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
}
.vif-storefront-template .uncover-cart-line__stepper button {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
}
.vif-storefront-template .uncover-cart-line__stepper button:hover:not(:disabled) {
  background: var(--stone);
}
.vif-storefront-template .uncover-cart-line__stepper button:disabled {
  opacity: 0.35;
}
.vif-storefront-template .uncover-cart-line__quantity {
  min-width: 26px;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .uncover-cart-line__remove {
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.vif-storefront-template .uncover-cart-line__remove:hover {
  color: var(--ink);
}
.vif-storefront-template .uncover-cart-line__price {
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vif-storefront-template .uncover-cart-totals {
  display: grid;
  gap: 10px;
  margin: 0;
}
.vif-storefront-template .uncover-cart-totals > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.vif-storefront-template .uncover-cart-totals dt {
  color: var(--muted);
}
.vif-storefront-template .uncover-cart-totals dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
}
.vif-storefront-template .uncover-cart-totals > .is-total {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--ink);
}
.vif-storefront-template .uncover-cart-totals > .is-total dt {
  color: var(--ink);
}
.vif-storefront-template .uncover-cart-totals > .is-total dd {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.vif-storefront-template [data-store-vacation-promise] {
  margin-bottom: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

/* A size is needed: the chips ask for it, never a hidden menu. */
@keyframes choice-nudge {
  20%,
  60% {
    transform: translateX(-5px);
  }
  40%,
  80% {
    transform: translateX(5px);
  }
}
.vif-storefront-template .variant-choice-options.is-missing {
  animation: choice-nudge 0.45s ease;
}
.vif-storefront-template .variant-choice-options.is-missing button:not(:disabled):not([aria-pressed="true"]) {
  border-color: #b42318;
  box-shadow: inset 0 0 0 1px #b42318;
}
.vif-storefront-template .aris-option:has(.variant-choice-options.is-missing) > label {
  color: #b42318;
}


/* Dialogs and drawers float as rounded panels, like the bar. */
.vif-storefront-template .vif-menu-dialog,
.vif-storefront-template .vif-filter-dialog {
  inset: 10px auto 10px 10px;
  height: calc(100dvh - 20px);
  max-height: calc(100dvh - 20px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-storefront-template .aris-native-cart {
  inset: 10px 10px 10px auto;
  height: calc(100dvh - 20px);
  max-height: calc(100dvh - 20px);
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-storefront-template .aris-native-cart .drawer-footer {
  background: var(--white);
}
.vif-storefront-template .drawer-count {
  background: var(--accent);
  color: var(--ink);
}
.vif-storefront-template .vif-search-dialog {
  inset: 10px 10px auto 10px;
  width: auto;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-storefront-template .vif-quick-dialog,
.vif-storefront-template .vif-newsletter-dialog {
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-menu-primary a {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 10px 0;
  font: 850 clamp(26px, 2.4vw, 34px) / 1.05 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
  transition: color 0.2s ease, transform 0.35s var(--ease);
}
.vif-menu-primary a sup {
  font: 650 13px/1 var(--sans);
  letter-spacing: 0;
  color: var(--accent);
}
.vif-menu-primary a:hover {
  color: var(--accent);
  transform: translateX(6px);
}
.vif-menu-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 18px;
}
.vif-menu-features a {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 650;
}
.vif-menu-features img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-sm);
}
.vif-menu-secondary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
}
.vif-menu-secondary a {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--paper);
  font-size: 13.5px;
  font-weight: 600;
}
.vif-menu-secondary a:hover {
  background: var(--ink);
  color: var(--white);
}
.vif-storefront-template :is(.vif-chips span, .vif-collection-links a, .variant-choice-options button, .vif-quick-chips button) {
  border-radius: 999px;
}
.vif-storefront-template .vif-check input[type="checkbox"] {
  border-radius: 6px;
}

.vif-storefront-template :is(h1, h2) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.vif-lookbook-heading {
  flex-wrap: wrap;
}
.vif-reading .native-theme-block > img,
.vif-lookbook-grid img,
.vif-storefront-template .hb-service-card,
.vif-storefront-template .hb-policy-action,
.vif-storefront-template .cart-page-aside,
.vif-storefront-template .pdp-story > img,
.vif-storefront-template .review-card {
  border-radius: var(--radius-lg);
}
.vif-storefront-template .hb-policy-action .button {
  flex: none;
}

/* Mosaic: the families as a collage, the store's name filled with a photograph. */
.vif-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: clamp(150px, 15vw, 250px);
  gap: 12px;
}
.vif-mosaic-tile,
.vif-mosaic-word {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--stone);
  isolation: isolate;
}
.vif-mosaic-tile {
  grid-column: span 3;
  grid-row: span 2;
}
.vif-mosaic-n3 .vif-mosaic-tile,
.vif-mosaic-n4 .vif-mosaic-tile {
  grid-column: span 4;
}
.vif-mosaic-n5 .vif-mosaic-0,
.vif-mosaic-n5 .vif-mosaic-1,
.vif-mosaic-n5 .vif-mosaic-2 {
  grid-column: span 4;
}
.vif-mosaic-n5 .vif-mosaic-3,
.vif-mosaic-n5 .vif-mosaic-4 {
  grid-column: span 3;
}
.vif-mosaic-n6 .vif-mosaic-tile {
  grid-column: span 4;
}
.vif-mosaic-tile img {
  position: absolute;
  top: -8%;
  left: 0;
  width: 100%;
  height: 116%;
  object-fit: cover;
  transition: transform 1.2s var(--ease);
}
.vif-mosaic-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.5) 0%, rgba(10, 10, 10, 0) 42%);
  transition: opacity 0.4s ease;
}
.vif-mosaic-tile:hover img {
  transform: scale(1.07);
}
.vif-mosaic-label {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--on-photo);
  font: 850 clamp(20px, 1.8vw, 30px) / 1 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.04em;
  transition: transform 0.5s var(--ease);
}
.vif-mosaic-count {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--white);
  color: var(--ink);
  font: 700 13px/1 var(--sans);
  letter-spacing: 0;
  transform: scale(0.6);
  opacity: 0;
  transition: transform 0.45s var(--spring), opacity 0.3s ease;
}
.vif-mosaic-tile:hover .vif-mosaic-label {
  transform: translateY(-4px);
}
.vif-mosaic-tile:hover .vif-mosaic-count {
  transform: none;
  opacity: 1;
}
.vif-mosaic-word {
  grid-column: span 6;
  grid-row: span 2;
  display: grid;
  place-items: center;
  container-type: size;
  background: var(--paper);
  border-radius: 0;
}
.vif-mosaic-n3 .vif-mosaic-word,
.vif-mosaic-n5 .vif-mosaic-word {
  grid-column: span 6;
}
.vif-mosaic-n4 .vif-mosaic-word,
.vif-mosaic-n6 .vif-mosaic-word {
  grid-column: span 12;
  grid-row: span 1;
}
.vif-word-photo {
  position: absolute;
  inset: -12% -6%;
}
.vif-word-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate3d(var(--vif-drift, 0px), 0, 0) scale(1.08);
  /* Highlights stay under the page colour, so only the letters show the photograph. */
  filter: brightness(0.9) saturate(1.1);
}
.vif-word-mask {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: var(--paper);
  color: #000;
  mix-blend-mode: lighten;
  font: 900 min(calc(140cqw / var(--vif-len, 6)), 84cqh) / 0.8 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.vif-word-l1 {
  --vif-len: 1;
}
.vif-word-l2 {
  --vif-len: 2;
}
.vif-word-l3 {
  --vif-len: 3;
}
.vif-word-l4 {
  --vif-len: 4;
}
.vif-word-l5 {
  --vif-len: 5;
}
.vif-word-l6 {
  --vif-len: 6;
}
.vif-word-l7 {
  --vif-len: 7;
}
.vif-word-l8 {
  --vif-len: 8;
}
.vif-word-l9 {
  --vif-len: 9;
}
.vif-word-l10 {
  --vif-len: 10;
}
.vif-word-l11 {
  --vif-len: 11;
}
.vif-word-l12 {
  --vif-len: 12;
}

/* Chapters: a scene that stays while its pictures stack. */
.vif-scene {
  position: relative;
  background: var(--ink);
  color: var(--white);
}
.vif-scene-cover {
  position: relative;
  height: min(100svh, 980px);
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}
.vif-scene-cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vif-scene-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(10, 10, 10, 0.55) 0%, rgba(10, 10, 10, 0) 50%);
}
.vif-scene-cover figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(28px, 4vw, 64px);
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr);
  align-items: end;
  gap: 32px;
  margin-inline: auto;
}
.vif-scene-cover h2 {
  font-size: clamp(48px, 7vw, 124px);
  line-height: 0.86;
  letter-spacing: -0.05em;
  white-space: pre-line;
}
.vif-scene-cover figcaption > div {
  max-width: 40ch;
  font-size: 16.5px;
  font-weight: 500;
}
.vif-scene-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
  gap: 14px;
  padding-block: 14px clamp(48px, 5vw, 80px);
}
.vif-scene-index {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(22px, 2.4vw, 36px);
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--white);
  color: var(--ink);
}
.vif-scene-index > .text-link {
  margin-top: auto;
  align-self: flex-start;
}
.vif-scene-index ol {
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.7s var(--ease);
}
.vif-scene-index li a {
  display: block;
  padding: 4px 0;
  font: 850 clamp(30px, 3vw, 52px) / 1.02 var(--display);
  font-stretch: 125%;
  letter-spacing: -0.045em;
  color: var(--faint);
  transition: color 0.4s ease, transform 0.5s var(--ease);
}
.vif-scene-index li.is-active a,
.vif-scene-index li a:hover {
  color: var(--ink);
}
.vif-scene-index li.is-active a {
  transform: translateX(10px);
}
.vif-scene-index .text-link {
  align-self: flex-start;
}
.vif-scene-frames {
  position: relative;
  display: grid;
  gap: 14px;
}
.vif-scene-frame {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16/10;
  border-radius: var(--radius-lg);
  background: var(--ink-soft);
  color: var(--on-photo);
}
.vif-storefront-template .vif-scene-frame {
  color: var(--on-photo);
}
.vif-scene-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.vif-scene-frame:hover img {
  transform: scale(1.04);
}
.vif-scene-caption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 14px;
  width: min(460px, calc(100% - 32px));
  padding: 16px 16px 16px 20px;
  border-radius: var(--radius);
  background: rgba(20, 18, 16, 0.38);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.vif-scene-step {
  grid-row: 1 / span 2;
  font: 900 30px/1 var(--display);
  font-stretch: 125%;
  color: var(--accent);
}
.vif-scene-caption strong {
  font-size: 17px;
  font-weight: 750;
}
.vif-scene-caption > span:not(.vif-scene-step):not(.vif-orb) {
  grid-column: 2;
  font-size: 13.5px;
  opacity: 0.88;
}
.vif-scene-caption .vif-orb {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.vif-scene-frame:hover .vif-orb {
  background: var(--accent);
  color: var(--ink);
}
.vif-scene-frame:hover .vif-orb > span.icon {
  transform: rotate(0deg);
}
/* The live scene (wide screens, with its script): pinned, stacked. */
.vif-scene.is-live .vif-scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.vif-scene.is-live .vif-scene-cover {
  position: absolute;
  inset: 0;
  height: auto;
  will-change: transform, border-radius;
}
.vif-scene.is-live .vif-scene-panel {
  position: absolute;
  inset: 0;
  z-index: 2;
  height: 100vh;
  padding-block: 14px;
  grid-template-rows: minmax(0, 1fr);
  will-change: transform;
}
.vif-scene.is-live .vif-scene-index ol {
  position: absolute;
  left: clamp(22px, 2.4vw, 36px);
  right: clamp(22px, 2.4vw, 36px);
  top: 50%;
}
.vif-scene.is-live .vif-scene-frames {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.vif-scene.is-live .vif-scene-frame {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  will-change: transform;
}

/* Cover hotspots and the piece they point at. */
.vif-dots {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.vif-dot {
  position: absolute;
  display: none;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
}
.vif-dots.is-ready .vif-dot {
  display: block;
}
.vif-dot span,
.vif-dot::before {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.vif-dot::before {
  content: "";
  background: rgba(255, 255, 255, 0.35);
  animation: vif-ping 2.2s var(--ease) infinite;
}
.vif-dot span {
  inset: 9px;
  background: var(--white);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s var(--spring), background 0.25s ease;
}
.vif-dot:hover span {
  transform: scale(1.35);
  background: var(--accent);
}
.vif-dot[aria-pressed="true"] span {
  transform: scale(1.35);
  background: var(--ink);
  box-shadow: 0 0 0 3px var(--white), 0 4px 14px rgba(0, 0, 0, 0.4);
}
@keyframes vif-ping {
  0% {
    transform: scale(0.6);
    opacity: 1;
  }
  80%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}
.vif-shot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: min(380px, 100%);
}
.vif-shot-label {
  font-size: 13px;
  font-weight: 650;
  opacity: 0.85;
}
.vif-shot-item {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  padding: 10px;
  border-radius: var(--radius);
  background: rgba(20, 18, 16, 0.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.18);
  animation: vif-fade 0.4s ease;
}
.vif-shot-item img {
  width: 92px;
  height: 120px;
  border-radius: 12px;
  object-fit: cover;
}
.vif-shot-item > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 4px 2px 0;
}
.vif-shot-item h3 {
  font-size: 15px;
  font-weight: 700;
}
.vif-shot-item p {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.9;
}
.vif-shot-actions {
  display: flex;
  gap: 6px;
  margin-top: auto;
}
.vif-storefront-template .vif-shot-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  background: transparent;
  color: var(--white);
  font-size: 13px;
  font-weight: 650;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.vif-storefront-template .vif-shot-link:hover,
.vif-storefront-template .vif-shot-add {
  border-color: var(--white);
  background: var(--white);
  color: var(--ink);
}
.vif-storefront-template .vif-shot-add:hover {
  border-color: var(--accent);
  background: var(--accent);
}
.vif-shot-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.vif-shot-nav span {
  flex: 1;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(20, 18, 16, 0.4);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.vif-shot-nav .icon-button {
  width: 36px;
  height: 36px;
  background: rgba(20, 18, 16, 0.4) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
.vif-shot-nav [data-vif-shot-step="-1"] > span.icon {
  transform: rotate(180deg);
}

/* Product page: one picture after another, a floating strip of thumbnails, and a buy box. */
@media (min-width: 1024px) {
  .vif-storefront-template .product-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(380px, 1fr);
  }
  .vif-storefront-template .product-gallery {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
  .vif-storefront-template .gallery-stage {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px;
  }
  .vif-storefront-template .gallery-stage .slide-content,
  .vif-storefront-template .gallery-stage [data-aris-slide] {
    grid-column: auto !important;
    aspect-ratio: 4/5 !important;
    border-radius: var(--radius-lg);
  }
  .vif-storefront-template .gallery-thumbnails {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--vif-header-height) + 20px);
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
    border-radius: 999px;
    background: var(--white);
    box-shadow: 0 10px 30px -18px rgba(17, 17, 17, 0.35);
  }
  .vif-storefront-template .product-gallery:not(:has(.gallery-thumb + .gallery-thumb)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-storefront-template .product-gallery:not(:has(.gallery-thumb + .gallery-thumb)) .gallery-thumbnails {
    display: none !important;
  }
  .vif-storefront-template .gallery-thumb {
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.55;
    transition: opacity 0.2s ease, transform 0.3s var(--spring);
  }
  .vif-storefront-template .gallery-thumb:hover {
    opacity: 1;
    transform: scale(1.05);
  }
  .vif-storefront-template .gallery-thumb[aria-pressed="true"],
  .vif-storefront-template .gallery-thumb.selected {
    opacity: 1;
  }
  .vif-storefront-template .gallery-thumb span,
  .vif-storefront-template .gallery-thumb img {
    display: block;
    width: 58px;
    height: 72px;
    border-radius: 999px;
    object-fit: cover;
  }
  .vif-storefront-template .gallery-thumb[aria-pressed="true"] img {
    box-shadow: 0 0 0 2px var(--ink);
  }
  .vif-storefront-template .gallery-navigation {
    display: none !important;
  }
  .vif-storefront-template .product-purchase {
    top: var(--vif-buy-top, calc(var(--vif-header-height) + 16px)) !important;
  }
}
.vif-storefront-template .product-purchase {
  padding: clamp(20px, 2vw, 30px) !important;
  border-radius: var(--radius-lg);
  background: var(--white);
}
.vif-feature .product-purchase {
  padding: 0 !important;
}
.vif-buy-banner {
  margin: calc(clamp(20px, 2vw, 30px) * -1) calc(clamp(20px, 2vw, 30px) * -1) 22px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--ink);
  color: var(--white);
}
.vif-feature .vif-buy-banner {
  margin: 0 0 22px;
  border-radius: var(--radius);
}
.vif-buy-banner summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 20px;
  list-style: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 650;
}
.vif-buy-banner summary::-webkit-details-marker {
  display: none;
}
.vif-buy-banner summary > span:first-child::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: 1px;
}
.vif-buy-banner summary > span.icon {
  transform: rotate(90deg);
  transition: transform 0.3s var(--ease);
}
.vif-buy-banner[open] summary > span.icon {
  transform: rotate(-90deg);
}
.vif-buy-banner ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0 20px 18px;
  list-style: none;
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.8);
}
.vif-buy-banner li strong {
  color: var(--white);
  margin-right: 6px;
}
.vif-storefront-template .product-purchase .pdp-usps {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.vif-pdp-colour {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 18px;
  font-size: 14px;
}
.vif-pdp-colour p > span {
  color: var(--muted);
}
.vif-swatch {
  display: block;
  width: 40px;
  height: 40px;
  padding: 3px;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px var(--ink);
}
.vif-swatch img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 25%;
}
.vif-option-value {
  margin-left: 4px;
  font-weight: 750;
}
.vif-storefront-template .product-purchase .product-status[data-public-product-stock] {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 0;
  color: #2f7d4a;
  font-weight: 650;
}
.vif-storefront-template .product-purchase .product-status[data-public-product-stock]::before {
  content: "";
  width: 9px;
  height: 9px;
  margin: 0;
  border-radius: 50%;
  background: #2f9e5a;
  box-shadow: 0 0 0 4px rgba(47, 158, 90, 0.18);
  animation: vif-breathe 2s ease-in-out infinite;
}
@keyframes vif-breathe {
  50% {
    box-shadow: 0 0 0 7px rgba(47, 158, 90, 0.08);
  }
}
.vif-storefront-template .purchase-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-top: 14px;
}
.vif-qty {
  display: flex;
  align-items: center;
  flex: none;
  height: 54px;
  padding: 0 4px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
}
.vif-qty button {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: 18px;
}
.vif-qty button:hover {
  background: var(--paper);
}
.vif-qty input {
  width: 32px;
  border: 0;
  background: transparent;
  text-align: center;
  font-weight: 700;
  -moz-appearance: textfield;
}
.vif-qty input::-webkit-inner-spin-button,
.vif-qty input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vif-storefront-template .vif-buy-now {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  color: var(--ink);
}
.vif-storefront-template .vif-buy-now::before {
  background: var(--accent);
}
.vif-delivery-card {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.vif-delivery-card > .icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--paper);
}
.vif-delivery-card p {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}
.vif-delivery-card span {
  color: var(--muted);
  font-size: 13px;
}
.vif-storefront-template .product-purchase .product-details {
  margin-top: 16px;
  padding: 0 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
}
.vif-storefront-template .product-purchase .product-details details {
  border-top: 1px solid var(--line);
}
.vif-storefront-template .product-purchase .product-details > :first-child details,
.vif-storefront-template .product-purchase .product-details > details:first-child {
  border-top: 0;
}
.vif-storefront-template .product-purchase .product-details > :last-child details,
.vif-storefront-template .product-purchase .product-details > details:last-child {
  border-bottom: 0;
}
.vif-pairs {
  margin-top: 22px;
}
.vif-pairs h2 {
  margin-bottom: 12px;
  font: 750 15px/1.3 var(--sans);
  letter-spacing: 0;
}
.vif-pairs > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.vif-pairs a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.vif-pairs img {
  width: 100%;
  aspect-ratio: 3/4;
  margin-bottom: 4px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  transition: transform 0.5s var(--ease);
}
.vif-pairs a:hover img {
  transform: translateY(-3px);
}
.vif-pairs strong {
  font-weight: 700;
}

/* The letter: a floating card with a photograph, at the corner of the page. */
.vif-storefront-template .vif-newsletter-dialog {
  inset: auto 16px 16px auto;
  margin: 0;
  width: min(380px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 10px 10px 22px;
  text-align: center;
}
.vif-storefront-template .vif-newsletter-dialog::backdrop {
  background: rgba(17, 17, 17, 0.25);
}
.vif-newsletter-photo img {
  width: 100%;
  aspect-ratio: 5/4;
  margin-bottom: 16px;
  border-radius: var(--radius);
  object-fit: cover;
}
.vif-storefront-template .vif-newsletter-dialog h2 {
  padding: 0 12px;
  font-size: 26px;
}
.vif-storefront-template .vif-newsletter-dialog > p {
  padding: 0 14px;
  margin: 8px 0 16px;
}
.vif-storefront-template .vif-newsletter-dialog .cst-news {
  padding: 0 8px;
}
.vif-storefront-template .vif-newsletter-dialog .cst-news form {
  background: var(--paper);
}
.vif-newsletter-dialog > .vif-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  background: var(--white) !important;
}
/* Opened without blocking the page: it stays at the corner of the screen, never of the document. */
.vif-storefront-template .vif-newsletter-dialog[open]:not(:modal) {
  position: fixed;
  z-index: 90;
  inset: auto 16px 16px auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 0 24px 64px rgba(17, 17, 17, 0.24);
  animation: vif-letter-in 0.6s var(--ease) both;
}
.vif-newsletter-dialog[open]:not(:modal) .vif-newsletter-photo img {
  max-height: 34vh;
}
.vif-storefront-template .vif-newsletter-dialog .cst-news :is(small, [data-cst-news-note]) {
  display: block;
  text-align: center;
}
@keyframes vif-letter-in {
  from {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.97);
  }
}
@media (max-width: 640px) {
  .vif-storefront-template .vif-newsletter-dialog[open]:not(:modal) {
    inset: auto 12px 12px 12px;
    width: auto;
  }
  .vif-newsletter-dialog[open]:not(:modal) .vif-newsletter-photo img {
    max-height: 26vh;
  }
}
@media (prefers-reduced-motion: reduce) {
  .vif-storefront-template .vif-newsletter-dialog[open]:not(:modal) {
    animation: none;
  }
}

/* Small badges on cards. */
.vif-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 1023px) {
  .vif-mosaic {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    gap: 8px;
  }
  /* Pairs of families, then the name; an odd last family takes the full width. */
  .vif-mosaic-n3 .vif-mosaic-2,
  .vif-mosaic-n5 .vif-mosaic-4 {
    grid-column: span 2 !important;
    aspect-ratio: 16/10 !important;
  }
  .vif-mosaic .vif-mosaic-tile {
    grid-column: span 1 !important;
    grid-row: auto;
    aspect-ratio: 3/4;
  }
  .vif-mosaic .vif-mosaic-word {
    grid-column: span 2 !important;
    grid-row: auto;
    aspect-ratio: 2/1;
  }
  .vif-mosaic-count {
    transform: none;
    opacity: 1;
  }
  .vif-scene-cover {
    height: 80svh;
  }
  .vif-scene-cover figcaption {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }
  .vif-scene-panel {
    grid-template-columns: minmax(0, 1fr);
    padding-inline: 0;
    width: 100%;
  }
  .vif-scene-index {
    display: none;
  }
  .vif-scene-frames {
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
  }
  .vif-scene-frame {
    aspect-ratio: 3/4;
    scroll-snap-align: start;
  }
  .vif-scene-caption {
    right: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
  }
  .vif-shot {
    width: 100%;
  }
  .vif-shot-item {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .vif-shot-item img {
    width: 64px;
    height: 84px;
  }
  .vif-storefront-template .product-purchase {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .vif-pairs > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The families arrive one after another (only with the presentation script). */
.vif-mosaic-motion .vif-mosaic-tile,
.vif-mosaic-motion .vif-mosaic-word {
  clip-path: inset(22% 0 0 0 round var(--radius));
  opacity: 0;
  transition: clip-path 1.1s var(--ease) var(--vif-delay, 0s), opacity 0.6s ease var(--vif-delay, 0s);
}
.vif-mosaic-motion .vif-mosaic-word {
  clip-path: inset(0 36% 0 36%);
}
.vif-mosaic-motion .vif-mosaic-tile.is-in,
.vif-mosaic-motion .vif-mosaic-word.is-in {
  clip-path: inset(0 0 0 0 round var(--radius));
  opacity: 1;
}
.vif-mosaic-motion .vif-mosaic-word.is-in {
  clip-path: inset(0 0 0 0);
}
.vif-scene.is-live .vif-scene-cover {
  transform-origin: 50% 40%;
}
.vif-scene.is-live .vif-scene-frame {
  transform: translate3d(0, 104%, 0);
}
.vif-scene.is-live .vif-scene-frame:first-child {
  transform: none;
}
@media (max-width: 768px) {
  .vif-dots {
    display: none;
  }
}

/* Motion keyframes. */
@keyframes vif-fade {
  from {
    opacity: 0;
  }
}
@keyframes vif-drop {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
}
@keyframes vif-slide {
  from {
    opacity: 0;
    transform: translateX(32px);
  }
}
@keyframes vif-slide-left {
  from {
    opacity: 0;
    transform: translateX(-32px);
  }
}
@keyframes vif-rise {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
}
@keyframes vif-settle {
  from {
    transform: translate3d(0, var(--vif-shift, 0px), 0) scale(1.12);
  }
}
.vif-motion .vif-hero-media {
  animation: vif-settle 2.2s var(--ease) both;
}
.vif-motion .vif-hero-side > * {
  animation: vif-rise 1s var(--ease) both;
}
.vif-motion .vif-hero-side > :nth-child(2) {
  animation-delay: 0.12s;
}
.vif-motion .vif-hero-side > :nth-child(3) {
  animation-delay: 0.24s;
}
.vif-motion .vif-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.9s ease,
    transform 1.1s var(--ease);
}
.vif-motion .vif-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* The drops open from a smaller frame to the full card. */
.vif-motion [data-vif-open-up] {
  clip-path: inset(9% 9% 9% 9% round var(--radius-lg));
  transition: clip-path 1.3s var(--ease);
}
.vif-motion [data-vif-open-up] img {
  transform: scale(1.18);
  transition: transform 1.6s var(--ease);
}
.vif-motion [data-vif-open-up].is-in {
  clip-path: inset(0 0 0 0 round var(--radius-lg));
}
.vif-motion [data-vif-open-up].is-in img {
  transform: none;
}
.vif-motion .vif-drop:hover [data-vif-open-up].is-in img {
  transform: scale(1.05);
}

@media (min-width: 1024px) {
  .vif-storefront-template .gallery-stage > [data-aris-slide][hidden] {
    display: block !important;
  }
  /* One photograph, or an odd number: the first one opens the page full width. */
  .vif-storefront-template .gallery-stage:not(:has([data-aris-slide="1"])) .slide-content {
    grid-column: 1 / -1;
    aspect-ratio: 4/5;
  }
  .vif-storefront-template .gallery-stage:has([data-aris-slide="2"]):not(:has([data-aris-slide="3"])) [data-aris-slide="0"],
  .vif-storefront-template .gallery-stage:has([data-aris-slide="4"]):not(:has([data-aris-slide="5"])) [data-aris-slide="0"] {
    grid-column: 1 / -1;
    aspect-ratio: 4/5;
  }
}
@media (max-width: 1279px) {
  .vif-desktop-nav > a:nth-child(n + 4) {
    display: none;
  }
  .vif-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .vif-grid > .vif-card:nth-child(4) {
    display: none;
  }
  .vif-hero-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}
@media (max-width: 1023px) {
  html.vif-storefront-template {
    scroll-padding-top: 100px;
  }
  .vif-storefront-template {
    --vif-header-height: 96px;
  }
  .vif-desktop-nav,
  .vif-bag-label {
    display: none !important;
  }
  /* 19/10 : « Red Boots Design Shop » ran on three lines below the bar on a
     tablet. The centred name takes the room the actions leave it (170px a
     side), up to the desktop's 300px; a name too long for two lines makes the
     bar taller instead of spilling below it. */
  .vif-bar {
    container-type: inline-size;
    height: auto;
    min-height: 56px;
    padding: 2px 6px;
    gap: 6px;
  }
  .vif-header .brand {
    font-size: 24px;
    max-width: 180px;
    max-width: min(300px, 100cqw - 340px);
  }
  .vif-header .vif-bag {
    height: 44px;
    margin-left: 2px;
    padding: 0 6px 0 12px;
  }
  .vif-header .vif-bag > .icon {
    display: inline-flex;
  }
  .vif-header .vif-bag .cart-count {
    min-width: 26px;
    height: 26px;
    font-size: 12px;
  }
  .vif-section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
  }
  .vif-lookbook-heading h2 {
    font-size: clamp(40px, 11vw, 64px);
  }
  .vif-rail-arrows {
    display: none;
  }
  .vif-rail {
    grid-auto-columns: 68%;
    gap: 10px;
  }
  .vif-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 10px;
  }
  .vif-grid > .vif-card:nth-child(4) {
    display: flex;
  }
  .vif-card .card-info {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 10px;
  }
  .vif-card .card-info h3 {
    font-size: 14.5px;
  }
  .vif-card-price {
    font-size: 14px;
  }
  .vif-card-add {
    display: none;
  }
  .vif-hero {
    min-height: 92svh;
  }
  .vif-hero-copy h1 {
    max-width: none;
    font-size: clamp(44px, 12.2vw, 96px);
  }
  .vif-hero-media :is(img, video) {
    object-position: 38% 18%;
  }
  .vif-hero-word {
    top: 30%;
  }
  .vif-hero-text {
    font-size: 15.5px;
  }
  .vif-look {
    display: none;
  }
  .vif-drops {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .vif-drop {
    aspect-ratio: 4/5;
  }
  .vif-tablist {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vif-tablist [role="tab"] {
    flex: none;
  }
  .vif-lookbook-stage {
    overflow: visible;
  }
  .vif-lookbook-track {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    transform: none !important;
  }
  .vif-lookbook-track::-webkit-scrollbar {
    display: none;
  }
  .vif-look-card {
    width: 72vw;
    scroll-snap-align: start;
  }
  .vif-look-1,
  .vif-look-2 {
    margin-top: 0;
  }
  .vif-story {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .vif-closing {
    min-height: 80svh;
  }
  .vif-values {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
  .vif-footer-news {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .vif-footer-grid {
    display: block;
    padding: 8px 0;
  }
  .vif-footer-group {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  }
  .vif-footer-group > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
  }
  .vif-footer-group > summary span.icon {
    display: block;
    transition: transform 0.25s var(--ease);
  }
  .vif-footer-group[open] > summary span.icon {
    transform: rotate(45deg);
  }
  .vif-footer-group[open] > nav {
    padding-bottom: 18px;
  }
  .vif-footer-group > summary h2 {
    font-size: 16px;
    color: var(--white);
  }
  .vif-footer-bottom {
    flex-wrap: wrap;
    gap: 10px 20px;
  }
  .vif-footer-bottom > nav {
    margin-left: 0;
  }
}
@media (max-width: 1023px) {
  .vif-filter-toolbar {
    gap: 12px;
  }
  .vif-collection-links {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
  }
  .vif-storefront-template .product-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    margin-top: 0;
    margin-bottom: 72px;
  }
  .vif-storefront-template .product-gallery {
    width: 100%;
  }
  .vif-storefront-template .gallery-stage {
    display: block;
  }
  .vif-storefront-template .slide-content,
  .vif-storefront-template .gallery-stage .slide-content {
    aspect-ratio: 3/4;
  }
  .vif-storefront-template .gallery-thumbnails {
    display: flex;
    gap: 6px;
    padding: 8px var(--gutter) 0;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .vif-storefront-template .product-gallery:not(:has(.gallery-thumb + .gallery-thumb)) .gallery-thumbnails {
    display: none;
  }
  .vif-storefront-template .gallery-thumb {
    flex: none;
    padding: 0;
    border: 0;
    background: none;
    opacity: 0.45;
    transition: opacity 0.2s ease;
  }
  .vif-storefront-template .gallery-thumb[aria-pressed="true"],
  .vif-storefront-template .gallery-thumb.selected {
    opacity: 1;
  }
  .vif-storefront-template .gallery-thumb span,
  .vif-storefront-template .gallery-thumb img {
    display: block;
    width: 44px;
    height: 66px;
    object-fit: cover;
  }
  .vif-storefront-template .gallery-navigation {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    z-index: 3;
  }
  .vif-storefront-template .gallery-navigation button {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: none;
  }
  .vif-storefront-template .gallery-navigation .icon,
  .vif-storefront-template .gallery-navigation .icon svg {
    width: 16px;
    height: 16px;
  }
  .vif-storefront-template .gallery-navigation button:first-child span.icon {
    transform: rotate(180deg);
  }
  .vif-storefront-template .product-purchase {
    position: static;
    width: calc(100% - var(--gutter) * 2);
    max-width: 640px;
    margin-inline: auto;
    padding-top: 22px;
  }
  .vif-storefront-template .pdp-story,
  .vif-storefront-template .pdp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 72px;
  }
  .vif-storefront-template .review-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-storefront-template .cart-page-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
  .vif-lookbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vif-reading .hb-information-body,
  .vif-story-page {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-reading .hb-information-nav {
    position: static;
  }
  .vif-search-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .vif-search-products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .vif-quick-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-quick-image img {
    aspect-ratio: 4/5;
  }
  .vif-quick-purchase {
    padding: 24px;
  }
  .vif-storefront-template .reviews-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-storefront-template .reviews-overview,
  .vif-storefront-template .cart-page-aside {
    position: static;
  }
  .vif-storefront-template .vif-cart-suggest .vif-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* The shared mobile chrome hides header links; Vif keeps search and the account in reach. */
@media (max-width: 1023px) {
  .vif-storefront-template .vif-header .header-actions > :is(a[data-store-action="account-open"], .vif-search-trigger) {
    display: inline-flex !important;
  }
}
@media (max-width: 599px) {
  .vif-filter-toolbar p {
    display: none;
  }
  .vif-search-form input {
    font-size: 24px;
  }
  .vif-storefront-template .vif-filter-dialog,
  .vif-storefront-template .vif-menu-dialog {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  .vif-storefront-template .sticky-atc-photo {
    display: none;
  }
  .vif-storefront-template .sticky-atc-button {
    min-width: 0;
    max-width: 58%;
    font-size: 13px;
    padding: 12px 16px;
  }
  .vif-storefront-template .cart-line {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
  }
  .vif-storefront-template .cart-line-image img {
    width: 64px;
    height: 96px;
  }
  .vif-storefront-template .aris-native-cart {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
  }
  .vif-storefront-template :is(.drawer-body, .drawer-header, .drawer-footer) {
    padding-inline: 16px;
  }
  .vif-lookbook-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .vif-storefront-template .uncover-cart-line {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 16px;
  }
  .vif-storefront-template .uncover-cart-line__image {
    width: 80px;
    height: 120px;
  }
  .vif-storefront-template .uncover-cart-line__price {
    grid-column: 2;
  }
  :is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog) {
    width: 100vw;
    max-width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    padding: 18px 16px 28px;
  }
  :is(.vif-storefront-template dialog.pdp-info-dialog, body:has(.vif-storefront-template) > dialog.pdp-info-dialog):has([data-aris-dialog-content] > img) {
    margin: auto;
  }
}
@media (max-width: 599px) {
  /* « Aris Heartmade » whole, never « Heartma / de », never under the icons
     (13/10): on a phone the name takes the room left between the menu and
     the actions instead of a centred third the actions overflow into. */
  .vif-bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .vif-header .brand {
    font-size: 17px;
    max-width: 100%;
    justify-self: start;
    text-align: left;
    /* A word wider than the whole room (« Supercalifragilistic… ») breaks
       rather than run under the icons; « Heartmade » always fits. */
    overflow-wrap: break-word;
  }
  .vif-header .header-actions .icon-button {
    width: 38px;
    height: 38px;
    padding: 9px;
  }
  .vif-hero-word span {
    -webkit-text-stroke-width: 1.5px;
  }
  .vif-ticker span {
    padding: 12px 18px;
  }
  .vif-ticker i {
    width: 10px;
    height: 10px;
  }
}
@media (max-width: 359px) {
  /* 19/10 : at 320px « Red Boots Design Shop » had 72px between the menu and
     the actions, four lines, 13px below the bar. The buttons draw closer
     (same icons, same pill) and the name steps down to 14px so that
     « Heartmade » still fits whole. */
  .vif-bar {
    gap: 4px;
  }
  .vif-header .vif-menu-trigger {
    width: 38px;
    height: 38px;
    padding: 9px;
  }
  .vif-header .header-actions {
    gap: 0;
  }
  .vif-header .header-actions .icon-button {
    width: 34px;
    height: 34px;
    padding: 7px;
  }
  .vif-header .vif-bag {
    gap: 5px;
    padding: 0 4px 0 9px;
  }
  .vif-header .brand {
    font-size: 14px;
    font-size: clamp(14px, (100cqw - 180px) / 7, 17px);
  }
}
@media (max-width: 560px) {
  .vif-storefront-template .cst-news form {
    flex-direction: row !important;
    align-items: center !important;
  }
  .vif-storefront-template .cst-news input[type="email"] {
    width: auto !important;
    flex: 1 !important;
  }
  .vif-storefront-template .cst-news button {
    width: auto !important;
  }
}
@media (hover: none) {
  .vif-card:hover .vif-card-alternate {
    opacity: 0;
  }
  .vif-card:hover .vif-card-media img {
    transform: none;
  }
  .vif-storefront-template .vif-quick {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  html.vif-storefront-template {
    scroll-behavior: auto;
  }
  .vif-storefront-template *,
  .vif-storefront-template *:before,
  .vif-storefront-template *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .vif-storefront-template .vif-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* The returns line of the buy box: the promise, then the link under it
   (« Returns within 30 daysRead the terms » ran together, 13/10). */
.vif-storefront-template .hb-return-terms { display: flex; gap: 12px; align-items: flex-start; padding: 14px 0; }
.vif-storefront-template .hb-return-terms span span { display: block; margin-top: 4px; text-decoration: underline; font-size: 14px; }