/** Shopify CDN: Minification failed

Line 680:30 Expected identifier but found "*"
Line 953:49 The "-" operator only works if there is whitespace on both sides

**/
:root {
  --navy: #000040;
  --navy-deep: #00003d;
  --white: #ffffff;
  --text-black: #1a1a1a;
  --serif: dnp-shuei-mincho-pr6, 'Shippori Mincho', 'Noto Serif JP', serif;
  --gothic-kin: dnp-shuei-gothic-kin-std, 'Noto Sans JP', sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--serif);
  color: var(--text-black);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; }

div.page-width {
  overflow:visible !important;
}

a.u-bb-0 {
  border-bottom: 0 !important;
}

div.content-wrapper {
  letter-spacing: -0.08em;
}

/* ---------- FV (simple variant) ----------
   No photo, no parallax, no sticky curtain — just centered title +
   lead copy in normal document flow, kept short so the Dial Pattern
   section starts soon after. */
.fv-simple {
  text-align: center;
  background: var(--white);
  padding: 96px 24px 96px;
}

.fv-simple-title {
  font-family: var(--serif);
  font-size: 40px;
  font-weight: 500;
  letter-spacing: 0.05em;
  margin-bottom: 32px;
  color: #000;
}

/* Only one of these renders per breakpoint (see the 767px block) — same
   PC/SP toggle pattern as .intro-body--pc/--sp below. */
.hero-h1--sp { display: none; }

/* PC/SP each get their own text + line breaks per Figma (not just a
   CSS reflow of the same string) — toggle which element renders per
   breakpoint rather than fight the wrap with one shared string. */
.intro-body--sp {
  display: none;
}

/* SP-only manual line break — hidden on PC so the source string's
   wrapping stays exactly as PC already renders it. */
.br-sp {
  display: none;
}

.intro-body {
  max-width: 748px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 18px;
  line-height: 2.1;
  font-weight: 400;
}

.intro-body--pc {
  max-width: none;
}

/* ---------- Scene sections ----------*/
.scene {
  position: relative;
  padding: 0 24px;
  display: grid; /* .scene-visual and .scene-inner share the SAME cell
    (grid-area: 1/1) — grid items are explicitly placed, not stacked
    one-after-another like normal flow, so a margin on one never shifts
    the other (the bug that broke every earlier flow-based attempt). */
  grid-template-columns: 1fr; /* explicit single column that always
    fills the full available width — without it, .product-row (row 2,
    auto-placed below the visual+text row) sized itself to its own
    scrollable content instead of the container. */
}

.scene + .scene { margin-top: 120px; }

.scene--light { color: var(--text-black); }
.scene--dark { color: var(--white); }

.scene-visual {
  grid-area: 1 / 1;
  align-self: start;
  position: relative;
  height: 0;
  z-index: 0;
  margin:0 -24px;
}

.scene-inner { grid-area: 1 / 1; }

.scene-bg {
  position: absolute;
  top: 0;
  z-index: 0;
  width:100vw !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-size: cover;
  background-position: center;
}

.scene-bg-overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 1;
}

#scene-business .scene-visual { margin-top: 84px; }
#scene-business .scene-bg,
#scene-business .scene-bg-overlay { height: 760px; }
#scene-business .scene-bg-overlay { background: rgba(255, 255, 255, 0.5); }

#scene-dressup .scene-visual { margin-top: 68px; }
#scene-dressup .scene-bg,
#scene-dressup .scene-bg-overlay { height: 760px; }
#scene-dressup .scene-bg-overlay { background: rgba(255, 255, 255, 0.6); }

#scene-offtime .scene-visual { margin-top: 78px; }
#scene-offtime .scene-bg-overlay {
  height: 760px;
  background: #010101;
  z-index: 0;
}
#scene-offtime .scene-bg {
  /*top: 132px;*/
  height: 760px;
  z-index: 1;
}

.scene-inner {
  position: relative;
  z-index: 2;
  max-width: 1380px;
  margin: 0 auto;
  display: grid;
  /*grid-template-columns: 690px 1fr;*/
  /*grid-template-columns: min(690px, 50%) 1fr;*/
  grid-template-columns: 1fr min(690px, 50%);
  column-gap: 80px;
  padding-bottom:40px;
}

.scene-inner .scene-portrait { grid-column: 1; }
.scene-inner .scene-body { grid-column: 2; }

.scene-inner--reverse { grid-template-columns: 1fr min(690px, 50%); }
.scene-inner--reverse .scene-body { grid-column: 1; }
.scene-inner--reverse .scene-portrait { grid-column: 2; }

/* Normal-flow portrait — no pinning, scrolls with the rest of the row. */
.scene-portrait {
  position: relative;
  align-self: start;
/*  width: 690px;
  height: 690px;*/
  width: 100%;
  max-width:690px;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
}

.scene-body { align-self: start; min-width: 0; }

.scene-text { margin-top: 160px; }

.scene-label {
  font-family: var(--serif);
  font-size: 24px;
  letter-spacing: 0.1em;
  margin-bottom: 40px;
}

.scene-text h2 {
  font-family: var(--serif);
  font-size: 48px;
  line-height: 80px;
  font-weight: 500;
  margin-bottom: 24px /*48px*/;
  color: #000;
  margin-top:24px;
}

h2.u-color-white {
  color: #fff;
}

.scene-copy {
  font-size: 18px;
  line-height: 2;
  font-weight: 300;
  max-width: 610px;
}

/* ---------- Product row: full-width, sits directly under the main
   visual (image + text), not squeezed inside the text column. ---------- */
.product-row {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  /* Dropping max-width above exposed the classic grid blowout: a
     lone 1fr track's implicit min-width is auto (min-content), not 0,
     so the row's non-shrinking cards were growing the whole .scene
     to fit them instead of scrolling within it. */
  min-width: 0;
  margin: /*64px*/ auto 0;
}

.product-slider {
  position: relative;
}

.product-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  cursor: grab;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-y;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  justify-content: flex-start !important;
  padding-left: max(84px, calc((100vw - 1380px) / 2 + 24px)) !important;
  padding-right: max(84px, calc((100vw - 1380px) / 2 + 24px)) !important;
  scroll-padding-left: max(84px, calc((100vw - 1380px) / 2 + 24px));
  scroll-padding-right: max(84px, calc((100vw - 1380px) / 2 + 24px));
}

/* .product-row is full-width/unclamped (see above) so the carousel can
   overflow past 1380px and reveal more cards, but that left its first
   card flush against .scene's own 24px padding — one 24px short of
   .scene-inner's centered content edge above it, which sits at
   max(24px, (100vw-1380px)/2) from the viewport. Subtracting .scene's
   24px (already applied once via .scene's own padding) makes the two
   rows' left edges land on the exact same x. Only above 1080px: below
   that .scene-inner drops its own max-width/centering entirely. */
/* scroll-padding-left MUST match padding-left here: without it, the
   browser's own proximity scroll-snap treats scrollLeft:0 as "unsnapped"
   (the snap target is the first card's start edge, which sits AFTER the
   padding) and silently auto-scrolls by the padding amount within the
   first ~1s of load — completely canceling the margin above and
   reproducing the exact "stuck to the left" symptom, even though the
   padding-left math itself was already correct. Confirmed via CDP: with
   this line absent, .product-grid.scrollLeft drifts from 0 to
   padding-left's value on its own; with it present, scrollLeft stays 0. */
@media (min-width: 1081px) {
  .product-grid {
    /*padding-left: max(0px, calc((100vw - 1380px) / 2 - 24px));*/
    scroll-padding-left: max(84px, calc((100vw - 1380px) / 2 + 24px));
    /*padding-right: max(0px, calc((100vw - 1380px) / 2 - 24px));*/
    scroll-padding-right: max(84px, calc((100vw - 1380px) / 2 + 24px));
  }
}

.product-grid::-webkit-scrollbar { display: none; }

.product-grid.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.slider-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--navy);
  z-index: 5;
  transition: opacity 0.25s ease;
}

/*.slider-arrow--prev { left: -22px; font-family: Arial !important;}*/
/*.slider-arrow--next { right: -22px; font-family: Arial !important;}*/
.slider-arrow--prev {
  left: 50%;
  margin-left: calc(-50vw + 14px);
  font-family: Arial !important;
}
.slider-arrow--next {
  right: 50%;
  margin-right: calc(-50vw + 14px);
  font-family: Arial !important;
}

.slider-arrow:disabled {
  display: none;
}

/* Custom scroll track: a designed shape standing in for the (hidden)
   native scrollbar, so scroll position/extent stays visible. */
.slider-track {
  position: relative;
  max-width: 1380px;
  margin: 32px auto 0;
  width: 100%;
  height: 1px;
  background: #e5e5e5;
}

.slider-thumb {
  position: absolute;
  top: -0.5px;
  left: 0;
  height: 3px;
  background: #000040;
  pointer-events: none;
}

/* Fixed px card (not calc-to-fit-N) — rows now hold 7-12 items, so the
   row is a genuine horizontal list you scroll through rather than a
   fixed set that happens to overflow by one. */
/* Grid (not flex-column): media types have different natural heights
   (regular photo 275px / circle 277px / rect 226px), which in a flow
   layout pushed .product-name to a different y per card, making the
   row of name labels look jagged. A fixed-height media row + row-gap
   gives every card the same text baseline regardless of media type;
   align-self on the media/name children (below) then decides how each
   sits within its own fixed row. */
.product-card {
  flex: none;
  width: 292px;
  height: 480px;
  background: #f8f8f8;
  color: var(--text-black);
  text-align: center;
  display: grid;
  grid-template-rows: 285px 1fr;
  justify-items: center;
  row-gap: 24px;
  padding-top: 64px;
  overflow: hidden;
  scroll-snap-align: start;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
}

/* Function & Material's media row inherits the shared 285px row above,
   sized for the tallest circle frame the OTHER two product rows never
   use (Dial Pattern/Case Design's plain photos are 275px). Scoped here
   (not a change to the shared rule) so trimming dead space after the
   9S/9R/9F size-down doesn't touch those other rows. */
#scene-dressup .product-card {
  height: 495px;
  grid-template-rows: 300px 1fr;
}

.product-card.reveal {
  transition: opacity 1s var(--ease), transform 1s var(--ease), translate 0.35s ease, box-shadow 0.35s ease;
}

.product-card:hover {
  translate: 0 -6px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.08);
}

.product-card img {
  width: 170px;
  height: 275px;
  object-fit: cover;
  align-self: end;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  pointer-events: none;
}

/* Spring Drive / Quartz (not Mechanical — see .product-media--rect
   below) have no rectangular product photo — just a macro shot of the
   caliber itself, so it needs its own frame size rather than reusing
   .product-card img's rectangle. No border-radius/overflow clip here
   (despite the --circle name) — the caliber photos are already
   tightly cropped to their own round bezel, and that bezel isn't
   centered in its source canvas, so an additional inscribed-ellipse
   clip on top cut into one side of the bezel and left the other side
   untouched: a lopsided double-crop that read as the whole photo
   being shifted sideways. The photo's own circular edge is the only
   circular clip it needs. */
.product-media--circle {
  display: block;
  width: 259px;
  height: 300px;
  align-self: end;
}

/* Back to the raw, un-flattened source photos (real alpha transparency
   around the caliber) instead of Figma's flattened mask exports — those
   baked Figma's own white canvas in behind the transparent parts, which
   read as a white box instead of the card's #f8f8f8 background. contain
   (not cover) is required here: the raw photos aren't pre-cropped to
   this leaf's box, so cover would need a hand-tuned crop to avoid
   cutting off the crown/edges, whereas contain always shows the whole
   movement and just letterboxes into the transparent PNG's own
   background — which is the card's background anyway, so there's no
   visible letterbox. */
/* .product-card .product-media--circle img (not just .product-media--circle
   img) — tied specificity with the mobile breakpoints' ".product-card img"
   (118x191) meant that generic rule won the cascade on width/height at
   <=767px (same specificity, declared later in the file), collapsing this
   back to a fixed 118x191 box with no centering on its parent, which read
   as the caliber shot pinned to the left edge of its frame with all the
   slack piling up on the right. The extra .product-card ancestor class
   guarantees this always wins regardless of source order. */
.product-card .product-media--circle img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 9S is the one movement WITHOUT a circular mask in Figma — a plain
   rectangular photo (270x238) sitting lower in the card than the
   circular 9R/9F shots, not a uniform circle like its siblings. */
/* object-position: bottom (not the contain default of centered) — the
   source photo is landscape-ish (wider than this box), so contain
   letterboxes it top+bottom; centering that letterbox left the disc
   floating above the box's bottom edge instead of sitting flush like
   the circular 9R/9F frames do. */
.product-card .product-media--rect {
  width: 257px;
  height: 226px;
  object-fit: contain;
  object-position: center bottom;
  align-self: end;
}

/* Chronograph's case is genuinely wider than the other Function &
   Material watches — the shared 170x275 box's aspect is narrower than
   the case photo's, so cropping it to fit (via cover) either clips the
   sides or (if padded to avoid that) reads as a size-down against its
   neighbors. Widening this one card's box to match the photo's own
   aspect ratio instead avoids both: no crop, no shrink, and it's
   allowed to sit a bit wider than its neighbors, which is honest to
   the actual case size rather than forcing a false uniformity. */
.product-card .product-media--wide {
  width: 179px;
}

.product-collection {
  font-size: 12px;
  letter-spacing: 0.05em;
  color: #777;
  line-height: 1;
  margin-bottom: 16px;
}

.product-name {
  font-size: 20px;
  font-family: var(--serif);
  letter-spacing: 0.02em;
  line-height: 1.3;
  align-self: start;
  color: #000 !important;
}

/* 44GS/62GS: a single short line, sized up vs. the two-line collection
   names sharing this row so it doesn't read as visually lighter. */
.product-name--lg {
  font-size: 24px;
}

/* ---------- Reveal: fade + gentle rise from below, no scale/mask ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s ease, transform 1s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-image__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.reveal-image__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scene-portrait.reveal {
  height: 500px /*690px*/;
  max-width: 540px;
}

/* A real, plain white block between Dress Up and the Mens/Ladies
   links — not flush against either, breathing room on both sides. */
.section-divider {
  position: relative;
  z-index: 10;
  height: 80px;
  background: var(--white);
}

/* ---------- Scene links (bottom images) ---------- */
.scene-links {
  position: relative;
  z-index: 10;
  background: var(--white);
  padding: 0 24px 100px;
}

.scene-links-lead {
  max-width: 580px; /*560*/
  margin: 0 auto 64px;
  text-align: center;
}

.scene-links-label {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.15em;
  color: #999;
  margin-bottom: 16px;
}

.scene-links-copy {
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1.7;
  font-weight: 400;
  color: var(--text-black);
}

.scene-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 64px;
}

.scene-link {
  display: block;
  width: 462px;
  color: var(--text-black);
}

.scene-link .reveal-image__frame {
  overflow: hidden;
  width: 462px;
  /* height:auto overrides the shared .reveal-image__frame rule's
     height:100% (same-specificity fight it would otherwise lose to on
     source order alone) — with height freed to auto, aspect-ratio
     actually drives the box instead of being ignored. */
  height: auto;
  aspect-ratio: 640 / 440;
}

.scene-link .reveal-image__frame img { transition: transform 2.5s ease-out, scale 0.5s ease; }
.scene-link:hover .reveal-image__frame img { scale: 1.05; }

/* ladys.png's watch reads noticeably smaller than mens.png's — the two
   source photos were shot at different distances/zoom, not a box-size
   mismatch (both frames are already identical 462x389.6px). Scaling
   just this image up and re-centering on the watch (not the default
   50% 50%) brings its visual weight in line with the men's photo. */
.scene-link--ladies .reveal-image__frame img {
  scale: 1.35;
  object-position: 62% 42%;
}

/* Keep the hover zoom proportional on top of the base 1.35 (this rule's
   higher specificity would otherwise snap it back down to the shared
   1.05 on hover). */
.scene-link--ladies:hover .reveal-image__frame img {
  scale: 1.42;
}

.scene-link span {
  display: block;
  margin-top: 24px;
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .fv-simple { padding: 80px 24px 56px; }

  .scene { padding: 0 24px calc(80px - 55px); }
  .scene + .scene { margin-top: 0; }
  .scene-visual { display: none; }

  .scene-inner {
    padding: 0;
    grid-template-columns: 1fr;
    /*row-gap: 48px;*/
    min-width: 0;
    width:100%;
  }

  /* Mobile switches .product-card to a fixed px width, which (being
     non-shrinking, flex:none) blows out .scene's single grid column —
     the same min-width:auto blowout fixed earlier for .scene-body,
     recurring here because .product-row now lives one level up. */
  .product-row { min-width: 0; }
  .scene-inner--reverse { grid-template-columns: 1fr; }
  .scene-inner .scene-body,
  .scene-inner--reverse .scene-body { grid-column: 1; order: 1; }
  .scene-inner .scene-portrait,
  .scene-inner--reverse .scene-portrait {
    grid-column: 1;
    order: 0;
    position: relative; 
    width: 100%;
    height: 350px /*auto*/;
    aspect-ratio: 3 / 2;
    margin: 0 auto;
    /*max-width: 480px;*/
    max-width: 100%;
    /*overflow:visible !important;*/
  }
  .scene-text { margin-top: 0; }
  .scene-body {
    padding-bottom: 0;
    background-size: cover;
    background-position: center;
    /* padding: 50px 20px 100px; */
    padding: 40px 32px 100px; */
    width:100vw;
    height:auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .scene-copy {
    max-width:100%;
  }
  .product-row {
    margin-top: 40px;
  }
  .product-card { width: 193px; height: 324px; padding-top: 40px; grid-template-rows: 191px 1fr; }
  .product-card img { width: 118px; height: 191px; }
  /* Function & Material's movement cards get a taller media row (only
     scoped to #scene-dressup, not the shared .product-card rule above)
     since their frames grew ~10% for the sizing fix below — the other
     two product rows (Dial Pattern, Case Design & Collection) keep the
     original 191px/324px. Row trimmed to 194px (from 200px) to match
     the ~5% size-down below, which lowered the tallest child (9S rect
     186px + its 8px margin-top = 194px) — height drops by the same
     6px so the name row's own gap stays unchanged. */
  #scene-dressup .product-card { height: 327px; grid-template-rows: 194px 1fr; }
  /* No .product-media--circle override existed at this breakpoint
     before — it silently inherited the PC rule, which is harmless
     while PC is 170x170 but would blow out this 193px-wide mobile
     card once PC grows to 267x285 (see PC sizing fix above). */
  /* Shrunk from 187x196 and Mechanical's padding rebalanced below —
     client feedback: 9R/9F's baked-in drop-shadows read as sitting at
     different heights against 9S floating higher above them; sizing
     the circle frames down and pushing 9S's photo down within its own
     frame (same align-self:end anchor) balances the row. */
  .product-media--circle { width: 165px; height: 175px; }
  .product-card .product-media--wide { width: 125px; }
  /* The old padding:26px 12px 2px here was guessing at a box offset to
     compensate for a defect baked into movement-mechanical.png itself:
     the source export's alpha channel didn't drop to 0 at the disc's
     lower edge — it faded out over ~25px, near-invisible but still
     >0, which stretched the file's effective canvas well past the
     visible disc and threw off contain's centering in a way no amount
     of box padding could reliably compensate for. The source PNG is
     now cropped to where that fade is actually imperceptible, so
     object-position:bottom (base rule) alone centers it correctly;
     margin-top here is the one deliberate, real offset left — nudging
     9S slightly lower than 9R/9F per the original Figma spec. */
  .product-card .product-media--rect { width: 177px; height: 186px; margin-top: 8px; }
  /*.slider-arrow { display: none; }*/

  #scene-business .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/business-bg.webp?v=1788504532'); }
  #scene-offtime .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/offtime-bg.webp?v=1788505716'); }
  #scene-dressup .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/dressup-bg.webp?v=1788852995'); }

  .scene-portrait {
    overflow: visible;
  }
  .scene-portrait .reveal-image__frame {
    width: 100vw;
    height: 400px /*auto*/;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}

@media (min-width:768px) and (max-width:1080px) {
  .scene-portrait .reveal-image__frame {
    height:350px;
  }
  .product-row {
    margin-top: 0;
    top: -55px;
  }
  .scene-text h2 {
    font-size:40px;
  }
  .section-divider {
    height: calc(80px - 45px);
  }
}

@media (max-width: 720px) {
  .scene { padding: 0 20px 80px; }
  .product-card { width: 193px; height: 324px; padding-top: 24px; padding-bottom: 24px; grid-template-rows: 191px 1fr; }
  #scene-dressup .product-card { height: 327px; grid-template-rows: 194px 1fr; }
  .product-card img { width: 118px; height: 191px; }
  .product-name { font-size: 18px; }
  .product-name--lg { font-size: 22px; }
  /* Figma SP frame (2255:883): 9R/9F clip masks are 167x178/173x185 —
     collapsed to one shared 170x182 since the few px difference between
     them doesn't read as visibly wrong. 9S plain rect is 182x177.
     (Sized up ~10% from those Figma values per live-review feedback —
     see .product-media--circle's base-rule comment for why the circular
     clip itself was dropped.) */
  .product-media--circle { width: 165px; height: 175px; }
  .product-card .product-media--wide { width: 125px; }
  /* See the max-width:1080px rule above for why this is margin-top
     (a deliberate nudge) rather than the old padding hack. */
  .product-card .product-media--rect { width: 177px; height: 186px; margin-top: 8px; }

  .scene-links-grid { flex-direction: column; align-items: center; gap: 80px; }
  .scene-links-lead { margin-bottom: 40px; }
  .scene-links-copy { font-size: 18px; }
  .scene-link,
  .scene-link .reveal-image__frame { width: 100%; max-width: 480px; height: auto; aspect-ratio: 640 / 440; }
}

/* ==========================================================================
   SP precision pass — values below come directly from the Figma SP frame
   (node 2137:10)'s computed styles, not eyeballed, so they intentionally
   diverge from the PC rules above (font sizes, FV layout/color, the product
   carousel arrows, Off Time's text background). Kept as its own block,
   last in the file, so it wins over the 1080px/720px blocks above for any
   selector they share — none of this touches PC since it's still gated by
   the same max-width query. ========================================== */
@media (max-width: 767px) {
  /* ---------- FV (simple variant) ---------- */
  .fv-simple {
    padding: 64px 16px 48px;
    width:100vw;
  }

  .fv-simple-title {
    font-size: 24px;
    line-height: 41px;
    letter-spacing: -0.01em;
    margin-bottom: 24px;
  }

  .hero-h1--pc { display: none; }
  .hero-h1--sp { display: block; margin-top:0 !important;}

  /* Reveal fires earlier on mobile now (see script.js) — slowing the
     transition itself down keeps that earlier start from reading as
     abrupt/snappy instead of a graceful fade. */
  .reveal {
    transition-duration: 2.4s;
  }

  /* Real phones (<=720, so the 720px block's 20px also applies) still
     need to land on Figma's exact 16px side inset, not that block's
     value — declared here so this later block wins. */
  .scene { padding-left: 16px; padding-right: 16px; /*padding-bottom:80px !important;*/}

  .scene-portrait {
    overflow: visible;
  }

  #scene-offtime .scene-portrait {
    aspect-ratio: initial;
  }

  .scene-portrait .reveal-image__frame {
    width: 100vw;
    height: 300px /*auto*/;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* ---------- Scene text sizing ---------- */
  p.scene-label { font-size: 16px; margin-bottom: 24px; }
  /* letter-spacing tightens ~11-char lines (e.g. Details' 2nd line) that
     otherwise overflow the 350px column by a couple px and wrap to a
     3rd line, splitting "探す" mid-word. */
  .scene-text h2 {
    font-size: 32px;
    line-height: 32px /*64px*/;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    margin-top: 0;
  }
  .scene-copy {
    font-size: 16px;
    line-height: 2.1 /*40px*/;
    max-width: none;
    letter-spacing: -0.01em;
  }
  .br-sp { display: block; }

  /* Plain white breathing-room block between Dress Up and Mens/Ladies —
     hidden on mobile only (kept in the DOM/PC untouched) per feedback. */
  .section-divider { display: none; }

  /* Business is the first scene right after the intro — no top padding
     above its main visual (sp_secne_business.png) on mobile. */
  #scene-business { padding-top: 0; }

  /* Figma's SP main visual is a full-bleed landscape crop (not the
     tall PC portrait) — matches the sp_secne_*.png aspect ratio the
     <picture> sources swap in above this breakpoint. */
  .scene-inner .scene-portrait,
  .scene-inner--reverse .scene-portrait {
    aspect-ratio: 39 / 32;
    /* .scene-portrait.reveal sets an explicit height:980px (PC sizing,
       defined outside any media query) — with both width and height
       definite, aspect-ratio is ignored and the box stays 980px tall
       here too, bleeding the full-bleed photo down over the text/
       carousel below it. height:auto lets aspect-ratio drive it. */
    height: auto;
    max-height:300px;
    max-width: none;
    width: calc(100% + 32px);
    /* -1px bottom closes a subpixel gap: aspect-ratio's computed height
       rounds independently of the text band below it, leaving a hairline
       sliver of the page's white background showing between the two
       full-bleed layers on some viewport widths. */
    margin: 0 -16px -1px;
  }

  /* No gap between the full-bleed portrait and the text band below —
     the sp_bg_*.png images (set per scene below) are what carry the
     visual through, so any row-gap here just reads as dead space. */
  .scene-inner { row-gap: 0; }

  /* Text band behind .scene-body, full-bleed like the portrait above —
     matches PC's .scene-visual band, using the SP-cropped versions of
     the same source photos. Off Time's is the dark one, so its white
     scene--dark text stays legible against it (that's also today's fix
     for it going missing entirely). */
  .scene-body {
    position: relative;
    background-size: cover;
    background-position: center;
    margin: 0 -16px;
    padding: 40px 16px 200px;
    width: 100vw;
  }

  #scene-business .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/sp_bg_business.webp?v=1788502937'); }
  #scene-offtime .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/sp_bg_offtime.webp?v=1788502938'); }
  #scene-dressup .scene-body { background-image: url('https://cdn.shopify.com/s/files/1/0679/3779/6343/files/sp_bg_dressup.webp?v=1788502937'); }

  /* Carousel overlaps the tail of the background band instead of
     sitting below it on plain white, per design.
     margin/width: .product-row was still boxed inside .scene's 20px
     side padding, unlike the full-bleed portrait/body bands above it —
     so the peeking neighbor card was clipped 20px short of the actual
     screen edge, leaving a bare strip of the scene's own background
     between the card and the edge instead of the card peeking flush
     against it. Full-bleeding it here (same margin/width trick used
     elsewhere) lets the peek reach the true edge. */
  .product-row {
    margin: -160px -16px 0;
    width: calc(100% + 32px);
    position: relative;
    z-index: 2;
  }

  /* .product-row went full-bleed above so the card carousel could peek
     flush to the screen edge, but that stretched the progress-bar
     track underneath it to the same full width — it reads as a bare
     scrollbar running edge-to-edge. Inset it back in on its own. */
  .slider-track {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-right: 20px;
  }

  /* ---------- Lead text under the FV: SP has its own copy + line
     breaks per Figma, not a reflow of the PC string ---------- */
  .intro-body--pc {
    display: none;
  }
  .intro-body--sp {
    display: block;
  }
  .intro-body { font-size: 16px; }

  /* ---------- Product carousel: SP design keeps the arrows, inset from
     the row's edges rather than PC's outside-the-row placement. Cards
     snap to the row's CENTER (not the left edge) so the resting card
     never sits directly under the arrow buttons — that overlap was
     causing mis-taps when picking a product. ---------- */
  .slider-arrow { display: flex; }
  .slider-arrow--prev { margin-left: calc(-50vw + 24px) /*left: 16px;*/ }
  .slider-arrow--next { margin-right: calc(-50vw -14px); /*right: 16px;*/ }

  .product-grid {
    scroll-snap-type: x mandatory;
    padding-left: calc(50% - 80px);
    padding-right: calc(50% - 80px);
  }
  .product-card { scroll-snap-align: center; }

  /* Overrides the 720px block's 18px/22px — single-line names (44GS,
     62GS, GMT, U.F.A, etc.) and two-line collection names stay the same
     size as each other per Figma's SP frame; only the two-line ones
     need the extra per-line leading. Sized down from 20px/20px per
     live-review feedback (kept --lg matching the regular size rather
     than leaving it at 20px, same as they matched before). */
  .product-name { font-size: 18px; line-height: 22px; }
  .product-name--lg { font-size: 18px; }

  /* ---------- Mens/Ladies quick links ---------- */
  .scene-links-label { font-size: 16px; }
  .scene-links-copy { font-size: 20px; line-height: 1.4; }
  .scene-link span { font-size: 18px !important; }

  div.custom__item {
    padding-left:0 !important;
  }

  .scene-links {
    width: 100vw;
  }
  section.scene {
    width:100vw;
  }
}

.text-with-icons {
  .text-with-icons__block-button {
    a.btn {
      display:flex;
    }
  }
}

@media screen and (max-width:512px) {
  .scene-links-grid {
    row-gap: 64px;
  }
}