/* The phone layer (2026-09-26). Loaded last on every page, so each rule here is
   the phone or touch version of a rule in the files before it; the desktop
   layout is untouched. Most visits come from iPhone Safari, 375 to 430 px wide.
   The aims: the product and its price in the first screen, a thumb can hit
   every control (44 px), nothing zooms or jumps, no hover left stuck by a tap. */

/* ── 1. touch ───────────────────────────────────────────────────────────── */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,summary,label,input,select,textarea,[role="button"],[role="radio"],[tabindex]{-webkit-tap-highlight-color:transparent}
/* A tap fires :hover and it stays until the next tap: on touch screens the
   buttons show a pressed state instead, and photos do not swap or grow. */
@media (hover:none){
  .btn:hover{background-size:0% 100%;background-color:var(--btn-bg);color:var(--btn-fg);transition:none}
  .btn:active{background-size:100% 100%;background-color:var(--btn-fill);color:var(--btn-fg-hover);transition:none}
  .btn-line:hover{background:var(--white);color:var(--ink)}
  .btn-line:active,.tier-step button:active{background:var(--ink);color:var(--white)}
  .tier-step button:hover{background:var(--white);color:var(--ink)}
  .cd-checkout:hover{background:var(--ink)}
  .cd-checkout:active,.sb-btn:active{background:var(--ink-hover)}
  .card a:hover figure.has-alt img:first-child{opacity:1}
  .card a:hover figure.has-alt .card-alt,.sf-media.has-alt:hover .sf-alt,.orig-tile:hover img.alt,.mega-tile:hover img.alt{opacity:0}
  .orig-tile:hover img:not(.alt){opacity:1}
  .card a:hover figure:not(.has-alt) img,.lb-tile:hover img,.oc-tile:hover img,.orig-tile:hover figure img,.ab-house-tile:hover img{transform:none}
  .card a:hover :is(h2,h3){text-decoration:none}
}

/* ── 2. header: shorter on a phone, and out of the way while reading ────── */
@media(max-width:700px){
  :root{--hdr:60px}
  .wordmark img{height:26px}
  .icon-btn{width:44px;height:44px}
  .site-header{transition:transform .28s ease,background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
  /* js/site.js adds .is-tucked on the way down, removes it on the way up */
  .site-header.is-tucked{transform:translateY(-100%);box-shadow:none}
  html{scroll-padding-top:20px}
  .mobile-nav .mn-top img{height:26px}
  /* the announcement arrows: a full thumb's width */
  .announce{grid-template-columns:44px minmax(0,1fr) 44px;padding:0}
  .ann-arrow{width:44px;height:var(--ann)}
}
@media(max-width:360px){
  .icon-btn{width:38px}
  .wordmark img{height:23px}
}
@media(prefers-reduced-motion:reduce){.site-header.is-tucked{transform:none}}

/* The menu's own offer card, under the links (js/layout.js). */
/* .mobile-nav > a.mn-feature: stronger than the menu's own link rule (site.css) */
.mobile-nav > a.mn-feature{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:16px;margin:26px 0 0;padding:12px 16px 12px 12px;border:1px solid var(--rule-2);background:var(--stage);font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none}
.mn-feature img{width:88px;height:110px;object-fit:contain;background:var(--white)}
.mn-feature span{display:flex;flex-direction:column;gap:4px}
.mn-feature small{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.mn-feature b{font-family:var(--display);font-size:18px;font-weight:500;letter-spacing:.04em;line-height:1.2}
.mn-feature i{font-style:normal;font-size:13.5px;color:var(--ink-2)}
.mn-feature i::after{content:" \2192";color:var(--ink)}

/* ── 3. buttons and links: full width, and a hit area a thumb can find ──── */
@media(max-width:600px){
  .btn,.btn-line{display:flex;width:100%;min-height:50px;padding:0 20px}
  .hero-btns,.made-btns,.coll-next-btns{justify-items:stretch;width:100%}
  .hero-btns{display:grid}
  /* text links under a button grow their tap area upwards, not the layout */
  .link{padding-top:16px;margin-top:-16px}
  .proof a{padding:12px 0;margin:-12px 0}
  .sg-link{padding:14px 0 3px;margin-top:-8px}
  .sg-cta{padding-top:14px;margin-top:-14px}
  .rv-line{padding:10px 0;margin:-10px 0}
  .wordmark{padding:9px 0}
  .wordmark .logo-white{top:9px}   /* sits exactly over the ink logo */
  /* the hero's slide dots: 44 px targets over 22 px drawings */
  .hero-dots{gap:12px}
  .hero-dots button{position:relative}
  .hero-dots button::before{content:"";position:absolute;inset:-11px}
}

/* ── 4. fields: 16 px text, so iPhone Safari does not zoom the page ────── */
@media(max-width:700px){
  .f-form input,.notify-input{font-size:16px}
}

/* ── 5. sections: a tighter rhythm, the same order ─────────────────────── */
@media(max-width:600px){
  .sec-head{padding-top:52px;padding-bottom:24px}
  .lookbook{padding-bottom:52px}
  .originals{padding-bottom:48px}
  .faq{padding-top:36px;padding-bottom:44px}
  .page{padding-top:28px}
}

/* ── 6. footer: every link a full row to tap ───────────────────────────── */
@media(max-width:600px){
  footer.f-dark{padding-top:48px}
  .f-top{row-gap:28px}
  .f-dark h2{margin-bottom:6px}
  .f-col ul{gap:0}
  .f-col a{display:inline-block;padding:11px 0}
  .f-legal{gap:0 22px}
  .f-legal a{display:inline-block;padding:11px 0}
}

/* ── 7. product page: the photo, the name and the price in the first screen ── */
@media(max-width:600px){
  /* the countdown in one short line, read like the bag's: 01d 23h 59m 03s */
  .urgency-bar{gap:12px;min-height:44px;padding:6px 16px;justify-content:space-between}
  .ub-copy b{font-size:11.5px;line-height:1.3;letter-spacing:.1em;text-wrap:balance}
  .ub-clock{gap:8px;flex:0 0 auto}
  .ub-clock span{flex-direction:row;align-items:baseline;min-width:0;padding:0;border:0;background:none}
  .ub-clock b{font-size:17px}
  .ub-clock i{display:inline-block;margin:0 0 0 1px;font-size:0;letter-spacing:0;text-transform:none}
  .ub-clock i::first-letter{font-size:11px;color:rgba(247,246,243,.6)}
  .ub-clock em{display:none}
  /* the breadcrumb gives its line to the photo; the menu and the logo lead home */
  .pdp-crumbs{display:none}
  .pdp{padding-top:0;row-gap:14px}
  /* the photo runs edge to edge; the thumbnails keep the page's side margin */
  .pdp .gallery{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
  .pdp .gal-rail{padding:0 var(--pad)}
}

/* ── 8. the bag: a shorter foot, so more of the gloves show ────────────── */
@media(max-width:600px){
  .cd-head{padding-top:10px;padding-bottom:10px}
  .cd-head .icon-btn{width:44px;height:44px}
  .cd-foot{padding-top:10px}
  .cd-sum{margin-bottom:10px}
  .cd-sum > div{margin-bottom:3px}
  .cd-sum .cd-total{margin-top:6px;padding-top:8px}
  .cd-foot .cd-pay{margin-top:8px}
  .cd-trust{margin-top:6px}
}

/* ── 9. the shoe page: sizes, colours and arrows a thumb can hit ───────── */
@media(max-width:600px){
  .pdg-size{min-height:44px}
  .pdg-swatch{position:relative}
  .pdg-swatch::before{content:"";position:absolute;inset:-5px;border-radius:50%}   /* a 44 px target round the 34 px swatch */
  .pdg-swatches{gap:14px}
  .pdg-sg{padding:14px 0 12px;margin:-10px 0 -8px}
  .pdg-arrows button{width:44px;height:44px}
  /* the details table: the value gets room to read on one or two lines */
  .pdg-details div{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:12px}
}