/* ===========================================================================
   10. THE COUNTER — WooCommerce BLOCK cart / checkout / account
   ---------------------------------------------------------------------------
   Cart and checkout are Woo BLOCK pages, so `wp-block-library` + `wc-blocks-style`
   survive the dequeue in functions.php (see §Assets). Those sheets lay the blocks
   out correctly but skin them in WooCommerce's stock look — system font, slate
   buttons, a giant emoji empty state, blue underlined links. The result was a
   different store on the two pages a buyer must cross to pay (audited 2026-08-17).

   This section is the SKIN ONLY: type, colour, rules and the card grammar from
   §4 applied to the block components. No layout is reimplemented — Woo's own
   grid still does that, so a WooCommerce update cannot break the geometry here.
   dp-pantry.css is enqueued last, so plain-specificity overrides win.
   ========================================================================= */

.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout,
.woocommerce-account .woocommerce{
  font-family:var(--body);
  color:var(--wrap-deep);
}
.wp-block-woocommerce-cart a,
.wp-block-woocommerce-checkout a{color:var(--wrap)}
.wp-block-woocommerce-cart a:hover,
.wp-block-woocommerce-checkout a:hover{color:var(--stamp)}

/* Headings speak in the signage face, like every other section head --------- */
.wp-block-woocommerce-cart .wp-block-heading,
.wp-block-woocommerce-checkout .wp-block-heading,
.wc-block-components-title,
.wc-block-cart__empty-cart__title{
  font-family:var(--display);font-weight:400;
  letter-spacing:.01em;text-transform:uppercase;
  color:var(--wrap);
}

/* --- Empty cart ----------------------------------------------------------
   Woo draws a 4rem sad-face emoji via `.with-empty-cart-icon::before`. It is
   the loudest thing on the page and belongs to no identity we own. Replaced
   with a plain shelf statement. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before{content:none}
.wp-block-woocommerce-empty-cart-block{
  max-width:var(--maxw);margin:0 auto;padding:8px 0 40px;
}
.wp-block-woocommerce-empty-cart-block .wp-block-heading.has-text-align-center,
.wc-block-cart__empty-cart__title{
  font-size:30px;text-align:left;margin:0 0 14px;
}
.wc-block-cart__empty-cart__title + .wp-block-separator{display:none}
.wp-block-woocommerce-empty-cart-block > .wp-block-separator.is-style-dots{display:none}
.wp-block-woocommerce-empty-cart-block .wp-block-heading:not(.wc-block-cart__empty-cart__title){
  display:none;  /* "New in store" — labelled the auto-grid this theme replaces */
}

/* --- Empty-cart panel ----------------------------------------------------
   Woo fills an empty cart with a "New in store" auto-grid. On this catalog that
   surfaced three identical $191.50 dog chews and a box of poop bags as the face
   of the store. The grid is removed and functions.php swaps in a real panel
   (see dp_pantry_empty_cart_panel) — restyling junk merchandising would only
   have made it look deliberate. */
.wp-block-woocommerce-empty-cart-block .wp-block-woocommerce-product-new,
.wp-block-woocommerce-empty-cart-block .wc-block-grid{display:none}

.dp-emptycart{
  background:var(--label);border:1px solid var(--rule);
  padding:26px 24px;max-width:640px;
}
.dp-emptycart p{color:var(--graphite);margin:0 0 18px;max-width:52ch}
.dp-emptycart .dp-emptycart-go{
  display:inline-block;background:var(--wrap);color:#fff;border:1px solid var(--wrap);
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding:12px 18px;text-decoration:none;
}
.dp-emptycart .dp-emptycart-go:hover{background:var(--wrap-deep);color:#fff}
.dp-emptycart-depts{
  list-style:none;margin:20px 0 0;padding:18px 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:8px 20px;
}
.dp-emptycart-depts a{
  font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--wrap);text-decoration:none;
}
.dp-emptycart-depts a:hover{color:var(--stamp);text-decoration:underline}

/* --- Buttons: one green, square, mono-labelled button everywhere ----------- */
.wp-block-woocommerce-cart .wp-block-button__link,
.wp-block-woocommerce-checkout .wp-block-button__link,
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{
  background:var(--wrap);color:#fff;border:1px solid var(--wrap);border-radius:0;
  font-family:var(--mono);font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;padding:12px 18px;line-height:1.2;
  transition:background .15s ease,border-color .15s ease;
}
.wp-block-woocommerce-cart .wp-block-button__link:hover,
.wp-block-woocommerce-checkout .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-components-button:not(.is-link):hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{
  background:var(--wrap-deep);border-color:var(--wrap-deep);color:#fff;
}
.wc-block-components-button.is-link{
  color:var(--wrap);text-decoration:underline;text-underline-offset:2px;
}

/* --- Line items, totals, summary ------------------------------------------ */
.wc-block-cart-items,
.wc-block-components-totals-wrapper{border-color:var(--rule)}
.wc-block-cart-items__header{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--graphite);border-bottom:2px solid var(--wrap);
}
.wc-block-cart-item__wrap .wc-block-components-product-name{
  font-family:var(--body);font-size:15px;font-weight:600;color:var(--wrap-deep);
  text-decoration:none;
}
.wc-block-components-product-metadata,
.wc-block-components-totals-item__label{color:var(--graphite)}
.wc-block-components-formatted-money-amount,
.wc-block-components-totals-item__value{
  font-variant-numeric:tabular-nums;color:var(--wrap-deep);
}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{
  font-size:22px;font-weight:700;
}
.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__sidebar .wc-block-components-panel{
  background:var(--label);border:1px solid var(--rule);
}

/* --- Inputs --------------------------------------------------------------- */
.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-select__container select,
.wc-block-components-textarea{
  border:1px solid var(--rule);border-radius:0;background:#fff;color:var(--wrap-deep);
}
.wc-block-components-text-input input:focus,
.wc-block-components-select__container select:focus{
  outline:3px solid var(--stamp);outline-offset:1px;border-color:var(--wrap);
}
.wc-block-components-checkout-step__title{
  font-family:var(--display);font-weight:400;text-transform:uppercase;
  color:var(--wrap);letter-spacing:.01em;
}

/* --- Notices -------------------------------------------------------------- */
.wc-block-components-notice-banner{border-radius:0;border-left-width:4px}
.wc-block-components-notice-banner.is-error{border-color:var(--stamp)}
.wc-block-components-notice-banner.is-success{border-color:var(--tally)}

/* ===========================================================================
   11. EXPRESS PAYMENT — keeping a vendor's brand colours in their lane
   ---------------------------------------------------------------------------
   PayPal's smart buttons render three full-width vendor-branded bars (yellow
   PayPal, blue Venmo, yellow Pay Later) directly under the buy form. At full
   column width they out-shout every other element on the product page and drag
   two foreign brand palettes across a green identity (audited 2026-08-17).

   They are NOT hidden — they convert, and PayPal is the only gateway live. They
   are capped to the width of the buy form, pushed below our own Add to cart,
   and introduced by a mono label so they read as one option among ours rather
   than as the page's main event.
   ========================================================================= */
#ppc-button-ppcp-gateway,
.ppcp-messages{max-width:360px}
#ppc-button-ppcp-gateway{margin:14px 0 0}
#ppc-button-ppcp-gateway:not(:empty)::before{
  content:"or pay directly";display:block;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--graphite);
  padding-bottom:8px;margin-bottom:10px;border-top:1px solid var(--rule);padding-top:14px;
}
.ppcp-messages{margin:10px 0 0;font-size:12px}

/* Express block inside the block cart/checkout gets the same cap ------------ */
.wp-block-woocommerce-cart-express-payment-block,
.wc-block-components-express-payment{max-width:420px}

@media (max-width:600px){
  #ppc-button-ppcp-gateway,.ppcp-messages{max-width:none}
  .wc-block-cart__empty-cart__title{font-size:24px}
}

@media print{
  .dp-mast,.dp-bins,.dp-foot,.dp-pager,.woocommerce-store-notice{display:none}
  body{background:#fff}
}

/* ===========================================================================
   §11 — HERO: Whatnot + Shop Beauty (added 2026-09-03, redesign)
   Two-panel split, same case-label/mono-manifest vocabulary as the rest of the
   theme (dp-eyebrow, --wrap, --stamp, --shelf) — no new palette, no new type.
   ========================================================================= */
.dp-hero{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
  margin:22px 0 34px;
}
.dp-hero-panel{
  border:1px solid var(--rule);background:var(--label);
  padding:26px 24px;display:flex;flex-direction:column;gap:10px;
}
.dp-hero-panel--whatnot{
  background:var(--wrap);color:var(--shelf);border-color:var(--wrap);
}
.dp-hero-panel--whatnot .dp-eyebrow{color:var(--mast-dim)}
.dp-hero-panel--whatnot h3{
  font-family:var(--display);font-size:26px;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.15;margin:0;color:var(--shelf);
}
.dp-hero-panel--whatnot p{color:var(--mast-text);margin:0}
.dp-hero-panel--shop h3{
  font-family:var(--display);font-size:26px;text-transform:uppercase;
  letter-spacing:.01em;line-height:1.15;margin:0;color:var(--wrap-deep);
}
.dp-hero-panel--shop p{color:var(--graphite);margin:0}

.dp-whatnot-cta,.dp-shopcta{
  display:inline-block;margin-top:6px;padding:11px 18px;
  font-family:var(--mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;border:2px solid currentColor;width:fit-content;
}
.dp-whatnot-cta{color:var(--shelf)}
.dp-whatnot-cta:hover,.dp-whatnot-cta:focus-visible{background:var(--amber);border-color:var(--amber);color:var(--wrap-deep)}
.dp-shopcta{color:var(--wrap)}
.dp-shopcta:hover,.dp-shopcta:focus-visible{background:var(--wrap);border-color:var(--wrap);color:var(--shelf)}

.dp-whatnot-title{font-weight:600}
.dp-whatnot-last{font-size:13px;color:var(--mast-dim)!important}
.dp-whatnot-note{font-size:13px;max-width:56ch}

.dp-whatnot--compact h3{font-size:22px}

.dp-whatnot-page .dp-whatnot-page-block{margin:20px 0 30px;max-width:640px}
.dp-whatnot-page .dp-whatnot-page-block h3{font-size:30px}

@media (max-width:760px){
  .dp-hero{grid-template-columns:1fr}
}