/* Fat Boy's — WooCommerce + WP chrome, built on the mockup's design tokens.
   Loaded after mockup.css so it inherits --paper / --ink / --meat / --pink. */

/* ---------- pack cards are links now ---------- */
.pack {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pack:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 rgba(34, 29, 26, 0.18);
}
.pack-cta {
  display: inline-block;
  margin-top: 14px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meat);
  border-bottom: 2px solid var(--meat);
  padding-bottom: 2px;
}

/* ---------- nav cart ---------- */
.nav-cart .cart-count {
  display: inline-block;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--meat);
  color: var(--paper);
  font-size: 0.75rem;
  text-align: center;
}

/* ---------- generic page shell ---------- */
.page-main { padding: 56px 0 72px; }
.page-main h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 18px; }
.page-content p { margin-bottom: 14px; }
.page-content a { color: var(--meat); }

/* ---------- shop grid ---------- */
.woocommerce .page-main .products,
.woocommerce ul.products {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 34px 20px; /* extra row gap so the hanging price tags have air */
  margin: 32px 0 0;
  padding: 0;
}
.woocommerce ul.products li.product {
  /* Woo's own stylesheet sets width:22.05% + float:left, which collapses each card to a
     fraction of its grid track. Grid owns the layout here, so hand the width back. */
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  clear: none !important;
  background: #fdf7eb;
  border: 1px solid rgba(34, 29, 26, 0.2);
  border-radius: 6px;
  padding: 30px 20px 20px;
  position: relative;
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.woocommerce ul.products li.product:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 0 rgba(34, 29, 26, 0.12);
}
.woocommerce ul.products li.product .button { margin-top: auto; align-self: flex-start; }
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none !important; }
.woocommerce ul.products li.product a { text-decoration: none; color: inherit; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.15;
  color: var(--meat-deep);
  margin: 0 0 10px;
}
/* the price is the mockup's hanging tag, pinned to the card's top edge */
.woocommerce ul.products li.product .price {
  position: absolute;
  top: -14px;
  right: 16px;
  margin: 0;
  font-family: var(--display);
  font-size: 1rem;
  line-height: 1.2;
  background: var(--meat);
  color: var(--paper);
  padding: 7px 12px 6px;
  border-radius: 3px 3px 4px 4px;
  clip-path: polygon(11% 0, 100% 0, 100% 100%, 0 100%, 0 24%);
  transform-origin: 6px 4px;
}
.woocommerce ul.products li.product .price::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--paper);
}
.woocommerce ul.products li.product:hover .price { animation: swing 0.9s ease-in-out; }
.woocommerce ul.products li.product .price .woocommerce-Price-amount { color: inherit; }
.woocommerce ul.products li.product .price del { opacity: 0.5; margin-right: 6px; }
/* unpriced (marinated) lines: a butcher-pink "see the counter" tag instead */
.woocommerce ul.products li.product.product-unpriced .price {
  background: var(--pink);
  color: var(--ink);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 8px 12px 7px;
  max-width: 70%;
  text-align: right;
}
.woocommerce ul.products li.product.product-unpriced a.button {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.woocommerce ul.products li.product.product-unpriced a.button:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.fb-card-excerpt {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
/* Square the loop thumbnails so a mixed grid (real image / no image) still lines up.
   The art is authored 1:1, so object-fit only matters if a non-square photo lands
   later — which it will, when the client's own photography replaces these. */
.woocommerce ul.products li.product img {
  border-radius: 4px;
  margin-bottom: 14px;
  width: 100%;
  /* height:auto is LOAD-BEARING — see the note on .pack-thumb img in mockup.css.
     WP's height attribute otherwise beats aspect-ratio and the tile gets cropped. */
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border: 1px solid rgba(34, 29, 26, 0.1);
}

/* Touch floor for every Woo control, scoped by POINTER not width — a width-scoped
   rule misses touch tablets above the mobile breakpoint (the iPad-landscape class).
   Measured at 320: the single add-to-cart button came out 43px, one pixel under, on
   the primary conversion control of the page this demo exists to show. */
@media (pointer: coarse) {
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button,
  .woocommerce .single_add_to_cart_button,
  .woocommerce ul.products li.product .button,
  .wc-block-components-button {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .woocommerce .quantity input.qty { min-height: 48px; font-size: 16px; }

  /* The shop's category jump pills and the archive back-link are navigation, not
     decoration, and the button selectors above do not reach them — measured 38px
     each at 390 with a coarse pointer. Found by the codex pass; the Woo tab strip
     it also flagged is moot here because the theme removes the tabs entirely
     (verified live: 0 tab links in the DOM). */
  .shop-pills a,
  .shop-back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* buttons — reuse the mockup's button language everywhere Woo renders one */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  display: inline-block;
  background: var(--meat);
  color: var(--paper);
  font-family: var(--text);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  padding: 13px 22px;
  border: 2px solid var(--meat);
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background: var(--meat-deep);
  border-color: var(--meat-deep);
  color: var(--paper);
  transform: translateY(-1px);
}
.woocommerce a.button.added_to_cart {
  margin-left: 10px;
  color: var(--meat);
  border-bottom: 2px solid var(--meat);
  background: none;
  border-radius: 0;
  padding: 4px 0;
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: #b7ada3;
  border-color: #b7ada3;
  color: #fdf7eb;
  cursor: not-allowed;
  transform: none;
  opacity: 1;
}

/* ---------- single product ---------- */
.single-product .page-main { padding-top: 44px; }
.woocommerce div.product { display: block; }
.woocommerce div.product .product_title {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  line-height: 1.1;
  margin-bottom: 12px;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--display);
  font-size: 1.9rem;
  color: var(--meat);
  margin-bottom: 18px;
}
/* unpriced single: the counter line, not a giant fake price */
.woocommerce div.product p.price .price-counter {
  font-family: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--meat-deep);
  background: var(--pink-soft);
  border-radius: 4px;
  padding: 8px 14px;
  display: inline-block;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  font-size: 1.05rem;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-bottom: 22px;
}
.woocommerce div.product form.cart { margin: 24px 0; }
.woocommerce div.product form.cart .quantity { display: inline-block; margin-right: 10px; }
.woocommerce .quantity input.qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="number"],
.woocommerce input[type="password"],
.woocommerce textarea,
.woocommerce select {
  font-family: var(--text);
  font-size: 1rem;
  padding: 11px 12px;
  border: 1px solid rgba(34, 29, 26, 0.35);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
}
.woocommerce .quantity input.qty { width: 5em; text-align: center; }
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { margin-top: 44px; }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 18px;
  border-bottom: 1px dashed rgba(34, 29, 26, 0.3);
  margin-bottom: 18px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--meat); }

/* ---------- cart + checkout ---------- */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  background: #fdf7eb;
  border: 1px solid rgba(34, 29, 26, 0.25);
  border-radius: 6px;
  margin-bottom: 26px;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px dashed rgba(34, 29, 26, 0.2);
  font-size: 0.95rem;
}
.woocommerce table.shop_table th {
  font-family: var(--text);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.07em;
  color: var(--meat);
}
.woocommerce table.shop_table tr:last-child td { border-bottom: none; }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-checkout h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.4rem;
  margin: 26px 0 14px;
  color: var(--ink);
}
.woocommerce .cart-collaterals { margin-top: 30px; }
.woocommerce form .form-row { margin-bottom: 16px; }
.woocommerce form .form-row label { display: block; font-weight: 700; font-size: 0.9rem; margin-bottom: 5px; }
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select { width: 100%; }
.woocommerce #payment,
.woocommerce-checkout #payment {
  background: var(--pink-soft);
  border-radius: 6px;
  padding: 22px 24px;
  margin-top: 18px;
}
.woocommerce #payment ul.payment_methods { list-style: none; padding: 0; margin: 0 0 16px; }
.woocommerce #payment div.payment_box {
  background: #fff;
  border-radius: 4px;
  padding: 14px 16px;
  margin-top: 10px;
  font-size: 0.92rem;
}
.woocommerce-checkout .demo-note {
  background: var(--ink);
  color: var(--paper);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 0.95rem;
}

/* notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  border-radius: 6px;
  padding: 15px 18px;
  margin: 0 0 22px;
  font-size: 0.95rem;
  border: 1px solid rgba(164, 22, 35, 0.4);
  background: var(--pink-soft);
  color: var(--ink);
}
.woocommerce-error { border-color: rgba(140, 28, 19, 0.55); background: #f6ded9; }
.woocommerce-message a, .woocommerce-info a, .woocommerce-error a { color: var(--meat-deep); }

/* ---------- the pack builder (mu-plugin renders this) ---------- */
.fb-pack {
  background: #fdf7eb;
  border: 1px solid rgba(34, 29, 26, 0.25);
  border-radius: 6px;
  padding: 26px 24px 22px;
  margin: 8px 0 26px;
}
/* Pin the pack header on a phone. The list is 22 checkboxes in ONE column — about
   1,150px of scrolling — so without this the "N of 10 picked" counter and the
   submit button are both off-screen for most of the interaction, on the page this
   whole demo exists to show. role=status + aria-live announce it too, since the
   count is updated by JS and was otherwise silent to a screen reader. */
@media (max-width: 760px) {
  .fb-pack__head {
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--paper);
    padding: 10px 0 8px;
    margin-bottom: 0;
    box-shadow: 0 6px 10px -8px rgba(34, 29, 26, 0.5);
  }
}

.fb-pack__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 6px;
}
.fb-pack__head h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--meat-deep);
  margin: 0;
}
.fb-pack__counter {
  font-family: var(--display);
  font-size: 1.1rem;
  background: var(--meat);
  color: var(--paper);
  border-radius: 4px;
  padding: 5px 13px;
}
.fb-pack__counter.is-full { background: #2f6b34; }
.fb-pack__hint { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 18px; }
.fb-pack__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.fb-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid rgba(34, 29, 26, 0.22);
  border-radius: 5px;
  padding: 11px 13px;
  font-size: 0.93rem;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.14s ease, background 0.14s ease;
}
.fb-pick:hover { border-color: var(--meat); }
.fb-pick input { width: 18px; height: 18px; accent-color: var(--meat); cursor: pointer; flex: none; }
.fb-pick.is-checked { background: var(--pink-soft); border-color: var(--meat); }
.fb-pick.is-disabled { opacity: 0.45; cursor: not-allowed; }
.fb-pick.is-disabled input { cursor: not-allowed; }
.fb-pack__note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  border-top: 1px dashed rgba(34, 29, 26, 0.25);
  padding-top: 14px;
  margin: 0;
}
/* The phone number sits mid-sentence, so it cannot become a button without
   rewriting the copy. Measured 90x16px on a phone -- well under the 44x44 a thumb
   needs, on the one link a customer taps when they want to actually order.
   inline-block + padding grows the hit area; the matching negative margin keeps the
   line box exactly where it was, so nothing around it moves. */
.fb-pack__note a[href^="tel:"] {
  display: inline-block;
  padding: 14px 8px;
  margin: -14px -8px;
  font-weight: 700;
  color: var(--meat);
}
.fb-pack__error {
  background: #f6ded9;
  border: 1px solid rgba(140, 28, 19, 0.55);
  border-radius: 5px;
  padding: 12px 15px;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
/* selections listed in cart / checkout / order emails */
.fb-selections { margin: 6px 0 0; padding-left: 18px; font-size: 0.88rem; color: var(--ink-soft); }
.fb-selections li { margin-bottom: 2px; }

/* ---------- block-based cart & checkout (WooCommerce Blocks) ----------
   Woo ships block-powered Cart and Checkout pages by default; these do not pick up the
   classic .woocommerce button styles above, so they are branded explicitly here. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  background-color: var(--meat) !important;
  color: var(--paper) !important;
  font-family: var(--text);
  font-weight: 700;
  border: 2px solid var(--meat) !important;
  border-radius: 4px;
  padding: 14px 24px;
  transition: background-color 0.15s ease;
}
.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
  background-color: var(--meat-deep) !important;
  border-color: var(--meat-deep) !important;
  color: var(--paper) !important;
}
.wc-block-components-button__text { color: inherit !important; }

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout { color: var(--ink); }
.wc-block-components-product-name { font-weight: 700; color: var(--meat-deep) !important; text-decoration: none; }
.wc-block-components-product-details__name { font-weight: 700; color: var(--ink); }
.wc-block-components-product-details__value { color: var(--ink-soft); }
.wc-block-components-product-details {
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 6px;
}
.wc-block-components-totals-item__value,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--display);
  color: var(--ink);
}
.wc-block-cart-items__header { color: var(--meat); }
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar {
  background: #fdf7eb;
  border-radius: 6px;
}

/* Block form fields use a floating label that needs reserved space at the top of the input.
   The generic .woocommerce input padding above is too aggressive for them and made the label
   sit on top of the value — restore the block component's own padding. */
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-address-form input[type="text"] {
  padding: 1.5em 16px 0.5em !important;
  line-height: 1.375;
}
.wc-block-components-text-input label {
  color: var(--ink-soft);
}
.wc-block-components-text-input.is-active label {
  color: var(--meat-deep);
}

/* Placeholder product images: the approved design is deliberately image-free, so an empty
   grey WooCommerce placeholder is noise anywhere it appears (loop, blocks, cross-sells).
   Real photography lands at go-live. */
img[src*="woocommerce-placeholder"] { display: none !important; }
.wc-block-components-order-summary-item__image:has(img[src*="woocommerce-placeholder"]) { display: none; }
.wc-block-cart-item__image:has(img[src*="woocommerce-placeholder"]) { display: none; }
.woocommerce div.product div.images:has(img[src*="woocommerce-placeholder"]) { display: none; }
.single-product .woocommerce-product-gallery:has(img[src*="woocommerce-placeholder"]) { display: none; }

/* ---------- shop page: the whole counter, grouped by section ---------- */
.shop-intro h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); margin-bottom: 10px; }
.shop-intro .section-lede { margin-bottom: 18px; }
.shop-pills { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.shop-pills a {
  background: var(--paper-2);
  border: 1px solid rgba(34, 29, 26, 0.16);
  border-radius: 999px;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 7px 16px;
  text-decoration: none;
  color: var(--ink);
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.shop-pills a:hover { background: var(--meat); border-color: var(--meat); color: var(--paper); }
.shop-section { margin-top: 48px; scroll-margin-top: 24px; }
/* "Most popular" opens the counter, as it did on his old order page. It is the first thing
   under the pills, so it gets a smaller top gap than the sections that follow a grid, and a
   solid rule instead of the dashed one to mark it as a shortcut rather than a category. */
.shop-section--popular { margin-top: 28px; }
.shop-section--popular .shop-section__head { border-bottom-style: solid; border-bottom-color: var(--meat); }
.shop-section--popular .shop-section__head h2 { color: var(--meat); }
.shop-section__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  border-bottom: 1px dashed rgba(34, 29, 26, 0.3);
  padding-bottom: 12px;
}
.shop-section__head h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  color: var(--meat-deep);
}
.shop-section__lede { font-size: 0.92rem; color: var(--ink-soft); }
.shop-back { margin-top: 4px; }
.shop-back a { font-weight: 700; color: var(--meat); }
.term-description { color: var(--ink-soft); max-width: 60ch; }

/* ---------- single product: parcel panel + summary, notes below ---------- */
.single-product div.product {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 40px 56px;
  align-items: start;
}
.single-product div.product .summary { min-width: 0; }
.fb-parcel { position: sticky; top: 28px; display: flex; justify-content: center; }
.fb-parcel .paper-parcel { width: 100%; max-width: 430px; padding: 72px 32px; transform: rotate(-2deg); }
.fb-parcel .parcel-stamp { font-size: 1.5rem; }
.single-product div.product .cut-notes,
.single-product div.product .related.products { grid-column: 1 / -1; }
.cut-notes {
  border-top: 1px dashed rgba(34, 29, 26, 0.3);
  padding-top: 30px;
  margin-top: 8px;
}
.cut-notes h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  margin-bottom: 12px;
  color: var(--ink);
}
.cut-notes__body { max-width: 62ch; color: var(--ink-soft); }
.cut-notes__body p { margin-bottom: 12px; }
.related.products > h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.45rem;
  margin: 14px 0 0;
  color: var(--ink);
}
.fb-counter-call {
  background: var(--pink-soft);
  border-radius: 6px;
  padding: 20px 22px;
  margin: 18px 0 8px;
}
.fb-counter-call p { margin-bottom: 14px; font-size: 0.98rem; }
.fb-counter-facts { margin-top: 26px; }
.single-product .chips li { background: #fdf7eb; }

/* ---------- block cart: empty state in the house voice ---------- */
.wc-block-cart__empty-cart__title,
.wp-block-woocommerce-cart h2.wc-block-cart__empty-cart__title {
  font-family: var(--display);
  font-weight: 400;
  color: var(--ink);
}

/* ---------- front page: links added to the approved sections ---------- */
.board-col h3 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: 1px;
}
.board-col h3 a:hover { border-bottom-color: var(--meat); }
.board-cta { margin-top: 26px; }
.gourmet-link {
  display: inline-block;
  margin-top: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--meat-deep);
  text-decoration: none;
  border-bottom: 2px solid var(--meat-deep);
  padding-bottom: 2px;
}

@media (max-width: 860px) {
  .single-product div.product { display: block; }
  .fb-parcel { position: static; margin-bottom: 30px; }
  .fb-parcel .paper-parcel { max-width: 100%; padding: 44px 24px; }
}
@media (max-width: 560px) {
  .fb-pack__grid { grid-template-columns: 1fr; }
  .woocommerce table.shop_table th,
  .woocommerce table.shop_table td { padding: 11px 10px; font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pack:hover { transform: none; }
  .woocommerce ul.products li.product:hover { transform: none; }
  .woocommerce ul.products li.product:hover .price { animation: none; }
}

/* ---------- delivery, service fee and order minimums (2026-09-17) ----------
   Ported back from his old Square site, which took delivery inside 25 km and OPENED
   on it. Three surfaces: the front-page section, the one-line note at the top of
   /shop/, and the cart box. All three read their numbers from the same constants the
   checkout enforces, so none of them can drift into a promise the site will not keep. */

.delivery { padding: 52px 0; background: var(--paper-2); }
.delivery-inner { max-width: 720px; }
.delivery h2 { font-family: var(--display); font-size: 1.9rem; }
.delivery .section-lede { margin-bottom: 18px; }
.delivery-facts { list-style: none; display: grid; gap: 10px; }
.delivery-facts li {
  position: relative;
  padding-left: 22px;
  line-height: 1.5;
}
/* The tick is decoration on top of text that already reads correctly without it. */
.delivery-facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 9px;
  height: 9px;
  background: var(--meat);
  border-radius: 2px;
}
.delivery-cta { margin-top: 20px; }

/* the line above the shop grid */
/* No coloured bar down the left edge on either of these. The 1px border and the tint
   already separate them from the page, and a thick side rule is a device the rest of this
   site does not use -- the mockup's own signature is the scalloped awning in the header,
   and every card here is a plain hairline border over a tint. */
.fb-fulfil-note {
  margin: 0 0 22px;
  padding: 11px 15px;
  border: 1px solid rgba(34, 29, 26, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.93rem;
  line-height: 1.5;
}
.fb-fulfil-note a { color: var(--meat-deep); font-weight: 700; }

/* the cart box */
.fb-cart-min {
  margin: 0 0 24px;
  padding: 14px 16px;
  border: 1px solid rgba(34, 29, 26, 0.16);
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.55);
}
.fb-cart-min__line { font-weight: 700; }
.fb-cart-min__line:empty { display: none; }
.fb-cart-min__terms { margin-top: 5px; font-size: 0.88rem; color: var(--ink-soft); }
.fb-cart-min__terms a { color: var(--meat-deep); font-weight: 700; }
/* Short of the minimum is the one state worth marking; clearing it says so in words and
   gets no badge, because a green tick on every cart is noise. The tint and the border do
   the work -- deeper background, darker hairline, no side rule. */
.fb-cart-min[data-fb-short] {
  background: var(--pink-soft);
  border-color: rgba(126, 15, 26, 0.35);
}

/* the delivery page */
.fb-delivery h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 30px 0 10px;
}
.fb-delivery .lede { font-size: 1.05rem; line-height: 1.6; }
.fb-delivery p { margin-bottom: 12px; line-height: 1.6; }
.fb-delivery-steps { margin: 0 0 16px 20px; display: grid; gap: 7px; }
.fb-delivery-area { font-size: 0.95rem; }
.fb-delivery-area strong { color: var(--meat-deep); }
.fb-delivery-mins { list-style: none; display: grid; gap: 8px; margin-bottom: 12px; }
.fb-delivery-mins li {
  padding: 9px 13px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(34, 29, 26, 0.14);
  border-radius: 3px;
}