/* ===========================================================
   PINEAPPLE — SINGLE PRODUCT PAGE

   Loaded on product pages only.

   The page she decides on. Designed at 360–430px first, and the
   order on screen is the order she decides in: see the garment,
   read the price, pick a size, tap buy, then reassurance.

   Deliberately absent: shadows, gradients, pills, hover-only
   behaviour, generous editorial margins. Space here is spent on
   the garment and the number, not around them.
   =========================================================== */

/* --- gallery ------------------------------------------------ */

/* Native scroll-snap. No Flexslider, no PhotoSwipe, no zoom.js,
   no carousel library — and no JavaScript needed to show an image. */
.pa-gallery {
  position: relative;
  margin-inline: calc(-1 * var(--pa-space-4));   /* full-bleed on mobile */
}

.pa-gallery__strip {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.pa-gallery__strip::-webkit-scrollbar {
  display: none;
}

.pa-gallery__slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
}

/* The locked 4:5 box, reserved before the image loads. Never square. */
.pa-gallery .pa-product__media {
  aspect-ratio: var(--pa-aspect-product);
}

/* Charcoal on butter — 10.26:1. Sits under the flag, out of the
   garment's way. */
/* Carries '১ / ৩' — Bengali numerals in the most compact chip on the
   page. 17px/600, and the chip grows to fit it. */
.pa-gallery__count {
  position: absolute;
  inset-block-end: var(--pa-space-3);
  inset-inline-end: var(--pa-space-3);
  margin: 0;
  padding: var(--pa-space-1) var(--pa-space-3);
  border-radius: var(--pa-radius);
  background: var(--pa-butter);
  color: var(--pa-charcoal);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
}

@media (min-width: 900px) {
  .pa-gallery {
    margin-inline: 0;
  }

  /* Desktop shows the strip as a simple two-up so a second view is
     visible without a swipe. Still no slider. */
  .pa-gallery__strip {
    overflow-x: visible;
    flex-wrap: wrap;
    gap: var(--pa-space-3);
  }

  .pa-gallery__slide {
    flex: 1 1 calc(50% - var(--pa-space-3));
  }

  .pa-gallery__slide:first-child {
    flex-basis: 100%;
  }
}

/* --- summary ------------------------------------------------ */

.pa-product__title {
  margin-block: var(--pa-space-4) var(--pa-space-2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-xl);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-text);
}

/* The price is the strongest element on the page after the garment.
   Charcoal, never stone, never orange, never small. Sized for four
   Bengali digits — the block grows to fit the price. */
.pa-product__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--pa-space-3);
  margin-block: var(--pa-space-3) var(--pa-space-2);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-2xl);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-price);
}

.pa-product__price .woocommerce-Price-amount,
.pa-product__price ins .woocommerce-Price-amount {
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-2xl);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-price);
}

.pa-product__price .woocommerce-Price-currencySymbol,
.pa-product__price ins .woocommerce-Price-currencySymbol {
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-medium);
  line-height: var(--pa-leading-tight);
  color: var(--pa-price);
}

/* The price she pays leads; the old price follows it, struck. */
.pa-product__price ins {
  order: 1;
  text-decoration: none;
  color: var(--pa-price);
}

/* Struck price kept at body scale so it does not compete with the payable price.
   Bengali numeral legibility floor requires weight 600 so struck ১ remains visible. */
.pa-product__price del {
  order: 2;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text-muted);   /* stone — annotation, 6.34:1 */
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

.pa-product__price del .woocommerce-Price-amount {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text-muted);
}

.pa-product__price del .woocommerce-Price-currencySymbol {
  font-size: var(--pa-text-sm);
  color: var(--pa-text-muted);
}

.pa-product__saving {
  margin-block-end: var(--pa-space-4);
  /* A saving is a Bengali amount she is meant to act on. */
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text);
}

/* --- the lede ------------------------------------------------ */

/* WooCommerce's short description, sitting between the price and the size
   buttons. It is prose, not a heading and not a label, so it takes body
   size and normal weight — loud enough to read at 58, quiet enough that
   the price above it and the size buttons below it stay the two things
   the eye lands on.

   The margin below is larger than the margin above on purpose: the lede
   belongs to the price, and the gap that matters is the one separating
   the description of the garment from the act of choosing a size.

   No max-width. There is no measure token, and the summary column is
   already bounded by the two-column grid on desktop and by the page
   gutter on a phone, so a second width rule here would invent a value
   the brand system has not decided on. */
.pa-product__lede {
  margin-block: var(--pa-space-3) var(--pa-space-6);
  color: var(--pa-text);
}

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

/* Warm white on charcoal — 11.98:1. Readable in daylight, and never
   a low-contrast grey. */
.pa-notice {
  margin-block: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-4);
  border-radius: var(--pa-radius);
  background: var(--pa-charcoal);
  color: var(--pa-text-invert);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
}

/* Charcoal on butter — 10.26:1. For "choose a size first", which is a
   prompt rather than a failure. Border geometry is reserved upfront
   so attention pulsing introduces zero layout shift. */
.pa-notice--hint {
  background: var(--pa-butter);
  color: var(--pa-charcoal);
  border: 2px solid transparent;
  box-sizing: border-box;
}

/* Finite, rapid Orange border attention pulse. Stops automatically after 3 pulses,
   resting cleanly on the solid Orange border until a size is chosen. */
.pa-notice--hint.pa-notice--attention {
  border-color: var(--pa-orange);
  animation: pa-size-attention 1.2s ease-in-out forwards;
}

@keyframes pa-size-attention {
  0%, 100% {
    border-color: var(--pa-orange);
  }
  16%, 50%, 83% {
    border-color: transparent;
  }
  33%, 66% {
    border-color: var(--pa-orange);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pa-notice--hint.pa-notice--attention {
    animation: none;
    border-color: var(--pa-orange);
  }
}

/* --- variation selector -------------------------------------- */

/* WooCommerce's own select elements stay in the DOM and stay
   authoritative — they carry the variation to the form and drive
   WooCommerce's price and availability updates. The buttons are a
   layer on top, built by product.js from those selects. With no
   JavaScript, the selects show and the page still sells. */

.pa-variations {
  margin-block: var(--pa-space-4) var(--pa-space-6);
}

/* WooCommerce's variation reset wins the generic margin above on the live
   form. Keep the product-page spacing explicit so the Quantity row does not
   visually collide with Size. */
.woocommerce .pa-variations.variations {
  margin-block: var(--pa-space-4) var(--pa-space-6) !important;
}

.pa-variations__row + .pa-variations__row {
  margin-block-start: var(--pa-space-4);
}

/* WooCommerce prints the size row as a table — <th class="label"> beside
   <td class="value"> — and left the two cells to the browser's own table
   layout, which gave the "সাইজ" label its own top-aligned box instead of
   sitting flush with the swatches under it. Reset to a plain block column
   so the label and the swatch row share the same left edge and a fixed,
   deliberate gap between them. */
.pa-variations.variations,
.pa-variations.variations tbody,
.pa-variations.variations tr,
.pa-variations.variations th.label,
.pa-variations.variations td.value {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: start;
  vertical-align: baseline;
}

.pa-variations.variations tr + tr {
  margin-block-start: var(--pa-space-4);
}

/* Keep the visible Size label beside the swatches, not above them. WooCommerce
   restores table-cell display at higher specificity, so the product form's
   variation row owns this small presentation reset explicitly. Grid alignment
   centers the label against one swatch row or the full wrapped group. */
.pa-variations.variations tr {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--pa-space-3);
}

.pa-variations.variations th.label,
.pa-variations.variations td.value {
  display: block !important;
  width: auto;
}

.pa-variations.variations th.label {
  margin-block-end: 0;
}

/* Once the enhanced swatches exist, let the choices and reset link become
   separate grid rows. The label then centers against the swatch row itself,
   whether the choices occupy one line or wrap to two, instead of centering
   against the reset link below it. */
.pa-variations.variations.pa-variations--enhanced th.label {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
}

.pa-variations.variations.pa-variations--enhanced td.value {
  display: contents !important;
}

.pa-variations.variations.pa-variations--enhanced .pa-variations__choices {
  grid-column: 2;
  grid-row: 1;
}

.pa-variations.variations.pa-variations--enhanced .reset_variations {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  margin-block-start: var(--pa-space-2);
}

.pa-variations table.variations th.label label {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
}

.pa-variations__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pa-space-3);
  margin-block-end: var(--pa-space-2);
}

.pa-variations__label {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
}

.pa-variations__choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pa-space-2);
}

/* Square-cornered, generous, unmistakable. Not a pill.

   The cart drawer no longer restates this block: its size control is a
   labelled native dropdown now (components/cart-drawer.css, and see
   docs/PINEAPPLE-CART-UX-SPEC.md), so this chip belongs to the product
   page alone.

   Rest was a hairline on the reasoning that a size option is not a
   purchase button and should not carry a purchase button's weight
   before she has touched it, and that starting quiet is what gives
   hover somewhere to go. The first half of that still holds and is
   kept. The second half assumed a pointer: measured, the hairline is
   `rgba(49,47,44,0.14)`, which lands on the card's white at 1.30:1 —
   under the 3:1 floor a control boundary has to clear, and this store
   is read almost entirely on a phone, in daylight, by a customer whose
   eyes are past 45 and who will never produce a hover state at all. A
   border she cannot see is not a quiet affordance, it is an absent
   one.

   Rest is therefore stone: 7.06:1 on the card, the same utility border
   the cart's size control already carries, so the two size controls in
   this store finally match. Nothing else moves — hover still darkens to
   full charcoal, selected is still the charcoal fill and still the
   loudest state, and the chip is still not a button. Never orange,
   anywhere in this control — orange means "buy," not "chosen." */
.pa-swatch {
  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) var(--pa-space-4);
  border: var(--pa-border);
  border-color: var(--pa-stone);
  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);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
  cursor: pointer;
  transition: border-color 90ms ease-out, background-color 90ms ease-out,
              color 90ms ease-out;
}

@media (hover: hover) {
  .pa-swatch:not([disabled]):not([aria-pressed="true"]):hover {
    border-color: var(--pa-charcoal);
  }
}

/* Selected: full charcoal fill. Unmissable at arm's length, and it
   does not rely on colour alone — the fill inverts the whole chip. */
.pa-swatch[aria-pressed="true"] {
  border-color: var(--pa-charcoal);
  background: var(--pa-charcoal);
  color: var(--pa-text-invert);
}

/* Unavailable: struck through and stepped back, not filled.

   This carried a mint ground on the reasoning that a fill states
   "gone" more loudly than grey text and clears the contrast floor
   doing it. The floor argument still holds — but the fill made the one
   size she cannot have the most saturated chip in the row, so the eye
   went to it first. The strike-through is what actually says "gone,"
   and it says it without colour, which is the part that survives a
   colourblind reader. Stone on the card ground is 7.06:1 — legible,
   not the pale grey the brand context warns against. */
.pa-swatch[disabled] {
  border: var(--pa-border);
  background: var(--pa-card-bg);
  color: var(--pa-text-muted);
  text-decoration: line-through;
  cursor: not-allowed;
}

.pa-swatch:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-orange);
  outline-offset: var(--pa-space-1);
}

/* Once buttons exist the select is redundant, but it stays in the DOM
   and stays reachable by assistive technology through its label. */
.pa-variations--enhanced .pa-variations__select {
  position: absolute;
  width: 1px;
  height: 1px;
  min-width: 0;
  max-width: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* THE MINIMUM HAS TO BE BEATEN ON ITS OWN TERMS.
   WooCommerce styles this select as a visible dropdown:
   `.woocommerce div.product form.cart .variations select { min-width: 75% }`,
   at (0,4,3). A min-width overrides a width, and the rule above reads
   (0,2,0) — so the element that is supposed to be a 1px screen-reader
   remnant behind the size buttons computed to 733px at a 1024px viewport
   and hung 344px off the right of the page. Every desktop width had a
   horizontal scrollbar on the most important page on the site, invisible
   because clip-path hides the select but not the box the page scrolls to.

   Matching WooCommerce's own selector shape and adding the theme's class is
   what wins this, at (0,5,2). Nothing here is !important. */
.woocommerce div.product form.cart .pa-variations--enhanced .pa-variations__select,
.woocommerce-page div.product form.cart .pa-variations--enhanced .pa-variations__select {
  min-width: 0;
  max-width: 1px;
  padding: 0;
  margin-right: 0;
}

/* --- size chart --------------------------------------------- */

.pa-size-chart-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--pa-tap-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--pa-text);
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-sm);
  font-weight: var(--pa-weight-semibold);
  text-decoration: underline;
  cursor: pointer;
}

.pa-sheet--size-chart .pa-sheet__panel {
  max-height: 85vh;
}

/* --- add to cart / buy now ----------------------------------- */

.pa-anchor {
  display: block;
  scroll-margin-top: var(--pa-space-8);
}

/* WooCommerce's add-to-cart form, brought onto the token system.
   Both actions are full width and stacked: at 390px a side-by-side
   pair puts two 48px targets within a thumb's width of each other. */
.woocommerce div.product form.cart {
  display: block;
  margin-block: var(--pa-space-4);
}

.woocommerce div.product form.cart .quantity {
  display: inline-flex;
  margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
  width: calc(var(--pa-tap-min) * 2);
  text-align: center;
}

/* --- quantity row: stepper on the left, size chart on the right --- */

/* Quantity and the size chart used to be two separate lines — the size
   chart alone above the quantity field. One row now: the quantity
   group (label + stepper) on the left, the size chart link on the
   right, wrapping only if the width genuinely runs out. */
.pa-buy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pa-space-3);
  margin-block: var(--pa-space-4);
}

.pa-buy-row__qty {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
}

.pa-qty-label {
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
}

/* The stepper — minus, the number, plus — same construction as the cart
   page's (components/cart.css .woocommerce-cart .pa-qty-button); restated
   here because this stylesheet loads on the product page only. Change one
   and change the other. */
.single-product [data-pa-quantity] {
  display: inline-grid;
  grid-template-columns: repeat(3, var(--pa-tap-min));
  align-items: stretch;
}

.single-product div.product form.cart [data-pa-quantity] input.qty {
  width: var(--pa-tap-min);
}

.single-product .pa-qty-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pa-tap-min);
  min-height: var(--pa-tap-min);
  padding: 0;
  border: var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-card-bg);
  color: var(--pa-text);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
  cursor: pointer;
}

@media (hover: hover) {
  .single-product .pa-qty-button:hover {
    background: var(--pa-btn-active-bg);
    color: var(--pa-btn-label);
  }
}

.single-product .pa-qty-button:active {
  background: var(--pa-btn-active-bg);
  color: var(--pa-btn-label);
}

/* Buy now and Add to cart — revised button-colour pass, owner-approved:
   Buy now is orange at rest; Add to cart (and the matching card action
   in product-card.css) is mint at rest; both move to butter on hover
   and press. Orange, mint and butter are the three locked palette
   colours already carrying "primary", "secondary/available" and
   "highlight" roles respectively (brand context §5) — nothing new is
   introduced, the roles are reassigned.

   BOTH STAY COLOURED WHETHER OR NOT A VARIATION IS RESOLVED. The
   previous pass disabled these to a grey hairline before a size was
   chosen; the owner's instruction is that a purchase button must never
   look dead, and that "you have not chosen a size yet" is a message,
   not a colour. product.js intercepts a click on either button ahead
   of WooCommerce's own handler and shows the size-selection notice
   instead of letting the button look, or act, disabled. */
.woocommerce div.product form.cart button.single_add_to_cart_button,
.woocommerce div.product form.cart .pa-buy-now {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--pa-tap-min);
  margin-block-start: var(--pa-space-3);
  padding: var(--pa-space-3) var(--pa-space-6);
  border: var(--pa-space-1) solid transparent;
  border-radius: var(--pa-radius);
  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-align: center;
  cursor: pointer;
  transition: background-color 90ms ease-out, color 90ms ease-out,
              filter 90ms ease-out, transform 90ms ease-out;
}

/* Add to cart — mint at rest, butter on hover and press. */
.woocommerce div.product form.cart button.single_add_to_cart_button {
  min-height: var(--pa-tap-min);
  background: var(--pa-mint);
  border-color: var(--pa-charcoal);
  color: var(--pa-btn-label);
  font-weight: var(--pa-weight-semibold);
}

/* WooCommerce's own variation script never sets the real disabled
   attribute here — it only ever adds a class literally named "disabled"
   — but WooCommerce's core stylesheet still answers that class with
   opacity:.5, which is precisely the washed-out, half-there look the
   owner asked this button never to have before a size is chosen.
   Restated at higher specificity so it stays fully mint. */
.woocommerce div.product form.cart button.single_add_to_cart_button.disabled {
  opacity: 1;
  background: var(--pa-mint);
  border-color: var(--pa-charcoal);
  color: var(--pa-btn-label);
}

@media (hover: hover) {
  .woocommerce div.product form.cart button.single_add_to_cart_button:not(:disabled):hover {
    background: var(--pa-butter);
    color: var(--pa-btn-label);
    transform: translateY(-1px);
  }
}

.woocommerce div.product form.cart button.single_add_to_cart_button:not(:disabled):active {
  background: var(--pa-butter);
  color: var(--pa-btn-label);
  transform: translateY(1px) scale(0.985);
}

/* Buy now — orange at rest, mint on hover and press. Stays the
   taller, saturated PRIMARY control on the page. */
.woocommerce div.product form.cart .pa-buy-now {
  min-height: calc(var(--pa-tap-min) + var(--pa-space-2) + var(--pa-space-1));
  background: var(--pa-btn-primary-bg);
  border-color: var(--pa-btn-primary-bg);
  color: var(--pa-btn-label);
  font-weight: var(--pa-weight-bold);
}

@media (hover: hover) {
  .woocommerce div.product form.cart .pa-buy-now:not(:disabled):hover {
    background: var(--pa-btn-active-bg);
    border-color: var(--pa-charcoal);
    transform: translateY(-1px);
  }
}

.woocommerce div.product form.cart .pa-buy-now:not(:disabled):active {
  background: var(--pa-btn-active-bg);
  border-color: var(--pa-charcoal);
  transform: translateY(1px) scale(0.985);
}

.woocommerce div.product form.cart button.single_add_to_cart_button:focus-visible,
.woocommerce div.product form.cart .pa-buy-now:focus-visible {
  outline: var(--pa-space-1) solid var(--pa-charcoal);
  outline-offset: var(--pa-space-1);
}

/* WooCommerce hides the variation price row; ours above is the price. */
.woocommerce div.product .woocommerce-variation-price {
  display: none;
}

.woocommerce div.product .woocommerce-variation-availability {
  margin-block: var(--pa-space-2);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
}

/* --- trust row ----------------------------------------------- */

/* No icons — the brand context forbids them here. Four short lines,
   separated by rules, on butter so the block reads as one reassuring
   unit. Charcoal on butter is 10.26:1. */
.pa-trust {
  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);
  list-style: none;
}

.pa-trust__item {
  padding-block: var(--pa-space-2);
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
  line-height: var(--pa-leading-body);
}

.pa-trust__item + .pa-trust__item {
  border-block-start: var(--pa-border);
}

/* --- product facts ------------------------------------------- */

.pa-facts {
  margin-block: var(--pa-space-6);
}

.pa-facts__title {
  margin-block-end: var(--pa-space-3);
  font-family: var(--pa-font-heading);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-semibold);
}

.pa-facts__list {
  margin: 0;
  border-block-start: var(--pa-border);
}

.pa-facts__row {
  display: grid;
  grid-template-columns: 40% 1fr;
  gap: var(--pa-space-3);
  padding-block: var(--pa-space-3);
  border-block-end: var(--pa-border);
}

.pa-facts__label {
  font-size: var(--pa-text-base);
  color: var(--pa-text-muted);   /* stone — a label, not information */
}

.pa-facts__value {
  margin: 0;
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
  color: var(--pa-text);
}

/* --- description --------------------------------------------- */

/* Below the buying decision, always. Clear separation from the COD/trust
   block above gives the long description a deliberate visual start. */
/* THE SECTION BREAK BEFORE THE DESCRIPTION.

   Its own margin, matched to the reference build's, so the boundary
   does not depend on the trailing space of whichever block the summary
   happens to end with. She has finished deciding here; what follows is
   reading matter, and the break says so. */
.pa-product__description {
  margin-block-start: var(--pa-space-16);
}

.pa-product__description .pa-section__title {
  margin-block-end: var(--pa-space-3);
  font-family: var(--pa-font-heading);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-semibold);
}

.pa-prose {
  font-size: var(--pa-text-base);
  line-height: var(--pa-leading-body);
}

.pa-prose > * + * {
  margin-block-start: var(--pa-space-4);
}

.pa-prose h2,
.pa-prose h3 {
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-semibold);
  line-height: var(--pa-leading-tight);
}

.pa-prose ul,
.pa-prose ol {
  padding-inline-start: var(--pa-space-6);
}

.pa-prose li + li {
  margin-block-start: var(--pa-space-2);
}

.pa-prose table {
  width: 100%;
  border-collapse: collapse;
}

.pa-prose th,
.pa-prose td {
  padding: var(--pa-space-2) var(--pa-space-3);
  border: var(--pa-border);
  font-size: var(--pa-text-base);
  text-align: start;
}

.pa-prose th {
  background: var(--pa-warm-white);
  font-weight: var(--pa-weight-semibold);
}

/* --- sticky purchase bar -------------------------------------- */

/* Sits above the bottom navigation, never over it, and inside the safe
   area. Hidden until she has scrolled past the real Add to Cart, and
   it reserves no space when hidden — so it cannot shift the layout. */
.pa-buybar {
	background: var(--pa-charcoal);
	border-block-start: var(--pa-space-1) solid var(--pa-orange);
}

.pa-buybar[hidden] {
	display: none;
}

.pa-buybar:not([hidden]) + .pa-dock__float {
	display: none;
}

.pa-buybar__inner {
  display: flex;
  align-items: center;
  gap: var(--pa-space-3);
  max-width: 1200px;
  margin-inline: auto;
  padding: var(--pa-space-2) var(--pa-space-4);
}

.pa-buybar__price,
.pa-buybar__price .woocommerce-Price-amount {
  flex: 1;
  min-width: 0;
  font-family: var(--pa-font-body);
  font-size: var(--pa-text-lg);
  font-weight: var(--pa-weight-bold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-text-invert);   /* 11.98:1 on charcoal */
}

.pa-buybar__price .woocommerce-Price-currencySymbol {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-medium);
}

.pa-buybar__price del {
  display: none;   /* the bar carries one number, not a comparison */
}

.pa-buybar__price ins {
  text-decoration: none;
}

.pa-buybar__action {
  flex: 0 0 auto;
}

.pa-buybar__oos {
  font-size: var(--pa-text-base);
  font-weight: var(--pa-weight-semibold);
  color: var(--pa-text-invert);
}

/* Desktop has room for the real controls on screen; the bar is a
   mobile ergonomics fix and does not belong there. */
@media (min-width: 900px) {
  .pa-buybar {
    display: none;
  }
}

/* --- desktop layout ------------------------------------------ */

/* Gallery and summary side by side. Deliberately not a wide editorial
   split with the product floating in space — the summary column is
   given real width so the price and buttons stay large. */
@media (min-width: 900px) {
  .woocommerce div.product {
    display: grid;
    grid-template-columns: 55% 1fr;
    gap: var(--pa-space-8);
    align-items: start;
  }

  .woocommerce div.product .pa-gallery {
    grid-column: 1;
  }

  .woocommerce div.product .summary {
    grid-column: 2;
    margin: 0;
  }

  .woocommerce div.product .pa-product__description,
  .woocommerce div.product .pa-section {
    grid-column: 1 / -1;
  }
}