/* TUFF TYMES store: light editorial store under the New York film (reference: ref/reel/ref_DdjLsxnsbfW.mp4).
   One easing set (--ease), transform/opacity only for motion.
   Scoped for the merge (MERGE.md): everything lives under .tt-store (standalone: <body class="tt-store">; merged: the #store wrapper and
   #pv). Tokens sit on .tt-store, not :root (the film page's :root is dark); base rules use :where(.tt-store) so specificity inside this
   file is unchanged; the class names the film page also uses (.btn .eyebrow .lead .grid .note .lang) are scoped and reset what
   site.css would leak in. */
.tt-store {
  --bg: #f4eee8;        /* = the product shots' backdrop, so the flats sit seamless */
  --panel: #ebe4db; --line: #d9d1c4; --ink: #16170f; --soft: #6b685c; --olive: #4f5631;
  --display: 'Anton', Impact, 'Arial Narrow', sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, -apple-system, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 360ms;
  --hd: 60px;
  --pad: clamp(16px, 6vw, 96px);
  background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--body); -webkit-font-smoothing: antialiased;
}
:where(.tt-store), :where(.tt-store) *, :where(.tt-store) *::before, :where(.tt-store) *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body { margin: 0; }
:where(.tt-store) img, :where(.tt-store) video { display: block; max-width: 100%; }
:where(.tt-store) a { color: inherit; }
:where(.tt-store) button { font: inherit; color: inherit; }
:where(.tt-store) :focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:where(.tt-store) .eyebrow { display: block; margin: 0 0 14px; font: 600 13px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
.h { margin: 0; font: 400 clamp(44px, 6vw, 96px)/.94 var(--display); text-transform: uppercase; letter-spacing: .005em; }
:where(.tt-store) .eyebrow::before { content: none; }
:where(.tt-store) .lead { margin: 18px 0 0; max-width: 40ch; color: var(--soft); font-size: inherit; line-height: inherit; }
.link { font: 600 15px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px;
        text-decoration-thickness: 1px; }
:where(.tt-store) .btn { display: inline-flex; white-space: normal; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 4px;
       background: var(--ink); color: var(--bg); text-decoration: none; font: 600 15px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase;
       transition: opacity var(--dur) var(--ease); }
:where(.tt-store) .btn:hover { opacity: .86; transform: none; }
:where(.tt-store) .pill { min-height: 40px; padding: 0 18px; border-radius: 99px; font-size: 13px; }
:where(.tt-store) section[id] { scroll-margin-top: var(--hd); }
#collection { scroll-margin-top: 0; }          /* the sticky stage already leaves room for the header (--hd) */

/* ── header (opaque: nothing scrolls through it) ── */
.hd { position: fixed; z-index: 50; top: 0; left: 0; right: 0; height: var(--hd); display: flex; align-items: center; justify-content: space-between;
      gap: 12px; padding: 0 var(--pad); background: var(--bg); border-bottom: 1px solid rgba(22, 23, 15, .07); }
.hd__logo img { height: 36px; width: auto; }
.hd__nav { display: flex; gap: 28px; position: absolute; left: 50%; transform: translateX(-50%); }
.hd__nav a, .hd__dm { font: 600 13px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; }
.hd__nav a:hover, .hd__dm:hover { text-decoration: underline; text-underline-offset: 5px; }
.hd__r { display: flex; align-items: center; gap: 16px; }
:where(.tt-store) .lang { display: flex; border: 1px solid var(--line); border-radius: 99px; padding: 2px; }
:where(.tt-store) .lang button { border: 0; background: none; min-width: 36px; height: 28px; border-radius: 99px; cursor: pointer;
               font: 600 12px/1 var(--cond); letter-spacing: .12em; color: var(--soft); }
:where(.tt-store) .lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* ── 1. the collection: sticky stage, Mark fixed in the centre, the outfit swaps ── */
.col { position: relative; --step: 72svh; height: calc(100svh + 7 * var(--step)); }
.col__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; touch-action: pan-y; }
/* the figure fills 7.6 % .. 95.2 % of every look frame (1073x1600, all seven pixel-aligned): place the frame so the body
   runs from --ft (cap) to --fb (soles) */
.col__fig { --ft: calc(var(--hd) + 5svh); --fb: 93svh;
            position: absolute; left: 50%; top: calc(var(--ft) - .0871 * (var(--fb) - var(--ft)));
            height: calc((var(--fb) - var(--ft)) / .8756); aspect-ratio: 1073 / 1600; transform: translateX(-50%); }
.col__fig img { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.col__shadow { position: absolute; left: 50%; bottom: 2.6%; width: 52%; height: 5%; transform: translateX(-50%);
               background: radial-gradient(closest-side, rgba(52, 40, 24, .22), rgba(52, 40, 24, 0)); }
/* neighbours: the look's top as a product flat, sized to his torso, at chest height. Above the looks (z 3 > 1/2) inside the
   figure's own group, so multiply darkens nothing on the plain backdrop and lets the tee print onto him as it lands */
.col__fig .col__ghost { inset: auto; left: 25%; top: 21%; width: 50%; height: auto; aspect-ratio: 1; z-index: 3; opacity: 0;
                        mix-blend-mode: multiply; transform-origin: 50% 50%; will-change: transform, opacity; }
.col__fig .col__ghost:not([src]) { display: none; }     /* not requested yet (they load after the looks): no empty image frame */
.col__main { opacity: 0; transition: opacity 160ms var(--ease); }          /* fading out: short, only the fringe shows */
.col__main.is-on { opacity: 1; transition-duration: var(--dur); }          /* fading in: over the one below, never a dip */
.no-anim .col__main { transition: none; }
/* title + a short intro under it, bottom-left (as the reference); the look info top-right sits above the right neighbour */
.col__head { position: absolute; z-index: 2; left: var(--pad); bottom: 10svh; max-width: 34vw; }
.col__intro { margin-top: 18px; max-width: 34ch; }
.col__title { font-size: clamp(44px, 4.6vw, 80px); }
.col__sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--soft); }
.col__hint { margin: 14px 0 0; font: 600 12px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.col__info { position: absolute; z-index: 2; right: var(--pad); top: calc(var(--hd) + 5svh); width: min(26vw, 300px); }
.col__name { margin: 0; font: 700 clamp(24px, 2.2vw, 34px)/1 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.col__pieces { margin: 8px 0 16px; font-size: 15px; line-height: 1.4; color: var(--soft); }
.col__nav { position: absolute; z-index: 2; left: 50%; bottom: calc(1.6svh + env(safe-area-inset-bottom)); transform: translateX(-50%);
            display: flex; align-items: center; gap: 6px; }
.col__nav span { min-width: 64px; text-align: center; font: 600 13px/1 var(--cond); letter-spacing: .2em; color: var(--soft); }
.arrow { width: 40px; height: 40px; border: 0; border-radius: 99px; background: none; cursor: pointer; display: grid; place-items: center; }
.arrow:hover { background: rgba(22, 23, 15, .06); }
.arrow:disabled { opacity: .3; cursor: default; background: none; }
.arrow svg { width: 18px; height: 18px; }

/* ── 2. lookbook ── */
.lb, .st, .cu, .shop { padding: clamp(80px, 10vw, 150px) var(--pad); }
.sec-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: clamp(28px, 4vw, 56px); }
:where(.tt-store) .grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.tile { margin: 0; }
.tile__img { overflow: hidden; border-radius: 6px; background: var(--panel); aspect-ratio: 4 / 5; }
.tile__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.tile figcaption { padding: 12px 2px 0; }
.tile__place { display: block; font: 700 16px/1.1 var(--cond); letter-spacing: .06em; text-transform: uppercase; }
.tile__look { display: block; margin-top: 4px; font-size: 14px; color: var(--soft); }
.tile--ig { display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 4 / 5; padding: clamp(18px, 2vw, 28px);
            border-radius: 6px; background: var(--ink); color: var(--bg); }
.tile--ig .h { font-size: clamp(22px, 2.6vw, 44px); overflow-wrap: anywhere; }   /* 22px keeps "@tufftymes" on one line in the 2-column phone grid */
.tile--ig p { margin: 0; color: #b9b4a5; font-size: 15px; }
.tile--ig .btn { background: var(--bg); color: var(--ink); align-self: flex-start; }
@media (hover: hover) { .tile:hover .tile__img img, .card:hover .card__img img { transform: scale(1.03); } }

/* ── 3. street ── */
.st { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: clamp(28px, 6vw, 110px); align-items: center; }
.st__vid { position: relative; overflow: hidden; border-radius: 6px; background: var(--panel); aspect-ratio: 4 / 5; max-height: 86svh; }
.st__vid video { width: 100%; height: 100%; object-fit: cover; }
.st__vid .pp { position: absolute; right: 12px; bottom: 12px; width: 40px; height: 40px; border: 0; border-radius: 99px; cursor: pointer;
               background: rgba(22, 23, 15, .55); color: #fff; display: grid; place-items: center; }
.st__vid .pp svg { width: 16px; height: 16px; }
.st__copy .lead { margin-bottom: 26px; }

/* ── 4. close-up ── */
.cu { padding-left: 0; padding-right: 0; }
.cu__hero { position: relative; }
.cu__hero img { width: 100%; height: auto; aspect-ratio: 1920 / 1072; object-fit: cover; }
.cu__text { position: absolute; left: var(--pad); top: 50%; transform: translateY(-50%); max-width: 36vw; }
.cu__text .h { font-size: clamp(44px, 5.6vw, 92px); }
.cu__text .eyebrow { color: var(--ink); }
.cu__text .link { display: inline-block; margin-top: 26px; }
.cu__two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px var(--pad) 0; }
.cu__two figure { margin: 0; }
.cu__two .tile__img { aspect-ratio: 3 / 4; }
.cu__two figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 2px 0; }

/* ── 5. shop grid + product view ── */
.card { display: block; text-decoration: none; }
.card__img { overflow: hidden; border-radius: 6px; background: var(--panel); aspect-ratio: 1; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease); }
.card__name { display: block; padding-top: 12px; font: 700 16px/1.15 var(--cond); letter-spacing: .05em; text-transform: uppercase; }
.card__soon { display: block; margin-top: 4px; font-size: 14px; color: var(--soft); }
:where(.tt-store) .note { margin: 28px 0 0; font-size: 14px; color: var(--soft); }

.pv { position: fixed; inset: 0; z-index: 100; overflow-y: auto; overscroll-behavior: contain; background: #faf7f3;
      opacity: 0; transform: translateY(14px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.pv.is-in { opacity: 1; transform: none; }
.pv[hidden] { display: none; }
.pv__bar { position: sticky; top: 0; z-index: 2; height: var(--hd); display: flex; align-items: center; justify-content: space-between;
           padding: 0 var(--pad); background: #faf7f3; border-bottom: 1px solid rgba(22, 23, 15, .07); }
.pv__bar img { height: 36px; width: auto; }
.pv__close { display: inline-flex; align-items: center; gap: 10px; border: 0; background: none; cursor: pointer; padding: 8px 0;
             font: 600 13px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; }
.pv__close svg { width: 16px; height: 16px; }
.pv__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, .85fr);
            grid-template-areas: "head gal buy" "body gal buy"; grid-template-rows: auto 1fr; min-height: calc(100svh - var(--hd)); }
.pv__head { grid-area: head; padding: clamp(40px, 7svh, 90px) clamp(20px, 3vw, 52px) 0 var(--pad); }
.pv__head .h { font-size: clamp(44px, 4.4vw, 80px); }
.pv__body { grid-area: body; padding: 26px clamp(20px, 3vw, 52px) 40px var(--pad); }
.pv__body p { margin: 0; max-width: 36ch; color: var(--soft); }
.pv__gal { grid-area: gal; background: var(--bg); display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 20px 0; }
.pv__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.pv__track::-webkit-scrollbar { display: none; }
/* each photo is shown as a card (its studio backdrop is not the panel colour, so it should not pretend to be seamless) */
.pv__slide { flex: 0 0 100%; scroll-snap-align: center; height: calc(100svh - var(--hd) - 140px); min-height: 320px; padding: 0 24px;
             display: flex; align-items: center; justify-content: center; }
.pv__slide img { width: auto; height: auto; max-width: 100%; max-height: 100%; border-radius: 6px; }
.pv__thumbs { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 16px 16px 0; }
.pv__thumbs button { width: 52px; height: 52px; padding: 0; border: 1px solid transparent; border-radius: 4px; background: var(--bg); cursor: pointer; overflow: hidden; }
.pv__thumbs button[aria-current="true"] { border-color: var(--ink); }
.pv__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.pv__buy { grid-area: buy; padding: clamp(40px, 7svh, 90px) var(--pad) 40px clamp(20px, 3vw, 48px); }
.pv__name { margin: 0; font: 700 clamp(26px, 2.2vw, 34px)/1.05 var(--cond); text-transform: uppercase; letter-spacing: .02em; }
.pv__soon { margin: 10px 0 0; font: 600 14px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--olive); }
.pv__k { margin: 34px 0 10px; font: 600 13px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--soft); }
.sizes { display: flex; flex-wrap: wrap; gap: 6px; }
.sizes button { min-width: 48px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: none;
                font: 600 14px/1 var(--cond); letter-spacing: .08em; color: var(--soft); opacity: .55; cursor: not-allowed; }
.pv__later { margin: 10px 0 0; font-size: 14px; color: var(--soft); }
.pv__buy .btn { width: 100%; margin-top: 30px; }
.pv__help { margin: 12px 0 0; font-size: 13px; color: var(--soft); }
.pv__prev { margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--soft); }
html.pv-open { overflow: hidden; }

/* ── footer ── */
.ft { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 40px var(--pad) calc(40px + env(safe-area-inset-bottom));
      border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
.ft img { height: 44px; width: auto; }

/* ── phones ── */
@media (max-width: 760px) {
  .tt-store { --hd: 56px; font-size: 16px; }
  .hd__nav { display: none; }
  .hd__logo img, .pv__bar img { height: 32px; }
  .hd__r { gap: 12px; }
  .col { --step: 60svh; }
  .col__fig { --ft: calc(var(--hd) + 30px + 21vw); --fb: calc(100svh - 128px - env(safe-area-inset-bottom)); }
  .col__head { left: 16px; right: 16px; top: calc(var(--hd) + 14px); bottom: auto; max-width: none; }
  .col__title { font-size: clamp(36px, 11vw, 48px); }
  .col__title br.d { display: none; }
  .col__intro { display: none; }
  .col__info { left: 16px; right: 16px; top: auto; bottom: calc(54px + env(safe-area-inset-bottom)); width: auto;
               display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 12px; }
  .col__name { font-size: 24px; }
  .col__pieces { grid-column: 1; margin: 6px 0 0; font-size: 14px; }
  .col__view { grid-column: 2; grid-row: 1 / span 2; align-self: end; padding: 10px 0; }
  .col__nav { bottom: calc(6px + env(safe-area-inset-bottom)); }
  :where(.tt-store) .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tile__place { font-size: 14px; }
  .tile__look { font-size: 13px; }
  .sec-head { flex-direction: column; align-items: start; }
  .st { grid-template-columns: 1fr; }
  .cu__text { position: static; transform: none; max-width: none; padding: 0 16px 24px; }
  .cu__hero img { aspect-ratio: 4 / 5; }
  .cu__two { grid-template-columns: 1fr; padding: 10px 16px 0; }
  .pv__grid { display: flex; flex-direction: column; min-height: 0; }
  .pv__head { order: 1; padding: 28px 16px 22px; }
  .pv__gal { order: 2; padding: 12px 0 14px; }
  /* the buy block's children join the page column, so "Notify me" can stick to the bottom of the screen from the first view
     (its sticky range is the whole product page, not just the buy block below the photos) */
  .pv__buy { display: contents; }
  .pv__buy > * { order: 3; margin-left: 16px; margin-right: 16px; }
  .pv__buy > .pv__name { margin-top: 26px; }
  .pv__buy > .pv__help { margin-bottom: 8px; }
  .pv__buy .btn { position: sticky; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 3; width: auto; }
  .pv__body { order: 4; padding: 18px 16px 48px; }
  .pv__slide { height: min(112vw, 60svh); min-height: 0; padding: 0 12px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .col__title { font-size: 34px; }
  .col__fig { --ft: calc(var(--hd) + 26px + 18vw); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pv, .tile__img img, .card__img img { transition: none; }
  .col__main, .col__main.is-on { transition-duration: 0ms; }
}