/* ncllc-storefront — cart and checkout styles (loaded on those two pages only). The storefront theme
   is light-only; these follow it. */

/* ── The tip box (card https://trello.com/c/3N2ZaQKw) ───────────────────────────────────────────
   Plugin: Order Tip & Donations for WooCommerce (#pisol-otw-tips). Its LOOK — grey tiles, blue when
   chosen, 60/64 px tall — is the store's own, set in Appearance → Customize → Additional CSS
   ("WooCommerce Blocks Checkout - Tip/Gratuity styling + layout"), and is kept. That CSS lays the six
   % tiles out in a grid on the plugin's INNER container and gives every tile `width: 100% !important`
   — but the plugin renders "Custom" OUTSIDE that container, so Custom stretched across a whole row.
   Here the grid moves to the OUTER container and the inner one is flattened, so all seven tiles share
   one grid: one row on wide screens, 4 + 3 on phones, Custom the same size as the rest. Each selector
   is one step more specific than the Additional CSS rule it corrects (both are !important). */
body #pisol-otw-tips .pisol-otw-content > .pisol-otw-values {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
  gap: 14px !important;
  align-items: stretch !important;
}
body #pisol-otw-tips .pisol-otw-values .pisol-otw-values { display: contents !important; }
@media (max-width: 782px) {
  body #pisol-otw-tips .pisol-otw-content > .pisol-otw-values {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  /* "Custom" must fit a quarter of a 320–390 px screen: the store's 20 px, scaled down on small phones. */
  body #pisol-otw-tips .pisol-otw-value { font-size: clamp(15px, 4.2vw, 20px) !important; }
}
/* The plugin's icon-left layout keeps a 20 px gap for an icon this store does not show: the tip box
   then sat indented from every other checkout section. */
body #pisol-otw-tips .pisol-otw-tip { gap: 0 !important; }
/* …and its content is a flex item sized to what is in it: make it the full width, so the grid is too. */
body #pisol-otw-tips .pisol-otw-content { flex: 1 1 auto !important; width: 100% !important; min-width: 0 !important; }

/* ── "How would you like to get your order?" (card https://trello.com/c/ql56Nesk) ───────────────
   fulfilment.js. While it is on the page (body.ncllc-ff-active) WooCommerce's own rate list and the
   "Shipping options" heading step aside — ONLY the list: the pickup / courier time and USPS ship-date
   pickers render in the same container and stay. Until a choice is made (body.ncllc-ff-pending) the
   whole step waits; once chosen, the pickers follow the choice — even before its rate exists (Courier
   Delivery, no address yet). Without the script neither class is ever set. */
body.ncllc-ff-active.ncllc-ff-pending .wp-block-woocommerce-checkout-shipping-methods-block { display: none; }
body.ncllc-ff-active .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-checkout-step__heading-container,
body.ncllc-ff-active .wp-block-woocommerce-checkout-shipping-methods-block .wc-block-components-shipping-rates-control__package { display: none; }

.ncllc-ff-host { margin: 0 0 24px; }
.ncllc-ff { margin: 0; padding: 0; border: 0; min-width: 0; }
.ncllc-ff__legend { padding: 0; margin: 0 0 12px; font-size: 21px; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
.ncllc-ff__cards { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 700px) { .ncllc-ff__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ncllc-ff__card {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; min-height: 64px; padding: 14px 14px; box-sizing: border-box;
  border: 1px solid #8a8a8a; border-radius: 10px; background: #ffffff; color: #1d1d1f;
  font: inherit; text-align: left; cursor: pointer;
}
.ncllc-ff__card:hover { border-color: #1d1d1f; }
.ncllc-ff__card:focus-visible { outline: 3px solid #1d1d1f; outline-offset: 2px; }
.ncllc-ff__card.is-on { border: 2px solid #c2493f; padding: 13px; background: #fdf3f2; }
.ncllc-ff__card.is-off { cursor: not-allowed; background: #f4f4f4; color: #5a5a5a; border-style: dashed; }
.ncllc-ff__dot { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; border: 2px solid #5a5a5a; border-radius: 50%; box-sizing: border-box; }
.ncllc-ff__card.is-on .ncllc-ff__dot { border: 6px solid #c2493f; }
.ncllc-ff__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ncllc-ff__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 17px; font-weight: 700; line-height: 1.25; }
.ncllc-ff__usual { padding: 2px 8px; border-radius: 10px; background: #1d1d1f; color: #ffffff; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }
.ncllc-ff__sub { font-size: 14px; line-height: 1.3; color: #444444; }
.ncllc-ff__card.is-off .ncllc-ff__sub { color: #5a5a5a; }
.ncllc-ff__line { font-size: 14px; line-height: 1.3; color: #5a5a5a; }
.ncllc-ff__line.is-price { font-size: 16px; font-weight: 700; color: #1d1d1f; }
/* p.… : the theme styles paragraphs more specifically than a single class. */
.ncllc-ff p.ncllc-ff__note { margin: 12px 0 0; font-size: 15px; line-height: 1.4; color: #1d1d1f; }
.ncllc-ff p.ncllc-ff__error { margin: 10px 0 0; font-size: 15px; line-height: 1.4; color: #b3261e; }
.ncllc-ff.has-error .ncllc-ff__card:not(.is-off) { border-color: #b3261e; }

/* ── Which address the checkout asks for (addresses.js; operator request 2026-10-20) ─────────────── */
/* WooCommerce's own "Use same address for billing" steps aside ONLY while the script runs (it sets the
   class and drives the box): without it, the stock checkout. */
body.ncllc-addr .wc-block-checkout__use-address-for-billing { display: none; }
/* "Your name": a pickup paid with Zelle / CashApp / Venmo needs no address — first and last name only. */
body.ncllc-addr--name .wp-block-woocommerce-checkout-shipping-address-block .wc-block-components-address-form > :not(.wc-block-components-address-form__first_name):not(.wc-block-components-address-form__last_name) { display: none; }
/* "Use same address for shipping": the checkout's own checkbox look, a real tap target. */
.ncllc-addr-same { margin: 4px 0 24px; }
.ncllc-addr-same label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: #1d1d1f; cursor: pointer; }
.ncllc-addr-same input { width: 20px; height: 20px; margin: 0; accent-color: #c2493f; flex: 0 0 auto; }
/* p.… : the theme styles paragraphs more specifically than a single class. */
p.ncllc-addr-error { margin: -8px 0 20px; font-size: 15px; line-height: 1.4; color: #b3261e; }

/* ── One order summary on phones and tablets (operator request 2026-10-20) ─────────────────────── */
/* Below desktop width WooCommerce draws the summary TWICE: its sidebar, stacked above the form, and a
   copy by Place Order. Only the copy holds "Have a coupon or gift card?" — so the sidebar steps aside,
   and ONLY while that copy is on the page (:has): if WooCommerce ever stops drawing it, the top one
   stays. Desktop has no copy, so its sidebar is untouched. */
.wc-block-checkout:has(.checkout-order-summary-block-fill-wrapper) .wc-block-checkout__sidebar { display: none; }

/* ── The cart on phones and tablets: nothing wider than the screen (operator, iPhone 2026-10-20) ───── */
/* WooCommerce lays each cart row out as a grid of `80px 132px`, spans the product across columns 2–4
   and pins the line total to row 1 WITHOUT a column — so the total lands in an implicit 4th column and,
   with the product's details needing ~230 px, every row ran past the screen (iOS zoomed the page out:
   white space on the right and under the footer). Three explicit columns: photo, product (shrinks),
   total. */
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row { grid-template-columns: 80px minmax(0, 1fr) auto; }
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__product { grid-column: 2 / 3; min-width: 0; }
.wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-cart.is-small table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total,
.wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__total { grid-column: 3 / 4; grid-row: 1; padding-left: 8px; }
/* The quantity box took the number field's built-in width (~132 px → a 194 px box): it now sizes from
   its buttons, at WooCommerce's own 107 px minimum. */
.wc-block-cart .wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input { flex-basis: 0; width: 0; }
/* "You may be interested in…": under 480 px WooCommerce makes each suggestion 100% wide but keeps its 5%
   right padding OUTSIDE that (content-box) — past the screen. Its rule has three classes; this has four.
   (Wider, its 30% + 5% three-across layout is left as it is.) */
@media (max-width: 480px) {
  .wp-block-woocommerce-cart .wc-block-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product { box-sizing: border-box; }
}

/* ── The checkout's section headings: one look, bold and dark (operator 2026-10-21: "more prominent,
   maybe bold") — "How would you like to get your order?", each WooCommerce step (Contact information,
   Billing address, Payment options …), "Tip / Gratuity" and "Order summary". The theme pins their weight
   and colour with !important, so they sit in a layer (a layered !important outranks an unlayered one). */
@layer ncllc-sf-checkout {
  body .ncllc-ff .ncllc-ff__legend,
  body .wc-block-checkout .wc-block-components-checkout-step__title,
  body .wc-block-checkout .wc-block-components-checkout-order-summary__title-text,
  body #pisol-otw-tips .pisol-otw-name {
    font-size: 20px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: 0.02em !important;
    text-transform: uppercase !important; color: #1d1d1f !important;
  }
}