/* ============================================================
   VIENNA V2 DESIGN SYSTEM
   Inspired by modern luxury fashion e-commerce aesthetics
   Clean, minimal, elegant with strong typography
   ============================================================ */

/* === FONTS ===
   Bodoni Moda is the display face: a Didone, the same thick/thin contrast as
   the V monogram. Inter is demoted to UI only - labels, prices, buttons.
   Playfair stays in the stack as a fallback for anything still asking for it. */
/* Fonts are linked from the document head instead of imported here.
   An @import inside a stylesheet is sequential: the browser must fetch and
   parse this file before it even discovers the font request. */

/* === CSS VARIABLES === */
:root {
  /* Colors */
  --v2-bg: #FFFFFF;
  --v2-bg-alt: #F7F7F5;
  --v2-bg-dark: #1A1A1A;
  --v2-bg-darker: #0D0D0D;
  --v2-text: #1A1A1A;
  --v2-text-light: #6B6B6B;
  --v2-text-muted: #999999;
  --v2-text-white: #FFFFFF;
  --v2-border: #E5E5E5;
  --v2-border-dark: #333333;
  /* No accent hue. The garments are the only colour on the page - the tan
     --v2-accent was never used anywhere, and the sale red is now reserved
     for genuine markdowns rather than general emphasis. */
  --v2-error: #8B0000;
  --v2-success: #2D6A4F;
  --v2-sale: #C0392B;

  /* Typography */
  --v2-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --v2-font-heading: 'Bodoni Moda', 'Playfair Display', Didot, Georgia, serif;

  /* Spacing */
  --v2-space-xs: 0.25rem;
  --v2-space-sm: 0.5rem;
  --v2-space-md: 1rem;
  --v2-space-lg: 1.5rem;
  --v2-space-xl: 2rem;
  --v2-space-2xl: 3rem;
  --v2-space-3xl: 4rem;
  --v2-space-4xl: 6rem;
  --v2-space-5xl: 8rem;

  /* Layout */
  --v2-max-width: 1400px;
  /* 72px, up from 48px. A 36px monogram in a 48px bar had 6px of air. */
  --v2-header-height: 72px;

  /* Animation */
  --v2-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --v2-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --v2-duration: 0.3s;
  --v2-duration-slow: 0.6s;
}

/* === RESET & BASE === */
.v2 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.v2 {
  font-family: var(--v2-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--v2-text);
  background-color: var(--v2-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.v2 a {
  color: inherit;
  text-decoration: none;
  transition: opacity var(--v2-duration) var(--v2-ease);
}

.v2 a:hover {
  opacity: 0.7;
}

.v2 img {
  max-width: 100%;
  height: auto;
  display: block;
}

.v2 ul, .v2 ol {
  list-style: none;
}

.v2 button {
  font-family: var(--v2-font-body);
  cursor: pointer;
  border: none;
  background: none;
}

/* === LAYOUT === */
.v2-container {
  width: 100%;
  max-width: var(--v2-max-width);
  margin: 0 auto;
  padding: 0 var(--v2-space-xl);
}

.v2-section {
  padding: var(--v2-space-4xl) 0;
}

.v2-section--compact {
  padding: var(--v2-space-2xl) 0;
}

.v2-section--flush {
  padding: 0;
}

.v2-page-width {
  max-width: var(--v2-max-width);
  margin: 0 auto;
  padding: 0 var(--v2-space-xl);
}

/* === TYPOGRAPHY === */
/* Headings are the Didone, in sentence case.
   This rule previously forced every h1-h6 to uppercase Inter with 0.06em
   tracking - so Playfair was loaded and then never rendered anywhere, and
   every page read like a dashboard instead of a fashion house. That single
   rule was most of the distance between the old site and the monogram. */
.v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 h5, .v2 h6 {
  font-family: var(--v2-font-heading);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: none;
}

.v2 h1 { font-size: clamp(2.25rem, 6vw, 4rem); line-height: 1.04; }
.v2 h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
.v2 h3 { font-size: 1.5rem; }
.v2 h4 { font-size: 1.25rem; }
.v2 h5 { font-size: 1rem; }
.v2 h6 { font-size: 0.875rem; }

/* Opt back into the old treatment where a heading is really UI chrome -
   a panel label, a table caption - rather than editorial voice. */
.v2 .v2-heading-ui {
  font-family: var(--v2-font-body);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Retained: existing markup uses this to ask for the serif explicitly.
   It is now the default, so this only needs to guarantee the sentence case. */
.v2-heading-serif {
  font-family: var(--v2-font-heading);
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: 400;
}

.v2-subheading {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--v2-text-light);
}

.v2-body-sm {
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* === HEADER === */
.v2-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--v2-header-height);
  display: flex;
  align-items: center;
  transition: background-color var(--v2-duration-slow) var(--v2-ease),
              backdrop-filter var(--v2-duration-slow) var(--v2-ease);
}

.v2-header--transparent {
  background-color: transparent;
  color: var(--v2-text-white);
}

.v2-header--scrolled {
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--v2-text);
  border-bottom: 1px solid var(--v2-border);
}

.v2-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--v2-max-width);
  margin: 0 auto;
  padding: 0 var(--v2-space-xl);
}

.v2-header__left,
.v2-header__right {
  display: flex;
  align-items: center;
  flex: 1; /* Allow left and right to take equal space */
}

.v2-header__left {
  justify-content: flex-start;
  gap: var(--v2-space-lg);
}

.v2-header__right {
  justify-content: flex-end;
  gap: var(--v2-space-md);
}

.v2-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-header__logo img {
  height: 36px;
  width: auto;
  transition: filter var(--v2-duration) var(--v2-ease);
}

.v2-header__site-name {
  display: none; /* Hidden per request */
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.v2-desktop-only {
  display: inline;
}

@media (max-width: 768px) {
  .v2-desktop-only {
    display: none !important;
  }
}

.v2-header--transparent .v2-header__logo img {
  filter: brightness(0) invert(1);
}

.v2-header--scrolled .v2-header__logo img {
  filter: none;
}

/* Cart badge */
.v2-cart-icon {
  position: relative;
}

.v2-cart-badge {
  display: none;
  position: absolute;
  top: -6px;
  right: -8px;
  /* Ink, not alert red - a full basket is good news, not a warning. */
  background: var(--v2-bg-dark);
  color: #fff;
  font-size: 0.5rem;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* Cart hover preview */
.v2-cart-hover-wrap {
  position: relative;
}

.v2-cart-preview {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: 320px;
  background: #fff;
  border: 1px solid #E5E5E5;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 500;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  font-family: 'Inter', sans-serif;
}

.v2-cart-hover-wrap:hover .v2-cart-preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.v2-cart-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid #F5F5F5;
}

.v2-cart-preview__title {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1A1A1A;
}

.v2-cart-preview__items {
  max-height: 280px;
  overflow-y: auto;
  padding: 8px 0;
}

.v2-cart-preview__loading {
  text-align: center;
  padding: 20px;
  font-size: 0.75rem;
  color: #999;
}

.v2-cart-preview__item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 16px;
}

.v2-cart-preview__item:hover {
  background: #FAFAFA;
}

.v2 .v2-cart-preview__item-img {
  width: 48px;
  height: 64px;
  object-fit: cover;
  flex-shrink: 0;
}

.v2-cart-preview__item-info {
  flex: 1;
  min-width: 0;
}

.v2-cart-preview__item-name {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1A1A1A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v2-cart-preview__item-opts {
  font-size: 0.6875rem;
  color: #999;
  margin-top: 2px;
}

.v2-cart-preview__item-price {
  font-size: 0.75rem;
  font-weight: 500;
  color: #1A1A1A;
  white-space: nowrap;
  flex-shrink: 0;
}

.v2-cart-preview__empty {
  text-align: center;
  padding: 24px 16px;
  font-size: 0.8125rem;
  color: #999;
}

.v2-cart-preview__footer {
  border-top: 1px solid #F5F5F5;
  padding: 14px 16px;
}

.v2-cart-preview__subtotal {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #1A1A1A;
  margin-bottom: 12px;
}

.v2-cart-preview__btn {
  display: block;
  text-align: center;
  padding: 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease;
}

.v2-cart-preview__btn--primary {
  background: #1A1A1A;
  color: #fff;
  margin-bottom: 6px;
}

.v2-cart-preview__btn--primary:hover { background: #333; opacity: 1; }

.v2-cart-preview__btn--secondary {
  background: transparent;
  color: #1A1A1A;
  border: 1px solid #E5E5E5;
}

.v2-cart-preview__btn--secondary:hover { background: #F7F7F5; opacity: 1; }

@media (max-width: 768px) {
  .v2-cart-preview { display: none; }
}

@media (max-width: 768px) {
  .v2-header__site-name {
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
  }
}

.v2-header__nav {
  display: flex;
  align-items: center;
  gap: var(--v2-space-xl);
}

.v2-header__nav a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  position: relative;
}

.v2-header__nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--v2-duration) var(--v2-ease);
}

.v2-header__nav a:hover {
  opacity: 1;
}

.v2-header__nav a:hover::after {
  width: 100%;
}

.v2-header__actions {
  display: flex;
  align-items: center;
  gap: var(--v2-space-md);
}

.v2-header__action {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: var(--v2-space-xs);
}

.v2-header__action i {
  font-size: 1rem;
}

/* Currency switcher */
.v2-currency {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
}

.v2-currency a {
  font-weight: 400;
  opacity: 0.6;
}

.v2-currency a.active {
  opacity: 1;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* Mobile menu toggle */
.v2-menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  cursor: pointer;
}

.v2-menu-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform var(--v2-duration) var(--v2-ease),
              opacity var(--v2-duration) var(--v2-ease);
}

/* Mobile drawer */
.v2-mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--v2-bg);
  z-index: 2000;
  transform: translateX(-100%);
  transition: transform var(--v2-duration-slow) var(--v2-ease-out);
  overflow-y: auto;
  padding: var(--v2-space-xl);
}

.v2-mobile-menu.is-open {
  transform: translateX(0);
}

.v2-mobile-menu__close {
  position: absolute;
  top: var(--v2-space-lg);
  right: var(--v2-space-lg);
  font-size: 1.5rem;
  color: var(--v2-text);
}

.v2-mobile-menu__nav {
  padding-top: var(--v2-space-3xl);
}

.v2-mobile-menu__nav a {
  display: block;
  font-size: 1.5rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--v2-space-md) 0;
  border-bottom: 1px solid var(--v2-border);
}

/* === HERO === */
.v2-hero {
  position: relative;
  height: 100vh; /* Full screen height */
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  color: var(--v2-text-white);
  background-color: #000; /* Add black background for letterboxing */
}

.v2-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.v2-hero__media .v2-hero__video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(25px) brightness(0.7); /* Cinematic blur on the sides */
  transform: scale(1.1); /* Prevents blurred edges from bleeding inward */
  z-index: 1;
}

.v2-hero__media .v2-hero__video-fg,
.v2-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* Sharp, uncropped main video */
  object-position: center center;
  z-index: 2;
}

.v2-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3; /* Increased z-index to stay above the foreground video */
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%);
}

.v2-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  padding: var(--v2-space-3xl) var(--v2-space-xl) var(--v2-space-4xl);
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: var(--v2-space-lg);
}

.v2-hero__title {
  font-family: var(--v2-font-heading);
  font-size: clamp(1.75rem, 8vw, 5rem);
  max-width: 100%;
  overflow-wrap: break-word;
  font-weight: 400;
  letter-spacing: -0.015em;
  text-transform: none;
  line-height: 1.02;
  margin: 0;
}

.v2-hero__title em {
  font-style: italic;
}

.v2-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--v2-space-md);
  margin-top: var(--v2-space-sm);
  max-width: 100%;
}

/* Buttons must not force the row wider than the screen. */
.v2-hero__actions .v2-btn {
  padding-left: var(--v2-space-lg);
  padding-right: var(--v2-space-lg);
  max-width: 100%;
}

/* Belt and braces: nothing in the hero may cause a horizontal scroll. */
.v2-hero,
.v2-hero__content { max-width: 100vw; }
.v2-hero__content > * { max-width: 100%; }

/* Outlined action for use over imagery, where a solid border would be
   too heavy next to the white primary. */
.v2-btn--ghost,
.v2 a.v2-btn--ghost {
  background: transparent;
  color: var(--v2-text-white);
  border: 1px solid rgba(255, 255, 255, 0.55);
}

.v2-btn--ghost:hover,
.v2 a.v2-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--v2-text-white);
  opacity: 1;
}

.v2-hero__subtitle {
  font-family: var(--v2-font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  opacity: 0.88;
  max-width: 34ch;
  margin: 0 auto;
}

.v2-hero__tagline {
  font-family: var(--v2-font-body);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
  margin: 0;
}

.v2-hero__scroll {
  position: absolute;
  bottom: var(--v2-space-xl);
  /* Was centred, which put it on top of the subject. Out to the right,
     clear of the type block and the model. */
  right: clamp(1.5rem, 5vw, 5rem);
  left: auto;
  transform: none;
  z-index: 3;
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: v2-bounce 2s infinite;
}

.v2-hero__scroll::after {
  content: '';
  width: 1px;
  height: 30px;
  background: rgba(255,255,255,0.4);
}

@keyframes v2-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ============================================================
   CINEMATIC HERO

   Replaces a 50/50 split that left the whole left half as empty white.
   Generous space only reads as luxury when something commands the frame;
   an unfilled column just reads as unfinished. Luxury RTW leads with the
   garment at scale and sets type over it.

   The 360x640 source is cropped, not letterboxed - the footage is a group
   shot, so a wide crop holds the subjects. object-position keeps faces in
   frame as the aspect changes.
   ============================================================ */
.v2-hero__content {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: var(--v2-max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem) clamp(3rem, 7vh, 6rem);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: var(--v2-space-md);
}

/* Anchor the type to the bottom of the frame - editorial, not centred. */
.v2-hero { align-items: flex-end; }

.v2-hero__tagline {
  color: rgba(255, 255, 255, 0.72);
  opacity: 1;
}

.v2-hero__title {
  color: var(--v2-text-white);
  max-width: 16ch;
}

.v2-hero__subtitle {
  color: rgba(255, 255, 255, 0.82);
  opacity: 1;
  margin: 0;
  max-width: 38ch;
}

.v2-hero__actions {
  justify-content: flex-start;
  margin-top: var(--v2-space-md);
}

/* A heavier scrim at the foot so type always holds, whatever the frame. */
.v2-hero__overlay {
  background: linear-gradient(to top,
    rgba(0, 0, 0, 0.68) 0%,
    rgba(0, 0, 0, 0.28) 38%,
    rgba(0, 0, 0, 0.10) 62%,
    rgba(0, 0, 0, 0.22) 100%);
}

/* MOBILE: the phone viewport (390x844, ratio 0.46) is close to the source
   (360x640, ratio 0.5625), so cover crops almost nothing. Fill the screen. */
.v2-hero__media .v2-hero__video-fg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  z-index: 2;
}

/* The second <video> element is gone from the markup - the blurred surround
   below is a still, so it costs no extra download. */
.v2-hero__video-bg { display: none !important; }

/* DESKTOP: a 9:16 source cannot fill a 21:9 frame without losing ~70% of it.
   So the video is CONTAINED - the whole frame is always visible - and the
   space either side is filled with a heavily blurred, darkened still of the
   footage itself. Reads as a deliberate cinematic surround rather than a
   letterbox, and the type sits on the dark blur where it is most legible.

   Uses the poster image, not a second video: no extra megabytes. */
@media (min-width: 1024px) {
  /* Video centred and CONTAINED - the whole frame is on screen, nothing
     cropped - with the blurred still filling the space either side. A 9:16
     source cannot fill a 21:9 frame without losing ~70% of it, so the choice
     is crop or surround; this keeps every pixel of the footage.
     The headline sits over the blur on the left, where it is most legible. */
  .v2-hero {
    min-height: min(92vh, 900px);
    height: min(92vh, 900px);
  }

  .v2-hero__media .v2-hero__video-fg {
    object-fit: contain;
    object-position: center center;
  }

  .v2-hero__content {
    max-width: var(--v2-max-width);
    padding-bottom: clamp(4rem, 8vh, 7rem);
  }

  .v2-hero__title { font-size: clamp(3rem, 4.4vw, 4.5rem); max-width: 13ch; }
  .v2-hero__subtitle { font-size: 1rem; max-width: 34ch; }

  .v2-hero__scroll { left: 50%; right: auto; transform: translateX(-50%); }

  .v2-hero::before {
    content: '';
    position: absolute;
    inset: -5%;                     /* overscan so the blur has no soft edge */
    z-index: 1;
    background-image: url('/images/hero-poster.jpg');
    background-size: cover;
    background-position: center 28%;
    filter: blur(56px) saturate(0.7) brightness(0.34);
    transform: scale(1.12);
    pointer-events: none;
  }
}

/* The scroll cue is a desktop affordance; on a phone it just crowds the
   buttons, and nobody needs telling that a phone scrolls. */
@media (max-width: 1023px) {
  .v2-hero__scroll { display: none; }
}

@media (min-width: 1024px) {
  .v2-hero { min-height: min(92vh, 900px); height: min(92vh, 900px); }
  .v2-hero__title { font-size: clamp(3.5rem, 6vw, 6rem); }
  .v2-hero__subtitle { font-size: 1rem; }
  .v2-hero__content { padding-bottom: clamp(4rem, 8vh, 7rem); }
}

/* === WHY IT COSTS WHAT IT COSTS ===
   A quiet band under the hero. At these prices the buyer is asking what they
   are paying for, and answering immediately is worth more than any styling.
   Divided by hairlines rather than whitespace so four short facts read as one
   band, not four stray lines: 2x2 on phones, 4-across from 768px. */
.v2-craft {
  border-bottom: 1px solid var(--v2-border);
  background: var(--v2-bg);
}

.v2-craft__inner {
  max-width: var(--v2-max-width);
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.v2-craft__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  padding: var(--v2-space-lg) var(--v2-space-md) var(--v2-space-lg) 0;
  /* Hairlines drawn per cell so the 2x2 forms a cross with no outer edges. */
  border-right: 1px solid var(--v2-border);
  border-bottom: 1px solid var(--v2-border);
}
.v2-craft__item:nth-child(2n) { border-right: 0; padding-left: var(--v2-space-md); }
.v2-craft__item:nth-child(2n+1) { padding-left: 0; }
.v2-craft__item:nth-last-child(-n+2) { border-bottom: 0; }

.v2-craft__icon {
  width: 19px;
  height: 19px;
  color: var(--v2-text);
  opacity: 0.55;
  margin-bottom: 2px;
}

.v2-craft__label {
  font-family: var(--v2-font-body);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--v2-text-muted);
}

.v2-craft__value {
  font-family: var(--v2-font-heading);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--v2-text);
  line-height: 1.35;
  text-wrap: pretty;
}

@media (min-width: 768px) {
  .v2-craft__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .v2-craft__item {
    padding: var(--v2-space-2xl) var(--v2-space-xl);
    border-bottom: 0;
    border-right: 1px solid var(--v2-border);
    gap: 9px;
  }
  /* Reset the 2-col rules; only the last cell loses its divider. */
  .v2-craft__item:nth-child(2n)   { border-right: 1px solid var(--v2-border); padding-left: var(--v2-space-xl); }
  .v2-craft__item:nth-child(2n+1) { padding-left: var(--v2-space-xl); }
  .v2-craft__item:first-child     { padding-left: 0; }
  .v2-craft__item:last-child      { border-right: 0; padding-right: 0; }

  .v2-craft__icon  { width: 21px; height: 21px; }
  .v2-craft__value { font-size: 1.0625rem; }
}

/* === BRAND STORY === */
.v2-brand-story {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--v2-bg-alt);
  margin-top: var(--v2-space-4xl);
}

.v2-brand-story__media { overflow: hidden; }

.v2-brand-story__media img {
  width: 100%;
  height: 100%;
  min-height: 320px;
  object-fit: cover;
  display: block;
}

.v2-brand-story__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--v2-space-lg);
  padding: var(--v2-space-3xl) var(--v2-space-xl);
}

.v2-brand-story__body h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.75rem);
  line-height: 1.14;
  margin: 0;
}

.v2-brand-story__text {
  color: var(--v2-text-light);
  font-weight: 300;
  line-height: 1.9;
  max-width: 46ch;
  margin: 0;
}

@media (min-width: 900px) {
  .v2-brand-story { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .v2-brand-story__media img { min-height: 560px; }
  .v2-brand-story__body { padding: var(--v2-space-4xl) clamp(3rem, 6vw, 6rem); }
}

/* === PRODUCT DETAIL GALLERY ===
   Desktop gets a vertical thumbnail rail beside the image, as on the canvas.
   Done in CSS rather than by moving markup, so the slider's JS - which reads
   #main-image-slider and #thumbnail-gallery by id - is untouched.
   Selectors are .v2-scoped so they outrank the Tailwind utilities on the
   same elements regardless of stylesheet order. */
@media (min-width: 1024px) {
  .v2 .v2-pdp-gallery {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: start;
    gap: 14px;
  }

  .v2 .v2-pdp-gallery__main {
    grid-column: 2;
    grid-row: 1;
  }

  .v2 .v2-pdp-gallery #thumbnail-gallery {
    grid-column: 1;
    grid-row: 1;
    flex-direction: column;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 100%;
    padding-bottom: 0;
    gap: 10px;
  }

  /* The rail is narrower than the w-20/md:w-24 the thumbs were sized for. */
  .v2 .v2-pdp-gallery #thumbnail-gallery > div {
    width: 100%;
    flex-shrink: 0;
  }
}

/* === CHECKOUT LAYOUT ===
   Form left, order summary right in a card that sticks while the form
   scrolls, so the total and the pay button are never off screen.
   Was a 50/50 grid, which gave the summary as much room as the form and
   a sticky offset hardcoded to 7rem regardless of header height. */
.v2-checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-space-3xl);
}

.v2-checkout-summary {
  background: var(--v2-bg);
  border: 1px solid var(--v2-border);
  padding: var(--v2-space-xl);
}

@media (min-width: 1024px) {
  .v2-checkout-grid {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: clamp(3rem, 6vw, 6rem);
    /* Must be stretch, NOT start. With align-items:start the summary column
       collapses to the height of the card inside it, leaving position:sticky
       nothing to travel within - it silently does nothing. Stretching the
       column to the row height is what gives the card its runway. */
    align-items: stretch;
  }

  .v2-checkout-summary {
    position: sticky;
    top: calc(var(--v2-header-height) + var(--v2-space-lg));
    padding: var(--v2-space-2xl) var(--v2-space-xl);
  }
}

/* === PRODUCT DETAIL: PROMOTED OPTIONS + DELIVERY ===
   Custom colour and made-to-measure were two small underlined links
   ("Or need a custom color?", "Or provide custom measurements"). For a
   made-to-order house those are the reason someone pays 225,000, so they
   are bordered rows that state the cost in effort up front. */
.v2 .v2-option-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  padding: 0.95rem 1rem;
  border: 1px solid var(--v2-border);
  background: transparent;
  cursor: pointer;
  transition: border-color var(--v2-duration) var(--v2-ease),
              background-color var(--v2-duration) var(--v2-ease);
}

.v2 .v2-option-row:hover,
.v2 .v2-option-row:focus-visible {
  border-color: var(--v2-text);
  background: var(--v2-bg-alt);
}

.v2 .v2-option-row > svg:first-child { flex-shrink: 0; }
.v2 .v2-option-row__chev { flex-shrink: 0; margin-left: auto; }

.v2 .v2-option-row__text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.v2 .v2-option-row__title {
  font-family: var(--v2-font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--v2-text);
  line-height: 1.35;
}

.v2 .v2-option-row__meta {
  font-family: var(--v2-font-body);
  font-size: 0.75rem;
  font-weight: 300;
  color: var(--v2-text-light);
  line-height: 1.55;
}

/* Delivery expectations, stated before the bag rather than at payment. */
.v2 .v2-pdp-delivery {
  margin-top: var(--v2-space-lg);
  padding-top: var(--v2-space-lg);
  border-top: 1px solid var(--v2-border);
  display: flex;
  flex-direction: column;
  gap: var(--v2-space-md);
}

.v2 .v2-pdp-delivery__row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.v2 .v2-pdp-delivery__row > svg { flex-shrink: 0; margin-top: 2px; }

.v2 .v2-pdp-delivery__row span {
  font-family: var(--v2-font-body);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--v2-text-light);
  line-height: 1.65;
}

.v2 .v2-pdp-delivery__row strong {
  display: block;
  font-weight: 500;
  color: var(--v2-text);
}

/* === PRODUCT GRID === */
.v2-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4px read as a contact sheet. Column gap stays tight, row gap opens up
     so the caption belongs to the image above it, not the one below. */
  gap: var(--v2-space-2xl) 14px;
}

.v2-product-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.v2-section-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--v2-space-xl);
}

.v2-section-header h2 {
  /* Was 1.125rem, which shrank every section title to 18px UI text. */
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.05;
}

.v2-section-header a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
}

/* Product Card */
.v2-product-card {
  position: relative;
  overflow: hidden;
}

.v2-product-card__link {
  display: block;
}

.v2-product-grid {
  align-items: start;
}

.v2-product-card {
  display: flex;
  flex-direction: column;
}

.v2-product-card__image {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--v2-bg-alt);
  display: block;
}

.v2-product-card__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--v2-duration-slow) var(--v2-ease);
}

.v2-product-card:hover .v2-product-card__image img {
  transform: scale(1.03);
}

.v2-product-card__badge {
  position: absolute;
  top: var(--v2-space-sm);
  left: var(--v2-space-sm);
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--v2-bg-dark);
  color: var(--v2-text-white);
}

.v2-product-card__badge--sale {
  background: var(--v2-sale);
}

.v2-product-card__info {
  padding: var(--v2-space-md) 2px var(--v2-space-sm);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}

.v2-product-card__title {
  font-family: var(--v2-font-heading);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.25;
}

.v2-product-card__price {
  font-family: var(--v2-font-body);
  font-size: 0.8125rem;
  font-weight: 300;
  color: var(--v2-text-light);
  white-space: nowrap;
}

.v2-product-card__price--sale {
  color: var(--v2-sale);
}

.v2-product-card__price s {
  color: var(--v2-text-muted);
  margin-left: 4px;
}

/* Quick Add */
.v2-product-card__quick-add {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  padding: var(--v2-space-sm) var(--v2-space-md);
  transform: translateY(100%);
  transition: transform var(--v2-duration) var(--v2-ease);
  display: flex;
  justify-content: center;
}

.v2-product-card:hover .v2-product-card__quick-add {
  transform: translateY(0);
}

/* === COLLECTION GRID === */
.v2-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}

.v2-collection-card {
  position: relative;
  width: 100%;
  padding-bottom: 133.33%; /* 4/3 ratio fallback (height = 133% of width) */
  aspect-ratio: 3 / 4;
  height: 0;
  overflow: hidden;
  display: block;
  border-radius: 4px;
}

/* Must out-specify the `.v2 img { height: auto }` base reset (0,1,1): a bare
   `.v2-collection-card__image` is only (0,1,0), so height:auto won and the
   image kept its natural aspect instead of filling the 3:4 card. Only showed
   on images WIDER than 3:4 - taller ones overflow and get clipped, which hid
   the bug on two of the three cards. */
.v2 .v2-collection-card__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--v2-duration-slow) var(--v2-ease);
}

.v2 .v2-collection-card:hover .v2-collection-card__image {
  transform: scale(1.05);
}

.v2-collection-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: var(--v2-space-xl);
}

.v2-collection-card__title {
  color: var(--v2-text-white);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* === BUTTONS === */
.v2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--v2-space-sm);
  padding: 14px 32px;
  font-family: var(--v2-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: all var(--v2-duration) var(--v2-ease);
  cursor: pointer;
  border: none;
}

.v2-btn--primary,
.v2 button.v2-btn--primary {
  background: var(--v2-bg-dark) !important;
  color: var(--v2-text-white) !important;
}

.v2-btn--primary:hover,
.v2 button.v2-btn--primary:hover {
  background: #333 !important;
  opacity: 1;
}

.v2-btn--secondary,
.v2 button.v2-btn--secondary {
  background: transparent !important;
  color: var(--v2-text);
  border: 1px solid var(--v2-text) !important;
}

.v2-btn--secondary:hover,
.v2 button.v2-btn--secondary:hover {
  background: var(--v2-bg-dark) !important;
  color: var(--v2-text-white);
  border-color: var(--v2-bg-dark) !important;
  opacity: 1;
}

.v2-btn--white,
.v2 a.v2-btn--white,
.v2 button.v2-btn--white {
  background: var(--v2-bg);
  color: var(--v2-text);
}

.v2-btn--full {
  width: 100%;
}

.v2-btn--sm {
  padding: 8px 20px;
  font-size: 0.6875rem;
}

/* === FORM ELEMENTS === */
.v2-input {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  border: 1px solid var(--v2-border);
  background: var(--v2-bg);
  color: var(--v2-text);
  transition: border-color var(--v2-duration) var(--v2-ease);
}

.v2-input:focus {
  outline: none;
  border-color: var(--v2-text);
}

.v2-input::placeholder {
  color: var(--v2-text-muted);
}

.v2-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--v2-space-xs);
}

.v2-select {
  width: 100%;
  padding: 12px 16px;
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  border: 1px solid var(--v2-border);
  background: var(--v2-bg);
  color: var(--v2-text);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
}

/* === FOOTER === */
.v2-footer {
  background: #000000;
  color: var(--v2-text-white);
  padding: var(--v2-space-4xl) 0 var(--v2-space-xl);
}

.v2-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--v2-space-2xl);
  margin-bottom: var(--v2-space-3xl);
}

/* The 1.5fr brand column shoved the three link columns into the right half
   with a dead gap in the middle. Centre the whole block instead and let the
   link columns sit together as a group. */
@media (min-width: 768px) {
  .v2-footer__grid {
    /* All four columns size to content (the brand one capped) so the group
       has free space either side for justify-content to centre. With a 1fr
       brand column there is no free space, so it stays pinned left and the
       links get shoved to the right edge. */
    grid-template-columns: minmax(0, 360px) auto auto auto;
    justify-content: center;
    gap: var(--v2-space-3xl) clamp(2.5rem, 6vw, 6rem);
  }
}

.v2-footer__logo img {
  height: 40px;
  width: auto;
  filter: brightness(0) invert(1);
  margin-bottom: var(--v2-space-lg);
}

.v2-footer__newsletter-text {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: var(--v2-space-md);
  line-height: 1.5;
}

.v2-footer__newsletter-form {
  display: flex;
  border: 1px solid rgba(255,255,255,0.3);
}

.v2-footer__newsletter-form input {
  flex: 1;
  padding: 10px 14px;
  font-family: var(--v2-font-body);
  font-size: 0.8125rem;
  background: transparent;
  border: none;
  color: var(--v2-text-white);
}

.v2-footer__newsletter-form input::placeholder {
  color: rgba(255,255,255,0.4);
}

.v2-footer__newsletter-form button {
  padding: 10px 16px;
  color: var(--v2-text-white);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.v2-footer__heading {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--v2-space-lg);
}

.v2-footer__links a {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.6);
  padding: 4px 0;
  transition: color var(--v2-duration) var(--v2-ease);
}

.v2-footer__links a:hover {
  color: var(--v2-text-white);
  opacity: 1;
}

.v2-footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--v2-space-xl);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
}

.v2-footer__social {
  display: flex;
  gap: var(--v2-space-md);
}

.v2-footer__social a {
  color: rgba(255,255,255,0.6);
  font-size: 1.1rem;
  transition: color var(--v2-duration) var(--v2-ease);
}

.v2-footer__social a:hover {
  color: var(--v2-text-white);
  opacity: 1;
}

/* === PRELOADER === */
.v2-preloader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--v2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: var(--v2-space-md);
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.v2-preloader.loaded {
  opacity: 0;
  visibility: hidden;
}

.v2-preloader__logo {
  width: 60px;
  height: auto;
  animation: v2-fadeIn 1.5s ease forwards;
  opacity: 0;
}

.v2-preloader__text {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  animation: v2-fadeIn 1.5s ease 0.5s forwards;
}

@keyframes v2-fadeIn {
  to { opacity: 1; }
}

/* === SHOP PAGE === */
.v2-shop-header {
  padding: calc(var(--v2-header-height) + var(--v2-space-3xl)) var(--v2-space-xl) var(--v2-space-xl);
  text-align: center;
}

.v2-shop-header h1 {
  font-size: 2rem;
  margin-bottom: var(--v2-space-sm);
}

.v2-shop-filters {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v2-space-md) 0;
  border-bottom: 1px solid var(--v2-border);
  margin-bottom: var(--v2-space-xl);
}

.v2-shop-filters__left {
  display: flex;
  align-items: center;
  gap: var(--v2-space-lg);
}

.v2-shop-filters__right {
  display: flex;
  align-items: center;
  gap: var(--v2-space-md);
}

.v2-filter-btn {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--v2-duration) var(--v2-ease);
}

.v2-filter-btn:hover,
.v2-filter-btn.active {
  border-color: var(--v2-text);
}

.v2-product-count {
  font-size: 0.75rem;
  color: var(--v2-text-muted);
}

/* === PRODUCT DETAIL === */
.v2-pdp {
  padding-top: var(--v2-header-height);
}

.v2-pdp__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--v2-header-height));
}

.v2-pdp__gallery {
  position: relative;
  overflow: hidden;
}

.v2-pdp__gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
}

.v2-pdp__gallery-item {
  aspect-ratio: 4/5;
  overflow: hidden;
}

.v2-pdp__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-pdp__gallery-item--full {
  grid-column: span 2;
}

.v2-pdp__info {
  padding: var(--v2-space-3xl);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 560px;
}

.v2-pdp__breadcrumb {
  font-size: 0.6875rem;
  color: var(--v2-text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--v2-space-xl);
}

.v2-pdp__breadcrumb a:hover {
  color: var(--v2-text);
}

.v2-pdp__title {
  font-size: 1.5rem;
  margin-bottom: var(--v2-space-sm);
}

.v2-pdp__price {
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: var(--v2-space-xl);
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
}

.v2-pdp__price--compare {
  text-decoration: line-through;
  color: var(--v2-text-muted);
}

.v2-pdp__options {
  margin-bottom: var(--v2-space-xl);
}

.v2-pdp__option-group {
  margin-bottom: var(--v2-space-lg);
}

.v2-pdp__option-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: var(--v2-space-sm);
}

.v2-pdp__sizes {
  display: flex;
  gap: 4px;
}

.v2-pdp__size {
  min-width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--v2-border);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: all var(--v2-duration) var(--v2-ease);
  cursor: pointer;
}

.v2-pdp__size:hover,
.v2-pdp__size.selected {
  background: var(--v2-bg-dark);
  color: var(--v2-text-white);
  border-color: var(--v2-bg-dark);
}

.v2-pdp__size.unavailable {
  opacity: 0.3;
  cursor: not-allowed;
}

.v2-pdp__colors {
  display: flex;
  gap: 8px;
}

.v2-pdp__color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--v2-duration) var(--v2-ease);
}

.v2-pdp__color.selected {
  border-color: var(--v2-text);
}

.v2-pdp__quantity {
  display: flex;
  align-items: center;
  border: 1px solid var(--v2-border);
  width: fit-content;
  margin-bottom: var(--v2-space-xl);
}

.v2-pdp__quantity button {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.v2-pdp__quantity input {
  width: 60px;
  height: 44px;
  text-align: center;
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  border: none;
  border-left: 1px solid var(--v2-border);
  border-right: 1px solid var(--v2-border);
}

.v2-pdp__add-to-cart {
  margin-bottom: var(--v2-space-xl);
  display: flex;
  gap: 8px;
}

.v2-pdp__accordion {
  border-top: 1px solid var(--v2-border);
}

.v2-pdp__accordion details {
  border-bottom: 1px solid var(--v2-border);
}

.v2-pdp__accordion summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v2-space-md) 0;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  list-style: none;
}

.v2-pdp__accordion summary::-webkit-details-marker {
  display: none;
}

.v2-pdp__accordion summary svg {
  width: 16px;
  height: 16px;
  transition: transform var(--v2-duration) var(--v2-ease);
}

.v2-pdp__accordion details[open] summary svg {
  transform: rotate(180deg);
}

.v2-pdp__accordion-content {
  padding-bottom: var(--v2-space-md);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--v2-text-light);
}

/* === CART PAGE === */
.v2-cart {
  padding-top: calc(var(--v2-header-height) + var(--v2-space-3xl));
}

.v2-cart__layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--v2-space-3xl);
}

.v2-cart__item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--v2-space-lg);
  padding: var(--v2-space-lg) 0;
  border-bottom: 1px solid var(--v2-border);
  align-items: center;
}

.v2-cart__item-image {
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--v2-bg-alt);
}

.v2-cart__item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2-cart__summary {
  position: sticky;
  top: calc(var(--v2-header-height) + var(--v2-space-xl));
  padding: var(--v2-space-xl);
  background: var(--v2-bg-alt);
}

.v2-cart__summary-row {
  display: flex;
  justify-content: space-between;
  padding: var(--v2-space-sm) 0;
  font-size: 0.875rem;
}

.v2-cart__summary-total {
  font-weight: 600;
  font-size: 1rem;
  padding-top: var(--v2-space-md);
  border-top: 1px solid var(--v2-border);
  margin-top: var(--v2-space-sm);
}

/* === 404 PAGE === */
.v2-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--v2-space-xl);
}

.v2-404 h1 {
  font-size: 6rem;
  font-weight: 300;
  margin-bottom: var(--v2-space-md);
}

.v2-404 p {
  color: var(--v2-text-light);
  margin-bottom: var(--v2-space-xl);
}

/* === AUTH PAGES (Login/Register) === */
.v2-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.v2-auth__image {
  background-size: cover;
  background-position: center;
}

.v2-auth__form-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--v2-space-3xl);
}

.v2-auth__form {
  width: 100%;
  max-width: 400px;
}

.v2-auth__form h1 {
  margin-bottom: var(--v2-space-2xl);
}

.v2-form-group {
  margin-bottom: var(--v2-space-lg);
}

/* === ANNOUNCEMENTS / MARQUEE === */
.v2-announcement {
  background: var(--v2-bg-dark);
  color: var(--v2-text-white);
  padding: 6px 0;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  overflow: hidden;
}

.v2-marquee {
  white-space: nowrap;
  animation: v2-marquee 30s linear infinite;
}

@keyframes v2-marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* === UTILITIES === */
.v2-text-center { text-align: center; }
.v2-text-upper { text-transform: uppercase; }
.v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

.v2-divider {
  border: none;
  border-top: 1px solid var(--v2-border);
  margin: var(--v2-space-2xl) 0;
}

.v2-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* === BUTTON LOADING STATE === */
.v2-btn .btn-loader,
.v2 button .btn-loader {
  display: none;
  margin-left: 8px;
}

.v2-btn.is-loading .btn-text { opacity: 0.6; }
.v2-btn.is-loading .btn-loader { display: inline-block !important; }
.v2-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* === ANIMATIONS === */
.v2-fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--v2-duration-slow) var(--v2-ease),
              transform var(--v2-duration-slow) var(--v2-ease);
}

.v2-fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* === SIDEBAR DRAWER === */
.v2-sidebar {
  position: fixed;
  inset: 0;
  z-index: 2000;
  visibility: hidden;
  pointer-events: none;
}

.v2-sidebar.is-open {
  visibility: visible;
  pointer-events: auto;
}

.v2-sidebar__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  opacity: 0;
  transition: opacity var(--v2-duration-slow) var(--v2-ease);
}

.v2-sidebar.is-open .v2-sidebar__overlay {
  opacity: 1;
}

.v2-sidebar__panel {
  position: relative;
  width: 320px;
  height: 100%;
  background: var(--v2-bg);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform var(--v2-duration-slow) var(--v2-ease-out);
  box-shadow: 4px 0 20px rgba(0,0,0,0.1);
}

.v2-sidebar.is-open .v2-sidebar__panel {
  transform: translateX(0);
}

.v2-sidebar__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--v2-space-lg) var(--v2-space-xl);
  border-bottom: 1px solid var(--v2-border);
}

.v2-sidebar__nav {
  flex: 1;
  padding: var(--v2-space-lg) var(--v2-space-xl);
  overflow-y: auto;
}

.v2-sidebar__nav a {
  display: flex;
  align-items: center;
  gap: var(--v2-space-md);
  padding: var(--v2-space-md) var(--v2-space-sm);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-radius: 6px;
  transition: background var(--v2-duration) var(--v2-ease);
}

.v2-sidebar__nav a:hover {
  background: var(--v2-bg-alt);
  opacity: 1;
}

.v2-sidebar__nav a i {
  width: 20px;
  color: var(--v2-text-muted);
  font-size: 0.9rem;
}

.v2-sidebar__currency {
  padding: var(--v2-space-lg) var(--v2-space-xl);
  border-top: 1px solid var(--v2-border);
}

.v2-sidebar__currency-btn {
  flex: 1;
  text-align: center;
  padding: 6px 16px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--v2-border);
  border-radius: 4px;
  transition: all var(--v2-duration) var(--v2-ease);
}

.v2-sidebar__currency-btn.active {
  background: var(--v2-bg-dark);
  color: var(--v2-text-white);
  border-color: var(--v2-bg-dark);
}

.v2-sidebar__footer {
  padding: var(--v2-space-md) var(--v2-space-xl);
  border-top: 1px solid var(--v2-border);
  font-size: 0.6875rem;
  color: var(--v2-text-muted);
  text-align: center;
}

/* === RESPONSIVE === */
@media (max-width: 1024px) {
  .v2-product-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .v2-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--v2-space-2xl);
  }

  .v2-pdp__layout {
    grid-template-columns: 1fr;
  }

  .v2-pdp__info {
    max-width: none;
    padding: var(--v2-space-xl);
  }

  .v2-cart__layout {
    grid-template-columns: 1fr;
  }

  .v2-auth {
    grid-template-columns: 1fr;
  }

  .v2-auth__image {
    display: none;
  }
}

@media (max-width: 768px) {
  :root {
    --v2-header-height: 64px;
  }

  .v2-container,
  .v2-page-width {
    padding: 0 var(--v2-space-md);
  }

  .v2-header__inner {
    position: relative;
    justify-content: space-between;
  }

  .v2-header__left {
    flex: unset;
  }

  .v2-header__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }

  .v2-header__nav {
    display: none;
  }

  .v2-menu-toggle {
    display: flex;
  }

  .v2-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .v2-collection-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
  }

  .v2-section {
    padding: var(--v2-space-2xl) 0;
  }

  .v2-hero__content {
    flex-direction: column;
    gap: var(--v2-space-sm);
  }

  .v2-footer__grid {
    grid-template-columns: 1fr;
    gap: var(--v2-space-xl);
  }

  .v2-pdp__gallery-grid {
    grid-template-columns: 1fr;
  }

  .v2-pdp__gallery-item--full {
    grid-column: span 1;
  }

  .v2-pdp__add-to-cart {
    flex-direction: column;
  }

  .v2-cart__item {
    grid-template-columns: 80px 1fr;
  }
}

@media (max-width: 480px) {
  .v2 h1 { font-size: 1.75rem; }
  .v2 h2 { font-size: 1.25rem; }

  .v2-hero {
    height: 100vh; /* Return to 100vh for mobile */
    min-height: 500px;
  }
  
  .v2-hero__video-bg {
    display: none !important; /* Hide blurred background on mobile */
  }
  
  .v2-hero__media .v2-hero__video-fg {
    object-fit: cover !important; /* Make video fill the screen on mobile */
    object-position: center 20% !important; /* Keep it centered but slightly favoring the top so heads show */
  }
}

/* === REVIEWS SECTION (V2 Aesthetic) === */
.v2-reviews {
  background: var(--v2-bg);
  border-top: 1px solid var(--v2-border);
  padding: var(--v2-space-3xl) 0;
}

.v2-reviews__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--v2-space-2xl);
  flex-wrap: wrap;
  gap: var(--v2-space-lg);
}

.v2-reviews__header-left h2 {
  margin-bottom: var(--v2-space-sm);
}

.v2-reviews__rating {
  display: flex;
  align-items: center;
  gap: var(--v2-space-md);
}

.v2-reviews__rating-value {
  font-family: var(--v2-font-heading);
  font-size: 2.5rem;
  line-height: 1;
}

.v2-reviews__rating-stars {
  display: flex;
  color: #fbbf24;
}

.v2-reviews__rating-stars i {
  width: 16px;
  height: 16px;
  stroke-width: 1.5;
}

.v2-reviews__rating-stars i.is-filled {
  fill: currentColor;
}

.v2-reviews__rating-count {
  font-size: 0.8125rem;
  color: var(--v2-text-muted);
}

.v2-reviews__form-wrapper {
  background: #fdfdfd;
  border: 1px solid var(--v2-border);
  padding: var(--v2-space-xl);
  margin-bottom: var(--v2-space-2xl);
}

.v2-reviews__form-title {
  margin-bottom: var(--v2-space-md);
  font-family: var(--v2-font-heading);
  font-size: 1.25rem;
}

.v2-reviews__form-group {
  margin-bottom: var(--v2-space-md);
}

.v2-reviews__form-group label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--v2-space-sm);
  color: var(--v2-text-muted);
}

.v2-reviews__stars-input {
  display: flex;
  gap: var(--v2-space-xs);
}

.v2-reviews__stars-input button {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--v2-border);
  transition: transform 0.2s, color 0.2s;
}

.v2-reviews__stars-input button:hover,
.v2-reviews__stars-input button.active {
  color: #fbbf24;
  transform: scale(1.1);
}

.v2-reviews__stars-input button.active i {
  fill: currentColor;
}

.v2-reviews__form-group textarea {
  width: 100%;
  border: 1px solid var(--v2-border);
  background: transparent;
  padding: var(--v2-space-md);
  font-family: var(--v2-font-body);
  font-size: 0.875rem;
  resize: vertical;
}

.v2-reviews__form-group textarea:focus {
  outline: none;
  border-color: var(--v2-text);
}

.v2-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--v2-space-xl);
}

.v2-review-card {
  border: 1px solid var(--v2-border);
  padding: var(--v2-space-lg);
  background: #fff;
}

.v2-review-card__header {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--v2-space-md);
}

.v2-review-card__stars {
  display: flex;
  color: #fbbf24;
  gap: 2px;
}

.v2-review-card__stars i {
  width: 14px;
  height: 14px;
}

.v2-review-card__stars i.is-filled {
  fill: currentColor;
}

.v2-review-card__date {
  font-size: 0.75rem;
  color: var(--v2-text-muted);
}

.v2-review-card__text {
  font-size: 0.875rem;
  line-height: 1.6;
  margin-bottom: var(--v2-space-lg);
}

.v2-review-card__author {
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.v2-review-card__avatar {
  width: 32px;
  height: 32px;
  background: var(--v2-text);
  color: var(--v2-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--v2-font-heading);
  font-size: 1rem;
}

.v2-reviews__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--v2-space-3xl) 0;
  color: var(--v2-text-muted);
  border: 1px dashed var(--v2-border);
}

/* === REVIEWS MOBILE === */
@media (max-width: 768px) {
  .v2-reviews {
    padding: var(--v2-space-2xl) 0;
  }

  .v2-reviews__header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--v2-space-md);
  }

  .v2-reviews__header-left {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .v2-reviews__header-left h2 {
    font-size: 0.6875rem;
    margin-bottom: var(--v2-space-md);
  }

  .v2-reviews__rating {
    flex-direction: column;
    align-items: center;
    gap: var(--v2-space-sm);
  }

  .v2-reviews__rating-value {
    font-size: 2rem;
  }

  .v2-reviews__rating-stars i {
    width: 18px;
    height: 18px;
  }

  .v2-reviews__header-right {
    width: 100%;
  }

  .v2-reviews__header-right .v2-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .v2-reviews__form-wrapper {
    padding: var(--v2-space-lg);
  }

  .v2-reviews__grid {
    grid-template-columns: 1fr;
    gap: var(--v2-space-md);
  }
}

/* ============================================================
   MOTION SYSTEM
   Transform + opacity only, so every animation stays on the
   compositor and never triggers layout or paint.

   SAFETY: hidden-until-revealed states are scoped to
   html.v2-motion, which JS sets in the <head>. No JS, an early
   script error, or no IntersectionObserver means the class is
   never added and ALL content renders normally. Previously
   .v2-fade-in set opacity:0 unconditionally, so a single thrown
   exception could leave a whole page blank.
   ============================================================ */

:root {
  --v2-reveal-distance: 22px;
  --v2-reveal-duration: 0.8s;
  --v2-stagger-step: 70ms;
}

/* === SCROLL REVEAL === */
.v2-motion .v2-reveal,
.v2-motion .v2-fade-in {
  opacity: 0;
  transform: translate3d(0, var(--v2-reveal-distance), 0);
  transition:
    opacity var(--v2-reveal-duration) var(--v2-ease-out),
    transform var(--v2-reveal-duration) var(--v2-ease-out);
  transition-delay: calc(var(--v2-i, 0) * var(--v2-stagger-step));
  will-change: opacity, transform;
}

.v2-motion .v2-reveal.is-visible,
.v2-motion .v2-fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Once revealed, stop promoting the layer */
.v2-motion .v2-reveal.is-settled,
.v2-motion .v2-fade-in.is-settled {
  will-change: auto;
  transition-delay: 0s;
}

/* Directional variants */
.v2-motion .v2-reveal--left  { transform: translate3d(calc(var(--v2-reveal-distance) * -1.4), 0, 0); }
.v2-motion .v2-reveal--right { transform: translate3d(calc(var(--v2-reveal-distance) * 1.4), 0, 0); }
.v2-motion .v2-reveal--still { transform: none; }
.v2-motion .v2-reveal--left.is-visible,
.v2-motion .v2-reveal--right.is-visible { transform: translate3d(0, 0, 0); }

/* Editorial image reveal: the frame holds, the picture settles into it */
.v2-motion .v2-reveal-img { overflow: hidden; }
.v2-motion .v2-reveal-img > img {
  transform: scale(1.06);
  transition: transform 1.2s var(--v2-ease-out);
  transition-delay: calc(var(--v2-i, 0) * var(--v2-stagger-step));
}
.v2-motion .v2-reveal-img.is-visible > img { transform: scale(1); }

/* Headline rise: for a single display line worth the emphasis */
.v2-motion .v2-reveal-line { overflow: hidden; display: block; }
.v2-motion .v2-reveal-line > span {
  display: block;
  transform: translate3d(0, 100%, 0);
  transition: transform 0.9s var(--v2-ease-out);
  transition-delay: calc(var(--v2-i, 0) * var(--v2-stagger-step));
}
.v2-motion .v2-reveal-line.is-visible > span { transform: translate3d(0, 0, 0); }

/* === PRODUCT CARD === */
/* Second image crossfades on hover. Was inline onmouseover in JS
   template strings; as CSS it also works for touch :active. */
.v2-product-card__image .product-hover-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.55s var(--v2-ease);
}
.v2-product-card:hover .product-hover-img,
.v2-product-card:focus-within .product-hover-img { opacity: 1; }

.v2-product-card__image img { transition: transform 0.9s var(--v2-ease-out); }
.v2-product-card:hover .v2-product-card__image img,
.v2-product-card:focus-within .v2-product-card__image img { transform: scale(1.04); }

.v2-product-card__title {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.45s var(--v2-ease-out);
}
.v2-product-card:hover .v2-product-card__title,
.v2-product-card:focus-within .v2-product-card__title { background-size: 100% 1px; }

/* === LINKS: underline draws in rather than blinking on === */
.v2-link-draw {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--v2-ease-out);
  padding-bottom: 2px;
}
.v2-link-draw:hover,
.v2-link-draw:focus-visible { background-size: 100% 1px; opacity: 1; }

.v2-header__nav a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s var(--v2-ease-out), opacity 0.3s var(--v2-ease);
  padding-bottom: 3px;
}
.v2-header__nav a:hover { background-size: 100% 1px; opacity: 1; }

/* === BUTTONS === */
/* Secondary fills from the bottom up instead of snapping to black */
.v2-btn { position: relative; overflow: hidden; isolation: isolate; }
.v2-btn--secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--v2-bg-dark);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.42s var(--v2-ease-out);
}
.v2-btn--secondary:hover::before,
.v2-btn--secondary:focus-visible::before { transform: scaleY(1); }

.v2-btn:active { transform: translateY(1px); }
.v2-btn { transition: transform 0.12s var(--v2-ease), background-color 0.3s var(--v2-ease), color 0.3s var(--v2-ease); }

/* === CART BADGE: a single pulse when the count changes === */
.v2-cart-badge.is-bumped { animation: v2-bump 0.5s var(--v2-ease-out); }
@keyframes v2-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.45); }
  100% { transform: scale(1); }
}

/* === SKELETON: shimmer while a grid is fetching === */
.v2-skeleton {
  position: relative;
  overflow: hidden;
  background: var(--v2-bg-alt);
}
.v2-skeleton::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent);
  animation: v2-shimmer 1.5s infinite;
}
@keyframes v2-shimmer { to { transform: translateX(100%); } }

.v2-skeleton-card__image { aspect-ratio: 4/5; }
.v2-skeleton-card__line { height: 10px; margin-top: 12px; }
.v2-skeleton-card__line--short { width: 45%; }

/* === FOCUS: visible, and in the brand's own ink === */
.v2 a:focus-visible,
.v2 button:focus-visible,
.v2 input:focus-visible,
.v2 select:focus-visible,
.v2 textarea:focus-visible {
  outline: 1px solid var(--v2-text);
  outline-offset: 3px;
}

/* === REDUCED MOTION: honour the system setting completely === */
@media (prefers-reduced-motion: reduce) {
  .v2-motion .v2-reveal,
  .v2-motion .v2-fade-in,
  .v2-motion .v2-reveal--left,
  .v2-motion .v2-reveal--right,
  .v2-motion .v2-reveal-img > img,
  .v2-motion .v2-reveal-line > span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v2-skeleton::after,
  .v2-cart-badge.is-bumped,
  .v2-hero__scroll { animation: none !important; }
  .v2 *, .v2 *::before, .v2 *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   .hidden

   The compiled tailwind.css does not contain this class, yet 19 places
   across checkout and the product page call classList.toggle('hidden').
   Every one of them was a silent no-op - most visibly the shipping quote
   box, which could never be hidden and so displayed the previous
   country's rate against a new address.

   Declared here because vienna-v2.css is cache-busted by filemtime, so
   the fix reaches browsers immediately rather than waiting out a cached
   stylesheet.
   ============================================================ */
[hidden],
.hidden { display: none !important; }