/* ==========================================================================
   VINEYAADIE HOMEPAGE
   Loaded only on the front page (see functions.php). Relies on the brand
   tokens defined in style.css (--vy-*).
   ========================================================================== */

.vy-home { overflow-x: clip; }

.vy-container {
  width: var(--theme-container-edge-spacing, 90vw);
  max-width: var(--vy-shell-max, 1290px);
  margin-inline: auto;
  padding-inline: 0;
}

/* Local button styles so the homepage is self-contained ------------------- */
.vy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--vy-font);
  font-weight: var(--vy-fw-x);
  font-size: 0.875rem; /* design: 14px / 800 */
  letter-spacing: 0.4px;
  line-height: 1;
  padding: 16px 32px; /* design: pill 16px 32px */
  border-radius: var(--vy-radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--vy-dur) var(--vy-ease),
              color var(--vy-dur) var(--vy-ease),
              transform var(--vy-dur) var(--vy-ease),
              box-shadow var(--vy-dur) var(--vy-ease);
}
.vy-btn:hover { transform: translateY(var(--vy-lift)); box-shadow: var(--vy-shadow-lift); }
.vy-btn--primary { background: var(--vy-green); color: #fff; border-color: var(--vy-green); }
.vy-btn--primary:hover { background: var(--vy-green-dark); border-color: var(--vy-green-dark); color: #fff; }
.vy-btn--ghost { background: transparent; color: var(--vy-ink); border-color: var(--vy-line-strong); }
.vy-btn--ghost:hover { background: var(--vy-ink); color: var(--vy-cream); border-color: var(--vy-ink); }
.vy-btn--cream { background: var(--vy-cream); color: var(--vy-ink); border-color: var(--vy-cream); }
.vy-btn--cream:hover { background: #fff; color: var(--vy-ink); }
.vy-btn--gold { background: var(--vy-gold); color: var(--vy-ink); border-color: var(--vy-gold); }
.vy-btn--gold:hover { background: #ffd35a; border-color: #ffd35a; color: var(--vy-ink); }

.vy-eyebrow--light { color: var(--vy-gold); }

/* Shared section heads ---------------------------------------------------- */
.vy-section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 44px); }
.vy-section-title {
  font-size: var(--vy-fs-h2);
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.02em;
  margin: 0.3em 0 0.35em;
}
.vy-section-sub { color: var(--vy-ink-60); margin: 0; }

/* Split head: title left, view-all link right (design 1a "Summer Drop") */
.vy-section-head--split {
  max-width: none;
  text-align: left;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.vy-section-head--split .vy-section-title { margin-bottom: 0; }
.vy-link-all {
  flex: none;
  font-size: 0.8rem;
  font-weight: var(--vy-fw-x);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vy-ink);
  text-decoration: none;
  border-bottom: 2px solid var(--vy-ink);
  padding-bottom: 3px;
  margin-bottom: 6px;
  transition: color var(--vy-dur) var(--vy-ease), border-color var(--vy-dur) var(--vy-ease);
}
.vy-link-all:hover { color: var(--vy-green); border-color: var(--vy-green); }

/* ============================== HERO =====================================
   The desktop height follows the final hero image's 2343:1080 ratio until a
   safe 960px ceiling. On ultra-wide screens the top-anchored crop keeps both
   faces visible without pushing the copy below a normal crawler screenshot. */
.vy-hero {
  position: relative;
  min-height: clamp(640px, 46.1vw, 960px);
  display: flex;
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  background: var(--vy-ink);
}
.vy-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Premium sunset gradient — visible until the hero photo loads / as fallback */
  background:
    radial-gradient(120% 90% at 70% 18%, var(--vy-gold) 0%, var(--vy-red) 38%, #b9381f 60%, var(--vy-green-dark) 100%);
  background-size: cover;
  background-position: center;
}
.vy-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* preserve both faces if rounding causes a crop */
  opacity: 0.92;           /* design: img opacity .92 over ink */
}
.vy-hero__bg::after { /* legibility scrim — dark toward the LEFT copy side (design 1a) */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(78deg, rgba(16,16,17,0.72) 0%, rgba(16,16,17,0.28) 46%, rgba(16,16,17,0) 70%);
}
.vy-hero__horizon { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 45%; }
.vy-hero__inner {
  position: relative;
  color: var(--vy-cream);
  padding-block: clamp(28px, 5vw, 64px); /* design: copy 64px from the bottom */
  /* Full content-width container so the copy aligns with the rest of the
     page (design: copy starts at the content's left edge, not the screen edge) */
  width: var(--theme-container-edge-spacing, 90vw);
  max-width: var(--vy-shell-max, 1290px);
  margin-inline: auto;
}
.vy-hero__inner > * { max-width: 620px; } /* design: copy block max 620px */
.vy-hero .vy-eyebrow { color: var(--vy-gold); margin-bottom: 16px; }
.vy-hero__title {
  color: var(--vy-cream);
  font-size: var(--vy-fs-display);
  font-weight: var(--vy-fw-x);
  line-height: 0.98;           /* design: line-height .98 */
  letter-spacing: -0.026em;    /* design: -2px at 76px */
  margin: 0 0 0;
  text-shadow: 0 2px 24px rgba(0,0,0,0.25);
}
.vy-hero__lead {
  font-size: 1.0625rem;              /* design: 17px */
  line-height: 1.55;
  color: rgba(255,248,232,0.85);
  max-width: 460px;                  /* design: max-width 460px */
  margin: 20px 0 0;
}
.vy-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }
.vy-hero__cta .vy-btn--ghost {
  color: var(--vy-cream);
  border: 2px solid rgba(255,248,232,0.7); /* design: 2px cream/70 outline */
  padding: 14px 30px;                      /* keep 16/32 outer size incl. border */
}
.vy-hero__cta .vy-btn--ghost:hover { background: var(--vy-cream); color: var(--vy-ink); border-color: var(--vy-cream); }
.vy-hero__note { margin: 1.2em 0 0; font-size: 0.85rem; font-weight: var(--vy-fw-semi); color: rgba(255,248,232,0.85); }

/* ========================== BENEFIT STRIP ===============================
   Design 1a: four plain cells on the cream surface, hairline dividers. */
.vy-benefits { background: var(--vy-cream); border-bottom: 1px solid var(--vy-line); }
.vy-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--vy-shell-max, 1290px);
}
.vy-benefit {
  padding: 26px 32px; /* design: 26px 32px cells */
  border-right: 1px solid var(--vy-line);
}
.vy-benefit:last-child { border-right: 0; }
.vy-benefit__title { font-size: 0.9rem; font-weight: var(--vy-fw-x); margin: 0 0 0.25em; color: var(--vy-ink); }
.vy-benefit__text { font-size: 0.84rem; color: var(--vy-ink-60); margin: 0; line-height: 1.45; }

/* ========================= FEATURED PRODUCTS =========================== */
.vy-featured { padding-block: clamp(48px, 7vw, 88px); }
/* Desktop uses the head's "View all four designs" link; the bottom button is
   the mobile pattern (design 1g). */
.vy-featured .vy-featured__more { display: none; text-align: center; margin-top: clamp(24px, 4vw, 40px); }
/* product grid inherits the WooCommerce card styles from style.css */
.vy-featured ul.products { margin: 0; }
/* Product mockups are authored at 1440x1080 (4:3). Keep that entire canvas
   visible, then crossfade to a cover-cropped lifestyle image on hover. */
.vy-featured ul.products li.product > figure {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--vy-card-bg);
}
.vy-featured ul.products li.product > figure > .ct-media-container,
.vy-featured .vy-product-card-media {
  display: block;
  width: 100%;
  height: 100%;
}
.vy-featured .vy-product-card-media { position: relative; overflow: hidden; }
.vy-featured .vy-product-card-media__image {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0;
  border-radius: 0;
  aspect-ratio: 4 / 3 !important;
  transition: opacity 0.38s var(--vy-ease), transform 0.55s var(--vy-ease);
}
.vy-featured .vy-product-card-media__image--mockup {
  z-index: 1;
  object-fit: contain !important;
  opacity: 1;
  transform: none !important;
}
.vy-featured .vy-product-card-media__image--lifestyle {
  z-index: 2;
  object-fit: cover !important;
  object-position: var(--vy-lifestyle-position, 50% 45%);
  opacity: 0;
  transform: scale(1.025) !important;
}
@media (hover: hover) and (pointer: fine) {
  .vy-featured ul.products li.product:hover .vy-product-card-media__image--mockup,
  .vy-featured ul.products li.product:focus-within .vy-product-card-media__image--mockup { opacity: 0; }
  .vy-featured ul.products li.product:hover .vy-product-card-media__image--lifestyle,
  .vy-featured ul.products li.product:focus-within .vy-product-card-media__image--lifestyle {
    opacity: 1;
    transform: scale(1) !important;
  }
}
.vy-featured .vy-swatch { width: 12px; height: 12px; } /* design 1a: 12px dots */

/* ========================== BRAND RIBBON =============================== */
.vy-ribbon {
  background: var(--vy-ink);
  color: var(--vy-cream);
  overflow: hidden;
  padding-block: 14px;
  border-block: 1px solid rgba(255,248,232,0.08);
}
.vy-ribbon__track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: vy-ribbon-scroll 380s linear infinite;
}
.vy-ribbon__group {
  display: flex;
  flex: none;
}
.vy-ribbon__seq {
  flex: none;
  white-space: nowrap;
  font-weight: var(--vy-fw-x);
  font-size: 0.8125rem;    /* design: 13px */
  text-transform: uppercase;
  letter-spacing: 0.23em;  /* design: 3px at 13px */
  color: var(--vy-cream);
}
@keyframes vy-ribbon-scroll {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vy-ribbon__track { animation: none; }
}

/* ============================ LOOKBOOK ================================= */
.vy-lookbook { padding-block: clamp(48px, 7vw, 88px); background: var(--vy-sand); }
.vy-lookbook__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
}
.vy-lookbook__card {
  position: relative;
  display: block;
  margin: 0;
  border-radius: var(--vy-radius);
  overflow: visible;
  aspect-ratio: 3 / 4;
  isolation: isolate;
  text-decoration: none;
  box-shadow: var(--vy-shadow-card);
  transition: transform var(--vy-dur) var(--vy-ease), box-shadow var(--vy-dur) var(--vy-ease);
}
.vy-lookbook__card:hover { transform: translateY(var(--vy-lift)); box-shadow: var(--vy-shadow-lift); }
.vy-lookbook__card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--vy-ease);
}
.vy-lookbook__card:hover img { transform: scale(1.04); }
.vy-lookbook__card::after { display: none; }
.vy-lookbook__caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vy-lookbook__eyebrow {
  font-size: 0.656rem;      /* design: 10.5px / 800 / 1.6px */
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.152em;
  color: var(--vy-gold);
}
.vy-lookbook__title {
  font-size: 1.1875rem;     /* design: 19px / 800 */
  font-weight: var(--vy-fw-x);
  color: #fff;
  line-height: 1.2;
  margin-top: 4px;
}

/* Shoppable gallery ------------------------------------------------------ */
.vy-lookbook__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 56px);
  margin-bottom: clamp(28px, 4vw, 44px);
}
.vy-lookbook__intro { max-width: 660px; }
.vy-lookbook__intro .vy-section-title { margin-bottom: 0.25em; }
.vy-instagram-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  min-width: 260px;
  padding: 13px 16px;
  color: var(--vy-cream);
  background: var(--vy-ink);
  border: 1px solid var(--vy-ink);
  border-radius: var(--vy-radius-pill);
  text-decoration: none;
  transition: transform var(--vy-dur) var(--vy-ease), background-color var(--vy-dur) var(--vy-ease);
}
.vy-instagram-link:hover {
  color: #fff;
  background: var(--vy-green);
  border-color: var(--vy-green);
  transform: translateY(var(--vy-lift));
}
.vy-instagram-link > span:nth-of-type(1) { display: grid; flex: 1; }
.vy-instagram-link strong { font-size: 0.78rem; line-height: 1.25; }
.vy-instagram-link small { font-size: 0.68rem; color: rgba(255, 248, 232, 0.7); }

.vy-lookbook__open {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: var(--vy-card-bg);
  border: 0;
  border-radius: var(--vy-radius);
  cursor: zoom-in;
}
.vy-lookbook__open::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(17, 17, 15, 0.45) 100%);
  pointer-events: none;
}
.vy-lookbook__open img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--vy-gallery-position, 50% 50%);
}
.vy-lookbook__zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  padding: 6px 9px;
  color: var(--vy-ink);
  background: rgba(255, 248, 232, 0.92);
  border-radius: var(--vy-radius-pill);
  font-size: 0.66rem;
  font-weight: var(--vy-fw-x);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--vy-dur) var(--vy-ease), transform var(--vy-dur) var(--vy-ease);
}
.vy-lookbook__open:hover .vy-lookbook__zoom,
.vy-lookbook__open:focus-visible .vy-lookbook__zoom { opacity: 1; transform: none; }

.vy-lookbook__product {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 5;
}
.vy-lookbook__hotspot {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 8px 11px;
  color: var(--vy-ink);
  background: rgba(255, 253, 246, 0.95);
  border: 1px solid rgba(17, 17, 15, 0.14);
  border-radius: var(--vy-radius-pill);
  box-shadow: 0 5px 18px rgba(17, 17, 15, 0.16);
  font-family: var(--vy-font);
  font-size: 0.66rem;
  font-weight: var(--vy-fw-x);
  line-height: 1;
  cursor: pointer;
}
.vy-lookbook__hotspot:hover,
.vy-lookbook__hotspot[aria-expanded="true"] { color: #fff; background: var(--vy-green); border-color: var(--vy-green); }
.vy-lookbook__ping {
  position: relative;
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--vy-gold);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(244, 191, 54, 0.25);
}
.vy-lookbook__popover {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(260px, calc(100vw - 40px));
  padding: 14px;
  color: var(--vy-ink);
  background: var(--vy-paper);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm);
  box-shadow: var(--vy-shadow-lift);
}
.vy-lookbook__popover[hidden] { display: none; }
.vy-lookbook__popover > strong {
  display: block;
  margin-bottom: 8px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.vy-lookbook__popover a {
  display: grid;
  gap: 2px;
  padding: 9px 0;
  color: var(--vy-ink);
  border-top: 1px solid var(--vy-line);
  text-decoration: none;
}
.vy-lookbook__popover a:hover span { color: var(--vy-green); }
.vy-lookbook__popover a span { font-size: 0.78rem; font-weight: var(--vy-fw-bold); line-height: 1.3; }
.vy-lookbook__popover a small { color: var(--vy-ink-60); font-size: 0.68rem; }
.vy-lookbook__card:nth-child(5n) .vy-lookbook__popover { right: 0; left: auto; }

html.vy-modal-open { overflow: hidden; }
.vy-lookbook-modal {
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: var(--vy-ink);
  background: var(--vy-paper);
  border: 0;
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(17, 17, 15, 0.35);
}
.vy-lookbook-modal::backdrop { background: rgba(17, 17, 15, 0.82); backdrop-filter: blur(4px); }
.vy-lookbook-modal__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  height: min(820px, calc(100dvh - 32px));
}
.vy-lookbook-modal__media {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  overflow: hidden;
  background: var(--vy-ink);
  touch-action: pan-y;
}
.vy-lookbook-modal__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.vy-lookbook-modal__details {
  display: flex;
  flex-direction: column;
  padding: clamp(54px, 6vw, 72px) 24px 24px;
  overflow-y: auto;
}
.vy-lookbook-modal__details h3 { margin: 0.35em 0 1em; font-size: 1.5rem; line-height: 1.15; }
.vy-lookbook-modal__products { display: grid; gap: 10px; }
.vy-lookbook-modal__products a {
  display: grid;
  gap: 4px;
  padding: 14px;
  color: var(--vy-ink);
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius-sm);
  text-decoration: none;
  transition: border-color var(--vy-dur) var(--vy-ease), transform var(--vy-dur) var(--vy-ease);
}
.vy-lookbook-modal__products a:hover { border-color: var(--vy-green); transform: translateY(-2px); }
.vy-lookbook-modal__products a span:first-child { font-size: 0.84rem; font-weight: var(--vy-fw-x); line-height: 1.3; }
.vy-lookbook-modal__products a small { color: var(--vy-ink-60); font-size: 0.7rem; }
.vy-lookbook-modal__products a span:last-child { margin-top: 5px; color: var(--vy-green); font-size: 0.72rem; font-weight: var(--vy-fw-x); }
.vy-lookbook-modal__hint { margin: auto 0 0; color: var(--vy-ink-60); font-size: 0.72rem; }
.vy-lookbook-modal__close,
.vy-lookbook-modal__nav {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--vy-ink);
  background: rgba(255, 253, 246, 0.94);
  border: 1px solid rgba(17, 17, 15, 0.16);
  border-radius: 50%;
  cursor: pointer;
}
.vy-lookbook-modal__close { position: absolute; top: 14px; right: 14px; z-index: 5; font-size: 1.5rem; }
.vy-lookbook-modal__nav { position: absolute; top: 50%; z-index: 3; transform: translateY(-50%); font-size: 1.05rem; }
.vy-lookbook-modal__nav--prev { left: 14px; }
.vy-lookbook-modal__nav--next { right: 14px; }
.vy-lookbook-modal__count {
  position: absolute;
  right: 14px;
  bottom: 14px;
  padding: 6px 10px;
  color: var(--vy-cream);
  background: rgba(17, 17, 15, 0.72);
  border-radius: var(--vy-radius-pill);
  font-size: 0.72rem;
  font-weight: var(--vy-fw-bold);
}

/* ============================ CULTURE BAND ============================= */
.vy-culture { background: var(--vy-ink); color: var(--vy-cream); }
.vy-culture__inner {
  text-align: center;
  padding-block: clamp(56px, 8vw, 104px);
  max-width: 720px;
}
.vy-culture__title {
  color: var(--vy-cream);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 2.875rem); /* design: 46px */
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.022em; /* design: -1px at 46px */
  line-height: 1.05;
  margin: 0.3em 0 0.4em;
}
.vy-culture__text { color: rgba(255,248,232,0.78); font-size: 1rem; margin: 18px auto 1.6em; max-width: 480px; line-height: 1.65; }
.vy-culture__word { font-style: normal; font-weight: var(--vy-fw-x); color: var(--vy-gold); }
.vy-culture__quote {
  font-size: 1.25rem; /* design: 20px / 800 */
  font-weight: var(--vy-fw-x);
  color: var(--vy-cream);
  border-top: 1px solid rgba(255,248,232,0.2);
  padding-top: 22px;
  margin: 26px 0 26px;
}

/* Split variant: cafe photo + story side by side (design: 1fr / 1.1fr, gap 56px) */
.vy-culture__inner--split {
  max-width: var(--vy-shell-max, 1290px);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(28px, 4.4vw, 56px);
}
.vy-culture__inner--split .vy-culture__text { margin-inline: 0; }
.vy-culture__media { margin: 0; }
.vy-culture__media img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 4.4; /* design 1a: image cell 4/4.4 */
  object-fit: cover;
  border-radius: var(--vy-radius);
}
@media (max-width: 820px) {
  .vy-culture__inner--split { grid-template-columns: 1fr; }
  .vy-culture__media { max-width: 440px; }
}

/* ========================= COMMUNITY VOICES ============================ */
.vy-voices { padding-block: clamp(48px, 7vw, 88px); background: var(--vy-linen); }
.vy-voices__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.5vw, 28px);
}
.vy-voices__card {
  margin: 0;
  background: var(--vy-cream);
  border: 1px solid var(--vy-line);
  border-radius: var(--vy-radius);
  padding: clamp(22px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vy-voices__stars { color: var(--vy-gold); font-size: 0.9375rem; letter-spacing: 0.133em; } /* design: 15px / 2px */
.vy-voices__quote {
  margin: 0;
  font-size: 1rem;          /* design: 16px / 600 */
  line-height: 1.55;
  color: var(--vy-ink);
  font-weight: var(--vy-fw-semi);
  border-left: 0;           /* kill Blocksy's green blockquote bar */
  padding-left: 0;
  font-style: normal;
}
.vy-voices__who {
  font-size: 0.78rem;       /* design: 12.5px / 800 / uppercase / 1px */
  font-weight: var(--vy-fw-x);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--vy-ink-60);
}

/* ======================= NEWSLETTER + LAUNCH CTA ====================== */
.vy-signup { background: var(--vy-green); color: var(--vy-cream); }
.vy-signup__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  flex-wrap: wrap;
  padding-block: clamp(36px, 4.7vw, 60px); /* design: 60px block */
}
.vy-signup__title {
  color: var(--vy-cream);
  font-size: 2rem;            /* design: 32px / 800 / -.5px */
  font-weight: var(--vy-fw-x);
  letter-spacing: -0.016em;
  margin: 0 0 0.2em;
}
.vy-signup__text { color: rgba(255,248,232,0.8); font-size: 0.90625rem; margin: 0; max-width: 42ch; } /* design: 14.5px */
.vy-signup__form { display: flex; gap: 10px; flex: 1 1 320px; max-width: 460px; }
.vy-signup__form input[type="email"] {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(255,248,232,0.4);       /* design: translucent cream field */
  border-radius: var(--vy-radius-pill);
  padding: 15px 20px;
  background: rgba(255,248,232,0.14);
  color: var(--vy-cream);
  font-size: 0.875rem;
}
.vy-signup__form input[type="email"]::placeholder { color: rgba(255,248,232,0.7); }
.vy-signup__form input[type="email"]:focus { outline: none; box-shadow: 0 0 0 3px rgba(255,248,232,0.35); }
/* Design 1a: gold "Notify me" button on the green band */
.vy-signup__form .vy-btn--primary {
  background: var(--vy-gold);
  border-color: var(--vy-gold);
  color: var(--vy-ink);
}
.vy-signup__form .vy-btn--primary:hover {
  background: #ffd35a;
  border-color: #ffd35a;
  color: var(--vy-ink);
}
.vy-signup__formwrap { flex: 1 1 320px; max-width: 460px; }
.vy-signup__formwrap .vy-signup__form { max-width: none; }
.vy-signup__msg {
  margin: 0 0 0.7em;
  font-weight: var(--vy-fw-semi);
  font-size: 0.95rem;
}
.vy-signup__msg--ok  { color: #fff; }
.vy-signup__msg--err { color: var(--vy-gold); }
/* Honeypot field — visually gone, still in the DOM for bots */
.vy-hp {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0; padding: 0; margin: -1px;
}

/* ============================ RESPONSIVE ============================== */
@media (max-width: 960px) {
  .vy-benefits__grid { grid-template-columns: repeat(2, 1fr); }
  .vy-benefit:nth-child(2n) { border-right: 0; }
  .vy-benefit:nth-child(-n+2) { border-bottom: 1px solid var(--vy-line); }
  .vy-lookbook__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vy-lookbook__card:nth-child(5n) .vy-lookbook__popover { right: auto; left: 0; }
  .vy-lookbook__card:nth-child(3n) .vy-lookbook__popover { right: 0; left: auto; }
  .vy-voices__grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .vy-lookbook__head { align-items: flex-start; flex-direction: column; }
  .vy-instagram-link { width: 100%; min-width: 0; }
  .vy-lookbook-modal__shell { grid-template-columns: 1fr; height: calc(100dvh - 24px); overflow-y: auto; }
  .vy-lookbook-modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .vy-lookbook-modal__media { min-height: 62dvh; }
  .vy-lookbook-modal__details { min-height: 240px; padding: 28px 18px 20px; }
  .vy-lookbook-modal__hint { margin-top: 18px; }
}
@media (max-width: 600px) {
  .vy-benefits__grid { grid-template-columns: 1fr; }
  .vy-benefit { border-right: 0; border-bottom: 1px solid var(--vy-line); }
  .vy-benefit:last-child { border-bottom: 0; }
  .vy-lookbook__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .vy-lookbook__card:nth-child(3n) .vy-lookbook__popover { right: auto; left: 0; }
  .vy-lookbook__card:nth-child(2n) .vy-lookbook__popover { right: 0; left: auto; }
  .vy-lookbook__hotspot { min-height: 30px; padding: 7px 9px; font-size: 0.58rem; }
  .vy-lookbook__product { left: 7px; bottom: 7px; }
  .vy-signup__inner { flex-direction: column; align-items: flex-start; }
  .vy-signup__form { width: 100%; max-width: none; }
  /* Taller mobile hero: the portrait photo keeps both tees fully visible.
     The viewport-based height lets the bottom-aligned copy follow the lower
     edge as the available screen height grows. */
  .vy-hero {
    min-height: clamp(580px, 72vh, 680px);
    min-height: clamp(580px, 72svh, 680px);
    align-items: flex-end;
  }
  .vy-hero__img { object-position: center top; }
  .vy-hero__bg::after {
    background: linear-gradient(180deg, rgba(16,16,17,0) 30%, rgba(16,16,17,0.78) 100%);
  }
  .vy-hero__cta { width: 100%; }
  .vy-hero__cta .vy-btn { flex: 1; padding-inline: 16px; }
  /* Featured products: 2-up on mobile, bottom "view all" button (design 1g) */
  .vy-section-head--split { flex-direction: column; align-items: flex-start; text-align: center; }
  .vy-section-head--split > div { width: 100%; }
  .vy-section-head--split .vy-link-all { display: none; }
  .vy-featured .vy-featured__more { display: block; }
  .vy-featured .vy-featured__more .vy-btn { width: 100%; }
  .vy-featured ul.products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .vy-featured ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    float: none !important;
  }
}

/* Anchor targets clear the sticky header */
#vy-culture, #vy-signup { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  .vy-btn:hover, .vy-lookbook__card:hover { transform: none; }
  .vy-lookbook__card:hover img { transform: none; }
}