/* ============================================================
   Phone corrections.

   Loaded last on every page, so it wins. Every rule in this file
   sits inside a media query, which means the desktop site is not
   touched by anything here. If a phone problem ever needs fixing,
   this is the file, and deleting it returns the site exactly to
   how it was.

   Why it exists: the site was built desktop first. Measuring every
   page in a real browser at 390px and 360px turned up the same
   handful of faults on every page, and they are fixed here once
   rather than in eight stylesheets.

   What was measured and fixed:
     - text down at 7px and 8px, unreadable at arm's length
     - the menu button and search button under a fingertip's width
     - heroes so tall that the catalogue showed no products at all
       until the second screen
     - the checkout summary sitting above the form, so the total
       was read before the delivery that changes it was chosen
     - four decorative animations running forever on battery
     - a fixed background attachment, which makes scrolling stutter
       on iOS
   ============================================================ */


/* ============================================================
   1. Legibility
   ------------------------------------------------------------
   Nothing on a phone should be under 10px. These were 7 and 8.
   ============================================================ */

@media (max-width: 900px) {
  .site-ribbon { font-size: 10px; letter-spacing: .08em; padding-inline: 12px; }
  .locale-mark { font-size: 10px; letter-spacing: .06em; }
  #cart-count { font-size: 11px; min-width: 20px; }

  /* 0.22em of letter spacing on an 11px uppercase line is what was
     throwing one word onto a line of its own on every page. Tighter
     spacing plus balance keeps the label on one or two even lines. */
  .eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    text-wrap: balance;
    line-height: 1.45;
  }

  .own-product-kicker,
  .hero-machine-status { font-size: 11px; }

  /* Every form field label on the site, read on every page that has a
     form: checkout, contact, account, the studio. */
  .field label { font-size: 12px; }

  /* Measured on the pages themselves rather than guessed at: these
     labels were 9px. (The word CART itself is gone, replaced by an
     icon, so #cart-count above is the only text left in that button.) */
  .process-copy small { font-size: 11px; letter-spacing: .1em; }
  .bento-tag { font-size: 11px; }
  .gallery-item figcaption { font-size: 11px; }
  .copyright { font-size: 12px; }
  #stepProduct,
  #productCategory { font-size: 11px; }
}


/* ============================================================
   2. Things you tap
   ------------------------------------------------------------
   A fingertip is about 44px. The menu button was 33 wide and the
   search button 32 square.
   ============================================================ */

@media (max-width: 900px) {
  .mobile-toggle {
    width: 44px; height: 44px;
    display: grid; place-items: center;
    line-height: 1;
  }

  .nav-search { width: 44px; height: 44px; }
  .nav-search-btn { width: 44px; height: 44px; }
  .nav-search.open { height: 44px; }

  /* The tick boxes at checkout. The box itself stays a sensible size;
     the label around it is what grows, so the whole line is tappable
     rather than just the square. */
  .co-agree,
  .check {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 10px 0; min-height: 44px;
  }
  .co-agree input[type="checkbox"],
  .check input[type="checkbox"] {
    width: 22px; height: 22px; flex: none; margin-top: 1px;
  }

  /* The floating button on the catalogue was 40 by 26 and sat on top
     of the card behind it. */
  .own-product-float {
    min-height: 44px; min-width: 44px;
    padding: 10px 16px;
  }

  /* The terms and refund links sit inside the agree label, so a thumb that
     misses by a few pixels ticks the box instead of opening the policy.
     Padding gives them a hit area without breaking the sentence. */
  .co-agree a {
    display: inline-block;
    padding: 5px 3px;
    text-underline-offset: 3px;
  }

  /* Any remaining link in a list gets room around it rather than
     being a 14px sliver of text. 8px of padding on a 13px line still
     measured 37px tall, just under a fingertip; 11px clears 40. */
  .footer a,
  .nav-links a { padding-block: 11px; }
  .welcome-own-link { display: inline-block; padding-block: 10px; }

  /* The sliders on the customizer and the studio were 16px tall, which
     is a genuinely hard thing to catch with a thumb. The track stays
     slim; the grab handle and the row around it are what grow. */
  input[type="range"] {
    height: 44px;
    -webkit-appearance: none; appearance: none;
    background: transparent;
  }
  input[type="range"]::-webkit-slider-runnable-track {
    height: 5px; border-radius: 3px;
    background: rgba(212, 175, 55, .28);
  }
  input[type="range"]::-moz-range-track {
    height: 5px; border-radius: 3px;
    background: rgba(212, 175, 55, .28);
  }
  input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 26px; height: 26px; margin-top: -10px;
    border: 0; border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  }
  input[type="range"]::-moz-range-thumb {
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: #d4af37;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
  }

  /* Buttons that landed a few pixels under a fingertip. */
  .btn-small { min-height: 42px; }

  /* The studio's alignment toolbar (58x38) and the customizer's Clear
     design button (131x34), both a few pixels short of a fingertip. */
  .button-grid .btn { min-height: 44px; }
  .clear-design { min-height: 44px; }

  /* The design library panel on the studio page: the show/hide and
     clear buttons (29px), the category filter chips (30px), the icon
     only layer toggles (22px) and its own search box (38px). */
  .library-toggle,
  .clear-library-design,
  .design-category button { min-height: 40px; }
  .layer-item.pro-layer button { min-height: 40px; min-width: 40px; }
  .design-search .input { min-height: 44px; }
}


/* ============================================================
   3. Get to the point
   ------------------------------------------------------------
   Measured on a 390px screen: the catalogue put its first product
   below 970px, so a customer saw two screens of heading before a
   single thing they could buy. Checkout put its first field below
   969px. These are the numbers that matter commercially.
   ============================================================ */

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    padding: 34px 0 30px;
  }
  .page-hero { padding: 30px 0 22px; }

  .section { padding: 44px 0; }
  .section-sm { padding: 26px 0; }

  /* The title does not need to be the biggest thing that fits. */
  .hero-copy .title { font-size: clamp(30px, 8vw, 40px); }
  .page-hero .title { font-size: clamp(26px, 7.5vw, 34px); }
  .subtitle { font-size: 16px; }

  /* The logo was taking 120px of a 844px screen before anything
     else had a chance. */
  .nav { height: 62px; }
  .footer { padding: 40px 0 20px; }
}


/* ============================================================
   4. Rows that leave one item stranded
   ------------------------------------------------------------
   A three item row in two columns puts the third on a line by
   itself, which reads as a mistake. One column instead.
   ============================================================ */

@media (max-width: 620px) {
  .trust-row {
    display: grid; grid-template-columns: 1fr; gap: 10px;
  }
  .stats,
  .grid-3,
  .product-grid { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--line); }
  .stat:last-child { border-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .split { grid-template-columns: 1fr; }
  .gallery { columns: 1; }

  /* Stacking all four filters made the catalogue taller, not shorter.
     Search across the top, the three selects two up underneath. */
  .filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .filters > :first-child { grid-column: 1 / -1; }
}


/* ============================================================
   4b. The catalogue, on a phone
   ------------------------------------------------------------
   Measured: the first product sat 1928px down, five screens, behind
   a promo banner, a collections block and the filters. Somebody who
   opened the catalogue came to see things they can buy.

   The send-us-your-own-item banner moves below the grid. It is not
   removed and it is not hidden: the floating button stays on screen
   the whole way down, and the services page still leads with it. It
   simply stops standing between a customer and the shop.
   ============================================================ */

@media (max-width: 900px) {
  .shop-stack { display: flex; flex-direction: column; }
  .shop-stack > .own-product-banner { order: 5; margin-top: 28px; }
  .shop-stack > .shop-collection-head { order: 1; }
  .shop-stack > .shop-collections { order: 2; }
  .shop-stack > .filters { order: 3; }
  .shop-stack > .catalog-count { order: 3; }
  .shop-stack > .product-grid,
  .shop-stack > #catalog { order: 4; }
}


/* ============================================================
   5. Checkout
   ------------------------------------------------------------
   The summary used to be pulled above the form with order:-1, so
   the first thing on the page was a total that could not be right
   yet: the delivery price inside it depends on an area chosen in
   the form underneath. It reads better after the form, and the
   sticky bar keeps the running total on screen the whole way down
   regardless, so nothing is lost by moving it.
   ============================================================ */

@media (max-width: 900px) {
  .co-summary { order: 1; }

  .co-step { margin-bottom: 12px; }
  .co-step-head { padding: 13px 15px; }
  .co-step-body { padding: 0 15px 15px; }

  /* Delivery options are tapped, so they get room. */
  .delivery-card { padding-block: 14px; min-height: 60px; }
  .co-choice { gap: 12px; }

  /* The area dropdown is the one control the whole delivery step
     hangs on, so it is the one that should be comfortable. */
  #areaField select { min-height: 48px; font-size: 16px; }
}

/* 16px is the size below which iOS zooms the page when a field is
   focused, which then leaves the customer scrolled sideways into a
   form they cannot see the edges of. Every field, not just some. */
@media (max-width: 900px) {
  .input,
  input.input,
  select.input,
  textarea.input { font-size: 16px; }
}


/* ============================================================
   6. Battery and scroll
   ------------------------------------------------------------
   A phone is not a desktop with a smaller window. Four infinite
   decorative animations and a fixed background attachment cost
   real battery and make scrolling stutter, and none of them are
   visible enough at this size to be worth it.
   ============================================================ */

@media (max-width: 900px) {
  /* iOS Safari repaints the whole page on every scroll frame with a
     fixed attachment. This is the single biggest scrolling
     improvement on the site. */
  body { background-attachment: scroll; }

  /* Decoration that is either offscreen or too small to read at this
     width. The elements stay, they simply stop moving. */
  .particle,
  .orbit,
  .machine,
  .laser-head { animation: none; }
  .particle { display: none; }

  /* Blur is the most expensive thing a phone GPU can be asked for,
     and there can be a dozen cards on screen at once. */
  .card,
  .co-step,
  .co-summary { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Hover lift on a touch screen fires on tap and then sticks, which
   leaves a card looking pressed until you tap something else. */
@media (hover: none) {
  .btn:hover { transform: none; box-shadow: none; }
  .card:hover { border-color: rgba(196, 200, 212, .1); }
}


/* ============================================================
   7. Reduced motion
   ------------------------------------------------------------
   The existing rules cover some of the animations. This covers the
   rest, including the ones added since. Somebody who has asked
   their phone to stop moving things has asked once, for everything.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fr-track,
  .fr-track.is-drifting { animation: none !important; transform: none !important; }
}