/* ==========================================================================
   TOUCH & LEGIBILITY LAYER  —  mobile only
   ==========================================================================

   Loaded last, after every other stylesheet, so these minimums win without
   !important or inflated specificity. Everything is inside a max-width query:
   the desktop design is untouched.

   Two guarantees on a phone:

   1. Discrete controls get a ~44px touch area (WCAG 2.5.8, and the Apple and
      Material floor). Only real controls are listed. Inline links inside
      running text are deliberately excluded — forcing a height on those
      gaps paragraphs open.

   2. Micro-labels get an 11px floor. The letterspaced uppercase styling is
      kept as-is; several of these rendered at 8.5-9px, which is below what
      most people can read on a handset. The worst were on the product cards
      and the checkout field labels.

   Each selector below was measured, not guessed. Note the footer rule uses
   flex rather than inline-flex on purpose; see its comment.
   ========================================================================== */

@media (max-width: 900px) {

  /* ======================================================================
     1. TOUCH TARGETS
     ====================================================================== */

  /* ---- header controls ---- */
  .nav-burger,
  .nav-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* ---- cart drawer: close button, and the empty-state link ---- */
  .cd-head button {
    min-width: 44px;
    min-height: 44px;
  }

  .cd-empty a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- catalog filter chips ---- */
  .chip {
    min-height: 44px;
  }

  /* ---- Add to cart / Sold out: the primary conversion control, and the
          smaller ghost buttons. These measured 37-40px tall. ---- */
  .btn-sm,
  .pc-bottom .btn {
    min-height: 44px;
  }

  /* ---- product card "details & bulk pricing" (measured 14px tall) ---- */
  .pc-details {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- breadcrumbs ---- */
  .pdp-crumbs a,
  .doc-crumbs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- footer link columns ----
     These are display:block in style.css and must stay block-level, so this
     is flex, not inline-flex: inline-flex reflows each column into one run
     of concatenated links ("Peptide CatalogThe ScienceFAQ"). */
  .f-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /* ---- quantity field: the +/- buttons were already 46px, the field 20 ---- */
  .bulk-qty input {
    min-height: 44px;
  }

  /* ---- sign-in wordmark ---- */
  .auth-logo {
    min-height: 44px;
  }

  /* ---- footer social icons (40px by design on desktop) ---- */
  .f-social-link {
    width: 44px;
    height: 44px;
  }

  /* ---- catalog search: clear button is 34px at desktop sizing ---- */
  .shop-search-clear {
    width: 44px;
    height: 44px;
  }

  /* ======================================================================
     2. LEGIBILITY FLOOR (11px)
     ====================================================================== */

  /* ---- product cards ----
     .pc-flag is deliberately NOT resized: it is the rotated corner ribbon,
     and widening its text pushes it further across the purity label.

     .pc-top is a nowrap flex row and .pc-purity is white-space:nowrap, so at
     the legible size the pair can no longer share one line on a 320px card —
     it would overflow and be clipped. Allow the row to wrap instead. */
  .pc-top {
    flex-wrap: wrap;
  }

  /* On a card carrying the corner ribbon, the purity label sits underneath it
     and is unreadable (this predates the legibility bump — the ribbon simply
     covers that corner). Give it its own line there, and only there, so cards
     without a ribbon keep their single-line header. */
  .product-card:has(.pc-flag) .pc-purity {
    flex-basis: 100%;
  }

  .pc-tag,
  .pc-purity,
  .pc-indicative,
  .pc-bottom .btn {
    font-size: 11px;
  }

  /* ---- product detail page ---- */
  .pdp-badge,
  .pdp-indicative,
  .pdp-spec dt,
  .bulk-tier em,
  .pdp-section h2 em,
  .pdp-crumbs,
  .pdp-crumbs a {
    font-size: 11px;
  }

  /* ---- checkout: field labels, trust badges and notes ---- */
  .am-field span,
  .co-badges span,
  .co-free-note,
  .co-how strong,
  .dm-tag,
  .af-opt {
    font-size: 11px;
  }

  /* ---- site chrome ---- */
  .cd-pay-hint,
  .cd-rup,
  .f-madewith,
  .doc-crumbs,
  .doc-crumbs a,
  .hero-scroll span,
  .science-visual-caption,
  .shop-search-label {
    font-size: 11px;
  }

  /* ======================================================================
     3. CATALOG PAGING CONTROL
     ====================================================================== */

  /* Revealed by main.js only when cards are held back; see .product-card.capped
     in style.css. Kept full width so it is an easy thumb target. */
  .shop-loadmore {
    margin-top: 26px;
    text-align: center;
  }

  .shop-loadmore .btn {
    width: 100%;
    min-height: 48px;
  }
}

/* ==========================================================================
   COMPACT TWO-UP CATALOG  —  phones
   ==========================================================================
   style.css drops the grid to a single column at 560px, which turns 35 cards
   into roughly twenty screens of scrolling. Two columns halves that, and the
   paging in main.js cuts the initial view further.

   At this width a card is about 165px wide, so the pieces that cannot fit are
   removed rather than allowed to overflow. Both are redundant here: the
   category is already a filter chip above the grid, and the image and title
   both already link through to the product page.
   ========================================================================== */
@media (max-width: 560px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .product-card {
    padding: 14px 12px;
  }

  /* No room beside a ~165px card: the chips above carry the category. */
  .pc-tag {
    display: none;
  }

  /* With the category pill gone, the purity line would sit alone in the top
     corner, straight under the diagonal ribbon, so the card is reordered to
     put the vial first. .pc-glow and .pc-flag are absolutely positioned and
     so are unaffected by the order.

     The name follows the image directly. An earlier arrangement left
     .pc-top — by this width just the "≥99% PURE" label — stranded between
     the two, so the first words under a product photo were a spec line
     rather than the product's name. The credential still earns its place;
     it reads better next to the price, which is the other thing a buyer
     weighs at that moment. */
     SCOPED AWAY FROM .research-card. Two components share the .product-card
     class: the storefront card (product-card.tsx), whose .pc-* blocks are
     its own direct children, and the homepage catalog card
     (research-catalog.tsx), which nests .pc-name and .pc-spec inside
     .research-card-body alongside the price and the Add to Cart button.

     `order` only sorts siblings, so in that second card these rules did not
     reorder the card at all — they reordered the BODY, and since the price
     and button carry the default order:0 they sorted ahead of a name at
     order:2. The product name ended up underneath its own Add to Cart
     button. The catalog card's DOM order is already correct, so the fix is
     to leave it alone. */
  .product-card:not(.research-card) {
    display: flex;
    flex-direction: column;
  }

  .product-card:not(.research-card) .pc-vial   { order: 1; }
  .product-card:not(.research-card) .pc-name   { order: 2; }
  .product-card:not(.research-card) .pc-spec   { order: 3; }
  .product-card:not(.research-card) .pc-top    { order: 4; }
  .product-card:not(.research-card) .pc-bottom { order: 5; }
  .product-card:not(.research-card) .pc-rup    { order: 6; }

  /* Sitting above the price now rather than under the ribbon, it wants a
     little air and no stretched space-between with one child left. */
  .pc-top {
    justify-content: flex-start;
    margin-top: 6px;
  }

  .pc-photo {
    height: 112px;
  }

  .pc-vial {
    padding-block: 10px 4px;
  }

  .pc-glow {
    width: 130px;
    height: 130px;
  }

  .pc-name {
    font-size: 17px;
  }

  .pc-spec {
    font-size: 12px;
  }

  /* Price over a full-width button; side by side does not fit. */
  .pc-bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .pc-bottom .btn {
    width: 100%;
    justify-content: center;
  }

  /* The card image and name already link to the product page. */
  .pc-rup {
    display: none;
  }
}

/* ==========================================================================
   Product card, phone refinements
   ==========================================================================
   The card above stacked the price over a FULL-WIDTH button. At ~165px that
   pill is the loudest thing on the card — louder than the product name — and
   three of them down a column read as a wall of buttons rather than a
   catalogue.

   The 44px touch height stays: it is the WCAG 2.5.8 floor this whole file
   exists to guarantee, and shrinking a primary conversion control to win
   back a few pixels is the wrong trade. What comes back instead is the
   horizontal space — price and button share a row again, the button sized
   to its label — and the shouting is turned down. */
@media (max-width: 560px) {
  .pc-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }

  .pc-bottom .btn {
    width: auto;
    flex: 0 1 auto;
    padding-inline: 14px;
    /* 1.1px of tracking on an 11px uppercase label is what made this read as
       a banner. Enough to stay legible, not enough to shout. */
    letter-spacing: 0.4px;
  }

  /* The price was competing with the button at 22px/800. */
  .pc-price {
    font-size: 18px;
    font-weight: 700;
  }

  /* Lighter, tighter name — it was 700 weight with 0.6px tracking, which on
     a phone reads heavier than the product it is naming. */
  .pc-name {
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.1px;
    line-height: 1.25;
  }
}