/* ==========================================================================
   Blueleaf Sports Store - MOBILE APPLICATION SHELL (below 768px).
   This file replaces the web chrome with a native-feeling app frame:
   a compact app bar, a fixed bottom tab bar, bottom sheets instead of
   drawers, swipe galleries instead of hover zoom, and a sticky buy bar.
   Everything here is scoped to (max-width: 767px).
   ========================================================================== */

@media (max-width: 767px) {

  :root {
    --gutter: 13px;
    --header-h: 0px;
    --tab-h: 58px;
    --safe-b: env(safe-area-inset-bottom, 0px);
    /* --tab-h is the height of a tab, not of the bar: the bar adds a hairline
       border on top of it. Anything docking above the bar has to clear both,
       or it loses its own bottom edge behind that border. */
    --tab-full: calc(var(--tab-h) + var(--safe-b) + 1px);
  }

  body {
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior-y: contain;
    /* --tab-full alone leaves the last card touching the bar, and any bottom
       margin that collapses puts it underneath. The extra 24px is the gap that
       lets the final section scroll clear of the tab bar. */
    padding-bottom: calc(var(--tab-full) + 24px);
    /* body is the scroll container here (store.css clamps overflow-x on it), so
       anchor and scrollIntoView targets need their bottom inset declared here. */
    scroll-padding-bottom: calc(var(--tab-full) + 16px);
    font-size: 14px;
  }

  /* The web header and its department strip are gone on phones */
  .web-header, .store-footer .footer-cols, .store-footer .footer-top { display: none; }

  /* ---------------------------------------------------------------- app bar */
  .app-shell { display: block; }

  .app-bar {
    position: sticky; top: 0; z-index: var(--z-header);
    background: var(--chrome); color: var(--chrome-ink);
    padding-top: env(safe-area-inset-top, 0px);
    box-shadow: 0 1px 0 rgba(233, 241, 239, .08);
  }
  .app-bar-row {
    display: flex; align-items: center; gap: 9px;
    padding: 9px var(--gutter);
  }
  .app-mark { display: flex; align-items: center; gap: 7px; flex: none; }
  .app-mark img { width: 27px; height: 27px; object-fit: contain; }
  .app-mark b { font-size: 15px; font-weight: 800; letter-spacing: -.03em; }
  .app-mark b span { color: var(--accent-press); }
  .app-search {
    flex: 1; min-width: 0; height: 38px;
    display: flex; align-items: center; gap: 8px;
    padding: 0 13px; border-radius: var(--r-pill);
    background: rgba(233, 241, 239, .1); color: var(--chrome-ink-2);
    border: 1px solid rgba(233, 241, 239, .16);
    font-size: 13px; text-align: left;
    transition: background-color .22s var(--ease), transform .3s var(--ease);
  }
  .app-search:active { transform: scale(.985); }
  .app-search i { font-size: 17px; }
  .app-search span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  /* Cart, checkout and account are destinations rather than searches, so their
     bar carries the screen name where the search field would otherwise sit. */
  .app-title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 800; letter-spacing: -.03em; }
  .app-title small { display: block; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--chrome-ink-2); }

  .app-icon-btn {
    position: relative; flex: none;
    width: 38px; height: 38px; border-radius: var(--r-pill);
    display: grid; place-items: center; font-size: 21px;
    color: var(--chrome-ink);
    transition: background-color .2s var(--ease), transform .3s var(--ease);
  }
  .app-icon-btn:active { transform: scale(.9); background: rgba(233, 241, 239, .12); }
  .app-icon-btn .cart-count { top: 1px; left: 21px; }

  /* Thin delivery strip, the one place a location belongs */
  .app-locale {
    display: flex; align-items: center; gap: 7px;
    padding: 7px var(--gutter); width: 100%;
    background: var(--chrome-2); color: var(--chrome-ink-2);
    font-size: 12px; text-align: left;
  }
  .app-locale i { font-size: 15px; }
  .app-locale b { color: var(--chrome-ink); font-weight: 700; }
  .app-locale .ph-caret-down { margin-left: auto; font-size: 13px; }

  /* Scrollable chip rail, the phone stand-in for the department strip */
  .app-chips {
    display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none;
    padding: 9px var(--gutter); background: var(--chrome-2);
    -webkit-overflow-scrolling: touch;
  }
  .app-chips::-webkit-scrollbar { display: none; }
  .app-chip {
    flex: none; padding: 7px 14px; border-radius: var(--r-pill);
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    background: rgba(233, 241, 239, .09); color: var(--chrome-ink);
    border: 1px solid rgba(233, 241, 239, .13);
    transition: transform .3s var(--ease), background-color .22s var(--ease);
  }
  .app-chip:active { transform: scale(.95); }
  .app-chip[aria-current="page"], .app-chip[aria-pressed="true"] {
    background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  }
  /* ------------------------------------------------------------- tab bar */
  .app-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-header);
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    background: var(--card);
    border-top: 1px solid var(--line-soft);
    padding-bottom: var(--safe-b);
    box-shadow: 0 -6px 22px -14px rgba(14, 20, 23, .22);
  }
  .app-tab {
    position: relative; height: var(--tab-h);
    display: grid; place-items: center; align-content: center; gap: 2px;
    font-size: 10.5px; font-weight: 600; color: var(--ink-3);
    transition: color .22s var(--ease);
  }
  .app-tab i { font-size: 22px; transition: transform .34s var(--ease-back); }
  .app-tab:active i { transform: scale(.86); }
  .app-tab .ph-fill { display: none; }
  .app-tab[aria-current="page"] { color: var(--accent); }
  .app-tab[aria-current="page"] .ph-fill { display: block; }
  .app-tab[aria-current="page"] .ph { display: none; }
  .app-tab[aria-current="page"]::before {
    content: ""; position: absolute; top: 0; left: 50%;
    width: 26px; height: 3px; border-radius: 0 0 var(--r-pill) var(--r-pill);
    background: var(--accent); transform: translateX(-50%);
  }
  .app-tab .cart-count { position: static; margin-left: 4px; }
  .app-tab .app-tab-badge { position: absolute; top: 7px; left: calc(50% + 7px); margin-left: 0; }

  /* ---------------------------------------------------------- bottom sheet */
  .sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--z-sheet) + 1);
    max-height: 86vh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
    background: var(--card); color: var(--ink);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--shadow-3);
    transform: translate3d(0, 101%, 0);
    transition: transform .44s var(--ease-swap);
    padding-bottom: var(--safe-b);
  }
  .sheet.is-open { transform: none; }
  .sheet-grip { display: grid; place-items: center; padding: 10px 0 4px; }
  .sheet-grip::before { content: ""; width: 40px; height: 4px; border-radius: var(--r-pill); background: var(--line); }
  .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 17px 13px; border-bottom: 1px solid var(--line-soft); }
  .sheet-head h2 { font-size: 16px; font-weight: 800; letter-spacing: -.025em; }
  .sheet-body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 4px 17px 17px; }
  .sheet-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 13px 17px; border-top: 1px solid var(--line-soft); background: var(--card); }
  /* --------------------------------------------------- content adaptations */
  .section { padding-block: 20px; }
  .section-head { margin-bottom: 12px; align-items: center; }
  .section-title { font-size: 18px; letter-spacing: -.03em; }
  .section-note { display: none; }
  .shell { padding-inline: var(--gutter); }

  .hero { border-bottom: 0; }
  .hero-viewport { height: 300px; }
  .hero-scrim { background: linear-gradient(0deg, rgba(9, 18, 16, .95) 4%, rgba(9, 18, 16, .55) 46%, rgba(9, 18, 16, .18) 100%); }
  .hero-copy { justify-content: flex-end; padding-bottom: 52px; max-width: none; gap: 9px; }
  .hero-title { font-size: 25px; letter-spacing: -.038em; }
  .hero-text { font-size: 13px; }
  .hero-actions .btn { height: 40px; font-size: 13px; }
  .hero-arrow { display: none; }
  /* The dot is 4px tall by design, which is nothing to aim a thumb at. A 40px
     box centred on it takes the tap instead, and the extra clearance above the
     bottom edge keeps that box inside the viewport's own clipping. */
  .hero-dots { bottom: 22px; gap: 11px; }
  .hero-dot { position: relative; }
  .hero-dot::after {
    content: ""; position: absolute; left: -4px; right: -4px;
    top: 50%; height: 40px; transform: translateY(-50%);
  }

  /* Two-up product grid, and rails that show the next card peeking */
  .grid-products, .grid-products.is-tight { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .rail { grid-auto-columns: 45%; gap: 10px; scroll-padding-left: var(--gutter); }
  .rail-nav { display: none; }
  .rail-bleed { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }

  .product-card { padding: 8px; border-radius: var(--r); }
  .product-card:hover { transform: none; box-shadow: var(--shadow-1); }
  .product-card:active { transform: scale(.985); }
  .product-card:hover .pc-media img { transform: none; }
  .pc-wish { opacity: 1; transform: none; width: 30px; height: 30px; }
  .pc-body { padding: 9px 2px 2px; gap: 4px; }
  .pc-title { font-size: 12.5px; -webkit-line-clamp: 2; }
  .pc-brand { font-size: 10px; }
  .price-now { font-size: 17px; }
  .pc-add { height: 36px; font-size: 12.5px; padding: 0 12px; }
  .pc-swatches { display: none; }

  /* List view is not offered on phones, the grid is the only view */
  .grid-products.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-products.is-list .product-card { flex-direction: column; padding: 8px; gap: 0; }
  .grid-products.is-list .pc-media { width: auto; }
  .grid-products.is-list .pc-blurb { display: none; }
  .grid-products.is-list .pc-foot { display: grid; }
  .view-switch { display: none; }

  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: var(--r); }
  .trust-cell { padding: 12px 13px; gap: 9px; }
  .trust-cell i { font-size: 21px; }
  .trust-cell strong { font-size: 12.5px; }
  .trust-cell span { font-size: 11px; }
  /* minmax, not a hard row height: the cells clip their overflow, so a fixed
     152px cut the batting gear tile and the hero off at the bottom. */
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(152px, auto); gap: 10px; }
  .bento-cell { border-radius: var(--r); }
  .bento-cell.is-wide { grid-column: span 2; }
  .bento-cell.is-tall { grid-row: span 1; }
  /* is-tall collapsing to one row turns the full width hero into a 138px letterbox
     that crops the bat to a sliver and squeezes the caption. Give it back a
     photograph's worth of height without restoring the two row span. */
  .bento-cell.is-wide.is-fill { min-height: 208px; }
  .bento-cell:hover { transform: none; box-shadow: none; }
  .bento-text { padding: 12px; }
  .bento-text h3 { font-size: 14.5px; }
  .bento-text p { display: none; }
  .bento-cell.is-quad { padding: 12px; grid-column: span 2; grid-row: span 2; }
  .quad-grid { gap: 7px; }
  /* This span is the only thing naming the tile, so it keeps the 11px the web
     layout gives it rather than shrinking with the cell. */
  .quad-item span { font-size: 11px; }

  /* minmax(0, 1fr), never a bare 1fr: the rail inside the right hand panel
     reports a min-content width of roughly 700px, and a 1fr track floors at
     the item min-content, which pushed the whole document 347px wide */
  .deal-split { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .deal-feature { padding: 15px; }
  .timer-cell { min-width: 40px; }
  .timer-cell b { font-size: 17px; }

  .story-split { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .story-copy h2 { font-size: 21px; }
  .story-copy p { font-size: 13.5px; }
  .story-stats { gap: 9px; }
  .story-stat b { font-size: 20px; }
  .story-stat span { font-size: 11px; }
  .story-media { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }

  .quote-rail { grid-auto-columns: 84%; gap: 10px; }
  .quote-card { padding: 15px; }
  .quote-card blockquote { font-size: 13.5px; }

  .panel { border-radius: var(--r); }
  .panel-pad { padding: 15px; }
  /* A title and its note cannot always share 349px. Wrapping lets the note drop
     to a second line when it has to, rather than squeezing the title into a two
     word column, and they still share the row whenever both fit. */
  .panel-head { padding: 13px 15px; flex-wrap: wrap; gap: 4px 10px; }
  /* The whole row is the thumb target on a phone, so a commit button takes it. */
  .panel-pad.form-stack > .btn { justify-self: stretch; }
  .frame { padding: 5px; border-radius: var(--r); }
  .frame-inner { border-radius: calc(var(--r) - 5px); }

  .crumbs { font-size: 11.5px; padding-block: 10px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-wrap: nowrap; }
  .crumbs::-webkit-scrollbar { display: none; }

  .toast-dock { left: var(--gutter); right: var(--gutter); bottom: calc(var(--tab-full) + 12px); justify-items: stretch; }
  .toast { justify-content: center; border-radius: var(--r); }
  /* ------------------------------------------------- product detail, phone */
  .pdp-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }

  /* Full-bleed swipe gallery with a page counter, no hover lens */
  .gallery { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gallery-thumbs { display: none; }
  .gallery-host { margin-inline: calc(var(--gutter) * -1); }
  .gallery-stage { display: none; }
  .zoom-panel { display: none; }

  .swipe-gallery {
    display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    background: var(--card); -webkit-overflow-scrolling: touch;
  }
  .swipe-gallery::-webkit-scrollbar { display: none; }
  .swipe-slide { scroll-snap-align: center; aspect-ratio: 1 / 1; display: grid; place-items: center; }
  .swipe-slide img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
  .swipe-host { position: relative; }
  .swipe-counter {
    position: absolute; bottom: 12px; right: 12px; z-index: 3;
    padding: 4px 11px; border-radius: var(--r-pill);
    background: rgba(9, 18, 16, .72); color: #F2F7F6;
    font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  }
  .swipe-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 5px; }
  .swipe-dots b { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--line); transition: width .3s var(--ease), background-color .3s var(--ease); }
  .swipe-dots b.is-on { width: 18px; background: var(--accent); }
  .swipe-zoom {
    position: absolute; top: 12px; right: 12px; z-index: 3;
    width: 38px; height: 38px; border-radius: var(--r-pill);
    display: grid; place-items: center; font-size: 19px;
    background: rgba(255, 255, 255, .92); color: var(--ink);
    box-shadow: var(--shadow-1);
  }

  .buybox { position: static; padding: 0; box-shadow: none; border: 0; background: none; gap: 11px; }
  .buybox-price .price-now { font-size: 24px; }
  .option-chip { padding: 9px 14px; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .review-summary { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .bundle { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .pdp-title { font-size: 19px; letter-spacing: -.03em; }
  .pdp-price-block .price-now { font-size: 23px; }
  .review-score { text-align: left; display: flex; align-items: baseline; gap: 11px; }
  .review-score b { font-size: 34px; }
  .review-shots img { width: 58px; height: 58px; }

  /* The buy bar floats above the tab bar, the way app product pages do */
  .buy-bar {
    position: fixed; left: 0; right: 0; bottom: var(--tab-full);
    z-index: var(--z-sticky);
    display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 9px;
    padding: 10px var(--gutter);
    background: var(--card); border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 24px -16px rgba(14, 20, 23, .28);
  }
  .buy-bar .buy-bar-price { padding-right: 4px; }
  .buy-bar .buy-bar-price b { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.03em; }
  /* The delivery promise is what the shopper reads before tapping Add, so it
     holds 11px even in the tightest bar on the site. */
  .buy-bar .buy-bar-price small { font-size: 11px; color: var(--ink-3); }
  .buy-bar .btn { height: 42px; padding: 0 12px; font-size: 13px; }
  body.has-buybar { padding-bottom: calc(var(--tab-full) + 88px); }
  /* ------------------------------------------------------- listing, phone */
  .listing-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }

  /* Filter and sort become sheet triggers in a sticky action bar */
  .listing-toolbar {
    position: sticky; top: 0; z-index: var(--z-sticky);
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0; padding: 0; margin-bottom: 12px; border-radius: 0;
    background: var(--card); border: 0;
    border-bottom: 1px solid var(--line-soft);
    box-shadow: var(--shadow-1);
  }
  .listing-count { display: none; }
  .toolbar-right { display: contents; }
  .toolbar-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: 46px; font-size: 13px; font-weight: 700; color: var(--ink-2);
    border-right: 1px solid var(--line-soft);
    transition: background-color .2s var(--ease), color .2s var(--ease);
  }
  .toolbar-btn:last-child { border-right: 0; }
  .toolbar-btn:active { background: var(--card-3); }
  .toolbar-btn i { font-size: 17px; }
  .toolbar-btn.is-set { color: var(--accent); }
  .select-plain.is-desktop-sort { display: none; }

  .filter-rail {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-height: 84vh; z-index: calc(var(--z-sheet) + 1);
    border-radius: var(--r-xl) var(--r-xl) 0 0; overflow-y: auto;
    background: var(--card); box-shadow: var(--shadow-3);
    transform: translate3d(0, 101%, 0);
    transition: transform .44s var(--ease-swap);
    padding-bottom: var(--safe-b);
  }
  .filter-rail.is-open { transform: none; }
  .filter-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 17px; border-bottom: 1px solid var(--line-soft); position: sticky; top: 0; background: var(--card); z-index: 2; }
  .filter-drawer-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 13px 17px; background: var(--card); border-top: 1px solid var(--line-soft); position: sticky; bottom: 0; }
  .filter-group { padding: 14px 17px; }
  .filter-option { padding: 9px 0; font-size: 14px; }
  .active-filters { padding-inline: 0; margin-bottom: 11px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .active-filters::-webkit-scrollbar { display: none; }
  .pager { gap: 5px; padding-block: 18px; }
  .pager button, .pager a { min-width: 36px; height: 36px; }
  .pager .pager-skip { display: none; }
  /* ------------------------------------------- cart, checkout and account */
  .cart-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .cart-line { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
  .cart-line-price { grid-column: 2; text-align: left; }
  .cart-info h3 { font-size: 13.5px; }
  .summary-card { position: static; }

  /* The checkout total docks to the thumb, above the tab bar */
  .checkout-dock {
    position: fixed; left: 0; right: 0; bottom: var(--tab-full);
    z-index: var(--z-sticky); display: grid; grid-template-columns: auto 1fr; gap: 11px;
    align-items: center; padding: 10px var(--gutter);
    background: var(--card); border-top: 1px solid var(--line-soft);
    box-shadow: 0 -8px 24px -16px rgba(14, 20, 23, .28);
  }
  .checkout-dock small { display: block; font-size: 10.5px; color: var(--ink-3); }
  .checkout-dock b { font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
  /* The dock stays one row at every phone width, so its footroom is fixed.
     A 44px button inside 10px padding and a hairline makes it 66px tall. */
  body.has-dock { padding-bottom: calc(var(--tab-full) + 92px); }
  .checkout-steps { padding: 12px 14px; gap: 8px; }
  .step-node span { display: none; }
  .step-node[data-state="active"] span { display: inline; }
  .field-row { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .account-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .account-nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; scrollbar-width: none; padding: 8px; }
  .account-nav::-webkit-scrollbar { display: none; }
  .account-nav a span { font-size: 12.5px; }
  .addr-grid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .addr-card { padding: 14px; }
  .order-top { gap: 14px; padding: 12px 14px; }
  .order-top .order-actions { margin-left: 0; width: 100%; }
  .order-body { padding: 14px; }
  /* Four tracking steps across 375px is tight, but these name where the order
     actually is, so they wrap at 11px rather than shrink to 10. */
  .track-node { font-size: 11px; }

  /* --------------------------------------------------------- phone footer */
  .app-footer { padding: 20px var(--gutter) 26px; background: var(--chrome-2); display: grid; gap: 14px; }
  .app-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; }
  .app-footer-links a { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-radius: var(--r-sm); font-size: 13px; color: var(--chrome-ink); background: rgba(233, 241, 239, .05); }
  .app-footer-links a i { font-size: 15px; color: var(--chrome-ink-2); }
  .footer-bar { padding-block: 0; flex-direction: column; align-items: flex-start; gap: 11px; border-top: 0; }
  .footer-bar p { font-size: 11.5px; }
  .footer-legal { gap: 13px; }
  .footer-social a { width: 40px; height: 40px; }

  /* ------------------------------------------------------------- lightbox */
  .lightbox-bar { padding-top: calc(13px + env(safe-area-inset-top, 0px)); }
  .lightbox-foot { padding-bottom: calc(13px + var(--safe-b)); }

  /* --------------------------------------------- home sections, phone form */
  .promo-ticker { position: relative; z-index: calc(var(--z-header) + 1); }
  .ticker-item { margin: 0 14px; padding: 8px 0; font-size: 11px; }
  .ticker-item i { font-size: 14px; }
  .ticker-item::after { margin-left: 12px; }

  .usp-band { padding: 14px 0; }
  .usp-item { padding: 0 16px; gap: 10px; }
  .usp-mark { width: 34px; height: 34px; font-size: 17px; }
  .usp-item strong { font-size: 12.5px; }
  .usp-item small { font-size: 11px; }

  /* A fixed track, not a minmax: a zero minimum lets three tiles squeeze into
     one screen instead of overflowing with the next one peeking. */
  .tile-rail { grid-auto-columns: 86%; gap: 13px; }
  .tile-media { aspect-ratio: 16 / 10; }
  .tile-body { padding: 14px 15px 16px; }
  .tile-body h3 { font-size: 15.5px; }
  .tile-body p { font-size: 12.5px; }

  .reelbar { gap: 13px; }
  .reelbar-item { width: 84px; }
  .reelbar-ring { width: 78px; height: 78px; }
  .reelbar-badge { width: 24px; height: 24px; font-size: 12px; }
  .reelbar-label { font-size: 11px; }

  .insta-modal-step { width: 34px; height: 34px; font-size: 17px; }
  .insta-shop { margin-top: 11px; padding: 10px; gap: 10px; }
  .insta-shop-media { width: 50px; height: 50px; }

  /* ----------------------------------------------------- cart as a sheet */
  .cart-drawer {
    top: auto; left: 0; right: 0; bottom: 0;
    width: auto; max-height: 88vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    transform: translate3d(0, 101%, 0);
    padding-bottom: var(--safe-b);
  }
  .cart-drawer > .sheet-grip { display: grid; }
  .cart-drawer-head { padding: 12px var(--gutter); }
  .cart-drawer-body { padding: 0 var(--gutter); }
  .cart-drawer-foot { padding: 13px var(--gutter); }
  /* Scoped to the drawer to match the web rule it overrides; a bare
     .cart-line would lose to it and keep the wider thumbnail column. */
  .cart-drawer .cart-line { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 11px; padding: 13px 0; }

  /* ------------------------------------------- phone typing and tap targets */
  /* Safari zooms the page in when a text field smaller than 16px takes focus
     and never zooms back out, so every text entry and select carries a 16px
     floor on a phone whatever its size on the web layout. */
  .field input, .field select, .field textarea,
  .search-field, .range-row input, #pinInput { font-size: 16px; }

  /* The scope select and the query field cannot both hold 16px text in one
     40px row at this width, so the scope takes a row of its own. */
  .searchbar { grid-template-columns: 1fr auto; grid-auto-rows: 44px; height: auto; }
  .search-scope {
    grid-column: 1 / -1; font-size: 16px;
    padding: 0 32px 0 14px;
    border-right: 0; border-bottom: 1px solid var(--line);
    background-position: calc(100% - 17px) 19px, calc(100% - 12px) 19px;
  }
  .search-go { width: 54px; }

  /* Filter rows already hand their checkbox a full width label, but the colour
     swatches are bare 26px buttons. A transparent box centred on each one
     grows the hit area to 44px without moving the dot, and the wider gap keeps
     those boxes from overlapping their neighbours. */
  .swatch-row { gap: 18px; }
  .swatch-btn { position: relative; }
  .swatch-btn::after {
    content: ""; position: absolute; top: 50%; left: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%);
  }

  /* Same trick for the links that act as navigation on their own line: the line
     box is barely 20px, and growing it for real would push every section head
     down the page. A bare .btn-quiet is left out on purpose, because that form
     sits inside a running sentence where two stacked lines of prose would end
     up fighting over the same 40px. The review count is only a link on the
     product page; on a card it is plain text sitting inside the card's own
     anchor, and a transparent box there would be one more thing competing for
     the same tap for no gain. */
  .section-link, a.rating-count, .btn.btn-quiet, [data-brand-link] { position: relative; }
  .section-link::after, a.rating-count::after,
  .btn.btn-quiet::after, [data-brand-link]::after {
    content: ""; position: absolute; left: -6px; right: -6px;
    top: 50%; height: 40px; transform: translateY(-50%);
  }
  /* These already sit in flex rows, so growing the line box costs one row of
     height and leaves no doubt about which link owns a given pixel. */
  .footer-legal a, .auth-footer-links a,
  .auth-alt .auth-link, .auth-inline .auth-link {
    display: inline-flex; align-items: center; min-height: 40px;
  }
  /* Breadcrumbs scroll sideways, and an overflow-x row clips on both axes, so
     these grow their own line box instead of reaching outside it. */
  .crumbs { padding-block: 0; }
  .crumbs a, .crumbs [aria-current] { display: inline-flex; align-items: center; min-height: 42px; }
  .app-mark { min-height: 40px; }
  /* One line of label plus a 17px box is 19px, so the row carries the rest of
     the 44px as padding. It is the label that takes the tap, not the box. */
  .check { padding-block: 13px; }

  /* Below 11px a label stops being readable at arm's length on a phone. The
     badges are uppercase and tracked, so they carry the extra half pixel
     without changing the card's rhythm, and it keeps every badge on a card at
     one size instead of two. */
  .pc-brand, .pc-flash, .option-chip small,
  .pc-edition-tag, .tab-chip, .insta-follow-badge small { font-size: 11px; }
}
/* ==========================================================================
   The application frame exists only on phones. Everything the app shell
   owns is removed from the document on tablet and desktop.
   ========================================================================== */
@media (min-width: 768px) {
  .app-shell, .app-tabbar, .app-footer,
  .buy-bar, .checkout-dock, .swipe-host, .toolbar-btn, .sheet { display: none !important; }
}
@media (max-width: 767px) {
  /* The phone toolbar is three equal buttons, so the web sort select, the
     tablet filter trigger and the segmented view switch all step aside. */
  .select-plain.is-desktop-sort, .filter-open-btn, .view-switch { display: none !important; }
}

/* Small phones: keep the two-up grid, shrink the type instead of the layout */
@media (max-width: 380px) {
  :root { --gutter: 11px; }
  .pc-title { font-size: 12px; }
  .price-now { font-size: 16px; }
  .hero-title { font-size: 22px; }
  .app-tab { font-size: 9.5px; }
  .app-tab i { font-size: 20px; }
  .bento { grid-auto-rows: minmax(138px, auto); }
  .buy-bar { grid-template-columns: 1fr 1fr; }
  .buy-bar .buy-bar-price { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 7px; }
  /* The price moving onto its own row makes the bar a row taller, so the page
     has to give back the extra height or the last card hides underneath it. */
  body.has-buybar { padding-bottom: calc(var(--tab-full) + 124px); }
}

/* Landscape phones should not lose the whole viewport to chrome */
@media (max-width: 900px) and (max-height: 470px) and (orientation: landscape) {
  .app-chips, .app-locale { display: none; }
  .hero-viewport { height: 78vh; }
  .swipe-slide { aspect-ratio: 16 / 9; }
}

@media (prefers-reduced-motion: reduce) {
  .sheet, .filter-rail, .app-chip, .app-tab i { transition-duration: .001ms !important; }
  .swipe-gallery, .app-chips { scroll-behavior: auto; }
}