/* Jockey MV16 PDP clone, v4. One stylesheet.

   v4 carries no QuickAds chrome: no navbar, no level strip, no footer, no page head. The page
   is the product page on Jockey's own container, and the only thing added is the three level
   links at the end of the breadcrumb row.

   EVERY number in the reconstruction is measured off the live jockey.in page on 31 Aug 2026.
   Do not "improve" them — matching is the point:
     container    max-width 1600, gutter 120, so content = min(viewport,1600) - 240
                  measured 784 @1024, 1040 @1280, 1200 @1440, 1360 @1920 (capped)
     media column exactly 50% of content, gap 20, info takes the rest
                  392 @1024, 520/500 @1280, 600/580 @1440, 680/660 @1920
     below ~990   single column, gallery full-bleed edge to edge, gutter ~11-16,
                  breadcrumbs hidden. Measured on their page at 768.
     main frame 438x535 r8, thumb rail 96, thumb aspect 1200/1467
     h1            Jost 17 / 24  w500  #221f20
     price         Jost 16       w600  #121212      note Jost 11 w400
     Color: label  Jost 16       lh 28.8
     swatch        73 wide, media 73x89 r8, name 12 / 17 centred #121212
     colour arrows 38x38
     size button   48x48 r8, 1px rgba(0,0,0,.5), Jost 14 w500 ls 1px
     Size Chart    74x26 r5, bg #efefef, Jost 12 w500
     ADD TO BAG    281x49 r10, Jost 16, lh 23
     return line   Jost 16 w600 #121212, "Know more" #428bc1
     Delivery Details  Jost 16 w600 #221f20     CHECK 195x48 r10
     section head  Jost 32 w600 #221f20, mb 15
     description   Jost 17 / 26 #000, full 1200
     Ideal For     24 w600 label inline with 145x52 r60 pills, pill label 24 w700 #282828
     Washing       one r10 panel, 1px rgba(34,31,32,.24), 8 cells of 110, caption 17 / 19
     feature tiles 289x350, gap 15
*/

:root{
  /* --- house theme, outside the frame --- */
  --h-ink:#0e0f0c;
  --h-page:#fbfaf4;
  --h-page-alt:#f5f3ea;
  --h-neon:#c8f040;
  --h-neon-fill:#c6f24e;
  --h-on-dark:#fbfaf4;
  --h-on-dark-mute:#cfd0da;
  --h-on-dark-faint:#9a9aa6;
  --h-on-light:#0e0f0c;
  --h-on-light-mute:#3a3b32;
  --h-on-light-faint:#6b6b60;
  --h-line-dark:rgba(251,250,244,.14);
  --h-line-light:#e6e3d8;
  --display:"DM Sans","Segoe UI",system-ui,sans-serif;
  --body:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* --- the reconstruction, inside the frame --- */
  --ink:#221f20;
  --ink-2:rgba(34,31,32,.62);
  --ink-3:rgba(34,31,32,.45);
  --price:#121212;
  --link:#428bc1;
  --rule:rgba(0,0,0,.14);
  --rule-strong:rgba(0,0,0,.5);
  --chip:#efefef;
  --grey:#f4f4f4;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Jockey's container, used by every block on the page: max-width 1600 with a fixed 120px
     gutter, so content is min(viewport,1600) - 240. No frame to nest inside any more, so the
     gutter is the container's own. */
  --wrap:1600px;
  --gut:120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
sup{font-size:.62em;vertical-align:super;line-height:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================ the reconstruction */

.pdpbody{font-family:var(--sans);font-size:16px;line-height:1.5;color:var(--ink)}

.crumbrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;
  padding-top:20px;padding-bottom:24px}
.crumbs{flex:1 1 auto;min-width:0}
/* the level links read as part of the breadcrumb row, not as a bar of their own */
.levelnav{flex:0 0 auto;display:flex;align-items:center;gap:10px;
  font-size:14px;letter-spacing:.6px}
.levelnav a{color:var(--ink-3);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:24px}
.levelnav a:hover{color:var(--ink)}
.levelnav [aria-current="page"]{color:var(--ink);font-weight:500;
  box-shadow:inset 0 -2px 0 var(--ink)}
.levelnav .sep{color:rgba(0,0,0,.18)}
.crumbs ol{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;align-items:center}
.crumbs li{font-size:16px;line-height:18px;letter-spacing:.6px;color:rgba(34,31,32,.55)}
.crumbs li:not(:last-child)::after{content:'›';padding:0 7px;color:rgba(34,31,32,.55)}
.crumbs li:last-child{font-weight:500;color:var(--ink)}

/* ============================================================ product, two columns */

/* Their split is proportional: media is exactly 50% of the content, gap 30, so info takes
   the remaining 50% - 30. Measured: media 120..720, h1 at x=750, content ends 1320. */
.product{display:flex;gap:30px;align-items:flex-start;padding-bottom:0}
.media{flex:0 0 50%;min-width:0}
.info{flex:1 1 auto;min-width:0}

/* --- gallery ------------------------------------------------------------- */

/* Inside their 600 media column: 20 inset, an 80 thumb rail, a 42 gap, then a 438 stage.
   600 - 41 padding - 80 - 42 = 437, which is their 438 to the pixel. */
.gal{display:flex;gap:42px;align-items:stretch;padding:0 21px 0 20px}

.rail{flex:0 0 80px;width:80px;display:flex;flex-direction:column;align-items:center;
  position:relative}
/* Their chevrons sit ON the first and last thumb as translucent overlays, not as separate
   buttons above and below the rail. */
.rail-btn{position:absolute;left:0;right:0;height:34px;z-index:2;
  display:grid;place-items:center;background:rgba(255,255,255,.78);
  border-radius:8px;cursor:pointer}
.rail-btn[data-scroll="-1"]{top:0}
.rail-btn[data-scroll="1"]{bottom:0}
.rail-btn img{width:16px;height:9px;opacity:.75}
/* set by the renderer when every thumb already fits: no scroll, so no arrows */
.rail--fits .rail-btn{display:none}
.rail-track{position:absolute;inset:0;display:flex;flex-direction:column;gap:9px;
  overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.rail-track::-webkit-scrollbar{width:0;height:0}
.rail-track > *{flex:0 0 auto}
.thumb{width:100%;padding:0;border:1px solid transparent;border-radius:8px;overflow:hidden;
  background:var(--grey);display:block}
.thumb img{width:100%;aspect-ratio:1200/1467;object-fit:cover;border-radius:7px}
.thumb[aria-current="true"]{border-color:var(--ink)}

.stage{flex:1 1 auto;min-width:0;position:relative}
.stage-frame{position:relative;border-radius:8px;overflow:hidden;background:transparent}
.stage-frame img{width:100%;aspect-ratio:1200/1467;object-fit:cover}
.stylecode{position:absolute;right:0;bottom:12px;background:rgba(255,255,255,.82);
  border-radius:5px 0 0 5px;padding:5px 10px;font-size:12px;font-weight:500;color:var(--ink-2)}
.slotflag{position:absolute;left:10px;top:10px;max-width:calc(100% - 20px);
  background:var(--h-ink);color:var(--h-on-dark);border-radius:6px;
  padding:6px 10px;font-size:11.5px;line-height:1.35}
.slotflag b{color:var(--h-neon);font-weight:600;display:block;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}

/* --- feature chips under the image -------------------------------------- */
/* Theirs is a horizontal scroller that clips at both ends. */
.fitfeel{display:flex;gap:12px;margin-top:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;padding-bottom:6px;
  scrollbar-width:none;-ms-overflow-style:none}
.fitfeel::-webkit-scrollbar{height:0}
.fitfeel > *{flex:0 0 auto;scroll-snap-align:start}
.ff{display:flex;align-items:center;gap:11px;min-height:56px;padding:8px 16px 8px 12px;
  border:1px solid var(--rule);border-radius:10px;text-align:left;background:#fff}
.ff:hover{border-color:var(--rule-strong)}
.ff[aria-expanded="true"]{border-color:var(--ink)}
.ff img{flex:0 0 34px;width:34px;height:34px;object-fit:contain}
.ff-t{min-width:0}
.ff-t .a{display:block;font-size:15px;font-weight:600;line-height:1.25;white-space:nowrap}
.ff-t .b{display:block;font-size:12.5px;color:var(--ink-3);line-height:1.3;
  margin-top:1px;white-space:nowrap}

.ffpop{position:relative;margin-top:12px;border:1px solid var(--rule);border-radius:10px;
  padding:15px 17px;background:#fafafa}
.ffpop[hidden]{display:none}
.ffpop .k{display:block;font-size:11px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:6px}
.ffpop p{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.ffpop .src{display:block;margin-top:10px;font-size:12.5px;color:var(--ink-3)}
.ffpop-close{position:absolute;right:4px;top:4px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-3);font-size:17px}

/* ============================================================ buy box */

.titlerow{display:flex;align-items:flex-start;gap:14px}
.info h2{margin:0;flex:1 1 auto;min-width:0;
  font-size:17px;font-weight:500;line-height:24px;color:var(--ink)}
.acts{display:flex;gap:10px;flex:0 0 auto}
.act{width:40px;height:40px;border-radius:50%;border:1px solid var(--rule);
  display:grid;place-items:center;color:var(--ink-2);background:#fff}
.act:hover{border-color:var(--rule-strong);color:var(--ink)}
.act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}

.pricerow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:20px}
.price{font-size:16px;font-weight:600;color:var(--price)}
.pricenote{font-size:11px;line-height:15px;color:var(--price)}
.infodot{width:16px;height:16px;border-radius:50%;border:1px solid var(--link);
  color:var(--link);font-size:10px;font-weight:600;display:grid;place-items:center;
  line-height:1;flex:0 0 auto}

.optlabel{margin:20px 0 12px;font-size:16px;line-height:24px}
/* theirs fits the Size label and its gaps into the 24px between the swatch card and the
   size row, so it sits tight under the swatches rather than opening a new block */
.optlabel b{font-weight:600}
.optlabel .v{color:var(--ink-3)}

/* colour carousel: 73px cards, arrows overlapping at 38px, exactly as theirs */
.swwrap{position:relative;margin-bottom:21px}
.swatches{display:flex;gap:10px;overflow-x:auto;padding:0 0 4px;list-style:none;margin:0;
  scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none}
.swatches::-webkit-scrollbar{height:0}
.swatches li{flex:0 0 87px;width:87px;scroll-snap-align:start}
.sw{display:block;width:73px;height:89px;margin:0 auto;border-radius:8px;overflow:hidden;
  background:var(--grey);padding:0;border:1px solid transparent}
.sw img{width:100%;height:100%;object-fit:cover}
.swatches li[aria-current="true"] .sw{border-color:var(--ink)}
/* the name box is the image's 73, not the card's 87, so "Sundried Tomato" wraps to two
   lines and the card stands 131 tall like theirs. At the full 87 it fitted on one line and
   the whole column below it rode up 17px. */
.swname{display:block;width:73px;margin:8px auto 0;font-size:12px;line-height:17px;
  text-align:center;color:var(--price)}
.swarrow{position:absolute;top:37px;width:38px;height:38px;z-index:2;
  display:grid;place-items:center;border-radius:50%;background:#fff;
  box-shadow:0 1px 6px rgba(0,0,0,.16)}
.swarrow[data-dir="-1"]{left:-14px}
.swarrow[data-dir="1"]{right:-14px}
.swarrow img{width:38px;height:38px}
.swarrow[disabled]{opacity:0;pointer-events:none}

.sizes{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px;padding:0;list-style:none}
.size{width:48px;height:48px;display:grid;place-items:center;
  border:1px solid var(--rule-strong);border-radius:8px;background:#fff;
  color:#000;font-size:14px;font-weight:500;line-height:21px;letter-spacing:1px}
.size[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

.sizehelp{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px;
  min-height:36px;font-size:16px;color:var(--ink)}
.sizehelp svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--ink-2);
  stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sizehelp .size_btn{height:26px;padding:0 12px;border-radius:5px;background:var(--chip);
  font-size:12px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center}

/* Their qty + add-to-bag bar caps at 464 and never wraps: at 1440 it is 464 in a 580 column
   (qty 167, gap 16, button 281, so it does not fill), and at 1024 it shrinks to fill a 372
   column (qty 130, button 206). Both children shrink proportionally — flex-wrap:wrap put the
   button on its own line below 1440, which theirs never does. */
.buyrow{display:flex;gap:16px;align-items:center;flex-wrap:nowrap;
  max-width:464px;margin-bottom:16px;padding-bottom:35px}
.qty{display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--rule-strong);border-radius:10px;height:49px;
  flex:0 1 167px;min-width:112px}
.qty button{flex:0 0 auto;width:42px;height:47px;display:grid;place-items:center;
  font-size:18px;color:var(--ink-2)}
.qty span{flex:1 1 auto;min-width:0;text-align:center;font-size:16px;font-weight:500}
.atc{flex:0 1 281px;min-width:0;height:49px;border-radius:10px;background:var(--ink);
  color:#fff;font-size:16px;line-height:23px;font-weight:400;text-transform:uppercase;
  display:grid;place-items:center;white-space:nowrap}

.retrow{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin:0 0 16px;
  font-size:16px;font-weight:600;color:var(--price)}
.retrow .badge{flex:0 0 auto;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--ink-2);display:grid;place-items:center;
  font-size:7px;font-weight:700;line-height:1.05;text-align:center;color:var(--ink-2);
  letter-spacing:-.02em}
.retrow a{color:var(--link);font-weight:400;white-space:nowrap}

.delivery{border-top:1px solid var(--rule);padding-top:18px;padding-bottom:29px}
.delivery h3{margin:0 0 14px;font-size:16px;font-weight:600;color:var(--ink)}
.pin{display:flex;gap:12px;flex-wrap:wrap}
.pin input{flex:1 1 200px;min-width:0;height:48px;padding:0 14px;
  border:1px solid var(--rule-strong);border-radius:8px;font:inherit;font-size:16px}
.pin button{flex:0 0 auto;min-width:195px;height:48px;padding:0 22px;border-radius:10px;
  background:var(--ink);color:#fff;font-size:16px;font-weight:500;text-transform:uppercase}
.dchips{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.dchip{display:flex;align-items:center;gap:9px;flex:0 1 auto;min-width:0;
  border:1px solid var(--rule);border-radius:8px;padding:11px 13px;
  font-size:13.5px;color:var(--ink-2)}
.dchip img{width:26px;height:auto;flex:0 0 auto}
.dchip svg{width:24px;height:24px;flex:0 0 auto;fill:none;stroke:var(--ink-2);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dchip b{color:var(--ink);font-weight:600}

/* ============================================================ description */

/* Their section heads are 32/600, not the 14/700 a hidden .section-heading reported.
   Checked against the rendered page, not the first matching selector. */
.desc{border-top:1px solid var(--rule);padding-top:67px;padding-bottom:80px}
/* Measured off theirs: heading box 46 tall, and a 30px gap under every block except the
   washing heading, which sits 15 above its panel. */
.desc h2,.desc h3{margin:0 0 30px;font-size:32px;font-weight:600;line-height:1.44;
  letter-spacing:-.01em;color:var(--ink)}
.desc h3.washhead{margin-bottom:15px}
.desc .body{margin:0 0 30px;font-size:17px;line-height:26px;letter-spacing:.6px;color:#000}
/* their paragraph sits flush under a 350px tile row; under our taller cards it needs air */
.tiles--ours + .body{padding-top:4px}

/* the four feature tiles: 289x350, gap 15, scrolls rather than shrinks */
.tiles{display:flex;gap:15px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-bottom:0;margin-bottom:0;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tile{flex:0 0 289px;width:289px;height:350px;scroll-snap-align:start;
  margin:0;                       /* figure's default 1em 40px adds 320px across four tiles */
  border-radius:14px;overflow:hidden;position:relative;background:var(--grey)}
.tile > img{width:100%;height:100%;object-fit:cover}

/* Our cards wrap instead of scrolling: no horizontal scrollbar, every card visible.
   A 288 floor puts 4 across at 1440 (288) and 1600 (329), 3 at 1280, 2 at 1024 and 768, 1 on
   a phone. Checked on pixels at 288: the subcopy is small but legible. Below about 260 it
   stops being readable, so do not take the floor lower. */
.tiles--ours{display:grid;
  /* min() so the floor can never exceed the container: at 390 the content is 358 and a bare
     minmax(288px,1fr) would push overflow on narrower phones */
  grid-template-columns:repeat(auto-fill,minmax(min(288px,100%),1fr));
  gap:15px;overflow:visible;scroll-snap-type:none;margin-bottom:32px}
/* --tile-ar is set per level on the row: the four on-model graphics are 1122x1402, the five
   studio cards 1800x2200. A shared aspect would crop one set by 2%. */
.tiles--ours .tile{flex:none;width:auto;height:auto;aspect-ratio:var(--tile-ar,1800/2200)}

/* The four-graphic row on levels 1 and 2 takes fixed column counts, not auto-fill: with four
   items the 288 floor lands on 3+1 anywhere between 1134 and 1436, and a single orphaned tile
   reads as a broken row. Four across from 1280 (246 each), two below it, one on a phone.
   Level 3's five cards stay on auto-fill — five never divides evenly anyway. */
@media (min-width:1280px){.tiles--quad{grid-template-columns:repeat(4,1fr)}}
@media (min-width:640px) and (max-width:1279px){.tiles--quad{grid-template-columns:repeat(2,1fr)}}
@media (max-width:639px){.tiles--quad{grid-template-columns:1fr}}

.tile--spec{background:linear-gradient(160deg,#15170f 0%,#0b0c08 100%);
  color:var(--h-on-dark);display:flex;flex-direction:column;
  padding:18px;border:1px solid rgba(200,240,64,.24)}
.tile--spec .st{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--h-neon)}
.tile--spec h3{margin:14px 0 0;font-family:var(--display);font-size:24px;font-weight:700;
  line-height:1.1;letter-spacing:-.015em;color:var(--h-on-dark)}
.tile--spec .sub{margin:5px 0 0;font-size:13px;color:var(--h-on-dark-mute);line-height:1.35}
/* spec pinned to the bottom so the four headlines land on one line across the row */
.tile--spec dl{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--h-line-dark)}
.tile--spec dt{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--h-neon)}
.tile--spec dd{margin:3px 0 10px;font-size:11.5px;line-height:1.45;color:var(--h-on-dark-mute)}
.tile--spec dd:last-child{margin-bottom:0}

/* Ideal For: a 24/600 label inline with pill cards, 145x52, radius 60, label 24/700 */
.ideal{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 30px}
.ideal .lbl{margin:0;font-size:24px;font-weight:600;color:var(--ink);white-space:nowrap}
.ideal ul{display:flex;gap:14px;flex-wrap:wrap;margin:0;padding:0;list-style:none}
.ideal li{display:flex;align-items:center;gap:15px;min-height:52px;padding:7px 20px;
  border:1px solid rgba(34,31,32,.09);border-radius:60px}
.ideal img{width:36px;height:36px;flex:0 0 36px;object-fit:contain}
.ideal span{font-size:24px;font-weight:700;color:#282828;white-space:nowrap}

/* Washing: one bordered panel, 8 cells of 110, icon above a 17px centred caption */
.washpanel{border:1px solid rgba(34,31,32,.24);border-radius:10px;padding:24px 10px;
  display:flex;justify-content:space-around;gap:10px;flex-wrap:wrap;margin:0 0 30px}
.washpanel li{width:110px;text-align:center;list-style:none}
.washpanel img{width:38px;height:38px;margin:0 auto 10px;object-fit:contain}
.washpanel span{display:block;font-size:17px;line-height:19px;color:#000}

.mfg{display:flex;align-items:flex-start;gap:24px;flex-wrap:wrap;justify-content:space-between}
.mfg p{margin:0;flex:1 1 420px;font-size:14px;line-height:1.5;color:#2c2728}
.mfg .coo{display:flex;align-items:center;gap:10px;flex:0 0 auto;font-size:14px;color:#2c2728}
.mfg .coo b{display:inline-flex;align-items:center;gap:7px;font-weight:500;
  border:1px solid var(--rule);border-radius:6px;padding:5px 11px}

/* ============================================================ widths */
/* Their switch from the two-column desktop layout to the stacked mobile one happens between
   768 and 1024: at 1024 they still run the 120px gutter with a 50/50 split, and at 768 the
   gallery is full-bleed, the breadcrumbs are gone and the gutter is ~11px. Ours turns at 990. */

@media (max-width:1439px){
  .gal{gap:14px}
  .rail{flex-basis:80px;width:80px}
}

@media (max-width:1199px){
  .rail{flex-basis:66px;width:66px}
}

@media (max-width:989px){
  :root{--gut:16px}
  .crumbs{display:none}                     /* theirs is hidden below the desktop layout */
  .product{flex-direction:column;gap:26px}
  .media{flex:0 0 auto;width:100%}
  .info{width:100%}

  /* their gallery runs edge to edge on mobile, so it breaks out of the gutter */
  .gal{flex-direction:column-reverse;gap:12px;
    margin-left:calc(var(--gut) * -1);margin-right:calc(var(--gut) * -1)}
  .stage-frame{border-radius:0}
  /* flex-direction and align-items both matter. The base rail is a centred column, so a
     row-direction track inside it keeps its full content width and pushes the page 257px
     wide at 390 — flex:1 1 auto only governs height in a column parent. */
  .rail{flex:0 0 auto;width:100%;position:static;padding:0 var(--gut);
    flex-direction:row;align-items:stretch}
  .rail-track{position:static;flex:1 1 auto;min-width:0;width:100%;flex-direction:row;
    overflow-x:auto;overflow-y:hidden;gap:8px;scroll-snap-type:x mandatory;padding-bottom:4px}
  .rail-track > *{flex:0 0 68px;width:68px;scroll-snap-align:start}
  .rail-btn{display:none}
  .fitfeel{margin-top:14px}
}

@media (max-width:640px){
  .pin button{flex:1 1 100%;min-width:0}
  .ideal .lbl,.ideal span{font-size:19px}
  .washpanel span{font-size:14px;line-height:17px}
  .washpanel li{width:92px}
  .desc h2,.desc h3{font-size:24px}
  .desc .body{font-size:16px;line-height:25px}
  /* Jockey's wishlist and share are 40px and their return link is inline text. Both are
     standalone controls on a phone, so they take the 44px target here. The level links run
     at 24 on desktop so the breadcrumb row matches theirs; on a phone they take 44. */
  .act{width:44px;height:44px}
  .levelnav a{min-height:44px}
  .retrow a{display:inline-flex;align-items:center;min-height:44px}
  /* 42px is what the shrinkable bar needs at desktop, but it is under the touch target */
  .qty button{width:44px}
}

@media (max-width:430px){
  .tile{flex-basis:264px;width:264px}
  .swarrow{display:none}
}

@media (prefers-reduced-motion:no-preference){
  .rail-track,.tiles,.swatches,.fitfeel{scroll-behavior:smooth}
}