/* Fat Boy's — the counter look, beyond the front page.

   Loaded on EVERY page when fatboys_counter_home is on (functions.php), after mockup.css,
   woo.css and style.css. PRESENTATION ONLY: tokens, the masthead bar, the footer, the
   button language and the shop cards. No WooCommerce template, no markup and no layout
   rule is touched here, so add-to-cart, quantity, shipping and payment are exactly the
   classic theme's. Rollback: update_option('fatboys_counter_home', 0) — this file then
   never loads and header.php renders the classic brand row.

   The palette is counter.css's: the shop-floor paper for the ground, the board for the
   masthead and footer, the lamp for the call pill, salt in place of butcher pink. The
   brand crimson (--meat #a41623) is unchanged — it is the same value the masthead uses. */

:root{
  --paper:#efece4;        /* the counter's shop-floor paper (was butcher-paper #f5eee3) */
  --paper-2:#e4dfd3;
  --ink:#1c1916;
  --ink-soft:#56504a;
  --pink:#dfa39c;         /* Himalayan salt, in place of butcher pink */
  --pink-soft:#f0e3d9;
  --board:#16130f;
  --graphite:#262320;
  --chalk:#f4efe5;
  --chalk-soft:rgba(244,239,229,.68);
  --warm:#ffb75e;
  --warm-soft:#ffd9a3;
  --lamp:#ffb45c;
  --steel:linear-gradient(180deg,#9fa6ad,#6f767c 60%,#878e95);
  --gut:clamp(18px,4.4vw,64px);
}

/* ---------- the masthead bar, on every inner page ----------
   Same bar as the front page's .ct-bar-in: board ground, the lockup, tracked uppercase
   nav, the lamp call pill. The classic awning belongs to the butcher-paper look and
   is hidden with it. */
.site-head{background:var(--board);background-image:linear-gradient(180deg,#1c1917,#16130f);border-bottom:1px solid rgba(255,255,255,.13);color:var(--chalk)}
.site-head .head-row{max-width:1240px;margin:0 auto;padding:9px var(--gut);gap:clamp(12px,2.4vw,34px)}
.site-head .brand{color:var(--chalk);gap:0}
.site-head .brand-lockup{height:88px;width:auto;max-width:none;border-radius:0;filter:drop-shadow(0 3px 10px rgba(0,0,0,.65))}
.site-head .site-nav{gap:clamp(10px,1.6vw,24px)}
.site-head .site-nav a{font:700 12px/1 var(--text);letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,232,.8);border-bottom:0;padding-bottom:0;min-height:44px;text-decoration:none;text-decoration-thickness:1px;text-underline-offset:6px}
.site-head .site-nav a:hover,.site-head .site-nav a:focus-visible{color:#f4f1e8;text-decoration:underline;text-decoration-color:var(--lamp)}
.site-head .nav-cart .cart-count{background:var(--lamp);color:#1a1206;margin-left:4px}
.site-head .head-call{font:700 13px/1 var(--text);letter-spacing:.06em;text-transform:none;color:#1a1206;background:linear-gradient(180deg,#ffd08a,var(--lamp) 55%,#e59a34);border:0;border-radius:999px;padding:10px 18px;min-height:44px;box-shadow:0 6px 18px -8px rgba(255,180,92,.75);white-space:nowrap}
.site-head .head-call:hover,.site-head .head-call:focus-visible{background:linear-gradient(180deg,#ffe0ac,#ffc271 55%,#f0a53f);color:#1a1206;transform:none}
.site-head :focus-visible{outline:3px solid var(--lamp);outline-offset:3px}
.awning{display:none}
@media (max-width:640px){
  .site-head .brand-lockup{height:60px}}
@media (max-width:560px){
  .site-head .head-row{row-gap:9px}
  .site-head .site-nav{border-top:1px solid rgba(244,241,232,.10);padding-top:9px;gap:6px}
  .site-head .site-nav a{font-size:10.5px;letter-spacing:.07em}
  .site-head .head-call{padding:10px 15px;font-size:12px}}

/* ---------- the button language ----------
   counter.css's .fb-btn: tracked uppercase, heavy, a 3px corner. Padding is left to
   each rule so every control keeps its measured 44px+ height. */
.btn,
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,
.woocommerce a.button.alt,.woocommerce button.button.alt,
.wc-block-components-button,.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{
  text-transform:uppercase;letter-spacing:.08em;font-weight:900;font-size:.86rem;border-radius:3px}
.woocommerce a.button.added_to_cart{text-transform:none;letter-spacing:0;font-weight:700;font-size:.9rem}

/* ---------- the shop grid: the case ----------
   Each card is one of the front page's steel trays (.fb-tray): a 5px brushed frame
   round a dark plate, the name in chalk, the hanging price tag untouched. Layout,
   spacing and the add-to-cart control are the classic rules'. */
.woocommerce ul.products li.product{
  background:#1c1917;background-clip:padding-box;color:var(--chalk);
  border:5px solid transparent;border-image:var(--steel) 1;border-radius:0;
  box-shadow:0 20px 40px rgba(0,0,0,.22)}
.woocommerce ul.products li.product:hover{box-shadow:0 26px 44px rgba(0,0,0,.32)}
.woocommerce ul.products li.product .woocommerce-loop-product__title{color:var(--chalk)}
.woocommerce ul.products li.product .fb-card-excerpt{color:var(--chalk-soft)}
.woocommerce ul.products li.product .price-counter{color:var(--chalk-soft)}
.woocommerce ul.products li.product img{border-color:rgba(255,255,255,.12);border-radius:2px}
.woocommerce ul.products li.product.product-unpriced a.button{color:var(--chalk);border-color:rgba(244,239,229,.6)}
.woocommerce ul.products li.product.product-unpriced a.button:hover{background:var(--chalk);border-color:var(--chalk);color:var(--ink)}
.woocommerce ul.products li.product.product-unpriced .price{background:var(--pink);color:var(--ink)}

/* ---------- panels that carried a literal butcher-paper cream ---------- */
.woocommerce table.shop_table,
.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart .wc-block-components-sidebar-layout .wc-block-components-sidebar,
.single-product .chips li{background:#f7f4ed}

/* ---------- the footer: the board ---------- */
.site-foot{background:var(--board);color:var(--chalk-soft);border-top:3px solid var(--meat);padding:34px 0 26px}
.foot-nav{border-bottom-color:rgba(244,239,229,.16)}
.foot-nav a,.foot-nav--legal a,.foot-contact a,.foot-credit a{display:inline-flex;align-items:center;min-height:44px;color:var(--chalk-soft);text-decoration:none}
.foot-nav a:hover,.foot-nav a:focus-visible,.foot-contact a:hover,.foot-contact a:focus-visible,.foot-credit a:hover,.foot-credit a:focus-visible{color:var(--warm);text-decoration:underline}
.foot-contact{border-bottom-color:rgba(244,239,229,.16);align-items:center}
.foot-contact a{color:var(--warm-soft);font-family:var(--display);font-size:1.05rem}
.foot-sep{color:rgba(244,239,229,.45)}
.site-foot :focus-visible{outline:3px solid var(--lamp);outline-offset:3px}

/* ---------- Lane D 2026-09-20: consistency sweep fixes (measured live at 320/390/768/1024/1440;
   the before/after numbers are in reports/2026-09-20-lane-D.md). Every rule answers a measurement. ---------- */
/* 1. Masthead overflowed the viewport by 9px at 768 on all 14 inner pages (26px with a cart badge):
      brand 207 + nav 338 + call 161 + two 18px gaps + 68px padding = 810 in a nowrap row. */
@media (min-width:561px) and (max-width:840px){
  .site-head .head-row{gap:12px}
  .site-head .site-nav{gap:8px}
  .site-head .site-nav a{letter-spacing:.09em}
  .site-head .head-call{padding:10px 12px;font-size:12px;letter-spacing:.04em}}
/* 2. Nav links SHOP / CART / ABOUT / VISIT US measured 30-40px wide (44px floor). Below 560px the
      nav sits on its own row already; letting it wrap keeps 320px free of overflow. */
.site-head .site-nav a{min-width:44px;justify-content:center}
@media (max-width:560px){.site-head .site-nav{flex-wrap:wrap}}
/* 3. Footer links Shop / About / Terms measured 32-40px wide. */
.foot-nav a,.foot-nav--legal a{min-width:44px;justify-content:center}
/* 4. Woo block buttons on the empty cart ("You may be interested in") were 40px tall and sentence
      case; every other button on the site is 44px+ and uppercase. */
.wc-block-grid__products .wp-block-button__link{min-height:44px;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
/* 5. Product page: the quantity box was 43px; the plan-the-week nudge and Woo's "Clear" were 16px tall. */
.woocommerce div.product form.cart .quantity input.qty{min-height:44px}
.fb-facts__more a,.woocommerce div.product .reset_variations{display:inline-flex;align-items:center;min-height:44px}
/* 6. My account: Woo's remember-me label 29px, the show-password eye 22px, "Lost your password?" 19px. */
.woocommerce-form-login__rememberme{display:inline-flex;align-items:center;min-height:44px;gap:8px}
.woocommerce-form-login__rememberme input{width:20px;height:20px;margin:0}
.woocommerce form .show-password-input{width:44px;height:44px;top:50%;right:0;margin-top:-22px;display:flex;align-items:center;justify-content:center}
.woocommerce-LostPassword a{display:inline-flex;align-items:center;min-height:44px}
/* 7. Plan the week (meal-planner.css): the −/+ counters and the meal "+" were 38px, the filter chips 41px. */
html .fb-pl-count__btn,html .fb-pl-meal__add{min-width:44px;min-height:44px}
html .fb-pl-filter{min-height:44px}
/* 8. Cart and checkout blocks with a line in the cart: quantity −/+ 30x16 and its input 45x16, the
      remove control 24x24, the product-name link 18px, "Add coupons" and "+ Add apartment" 18px. */
.wc-block-components-quantity-selector{width:auto;min-height:44px}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{min-width:44px;min-height:44px}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input{min-width:44px;width:52px;min-height:44px;font-size:16px}
/* 9. Cart with a line at 320: the line-items table's min-content was 326px in a 280px column (80px image
      cell + 107px quantity selector + a nowrap price). Smaller thumbnail on phones, price may wrap. */
.wc-block-cart-items{width:100%;max-width:100%}
@media (max-width:480px){
  .wc-block-cart-items .wc-block-cart-item__image{width:56px;padding-right:8px}
  .wc-block-cart-items .wc-block-cart-item__image img{max-width:56px}
  .wc-block-cart-item__total .wc-block-formatted-money-amount{white-space:normal}}
.wc-block-cart-item__remove-link,.wc-block-components-product-name,.wc-block-components-address-form__address_2-toggle{display:inline-flex;align-items:center;min-height:44px}
.wc-block-components-panel__button{min-height:44px}
/* ---------- Lane D 2026-09-20, round 2 (re-measured live after the first deploy) ---------- */
/* 9b. Cart with a line at 320 still overflowed (381): .wc-block-cart-item__quantity is a nowrap flex row
      holding the now-44px selector (142) and the remove control, so the product cell's min-content was 194
      in a 280px column (64 image + 194 + 51 total). Let that row wrap on phones and use a 44px input:
      64 + 134 + 51 = 249. */
@media (max-width:480px){
  .wc-block-cart-item__quantity{flex-wrap:wrap}
  .wc-block-components-quantity-selector .wc-block-components-quantity-selector__input{width:44px}}
/* 10. Remove control measured 24px wide; Woo's "Clear" 35px wide; the Mix & Match add-to-cart button 39px
       tall ("Pick 10 more"); my-account text inputs 37px tall. */
.wc-block-cart-item__remove-link{min-width:44px;justify-content:center}
.woocommerce div.product .reset_variations{min-width:44px;justify-content:center}
.woocommerce div.product form.cart .single_add_to_cart_button{min-height:44px}
.woocommerce form .form-row .input-text{min-height:44px}
/* ---------- Lane D 2026-09-20, round 3 ---------- */
/* 9c. Cart with a line at 320 still measured 337: cells 56 + 150 + 51 plus Woo's cell padding in a 280px
      column, and every remaining item in the product cell already wraps. Below 360px the thumbnail column
      is dropped (the product name stays a 44px link to the product); at 361-480 the thumbnail link, which
      measured 40x40, becomes a 44px target. */
@media (max-width:360px){
  .wc-block-cart-items .wc-block-cart-item__image,.wc-block-cart-items .wc-block-cart-items__header-image{display:none}}
@media (min-width:361px) and (max-width:480px){
  .wc-block-cart-items .wc-block-cart-item__image a{display:block;width:44px;height:44px}
  .wc-block-cart-items .wc-block-cart-item__image img{width:44px;height:44px;max-width:44px;object-fit:cover}}

/* The skip link: out of the way until a keyboard finds it. */
.fb-skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--meat,#a41623);color:#fff;
  padding:12px 18px;border-radius:0 0 4px 0;font-weight:700;text-decoration:none}
.fb-skip:focus{left:0}