/* ===========================================================
   PINEAPPLE — WOOCOMMERCE

   Loaded only on WooCommerce pages (shop, product, cart,
   checkout).

   The product grid, the product card and the category card are
   NOT here — they live in components/product-card.css, keyed on
   .pa-grid and .pa-product-card, because a curated homepage rail
   and the static review page render the same components without
   WooCommerce being involved at all.

   What remains here is what is genuinely WooCommerce's own
   furniture: buttons, forms, notices, pagination.
   =========================================================== */

/* --- neutralise WooCommerce's own grid ----------------------
   WooCommerce ships float-based columns. The Pineapple grid is
   CSS grid and must be the only thing deciding layout. */

.woocommerce ul.products {
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
}

.woocommerce ul.products li.product {
  width: auto;
  margin: 0;
  float: none;
  clear: none;
}

/* Archive/category titles sit immediately above the first product grid. Keep
   the title visually grouped as a heading, then give the products their own
   breathing room using the same section step used elsewhere in the catalogue. */
.woocommerce-products-header__title.page-title {
  margin-block-end: var(--pa-space-6);
}

/* WooCommerce's default sale flash is replaced by .pa-flag on the card.
   Hidden rather than removed, so a plugin that re-adds it cannot
   reintroduce a second, differently-styled badge. */
.woocommerce span.onsale {
  display: none;
}

/* --- buttons ---------------------------------------------------
   TWO LEVELS, matching the reference build exactly
   (review/store/store.css) — see that file's own comment for the
   full reasoning. In short: every WooCommerce button on this site is
   SECONDARY (butter, a warm tint) unless it is explicitly promoted to
   PRIMARY below, because a catalogue, cart or account page full of
   saturated commerce bars reads as a wall of buttons, and there must
   be exactly one Primary — the actual commit — per screen.

   Rest is butter with a charcoal border and a charcoal label; hover
   and press are both mint, separated by the lift and the drop. Same
   states as Primary, one step cooler — see base.css for the model. */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-3) var(--pa-space-6);
  border: var(--pa-space-1) solid var(--pa-charcoal);
  border-radius: var(--pa-radius);
  background: var(--pa-btn-secondary-bg);
  color: var(--pa-btn-label);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  text-decoration: none;
  transition: transform 90ms ease-out, background-color 90ms ease-out,
              border-color 90ms ease-out, color 90ms ease-out;
}

@media (hover: hover) {
  .woocommerce a.button:not(:disabled):hover,
  .woocommerce button.button:not(:disabled):hover,
  .woocommerce input.button:not(:disabled):hover {
    background: var(--pa-btn-active-bg);
    color: var(--pa-btn-label);
    transform: translateY(-1px);
  }
}

.woocommerce a.button:not(:disabled):active,
.woocommerce button.button:not(:disabled):active,
.woocommerce input.button:not(:disabled):active {
  background: var(--pa-btn-active-bg);
  color: var(--pa-btn-label);
  transform: translateY(1px) scale(0.985);
}

/* Card actions always follow the locked secondary product-card button rule:
   Mint at rest, Butter on hover and press, Charcoal text. */
.woocommerce ul.products li.product .pa-product-card__action a,
.woocommerce ul.products li.product .pa-product-card__action a.button,
.woocommerce ul.products li.product .pa-product-card__action button,
.woocommerce ul.products li.product .pa-product-card__action button.button,
.woocommerce .pa-product-card__action a,
.woocommerce .pa-product-card__action button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: var(--pa-tap-min) !important;
  padding: var(--pa-space-2) var(--pa-space-3) !important;
  border: var(--pa-space-1) solid var(--pa-charcoal) !important;
  border-radius: var(--pa-radius) !important;
  background: var(--pa-mint) !important;
  color: var(--pa-charcoal) !important;
  font-family: var(--pa-font-body) !important;
  font-size: var(--pa-text-sm) !important;
  font-weight: var(--pa-weight-semibold) !important;
  line-height: var(--pa-leading-tight) !important;
  text-align: center !important;
  text-decoration: none !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

@media (hover: hover) {
  .woocommerce ul.products li.product .pa-product-card__action a:hover,
  .woocommerce ul.products li.product .pa-product-card__action a.button:hover,
  .woocommerce ul.products li.product .pa-product-card__action button:hover,
  .woocommerce ul.products li.product .pa-product-card__action button.button:hover,
  .woocommerce .pa-product-card__action a:hover,
  .woocommerce .pa-product-card__action button:hover {
    background: var(--pa-butter) !important;
    color: var(--pa-charcoal) !important;
    border-color: var(--pa-charcoal) !important;
  }
}

.woocommerce ul.products li.product .pa-product-card__action a:active,
.woocommerce ul.products li.product .pa-product-card__action a.button:active,
.woocommerce ul.products li.product .pa-product-card__action button:active,
.woocommerce ul.products li.product .pa-product-card__action button.button:active,
.woocommerce .pa-product-card__action a:active,
.woocommerce .pa-product-card__action button:active {
  background: var(--pa-butter) !important;
  color: var(--pa-charcoal) !important;
  border-color: var(--pa-charcoal) !important;
}

/* PRIMARY — the one commit action per screen. Checkout's "Proceed to
   checkout" and "Place order" are promoted here; everything else
   above stays Secondary. Hover raises it into the light, press puts
   it back down — the shared model, see base.css. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button.alt,
.woocommerce #place_order,
.woocommerce button#place_order,
.woocommerce-checkout #place_order,
.woocommerce-checkout button#place_order {
  width: 100%;
  min-height: calc(var(--pa-tap-min) + var(--pa-space-2) + var(--pa-space-1));
  border-color: var(--pa-btn-primary-bg);  /* the base rule's charcoal
                                              border would otherwise ring
                                              the one saturated control on
                                              the page in the outline
                                              colour every OTHER button
                                              uses */
  background: var(--pa-btn-primary-bg);    /* 4.96:1 */
  color: var(--pa-btn-label);
  font-weight: var(--pa-weight-bold);
  transition: transform 90ms ease-out, background-color 90ms ease-out,
              border-color 90ms ease-out, color 90ms ease-out;
}

@media (hover: hover) {
  .woocommerce .wc-proceed-to-checkout a.checkout-button:not(:disabled):hover,
  .woocommerce #place_order:not(:disabled):hover,
  .woocommerce button#place_order:not(:disabled):hover,
  .woocommerce-checkout #place_order:not(:disabled):hover,
  .woocommerce-checkout button#place_order:not(:disabled):hover {
    background: var(--pa-btn-active-bg);
    border-color: var(--pa-charcoal);
    color: var(--pa-btn-label);
    transform: translateY(-1px);
  }
}

.woocommerce .wc-proceed-to-checkout a.checkout-button:not(:disabled):active,
.woocommerce #place_order:not(:disabled):active,
.woocommerce button#place_order:not(:disabled):active,
.woocommerce-checkout #place_order:not(:disabled):active,
.woocommerce-checkout button#place_order:not(:disabled):active {
  background: var(--pa-btn-active-bg);
  border-color: var(--pa-charcoal);
  color: var(--pa-btn-label);
  transform: translateY(1px) scale(0.985);
}

/* Disabled — Update cart before a quantity changes, Apply coupon
   before a code is typed. One treatment for every inert control in
   the storefront now: a hairline instead of the confident edge and a
   stone label, never a fill. Nothing that cannot be pressed is
   allowed to be the most colourful thing on its screen. Stone on the
   card surface is 7.06:1, so it stays legible rather than becoming
   the washed-out grey the brand context warns against. */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
  background: var(--pa-card-bg);
  border: var(--pa-border);
  color: var(--pa-text-muted);        /* 6.34:1 on paper */
  opacity: 1;
  cursor: not-allowed;
}

.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
.woocommerce #place_order:focus-visible,
.woocommerce button#place_order:focus-visible,
.woocommerce-checkout #place_order:focus-visible,
.woocommerce-checkout button#place_order:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

/* --- single product price ------------------------------------ */

/* Large, charcoal, Bengali numerals. Same rule as the card: the block
   grows to fit the price, the price never shrinks to fit the block. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin: 0 0 var(--pa-space-4);
  color: var(--pa-price);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-xl);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
}

.woocommerce div.product p.price ins {
  order: 1;
  text-decoration: none;
  color: var(--pa-price);
}

.woocommerce div.product p.price del {
  order: 2;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-regular);
  color: var(--pa-text-muted);
  text-decoration: line-through;
}

/* --- forms ---------------------------------------------------- */

/* 16px minimum on inputs is also what stops iOS zooming the viewport on
   focus, which on a checkout form reads as the page breaking.

   The boundary is stone, not the hairline it was. Measured on the live
   checkout, `--pa-border` resolved to `rgba(49,47,44,0.14)` over the
   white field — 1.30:1, against the 3:1 a control boundary has to hold.
   These are the four things she fills in before a courier comes to her
   door with cash, read on a phone, outdoors, by someone whose eyes are
   past 45: the edge of the box has to be visible before she can aim at
   it. Stone is 7.06:1 and is the same border the size controls, the
   search field and the cart's size select already carry, so every
   control in the store now draws its edge the same way. Stone is an
   existing token and no new value is introduced.

   `textarea.input-text` is listed because the order-note textarea
   carries WooCommerce's `.input-text` class, and core's own
   `.woocommerce form .form-row .input-text` reads (0,3,1) against the
   (0,2,2) of an element-only `textarea` selector — so core was winning
   there while the theme won on the inputs beside it, and the note ended
   up drawn in a browser default reddish-brown that is not in this
   palette at all. Naming the class puts the textarea on the same
   (0,3,2) footing as the inputs and the four controls finally match. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row textarea.input-text,
.woocommerce form .form-row select,
.woocommerce .quantity input.qty {
  width: 100%;
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-3);
  border: var(--pa-border);
  border-color: var(--pa-stone);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  transition: border-color 90ms ease-out;
}

/* Rest is the quiet edge; the border darkens while she is pointing at
   the field and while she is typing in it, and focus adds the same
   charcoal ring every other control in this theme uses — so keyboard
   focus is unmistakably stronger than rest rather than a shade of it.
   Disabled drops back to the hairline deliberately: a control she
   cannot use should recede, and it is the one state a contrast floor
   does not apply to. */
@media (hover: hover) {
  .woocommerce form .form-row input.input-text:not(:disabled):hover,
  .woocommerce form .form-row textarea:not(:disabled):hover,
  .woocommerce form .form-row select:not(:disabled):hover,
  .woocommerce .quantity input.qty:not(:disabled):hover {
    border-color: var(--pa-charcoal);
  }
}

.woocommerce form .form-row input.input-text:not(:disabled):focus,
.woocommerce form .form-row textarea:not(:disabled):focus,
.woocommerce form .form-row select:not(:disabled):focus,
.woocommerce .quantity input.qty:not(:disabled):focus {
  border-color: var(--pa-charcoal);
}

.woocommerce form .form-row input.input-text:focus-visible,
.woocommerce form .form-row textarea:focus-visible,
.woocommerce form .form-row select:focus-visible,
.woocommerce .quantity input.qty:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

.woocommerce form .form-row input.input-text:disabled,
.woocommerce form .form-row textarea:disabled,
.woocommerce form .form-row select:disabled,
.woocommerce .quantity input.qty:disabled {
  border: var(--pa-border);
  color: var(--pa-text-muted);
  cursor: not-allowed;
}

.woocommerce form .form-row label {
  display: block;
  margin-block-end: var(--pa-space-1);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-medium);
}

/* --- notices --------------------------------------------------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  margin-block-end: var(--pa-space-4);
  padding: var(--pa-space-4);
  border-block-start: var(--pa-space-1) solid var(--pa-orange);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
  color: var(--pa-text);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  list-style: none;
}

/* WooCommerce's own icon font positions a checkmark glyph assuming the
   3.5em left padding its un-restyled notice reserves for it. This notice
   keeps the same padding on every side instead, so the icon rendered
   straight over the product name. The brand context asks for no icons here
   anyway (§9) — the text alone already says what happened. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  display: none;
}

/* Add-to-cart confirmation is the cart drawer opening, not this banner —
   assets/js/cart-drawer.js opens the drawer itself as soon as it sees this
   exact notice on page load, then this rule keeps the banner from also
   showing underneath it. Matched on the "View cart" / "wc-forward" link
   WooCommerce only ever adds to the add-to-cart success message, so a
   genuinely different notice (an error, a coupon message elsewhere) is
   never caught by this. */
.woocommerce-message:has(a.wc-forward) {
  display: none;
}

/* --- pagination ------------------------------------------------ */

.woocommerce nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
  margin-block-start: var(--pa-space-8);
  padding: 0;
  border: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-2);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  font-size: var(--pa-text-base);
  text-decoration: none;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--pa-charcoal);
  color: var(--pa-text-invert);
  border-color: var(--pa-charcoal);
}

/* --- cash on delivery notice ----------------------------------- */

/* Charcoal on butter — 10.26:1. Stated on the product page, not only at
   checkout: on cash on delivery she is deciding whether to open the door
   to a courier, and she decides that before she taps buy. */
.pa-cod-notice {
  margin-block: var(--pa-space-4);
  padding: var(--pa-space-3) var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-butter);
  color: var(--pa-charcoal);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
}

/* --- Bengali numeral floor for WooCommerce's own blocks -------
   The block cart and block checkout are WooCommerce's React
   surfaces. They are NOT styled by Pineapple yet — that is the
   cart and checkout phase — but they already render real Bengali
   prices, quantities and totals, and their defaults sit below
   this brand's legibility floor. The quantity input ships at
   13px.

   This is a floor, not a design. It stops the current build
   showing a customer numerals she cannot read, and it will be
   replaced wholesale when those surfaces are built properly.

   Nothing here sets letter-spacing. Bengali is never tracked:
   the matras and the reph sit tight to their consonant and
   spacing them apart breaks the conjunct. */

.wc-block-components-quantity-selector__input,
.wc-block-components-product-price,
.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price,
.wc-block-formatted-money-amount,
.woocommerce-Price-amount {
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  letter-spacing: normal;
}

/* Quantities and totals are numbers she checks against what she
   expects to pay. Weight 500 minimum, 600 where it is a total. */
.wc-block-components-quantity-selector__input,
.wc-block-components-product-price {
  font-weight: var(--pa-weight-medium);
}

.wc-block-components-totals-item__value,
.wc-block-components-order-summary-item__total-price {
  font-weight: var(--pa-weight-semibold);
}

/* The order total is the number the whole page exists to state. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
}

/* --- checkout payment grouping -------------------------------- */

.pa-payment-groups {
	margin-block-end: var(--pa-space-4);
}

.pa-payment-groups fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.pa-payment-groups legend {
	margin-block-end: var(--pa-space-2);
	font-family: var(--pa-font-heading);
	font-size: var(--pa-text-lg);
	font-weight: var(--pa-weight-semibold);
}

.pa-payment-group,
.pa-payment-provider {
	display: flex;
	align-items: center;
	gap: var(--pa-space-3);
	min-height: var(--pa-tap-min);
	padding: var(--pa-space-3);
	border-block-end: var(--pa-border);
	background: var(--pa-card-bg);
	cursor: pointer;
}

.pa-payment-group[hidden],
.pa-payment-providers[hidden],
.pa-payment-group--mobile[hidden] {
	display: none !important;
}

.pa-payment-group:last-of-type,
.pa-payment-group:only-of-type,
.pa-payment-group:has(+ [hidden]) {
	border-block-end: 0;
}

.pa-payment-group input,
.pa-payment-provider input {
	flex: 0 0 auto;
	width: var(--pa-space-6);
	height: var(--pa-space-6);
	accent-color: var(--pa-charcoal);
}

.pa-payment-group strong,
.pa-payment-group small {
	display: block;
}

.pa-payment-group strong,
.pa-payment-provider span {
	font-size: var(--pa-text-base);
	font-weight: var(--pa-weight-semibold);
}

.pa-payment-group small {
	color: var(--pa-text-muted);
	font-size: var(--pa-text-sm);
	font-weight: var(--pa-weight-regular);
}

.pa-payment-providers {
	margin-inline-start: var(--pa-space-6);
	border-inline-start: var(--pa-border);
}

/* Disabled is quiet, not coloured — the same rule the buttons follow.
   A mint fill made the one payment method she CANNOT use the most
   saturated block on the checkout, directly above the method she can.
   The label already says why it is unavailable. */
.pa-payment-group:has(input:disabled),
.pa-payment-provider:has(input:disabled) {
	color: var(--pa-text-muted);
	cursor: not-allowed;
}

.pa-payment-providers__notice {
	padding: var(--pa-space-3);
	background: var(--pa-butter);
	color: var(--pa-charcoal);
	font-size: var(--pa-text-sm);
}

/* Custom controls are now the labelled, keyboard-reachable inputs. The native
   gateway radios remain in the form and continue to own WooCommerce state and
   provider fields; only their duplicate label row is visually suppressed. */
.wc_payment_methods.pa-payment-methods--managed {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wc_payment_methods.pa-payment-methods--managed > li > input.input-radio,
.wc_payment_methods.pa-payment-methods--managed > li > label {
	display: none;
}

.wc_payment_methods.pa-payment-methods--managed .payment_box {
	margin-block: var(--pa-space-3);
	padding: var(--pa-space-3);
	background: var(--pa-card-bg);
	color: var(--pa-text);
	font-size: var(--pa-text-base);
}

/* The custom COD row already states the method and its handover terms. */
.wc_payment_methods.pa-payment-methods--managed .payment_box {
  display: none !important;
}
/* WooCommerce's own button classes are styled once, above, in the
   "buttons" block near the top of this file. A second, near-identical
   block used to live here specifically to out-order WooCommerce's own
   woocommerce.css/woocommerce-layout.css/woocommerce-smallscreen.css,
   which load after the theme by default and were winning the purple
   #place_order fight on specificity ties.

   That is no longer necessary: Pineapple_Assets::order_after_woocommerce()
   now declares this stylesheet a dependent of WooCommerce's own, so it
   is guaranteed to load AFTER them — see class-pineapple-assets.php. The
   single block above wins on order now, not on being repeated. Keeping
   two definitions of the same button in one file was exactly the kind
   of duplication that made "one coherent button system" hard to see at
   a glance; this comment is what is left after removing it. */

/* --- shipping methods choice cards ---------------------------- */

ul.woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pa-space-3);
}

ul.woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  min-height: var(--pa-tap-min);
  padding: var(--pa-space-3) var(--pa-space-4);
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
  cursor: pointer;
  transition: border-color 90ms ease-out, background-color 90ms ease-out;
}

ul.woocommerce-shipping-methods li:hover {
  border-color: var(--pa-charcoal);
}

ul.woocommerce-shipping-methods li:has(input[type="radio"]:checked) {
  border-color: var(--pa-charcoal);
  background: var(--pa-warm-white);
}

ul.woocommerce-shipping-methods input[type="radio"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0;
  accent-color: var(--pa-charcoal);
  cursor: pointer;
}

ul.woocommerce-shipping-methods label {
  display: flex;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  gap: var(--pa-space-3);
  flex-wrap: wrap;
  margin: 0;
  cursor: pointer;
  font-size: var(--pa-text-base);
  line-height: var(--pa-leading-normal);
}

.pa-shipping-method__name {
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
}

.pa-shipping-method__price {
  font-weight: var(--pa-weight-bold);
  color: var(--pa-text);
  white-space: nowrap;
}

/* Fallback for browsers without :has() */
ul.woocommerce-shipping-methods input[type="radio"]:checked + label {
  color: var(--pa-charcoal);
}

/* --- checkout order review shipping row spacing --------------- */

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
  padding: var(--pa-space-3) var(--pa-space-2);
  vertical-align: middle;
}

.woocommerce-checkout #order_review tr.shipping th,
.woocommerce-checkout #order_review tr.shipping td {
  padding-block: var(--pa-space-4);
  vertical-align: top;
}