/* ── The card's own rows, at phone width ──────────────────────────────────
   These carry html at the front only to clear assets/css/custom.css, whose
   equivalents score (0,4,3); this block is printed later in the head, so an
   equal score would have done, and the extra type keeps it true even if that
   file is ever moved after this one. */
@media (max-width: 600px) {

  /* The art code must be ONE line on every card. On a 115px track it wrapped
     to two ("ART CODE: TP" / "- 0504") while a product with no code kept the
     one-line blank placeholder — so within a single row one card's price,
     swatches and button sat a whole line lower than its neighbour's. That is
     the ragged look in the recording, and it is a wrap, not a spacing bug. */
  /* The title box in custom.css is sized to hold exactly these two lines.
     Pin the clamp beside it so the two can only ever be changed together —
     a clamp of 3 against a two-line box is precisely the fault this is
     fixing. */
  html body.woocommerce-page ul.products li.product .woocommerce-loop-product__title,
  html body.woocommerce ul.products li.product .woocommerce-loop-product__title {
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    display: -webkit-box !important;
    overflow: hidden !important;
    overflow-wrap: anywhere !important;
  }

  html body.woocommerce-page ul.products li.product .af-art-code--card,
  html body.woocommerce ul.products li.product .af-art-code--card {
    display: block !important;
    padding: 0 10px !important;
    margin: 2px 0 4px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: .01em !important;
    min-height: 1.4em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Stars: same 10px gutter as the title, and a fixed row height so a
     reviewed product and an unreviewed one stay level. */
  html body.woocommerce-page ul.products li.product .woocommerce-product-rating,
  html body.woocommerce ul.products li.product .woocommerce-product-rating,
  html body.woocommerce-page ul.products li.product .rating,
  html body.woocommerce ul.products li.product .rating {
    padding: 7px 10px 0 !important;
    margin: 0 !important;
    min-height: 20px !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-page ul.products li.product .star-rating,
  html body.woocommerce ul.products li.product .star-rating {
    margin: 0 !important;
    /* 12px is this site's floor for anything someone reads at arm's length,
       and the audit in tools/headless-mobile.js reports anything under it. */
    font-size: 12px !important;
  }
  html body.woocommerce-page ul.products li.product .rating-count,
  html body.woocommerce ul.products li.product .rating-count {
    font-size: 12px !important;
  }

  /* The picture. This theme's card nests the image in .product-block >
     .product-transition, and that box is pinned to a flat 300px tall at every
     width by custom.css — its phone override at 520px named only
     .tax-product_cat, so the Shop archive never received it. On a 115px card
     that made every artwork a 115 x 300 sliver, which is what the recording
     shows. A ratio instead of a height keeps the box in proportion to whatever
     the card turns out to be, and keeps every card in a row the same height,
     which is what the original "one fixed box for all" note was after.
     3:4 because that is the shape of the canvases this shop sells — the
     titles say so. */
  html body.post-type-archive-product ul.products li.product .product-block .product-transition,
  html body.tax-product_cat ul.products li.product .product-block .product-transition,
  html body.post-type-archive-product ul.products li.product .product-transition,
  html body.tax-product_cat ul.products li.product .product-transition {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    aspect-ratio: 3 / 4 !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  html body.post-type-archive-product ul.products li.product .product-transition img,
  html body.tax-product_cat ul.products li.product .product-transition img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* Colour swatches and "5 sizes · 2 frames". */
  html body.woocommerce-page ul.products li.product .af-card-vars,
  html body.woocommerce ul.products li.product .af-card-vars {
    padding: 2px 10px 8px !important;
    margin: 0 !important;
    font-size: 12px !important;
    gap: 6px !important;
    line-height: 1.4 !important;
  }
  /* the swatches and "5 sizes · 2 frames" are one link through to the
     product's options, and measured 17-37px tall — under the ~40px a
     fingertip wants */
  html body.woocommerce-page ul.products li.product .af-card-vars > a,
  html body.woocommerce ul.products li.product .af-card-vars > a {
    min-height: 40px !important;
    align-items: center !important;
  }
  html body.woocommerce-page ul.products li.product .af-card-dots i,
  html body.woocommerce ul.products li.product .af-card-dots i {
    width: 12px !important;
    height: 12px !important;
  }

  /* View Brochure: the card's last row, pushed to the bottom so the button
     lines up across a row however tall the text above it came out, and given
     the 40px a fingertip needs. */
  html body.woocommerce-page ul.products li.product .taf-broch--card,
  html body.woocommerce ul.products li.product .taf-broch--card {
    width: calc(100% - 20px) !important;
    margin: auto 10px 10px !important;
    padding: 11px 6px !important;
    font-size: 12px !important;
    min-height: 40px !important;
    gap: 5px !important;
    box-sizing: border-box !important;
  }
  html body.woocommerce-page ul.products li.product .taf-broch--card .taf-broch-ico,
  html body.woocommerce ul.products li.product .taf-broch--card .taf-broch-ico {
    width: 13px !important; height: 13px !important;
  }
}