/* ═══════════════════════════════════════════════════════════════════════════
   THEME V2 — "The Scroll"   ·   MOBILE-FIRST
   Loaded after theme.css. All base rules written for 375px.
   Desktop overrides live inside @media (min-width: 768px) blocks.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Prevent horizontal page overflow — only the scroll strip scrolls horizontally */
html, body { overflow-x: clip; }

/* Hero fills the visible viewport below the fixed header.
   theme.css #main-content{padding-top:var(--header-h)} still applies.
   We make the hero height compensate so it still feels full-screen. */


/* ═══════════════════════════════════════════════════════════════════════════
   HERO — full-screen, text bottom-right (RTL inline-start)
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-hero {
  position: relative;
  /* Subtract the fixed header so hero fills exactly the remaining viewport */
  height: calc(100dvh - var(--header-h));
  min-height: 500px;
  overflow: hidden;
  background: #111;
}

.v2-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* Bottom-only vignette */
.v2-hero__vig {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 40%;   /* slightly taller on mobile so text stays readable */
  background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);
  pointer-events: none;
}

/* Text — bottom corner, inline-start (right) in RTL */
.v2-hero__copy {
  position: absolute;
  bottom: 2rem;
  right: 1.25rem;   /* inline-start in RTL */
  color: #fff;
  max-width: calc(100vw - 2.5rem);
}

.v2-hero__eyebrow {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0.50em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 1.25rem;
}

.v2-hero__title {
  display: block;
  font-size: clamp(3.4rem, 14.5vw, 13rem);
  font-weight: 100;
  line-height: 0.93;
  letter-spacing: -0.025em;
  margin-bottom: 2rem;
}

.v2-hero__cta {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.80);
  color: rgba(255,255,255,0.90);
  padding: 0.70rem 1.6rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  min-height: 44px;            /* touch target */
  display: inline-flex;
  align-items: center;
  transition: background 260ms ease, color 260ms ease;
}
.v2-hero__cta:hover { background: #fff; color: #000; opacity: 1; }


/* ═══════════════════════════════════════════════════════════════════════════
   STATEMENT LINE — centered quote, 1px borders
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-statement {
  min-height: 52vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 5rem 1.5rem;
}

.v2-statement__text {
  font-size: clamp(1.4rem, 5.5vw, 3.8rem);
  font-weight: 200;
  text-align: center;
  line-height: 1.55;
  max-width: 32ch;
}

.v2-statement__attr {
  display: block;
  font-size: 0.70rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: #aaa;
  margin-top: 3rem;
  font-style: normal;
}


/* ═══════════════════════════════════════════════════════════════════════════
   PORTRAIT PAIR — stacked on mobile, side-by-side on desktop
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-duet__images {
  display: flex;
  flex-direction: column;    /* ← mobile: stack */
  overflow: hidden;
  gap: 0;
}

.v2-duet__slot {
  position: relative;
  height: 80vw;              /* mobile: wide portrait */
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}

.v2-duet__slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 700ms cubic-bezier(0.4,0,0.2,1);
}

.v2-duet__slot:hover img { transform: scale(1.04); }

/* Thin divider between the two stacked images on mobile */
.v2-duet__slot:first-child {
  border-bottom: 1px solid #e8e8e8;
}

/* Captions row */
.v2-duet__captions {
  display: flex;
  flex-direction: column;    /* ← mobile: stack captions too */
  border-bottom: 1px solid #e8e8e8;
}

.v2-duet__cap {
  flex: 1;
  padding: 1rem 1.25rem 1.5rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  min-height: 44px;
}

.v2-duet__cap:first-child {
  border-bottom: 1px solid #e8e8e8;   /* divider between stacked captions */
}

.v2-duet__cap-cat {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 0.4rem;
}

.v2-duet__cap-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   NUMBER INTERLUDE — black, ghost numeral
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-interlude {
  position: relative;
  background: #000;
  width: 100%;
  padding: 5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.v2-interlude__ghost {
  position: absolute;
  font-size: 40vw;             /* larger relative numeral on mobile */
  font-weight: 100;
  line-height: 1;
  color: rgba(255,255,255,0.07);
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
}

.v2-interlude__label {
  position: relative;
  z-index: 1;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  text-align: center;
  padding-inline: 1.5rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   HORIZONTAL SCROLL STRIP — snap scroll, full height cards
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-strip-wrap {
  position: relative;
  overflow: hidden;
}

.v2-strip-track {
  display: flex;
  overflow-x: auto;
  height: 68vw;               /* mobile: proportional to screen width */
  min-height: 300px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
}

.v2-strip-track::-webkit-scrollbar { display: none; }
.v2-strip-track.is-dragging        { cursor: grabbing; scroll-snap-type: none; }

.v2-strip-card {
  flex-shrink: 0;
  width: 82vw;                /* mobile: 82vw — peek of next card */
  height: 100%;
  display: flex;
  flex-direction: column;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  cursor: inherit;
  border-left: 1px solid #e8e8e8;    /* physical left = RTL inline-end */
}

.v2-strip-card:first-child { border-left: none; }

.v2-strip-card__img-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
}

.v2-strip-card__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 700ms cubic-bezier(0.4,0,0.2,1);
}

.v2-strip-card:hover .v2-strip-card__img-wrap img { transform: scale(1.04); }

.v2-strip-card__body {
  padding: 0.9rem 1.25rem 1rem;
  border-top: 1px solid #e8e8e8;
  background: #fff;
  flex-shrink: 0;
}

.v2-strip-card__cat {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 0.35rem;
}

.v2-strip-card__cat--spread {
  letter-spacing: 0.38em;
  line-height: 1.9;
  max-width: 220px;
  white-space: normal;
  color: #bbb;
}

.v2-strip-card__title {
  display: block;
  font-size: 1.1rem;
  font-weight: 200;
  line-height: 1.3;
}

/* Card variant: single large numeral */
.v2-strip-card__num {
  display: block;
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 100;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #000;
  padding-top: 0.25rem;
}

/* Progress bar */
.v2-strip-progress {
  height: 1px;
  background: #e8e8e8;
}

.v2-strip-progress__bar {
  height: 100%;
  background: #000;
  width: 0%;
  transition: width 60ms linear;
}


/* ═══════════════════════════════════════════════════════════════════════════
   FULL-BLEED FEATURE — image on top (mobile), side-by-side (desktop)
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-feature {
  display: flex;
  flex-direction: column;    /* ← mobile: stack */
  border-top: 1px solid #e8e8e8;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.v2-feature__visual {
  height: 90vw;              /* mobile: near-square, very immersive */
  flex-shrink: 0;
  overflow: hidden;
  background: #e8e8e8;
  position: relative;
}

.v2-feature__visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 700ms cubic-bezier(0.4,0,0.2,1);
}

.v2-feature:hover .v2-feature__visual img { transform: scale(1.04); }

.v2-feature__divider {
  display: none;             /* hidden on mobile */
  width: 1px;
  background: #000;
  flex-shrink: 0;
}

.v2-feature__copy {
  padding: 2rem 1.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid #000;
}

.v2-feature__eyebrow {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 1.25rem;
}

.v2-feature__title {
  display: block;
  font-size: clamp(2rem, 8vw, 5rem);
  font-weight: 100;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.v2-feature__body {
  font-size: 0.95rem;
  font-weight: 300;
  color: #9a9a9a;
  line-height: 1.85;
  margin-bottom: 2rem;
}

.v2-feature__cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border: 1px solid #000;
  padding: 0.75rem 1.6rem;
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  min-height: 44px;
  transition: background 260ms ease, color 260ms ease;
}
.v2-feature:hover .v2-feature__cta { background: #000; color: #fff; }


/* ═══════════════════════════════════════════════════════════════════════════
   BREATHING SPACE — intentional whitespace between feature and trio
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-breath {
  height: 10vh;
  min-height: 60px;
  border-top: 1px solid #e8e8e8;
}


/* ═══════════════════════════════════════════════════════════════════════════
   CLOSING TRIO — single column on mobile, staggered 3-col on desktop
   ═══════════════════════════════════════════════════════════════════════════ */
.v2-trio {
  padding: 3rem 1.25rem 5rem;
  border-top: 1px solid #e8e8e8;
}

.v2-trio__grid {
  display: grid;
  grid-template-columns: 1fr;   /* mobile: single column */
  gap: 2rem;
  align-items: start;
}

.v2-trio__card {
  display: block;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.v2-trio__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  position: relative;
  background: #f0f0f0;
}

.v2-trio__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 700ms cubic-bezier(0.4,0,0.2,1);
}

.v2-trio__card:hover .v2-trio__media img { transform: scale(1.04); }

.v2-trio__cap { padding: 0.9rem 0 0.25rem; }

.v2-trio__cat {
  display: block;
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #9a9a9a;
  margin-bottom: 0.35rem;
}

.v2-trio__name {
  display: block;
  font-size: 1.2rem;
  font-weight: 200;
  line-height: 1.3;
}


/* ═══════════════════════════════════════════════════════════════════════════
   DESKTOP — 768 px and up
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {

  /* Hero */
  .v2-hero__copy        { bottom: 3.5rem; right: 3.5rem; max-width: min(1000px, calc(100vw - 7rem)); }
  .v2-hero__vig         { height: 28%; }
  .v2-hero__eyebrow     { font-size: 0.66rem; margin-bottom: 1.5rem; letter-spacing: 0.55em; }
  .v2-hero__title       { font-size: clamp(4rem, 13vw, 10rem); }
  .v2-hero__cta         { padding: 0.75rem 2rem; }

  /* Statement */
  .v2-statement         { padding: 6rem 6rem; min-height: 55vh; }

  /* Portrait pair: side-by-side */
  .v2-duet__images      { flex-direction: row; height: 90vh; }
  .v2-duet__slot        { height: 100%; flex: 1; }
  .v2-duet__slot:first-child { border-bottom: none; border-left: 1px solid #e8e8e8; }

  .v2-duet__captions    { flex-direction: row; }
  .v2-duet__cap         { padding: 1.25rem 2.5rem 2rem; }
  .v2-duet__cap:first-child { border-bottom: none; border-left: 1px solid #e8e8e8; }
  .v2-duet__cap-title   { font-size: 1.4rem; }

  /* Number interlude */
  .v2-interlude         { padding: 8rem 0; }
  .v2-interlude__ghost  { font-size: 18vw; }
  .v2-interlude__label  { font-size: 0.75rem; }

  /* Scroll strip */
  .v2-strip-track       { height: 70vh; min-height: 0; }
  .v2-strip-card        { width: 40vw; }
  .v2-strip-card__body  { padding: 1rem 2rem 1.25rem; }
  .v2-strip-card__title { font-size: 1.3rem; }

  /* Feature: side-by-side */
  .v2-feature           { flex-direction: row; min-height: 80vh; }
  .v2-feature__visual   { height: auto; width: 60vw; }
  .v2-feature__divider  { display: block; }
  .v2-feature__copy     { padding: 4rem 5rem; border-top: none; max-width: 420px; }
  .v2-feature__title    { margin-bottom: 2rem; }
  .v2-feature__body     { margin-bottom: 2.5rem; }

  /* Breathing space */
  .v2-breath            { height: 14vh; }

  /* Trio: 3-col, wave stagger (not linear) */
  .v2-trio              { padding: 5rem 2.5rem 14rem; }
  .v2-trio__grid        { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .v2-trio__card:nth-child(2) { margin-top: 8rem; }
  .v2-trio__card:nth-child(3) { margin-top: 2rem; }
  .v2-trio__name        { font-size: 1.3rem; }
}

@media (min-width: 1024px) {
  .v2-hero__copy { right: 5rem; max-width: min(1000px, calc(100vw - 10rem)); }
}

/* ─── Very small phones (≤ 360px) ───────────────────────────────────────── */
@media (max-width: 360px) {
  .v2-hero__title  { font-size: 2.2rem; }
  .v2-strip-card   { width: 88vw; }
  .v2-statement    { padding: 2.5rem 1.25rem; }
}

/* ─── Inner pages on behrad2 — tighten mobile padding ──────────────────── */
/* Collection, Product, About pages inherit theme.css layout; just reduce
   oversized desktop-only padding at mobile widths. */
@media (max-width: 767px) {
  .collection-page,
  .about-page,
  .product-detail { overflow-x: hidden; }

  /* Collection hero: full-bleed on mobile */
  .collection-hero { min-height: 56vw; }

  /* Lookbook grid: force single column, was already handled at 380px but ensure it */
  .lookbook-grid { grid-template-columns: 1fr !important; }

  /* Product detail: single column already set in theme.css responsive block */

  /* About intro: reduce huge padding */
  .about-intro { padding: 3rem 1.25rem 2rem; }

  /* Error page: center properly */
  .error-page { padding: 4rem 1.5rem; }
}

/* ─── Fix: hamburger button hidden by cascade bug in theme.css ──────────── */
/* theme.css declares .nav-toggle{display:none} AFTER the @media (max-width:1024px)
   block that sets display:flex, so the base rule wins. Override it here. */
@media (max-width: 1024px) {
  .nav-toggle { display: flex !important; }
}

/* ─── Hide hosting-provider debug IP badge ──────────────────────────────── */
#tqShowIP { display: none !important; }