/**
 * shopfix.css — layout repairs on the shop side of the counter look.
 *
 * Measured on the live site 2026-09-20 at 1662px wide:
 *   single product  summary 283px, gallery 189px inside a 1647px main
 *   related products  grid-template-columns: 245px — one column, four items stacked
 *   mix & match       one vertical list running the length of the page
 * The shop archive grid was fine (4 x 245px), so this file only repairs what was broken.
 *
 * Owned by the main session; Lane D owns counter.css and site-counter.css. Loaded on
 * shop, product, cart and checkout when the counter look is on.
 */

/* ---------- single product: gallery and summary sit side by side ---------- */
.single-product div.product{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}
.single-product div.product > .woocommerce-product-gallery,
.single-product div.product > .summary{width:100%;max-width:none;float:none;margin:0}
.single-product .woocommerce-product-gallery img{width:100%;height:auto}
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .product_meta{grid-column:1 / -1}

/* the summary had collapsed to 283px, so every heading broke over three lines */
.single-product .summary{min-width:0}
.single-product .summary h1{overflow-wrap:break-word}

@media (max-width:900px){
  .single-product div.product{grid-template-columns:minmax(0,1fr);gap:24px}
}

/* ---------- related / up-sells / cross-sells: a grid, not a column ---------- */
.related ul.products,
.up-sells ul.products,
.cross-sells ul.products,
.woocommerce ul.products{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:28px 20px;
  margin:0;
  padding:0;
  list-style:none;
}
.related ul.products li.product,
.up-sells ul.products li.product,
.cross-sells ul.products li.product,
.woocommerce ul.products li.product{
  width:100%;
  float:none;
  margin:0;
  clear:none;
}
.related ul.products::before,.related ul.products::after,
.up-sells ul.products::before,.up-sells ul.products::after,
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none}

/* ---------- grouped products (Mix & Match) : a grid, not one long list ---------- */
.woocommerce table.woocommerce-grouped-product-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px 20px;
  border:0;
  width:100%;
}
.woocommerce table.woocommerce-grouped-product-list thead{display:none}
.woocommerce table.woocommerce-grouped-product-list tbody{display:contents}
.woocommerce table.woocommerce-grouped-product-list tr{
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:"qty label" "qty price";
  align-items:center;
  gap:2px 12px;
  padding:12px 14px;
  border:1px solid rgba(28,25,22,.14);
  border-radius:3px;
  background:rgba(255,255,255,.55);
}
.woocommerce table.woocommerce-grouped-product-list td{border:0;padding:0;display:block}
.woocommerce table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__quantity{grid-area:qty}
.woocommerce table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__label{grid-area:label;font-weight:700;line-height:1.25}
.woocommerce table.woocommerce-grouped-product-list td.woocommerce-grouped-product-list-item__price{grid-area:price;font-size:.92rem;opacity:.85}
.woocommerce table.woocommerce-grouped-product-list .quantity input.qty{min-height:44px;width:64px;text-align:center}

@media (max-width:640px){
  .woocommerce table.woocommerce-grouped-product-list{grid-template-columns:minmax(0,1fr)}
}

/* ---------- footer: one tidy row, and no address in plain sight ---------- */
.site-foot .foot-contact{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 22px;
}
.site-foot .foot-contact a{min-height:44px;display:inline-flex;align-items:center}
.site-foot .foot-row{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:8px 24px;
}
.site-foot .foot-credit{margin-left:auto;white-space:nowrap}
@media (max-width:640px){
  .site-foot .foot-credit{margin-left:0}
}

/* ---------- beat WooCommerce's own 48% floats ----------
   Measured after the first pass: div.product was correctly 1040px with columns
   500/476, but .summary still rendered 229px and the gallery 240px, because
   woocommerce.css sets `.woocommerce div.product div.summary{width:48%}` at
   (0,3,2) — one element selector more than the rule above it. Same shape,
   one class more, so it wins on merit rather than on !important. */
.woocommerce div.product div.summary.entry-summary,
.single-product .woocommerce div.product div.summary{width:100%;float:none;margin:0}
.woocommerce div.product div.woocommerce-product-gallery.woocommerce-product-gallery--columns-4,
.single-product .woocommerce div.product div.woocommerce-product-gallery{width:100%;float:none;margin:0}
.single-product .woocommerce div.product div.woocommerce-product-gallery figure{margin:0}

/* the related block spans both columns and lays its own products out */
.single-product div.product > section.related,
.single-product div.product > section.up-sells,
.single-product div.product > .woocommerce-tabs{grid-column:1 / -1;width:100%}
.woocommerce .related ul.products li.product,
.woocommerce .up-sells ul.products li.product,
.woocommerce-page ul.products li.product{width:100%;float:none;margin:0}

/* The related block carries class "related products", so a generic .products
   grid rule turned the SECTION into the 4-column grid and left the real
   ul.products sitting in its first 245px cell. The section is a block; the
   list inside it is the grid. */
.woocommerce section.related.products,
.woocommerce section.up-sells.products,
.woocommerce .cross-sells.products{display:block;width:100%}

/* ---------- Mix & Match: the pack picker was one 23-row column ----------
   Measured: ul.fb-pack__grid 426px wide, single column, 23 items at 49px each,
   so the page ran 3,361px. Two columns inside the summary halves it.

   2026-09-20 21:00, measured at 1280 and 1440: the earlier "full-width row under
   the two columns" idea (negative margin-inline on .fb-pack) put the picker at
   x=224..1240 while the gallery still occupied x=200..703 down to y=911 - the
   picker starts at y=422, so its left half rendered UNDER the product image
   (screenshot: left column of checkboxes hidden). The picker lives inside
   .summary and cannot be moved below the gallery from CSS without breaking the
   form, so it stays in its own column: 479px wide = two columns of 230px. */
.fb-pack__grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:6px 14px;
}
.fb-pack__grid > li{margin:0}
.fb-pack__grid label{min-height:44px;display:flex;align-items:center;gap:8px;line-height:1.25}
.fb-pack__grid input[type="checkbox"]{width:22px;height:22px;flex:none;margin:0}
.single-product .summary .fb-pack{margin-inline:0;width:auto}

/* ---------- controls under the 44px touch floor (measured 2026-09-20) ----------
   select#pa_weight 43px, input.qty 43px (desktop; woo.css only raises them
   under 640px), my-account inputs 37px, show-password 22px, remember-me 13px,
   the empty-cart "new in store" buttons 40px. */
.woocommerce select,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce .quantity input.qty,
.woocommerce-page select,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="password"]{min-height:44px}
.woocommerce .show-password-input,
.woocommerce-page .show-password-input{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;top:50%;transform:translateY(-50%);right:2px}
.woocommerce .show-password-input::after{position:static}
.woocommerce input[type="checkbox"],
.woocommerce-page input[type="checkbox"]{width:20px;height:20px;vertical-align:middle;margin:0 8px 0 0}
.woocommerce-form-login__rememberme{display:inline-flex;align-items:center;min-height:44px}
.wp-block-button__link.add_to_cart_button,
.wc-block-grid__product-add-to-cart .wp-block-button__link{min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* ---------- the left column: photo, then "About this cut" ----------
   fatboys_media_col_open/close (functions.php) wrap the gallery and the notes in
   .fb-media-col, so this grid has exactly two children and nothing spans a row. The
   earlier row-based attempts could not work: a buy column spanning two intrinsic rows
   shares its surplus height across both, which is what left 366px between the photo and
   the text. Related products keep the full width underneath, which is where they belong. */
.single-product div.product > .fb-media-col{
  grid-column:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:clamp(20px,2.4vw,34px);
}
.single-product div.product > .fb-media-col > .woocommerce-product-gallery{width:100%;float:none;margin:0}
.single-product div.product > .summary{grid-column:2}
/* SO-7 (2026-10-27): the description and the product fields print AFTER the summary now, in
   .fb-notes-col, so the h1 is the first heading in the source. Same picture as before: the
   photo in row 1, the notes straight under it in row 2, the buy column spanning both. Row 2
   is 1fr, so the buy column's extra height goes there and row 1 stays the photo's height (the
   366px gap of the old auto/auto rows cannot open). The negative margin turns the grid's row
   gap back into the 20-34px the notes had under the photo inside .fb-media-col. */
@media (min-width:901px){
  .single-product div.product{grid-template-rows:auto 1fr}
  .single-product div.product > .fb-media-col{grid-row:1}
  .single-product div.product > .summary{grid-row:1 / span 2}
  .single-product div.product > .fb-notes-col{
    grid-column:1;
    grid-row:2;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:clamp(20px,2.4vw,34px);
    margin-top:calc(clamp(20px,2.4vw,34px) - clamp(28px,4vw,64px));
  }
  /* No notes and no fields: functions.php prints no wrapper, so the buy column stays in row 1
     and the related row takes row 2 with one gap, as before. */
  .single-product div.product:not(:has(> .fb-notes-col)) > .summary{grid-row:1}
}
.single-product div.product > section.cut-notes{width:auto;margin:0}
.single-product div.product > section.related,
.single-product div.product > section.up-sells,
.single-product div.product > .cross-sells,
.single-product div.product > .woocommerce-tabs{grid-column:1 / -1}

/* On a phone the wrapper would put 280px of description between the photo and the buy
   box, pushing Add to cart down the page. display:contents drops the wrapper box so the
   gallery and the notes become direct children again, and order puts the buy box back
   where it belongs: photo, buy, description, related. */
@media (max-width:900px){
  .single-product div.product{display:flex;flex-direction:column;gap:clamp(20px,5vw,28px)}
  .single-product div.product > .fb-media-col,
  .single-product div.product > .fb-notes-col{display:contents}
  .single-product div.product .woocommerce-product-gallery{order:1}
  .single-product div.product > .summary{order:2}
  .single-product div.product section.cut-notes{order:3}
  .single-product div.product > section.related,
  .single-product div.product > section.up-sells{order:4}
}

/* ============================================================ mobile shop grid (2026-09-21)
   Owner: "make it so mobile friendly ... i want the photos to look good and prices to be clear
   maybe better placed and apart from prices UI elements should have some padding not overlap".

   Measured at 390px before this block:
     - li.product was ONE column, 350x533 per card. 103 tiles is about 55,000px of scrolling.
     - span.price is position:absolute; top:-14px, so the price tag hung 9px ABOVE the card's
       own top edge and collided with the card above it once the cards stacked. That is the
       overlap. On desktop, with a wide grid and gaps around each card, it reads as intended.

   So on phones the tag comes out of the corner and sits in the flow under the title, where the
   price is always in the same place, always on the card's own background, and never on top of
   a photo. The tag look is kept. Desktop is untouched. */
@media (max-width:640px){
  /* woo.css sets the grid with `.woocommerce .page-main .products`, three classes, and a
     media query adds no specificity - so `.woocommerce ul.products` loses to it however late
     it appears. Match its shape and add the element. */
  .woocommerce .page-main .products,
  .woocommerce .page-main ul.products,
  .woocommerce ul.products{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;
  }
  /* The card's steel-tray border is 5px and its padding 10px, which took 30px of a 169px
     card and left the photo 139px. Thinner frame on a phone, so the meat gets the room. */
  .woocommerce ul.products li.product{
    padding:8px 8px 12px;
    border-width:3px;
    display:flex;
    flex-direction:column;
  }
  .woocommerce ul.products li.product > a.woocommerce-LoopProduct-link{display:block}
  .woocommerce ul.products li.product img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

  /* the price: in the flow, under the name, never over the photo */
  .woocommerce ul.products li.product .price{
    position:static;
    top:auto;right:auto;
    display:inline-block;
    margin:2px 0 8px;
    font-size:1.05rem;
    padding:6px 11px 5px;
    clip-path:none;              /* the notch reads as damage at this size */
    border-radius:3px;
    align-self:flex-start;
  }
  .woocommerce ul.products li.product .price::before{display:none}

  /* Three lines, not two. At two, "Angus Premium Beef Mince" came out as "Angus Premium
     Bee..." and the product name is the one thing that must always read in full. The grid
     aligns row heights anyway, so a third line costs nothing. */
  .woocommerce ul.products li.product .woocommerce-loop-product__title{
    font-size:.9rem;
    line-height:1.25;
    margin:10px 0 0;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  /* the blurb is for the product page; two lines is all a tile can carry */
  .woocommerce ul.products li.product .fb-card-excerpt{
    font-size:.82rem;
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 10px;
  }
  /* The button ends the card, full width, and still clears the 44px floor.
     .72rem computed to 11.52px, the smallest tappable text on the site. Measured at 390 on
     2026-09-21 across all 103 tiles in a 147px button: 13px adds 2px of height and nothing
     wraps, 14px pushes the longest label ("Build your pack") onto a second line and the
     button jumps 45px to 66px. So 13px is the ceiling, not a guess. */
  .woocommerce ul.products li.product a.button,
  .woocommerce ul.products li.product .button{
    width:100%;
    margin-top:auto;
    padding:13px 8px;
    font-size:13px;
    letter-spacing:.06em;
    text-align:center;
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
}

/* One column only on the genuinely narrow ones, where two 160px cards would squeeze the
   title to three lines. */
@media (max-width:359px){
  .woocommerce .page-main .products,
  .woocommerce .page-main ul.products,
  .woocommerce ul.products{grid-template-columns:minmax(0,1fr)}
}

/* ---------- iOS zooms the page when a text field is under 16px ----------
   Measured on the live block checkout at 390px, 2026-09-21: ten of the eleven text-entry
   fields render at 16px and `billing-address_2` (the optional address line) at 13.33px.
   Safari responds to a focus on anything under 16px by zooming the whole page in, and the
   customer then has to pinch back out mid-checkout. One field is enough to do it. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="password"],
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select{font-size:16px}