/* CHELIA MAISON - phone and tablet.
 *
 * Written after measuring, not after guessing. The desktop window will not
 * resize below the OS minimum, so the shop was driven through Chrome over
 * CDP at 360, 375, 390, 768 and 1024 and asked four questions: does the page
 * scroll sideways, is anything clipped, can a thumb hit the controls, and is
 * the text readable. It failed the first three.
 *
 * What was actually wrong:
 *   - every phone page scrolled sideways by 31-82px. One cause, not many:
 *     the masthead's right-hand group measured 420px against a 360px screen.
 *   - the size guide overflowed by a further 26px because a `1fr` grid track
 *     cannot shrink below its content, and the numbered steps are wide.
 *   - links in the footer and nav were 19px tall. A fingertip is about 44.
 *   - the MAISON line under the wordmark rendered at 9.9px.
 *
 * The rule followed throughout: give a grid track `minmax(0, 1fr)` whenever
 * it must be allowed to shrink, because plain `1fr` silently refuses to.
 */

/* ================================================= tablet and below */

@media (max-width: 1024px) {
  /* A `1fr` track has an automatic minimum of its content, which is why the
   * size guide pushed the page sideways. Every track that has to fit a
   * narrow screen is told it may shrink. */
  .wristtool,
  .cartlayout,
  .pdp,
  .formgrid,
  .footer__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .wristtool > *,
  .cartlayout > *,
  .pdp > *,
  .formgrid > *,
  .footer__top > * { min-width: 0; }

  .steps li { grid-template-columns: 30px minmax(0, 1fr); }
  .steps li > * { min-width: 0; overflow-wrap: anywhere; }
}

/* ========================================================== phones */

@media (max-width: 860px) {

  /* ---- masthead: the thing that was pushing the page sideways ---- */

  .masthead__bar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
    padding-inline: 14px;
  }

  /* The saved wrist size is a returning-visitor convenience, not a control
   * worth a third of a phone's header. It moves into the drawer, where it
   * gets a full row and a readable label. */
  .masthead__tools .wristchip { display: none; }
  .masthead__tools { gap: 8px; }

  .wordmark { gap: 8px; }
  .wordmark__mark { width: 28px; }
  .wordmark__name { font-size: 1.02rem; letter-spacing: .22em; text-indent: .22em; }
  .wordmark__sub { font-size: .66rem; letter-spacing: .3em; text-indent: .3em; }

  /* A thumb needs about 44px. These were 22. */
  .cartlink {
    min-height: 44px;
    padding-inline: 4px;
    align-items: center;
  }
  .masthead__burger { min-width: 44px; min-height: 44px; display: grid; place-content: center; }

  .masthead__drawer a {
    padding-block: 14px;
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .masthead__drawer .wristchip {
    display: inline-flex;
    align-self: start;
    margin-top: 12px;
    min-height: 44px;
  }

  /* ---- hero ---- */

  .showpiece { min-height: min(78vh, 620px); }
  .showpiece__body { padding-inline: 18px; gap: 14px; }
  .showpiece h1 { max-width: 14ch; }
  .showpiece__lede { font-size: 1rem; }

  /* Four facts across a 360px screen is four cramped columns. Two rows of
   * two reads; a horizontal scroll for a statistic does not. */
  .showpiece__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
    padding-top: 14px;
  }

  /* The piece tag stops floating over the picture and becomes a full-width
   * row under the copy, where it is also big enough to tap. */
  .showpiece__piece {
    position: static;
    margin-top: 4px;
    min-height: 48px;
    justify-content: flex-start;
  }

  .showpiece .btn, .fitband .btn { min-height: 48px; }

  /* ---- the rest ---- */

  .fitband { min-height: auto; }
  .fitband__body { padding-block: 54px; }

  /* The rail bleeds to the screen edge by cancelling the wrap's padding.
   * Hardcoding 18px here left it 4px wider than the viewport, because the
   * gutter is a clamp that resolves to 16px at this width - so cancel the
   * variable, never a number. */
  .stonerail__track {
    padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
  }
  .stone { width: 96px; }

  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .editorialtile { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }

  .card__flag { font-size: .72rem; padding: 5px 10px; }
  .card__fit { transform: none; font-size: .74rem; }

  /* Filter chips are the main way a phone shopper narrows 142 products. */
  .pill, .swatch { min-height: 44px; }
  .shopbar { position: static; padding-block: 12px; }
  .shopbar__group { width: 100%; }
  select.pill { flex: 1 1 100%; }

  .pdp__media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pdp__hero { aspect-ratio: 4 / 5; }
  .choice__options label { min-height: 44px; }

  .cartline { grid-template-columns: 64px minmax(0, 1fr); }
  .cartline__qty input { min-height: 44px; }

  .field input, .field textarea, .field select { min-height: 48px; font-size: 16px; }

  /* A flex child will not shrink below its content unless told to, which is
   * what pushed the size guide past the screen edge. */
  .wristform__field { flex-wrap: wrap; }
  .wristform__field input { min-width: 0; flex: 1 1 60%; }
  .wristform__field .btn { flex: 1 1 auto; }
  .wristform, .wristform > *, .wristscale, .wristscale__track { min-width: 0; max-width: 100%; }
  .wristform input[type="text"], .wristform input[type="number"] {
    min-height: 50px;
    font-size: 16px;  /* anything smaller and iOS zooms the page on focus */
  }

  .payopt, .consent { min-height: 52px; }

  .footer__links nav { gap: 2px 18px; }
  .footer__links nav a { min-height: 44px; display: inline-flex; align-items: center; }

  /* The logo is the way back to the shop from anywhere; it has to be a
   * target, not a 24px sliver. */
  .wordmark { min-height: 44px; align-items: center; }

  /* Breadcrumbs are navigation, so they get a thumb-sized row. Links inside
   * running prose are left alone: padding them out would break the line. */
  .pdp__crumb { display: flex; align-items: center; min-height: 40px; gap: 4px; }
  .pdp__crumb a { padding-block: 10px; }

  /* Under 12px stops being small-and-refined and starts being unreadable. */
  .card__fit, .card__flag { font-size: 12px; }
  .wordmark__sub { font-size: 11px; }

  .archead__note, .prose p { max-width: none; }
}

/* ===================================================== small phones */

@media (max-width: 400px) {
  .wordmark__sub { display: none; }
  .wordmark__name { font-size: .98rem; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .showpiece h1 { font-size: clamp(2rem, 1.2rem + 4vw, 2.6rem); }
  .stone { width: 88px; }
}

/* ============================================= tablet, both the way up */

@media (min-width: 861px) and (max-width: 1024px) {
  /* A tablet is wide enough for the full nav but not for the desktop
   * gutters; the grid gets three across rather than two or five. */
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .editorialtile { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .pdp__media { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showpiece { min-height: min(66vh, 620px); }
}

/* A device that cannot hover should never hide anything behind hover. */
@media (hover: none) {
  .card__fit { transform: none; }
  .card__shot img + img { display: none; }
}

/* ============================================== anything touched, any width

   Sizing thumbs by viewport width was wrong: an iPad in landscape is 1024px
   and still a touch screen, and it came back from the audit with 19px links
   while the phone next to it was fine. The signal is the pointer, not the
   width. This block therefore runs on every coarse-pointer device - phone,
   tablet, touch laptop - and is the only place tap sizing is decided.        */

@media (pointer: coarse) {
  .masthead__nav a { padding-block: 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .masthead__burger { min-width: 44px; min-height: 44px; }
  .wordmark { min-height: 44px; align-items: center; }
  .cartlink { min-height: 44px; align-items: center; padding-inline: 4px; }
  .wristchip { min-height: 44px; }

  .footer__links nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .footer__promises a { min-height: 44px; }

  .pill, .swatch, .btn { min-height: 44px; }
  .choice__options label { min-height: 44px; }
  .field input, .field textarea, .field select { min-height: 48px; font-size: 16px; }
  .cartline__qty input { min-height: 44px; }
  .payopt, .consent { min-height: 52px; }

  .pdp__crumb { display: flex; align-items: center; gap: 4px; }
  .pdp__crumb a { padding-block: 13px; }

  /* Tapping a label focuses its field, so it is a target too. */
  .wristform label, .field label { padding-block: 6px; display: inline-block; }

  /* Under 12px is decoration, not text. */
  .card__fit, .card__flag { font-size: 12px; }
}

/* The wordmark's second line is a letter-spaced micro-label, not running
   text; 11px is where it stays legible at that tracking. */
.wordmark__sub { font-size: 11px; }