/**
 * PlayForge — WooCommerce styles.
 *
 * Enqueued from inc/enqueue.php only when WooCommerce is active. Its job is to
 * bring WooCommerce's own markup in line with the Hugo theme's product card and
 * product detail design, reusing the same tokens declared in style.css.
 *
 * Design note: this theme styles WooCommerce's stock markup rather than shipping
 * a woocommerce/ folder of template overrides. Copied templates go stale on every
 * WooCommerce release that bumps a template version, and none of the changes
 * needed here are structural — so CSS plus the hooks in inc/woocommerce.php gets
 * the same result with nothing to keep in sync. The exceptions handled in PHP are
 * the .product-card wrapper and the page-header/layout wrappers, which do need
 * real markup and are added via hooks, and the single-product/tabs/tabs.php
 * override behind the off-by-default "Display product tabs as a list" option —
 * stacking the panels instead of toggling them cannot be done from CSS alone.
 *
 * Contents
 *   1. Shared
 *   2. Product listing (shop, category, tag, related, upsells)
 *   3. Product detail
 *   4. Tabs and reviews
 *   5. Cart, checkout and account
 *   6. Notices
 *   7. Pagination and sorting
 *   8. Widgets
 *
 * Bump @version whenever this file changes. tools/build-assets.sh stamps it into
 * woocommerce.min.css, and `tools/build-assets.sh --check` compares the two — a
 * version here that the built file does not carry is how a forgotten rebuild is
 * caught.
 *
 * @version 1.9.7
 */

/* ==========================================================================
   1. Shared
   ========================================================================== */

.pf-woocommerce .woocommerce-products-header {
  /* The theme's page header carries the title, and .pf-shop-intro below the
     breadcrumb carries the description. */
  display: none;
}

/* WooCommerce's own buttons inherit the theme's brand button, so a Woo template
   that renders .button without a Bootstrap class still looks right. */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-btn);
  font-weight: var(--fw-btn);
  padding: .55rem 1.1rem;
  line-height: 1.5;
  text-decoration: none;
}

.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  color: var(--on-brand);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
  background: var(--brand);
  border-color: var(--brand);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.woocommerce .button:focus-visible,
.woocommerce button.button:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.woocommerce .button.disabled,
.woocommerce .button:disabled,
.woocommerce button.button:disabled[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

/* Block-editor buttons inside WooCommerce blocks — the product grid the cart
   page renders while the cart is empty (woocommerce/product-new inside
   empty-cart-block), and the All Products block anywhere else.

   These are .wp-block-button__link, not .button, so nothing above reaches them.
   Their colour comes from two of core's own inline sheets — classic-theme-styles
   and global-styles — which both paint #32373c, a slate fill picked to suit no
   theme in particular. It ignores the palette and sits in the grid like a hole
   punched in the page. Repainted here as a white outline button.

   Every selector below is (0,2,0), one class more than the core rules it has to
   beat, and background, colour and border are all stated: whichever of the two
   core sheets happens to win, none of its three values survives. */
.wc-block-grid__product-add-to-cart .wp-block-button__link,
.wc-block-components-product-button .wp-block-button__link,
.wp-block-button__link.add_to_cart_button {
  background: var(--block-btn-bg);
  color: var(--block-btn-ink);
  border: 1px solid var(--block-btn-border);
  border-radius: var(--radius-btn);
  font-weight: var(--fw-btn);
  padding: .55rem 1.1rem;
  line-height: 1.5;
  text-decoration: none;
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:hover,
.wc-block-grid__product-add-to-cart .wp-block-button__link:focus,
.wc-block-components-product-button .wp-block-button__link:hover,
.wc-block-components-product-button .wp-block-button__link:focus,
.wp-block-button__link.add_to_cart_button:hover,
.wp-block-button__link.add_to_cart_button:focus {
  background: var(--block-btn-bg-hover);
  color: var(--block-btn-ink-hover);
  border-color: var(--block-btn-border-hover);
}

.wc-block-grid__product-add-to-cart .wp-block-button__link:focus-visible,
.wc-block-components-product-button .wp-block-button__link:focus-visible,
.wp-block-button__link.add_to_cart_button:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

/* The block cart and block checkout's primary actions — Proceed to Checkout and
   Place Order.

   A different component from everything above: WooCommerce renders these through
   its own Button, which emits `wc-block-components-button wp-element-button
   <extra> contained` and wraps the label in a child div. Nothing in this file
   reached them, and WooCommerce's own block CSS sets no colour for the contained
   variant, so they were left on core's #32373c — the same off-palette slate the
   add-to-cart buttons above are repainted for, except here it lands on the single
   most important button in the store.

   These read --brand/--on-brand rather than --block-btn-*, deliberately. The
   add-to-cart buttons above are a secondary, outline-style action; this is the
   primary CTA, and its classic-cart counterpart is a.button.alt, which is painted
   from --brand a few rules up. Reading the same pair keeps the block cart and the
   shortcode cart identical, and means the contrast is correct by construction in
   every child theme: --on-brand is defined as the ink that reads on --brand, so
   redefining the palette carries the button with it and no child needs a rule.

   .contained is Woo's default variant, so it is present on both buttons; pairing
   it with the component class gives (0,2,0), matching the pattern above — one
   class more than the core rules this has to beat. */
.wc-block-components-button.contained,
a.wc-block-cart__submit-button,
button.wc-block-components-checkout-place-order-button {
  background: var(--brand);
  color: var(--on-brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-btn);
  font-weight: var(--fw-btn);
  text-decoration: none;
}

/* The label sits in a child div, which would otherwise inherit a colour from
   whatever ancestor rule won — set it explicitly so the two cannot disagree. */
.wc-block-components-button.contained .wc-block-components-button__text,
a.wc-block-cart__submit-button .wc-block-components-button__text,
button.wc-block-components-checkout-place-order-button .wc-block-components-button__text {
  color: inherit;
}

.wc-block-components-button.contained:hover,
.wc-block-components-button.contained:focus,
a.wc-block-cart__submit-button:hover,
a.wc-block-cart__submit-button:focus,
button.wc-block-components-checkout-place-order-button:hover,
button.wc-block-components-checkout-place-order-button:focus {
  background: var(--brand-dark);
  color: var(--on-brand);
  border-color: var(--brand-dark);
}

.wc-block-components-button.contained:focus-visible,
a.wc-block-cart__submit-button:focus-visible,
button.wc-block-components-checkout-place-order-button:focus-visible {
  outline: 2px solid var(--brand-dark);
  outline-offset: 2px;
}

.woocommerce .price,
.woocommerce span.amount {
  color: var(--brand-dark);
  font-weight: var(--fw-price);
}

.woocommerce del,
.woocommerce del span.amount {
  color: var(--muted);
  font-weight: var(--fw-medium);
  opacity: 1;
}

.woocommerce ins {
  text-decoration: none;
}

/* ==========================================================================
   2. Product listing
   ========================================================================== */

/* The intro block below the breadcrumb, from playforge_shop_intro() in
   inc/woocommerce.php. It holds the shop page's content or the product category
   description, so it has to read like an article: long text, images and
   shortcode output all land here. It sits outside the layout wrappers, which is
   what keeps it full width when a sidebar is beside the grid. */
.pf-shop-intro {
  padding: 2rem 0 0;
}

.pf-shop-intro__body {
  max-width: var(--prose-width);
  color: var(--ink-prose);
}

.pf-shop-intro__body > :first-child { margin-top: 0; }
.pf-shop-intro__body > :last-child { margin-bottom: 0; }

.pf-shop-intro__body p,
.pf-shop-intro__body ul,
.pf-shop-intro__body ol {
  line-height: var(--prose-line-height);
  font-size: var(--prose-size);
}

.pf-shop-intro__body h2,
.pf-shop-intro__body h3,
.pf-shop-intro__body h4 {
  font-weight: var(--fw-prose-heading);
  margin: 1.6rem 0 .9rem;
}

.pf-shop-intro__body a { color: var(--prose-link-ink); }

.pf-shop-intro__body img,
.pf-shop-intro__body iframe,
.pf-shop-intro__body video {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.pf-shop-intro__body blockquote {
  border-left: 4px solid var(--brand);
  padding-left: 1rem;
  color: var(--ink-quote);
  font-style: italic;
}

/* The arrangement is WooCommerce's own: it floats each <li class="product"> at
   a width derived from the columns-N class on the <ul>, clears each row via the
   `first` class and drops the gutter on `last`, and switches to two-up under
   768px in woocommerce-smallscreen.css. The theme deliberately does not
   override any of that — an earlier CSS Grid here fought those widths — so the
   column count is set in one place only: playforge_loop_shop_columns() in
   inc/woocommerce.php, which feeds the columns-N class.

   What follows styles the card *inside* each item, never its size or position. */

/* .product-card comes from playforge_loop_product_open() in inc/woocommerce.php;
   the base card look (border, radius, hover lift) is inherited from style.css.
   Card heights within a row are ragged when titles wrap differently — that is
   how WooCommerce's float layout behaves, and equalising them would mean taking
   the arrangement back off it. */
.woocommerce ul.products li.product .product-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}

/* Square by ratio rather than a fixed pixel height: the thumbnail then grows
   with the column instead of being pinned to one size, which is what made the
   images look undersized in a wide container. */
.woocommerce ul.products li.product img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  margin: 0;
  display: block;
}

/* Padding lives on the individual children rather than on a wrapper div: see the
   note in inc/woocommerce.php on why no wrapper is emitted. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  padding: 1rem 1rem 0;
  margin: 0;
  /* 16px and regular weight: the title is one row of a dense catalogue table,
     not a page heading. The card's lift, image and button carry the emphasis. */
  font-size: 16px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

.woocommerce ul.products li.product .woocommerce-LoopProduct-link:hover .woocommerce-loop-product__title {
  color: var(--brand-dark);
}

/* SKU line directly under the title. It is an identifier rather than a
   heading, so it is smaller than the 1.05rem title and never bold, and it
   keeps the title's black at rest — the direct colour is needed because the
   line lives inside the product anchor, which would otherwise paint it with
   the brand link colour. It deliberately does NOT follow the title into
   brand-dark on hover: only the title is the link's hover feedback. The bare
   value prints, with no "SKU: " prefix. */
.woocommerce ul.products li.product .pf-loop-sku {
  padding: .3rem 1rem 0;
  margin: 0;
  font-size: .9rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink);
}

.woocommerce ul.products li.product .price {
  display: block;
  padding: .5rem 1rem 0;
  margin: 0;
  font-size: 1rem;
}

.woocommerce ul.products li.product .star-rating {
  margin: .6rem 1rem 0;
  font-size: .8rem;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title + .price {
  padding-top: .4rem;
}

/* margin-top: auto keeps the button at the bottom whenever the card has spare
   height. display:block plus the side margins give it the card's inner width —
   a Bootstrap w-100 would add 100% *plus* those margins and overflow. */
.woocommerce ul.products li.product .button {
  margin: 1rem;
  margin-top: auto;
  display: block;
  width: auto;
  text-align: center;
}

.woocommerce ul.products li.product .added_to_cart {
  display: block;
  margin: 0 1rem 1rem;
  font-size: .85rem;
  font-weight: var(--fw-bold);
  color: var(--brand-dark);
}

/* Sale flash */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
  position: absolute;
  top: .75rem;
  left: .75rem;
  right: auto;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  line-height: 1;
  margin: 0;
  padding: .35rem .6rem;
  border-radius: var(--radius-chip);
  background: var(--accent);
  color: var(--on-accent);
  font-size: .75rem;
  font-weight: var(--fw-label);
  text-transform: uppercase;
  letter-spacing: .02em;
}

.woocommerce ul.products li.product .out-of-stock-badge {
  background: var(--neutral);
  color: var(--on-brand);
}

/* Related products and upsells sit inside the product page, so they need the
   section rhythm the archive gets from .pf-section. */
.woocommerce .related,
.woocommerce .upsells {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
  font-weight: var(--fw-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin-bottom: 1.5rem;
}

/* ==========================================================================
   3. Product detail
   ========================================================================== */

/* Replace WooCommerce's float layout with flex, so the gallery and the summary
   are true columns that stay level. */
.woocommerce div.product {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  align-items: flex-start;
}

.woocommerce div.product > .woocommerce-product-gallery {
  flex: 1 1 46%;
  min-width: 0;
  float: none;
  width: auto;
  margin-bottom: 2rem;
}

.woocommerce div.product > .summary,
.woocommerce div.product > .entry-summary {
  flex: 1 1 46%;
  min-width: 0;
  float: none;
  width: auto;
  margin-bottom: 2rem;
}

/* Everything below the two columns spans the full width. */
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .product_meta {
  flex: 1 1 100%;
  min-width: 0;
  float: none;
  width: auto;
  clear: both;
}

@media (max-width: 767.98px) {
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary,
  .woocommerce div.product > .entry-summary {
    flex-basis: 100%;
  }
}

/* --------------------------------------------------------------------------
   The fullscreen single-product layout — "Fullscreen - single col" on the
   product detail page.

   The wrapper (.pf-container-fluid, section 14 of style.css) still runs edge to
   edge, but since 1.17.1 the product itself carries --woo-fullscreen-gutter on
   both sides, and the same token is the flex gap between the gallery and the
   summary. One source of insets therefore aligns every block: the gallery's
   left edge with the description tabs, and the summary's right edge with the
   related products — the same edges a boxed layout lines up, just on the wider
   fluid wrapper. The gallery keeps one third of the (now inset) row.

   The class is scoped to div.product as a DIRECT child of .pf-container-fluid:
   with no sidebar the layout opens no .row, while "Fullscreen - 2/3 cols" wraps
   the product in .row > .pf-main-col, and these rules — a third of the row and
   the gutter gap — must not reach in there; the ordinary 46/46 split applies.

   The pre-1.17.0 "Woo Fullscreen (edge to edge)" design — gallery flush against
   the left edge, no product padding, per-column gutters, borderless bleeding
   image — is kept verbatim under the legacy .pf-layout-woo-full-screen class,
   which playforge_normalize_layout() normally maps away but a playforge_layout
   filter can still print. .woocommerce sits on <body> and the layout class on a
   div inside it, so these start from the layout class and reach div.product
   rather than being written as descendants of .woocommerce; they come after the
   base rules above and in this stylesheet (enqueued after style.css), so equal
   specificity is won by order.
   -------------------------------------------------------------------------- */
.pf-layout-full-screen .pf-container-fluid > div.product {
  /* Row gap stays 0: the margin on the columns and the tabs' own spacing rhythm
     already separate the full-width blocks below; only the two top columns need
     a gutter between them. */
  gap: 0 var(--woo-fullscreen-gutter);
  /* span.onsale is a direct child too, and only the inline axis is affected:
     div.product keeps no vertical padding. */
  padding-inline: var(--woo-fullscreen-gutter);
}

/* The sale badge is absolutely positioned against div.product's padding EDGE,
   not its content edge, so padding-left does not carry it with the gallery.
   Add the gutter back onto its left offset so it stays parked on the gallery's
   top-left corner rather than floating in the empty gutter strip. Same at every
   breakpoint: stacked, the gallery is inset by exactly the same gutter. */
.pf-layout-full-screen .pf-container-fluid > div.product > span.onsale {
  left: calc(0.75rem + var(--woo-fullscreen-gutter));
}

/* Stacked below the breakpoint, which stays 992px rather than the 768px the
   other product layouts use: two columns of half a tablet would leave the
   summary too narrow to read. The product-level padding above already supplies
   the side insets when stacked, so no per-column padding is needed. */
@media (max-width: 991.98px) {
  .pf-layout-full-screen .pf-container-fluid > div.product > .woocommerce-product-gallery,
  .pf-layout-full-screen .pf-container-fluid > div.product > .summary,
  .pf-layout-full-screen .pf-container-fluid > div.product > .entry-summary {
    flex-basis: 100%;
  }
}

@media (min-width: 992px) {
  /* One third of the inset row, and no more: a fixed basis rather than a
     grow-shrink one, so a long title in the summary cannot squeeze the gallery
     narrower. In the sidebar fullscreen layouts the direct-child scope keeps
     this rule out of the main column. */
  .pf-layout-full-screen .pf-container-fluid > div.product > .woocommerce-product-gallery {
    flex: 0 0 var(--woo-fullscreen-gallery-width);
    max-width: var(--woo-fullscreen-gallery-width);
  }

  /* Whatever the gallery leaves. flex-basis 0 rather than a percentage, so the
     two columns can never add up to more than the row available. */
  .pf-layout-full-screen .pf-container-fluid > div.product > .summary,
  .pf-layout-full-screen .pf-container-fluid > div.product > .entry-summary {
    flex: 1 1 0;
    max-width: none;
  }
}

/* --- Legacy flush branch ----------------------------------------------------
   The pre-1.17.0 edge-to-edge design, kept for a playforge_layout filter that
   returns woo-full-screen. The wrapper has no side padding: the gallery sits
   flush against the left edge of the screen at a third of it, and everything
   that is not the gallery supplies its own gutter. */
.pf-layout-woo-full-screen div.product {
  gap: 0;
}

/* Listed block by block rather than as `> *`: padding on the product itself is
   avoided here because the flush gallery must start at x=0, and span.onsale is
   another direct child. */
.pf-layout-woo-full-screen div.product > .summary,
.pf-layout-woo-full-screen div.product > .entry-summary,
.pf-layout-woo-full-screen div.product > .woocommerce-tabs,
.pf-layout-woo-full-screen div.product > .related,
.pf-layout-woo-full-screen div.product > .upsells,
.pf-layout-woo-full-screen div.product > .product_meta {
  padding-inline: var(--woo-fullscreen-gutter);
}

@media (max-width: 991.98px) {
  .pf-layout-woo-full-screen div.product > .woocommerce-product-gallery,
  .pf-layout-woo-full-screen div.product > .summary,
  .pf-layout-woo-full-screen div.product > .entry-summary {
    flex-basis: 100%;
  }

  /* A flush left edge is only worth having while a second column sits beside
     the gallery; stacked, it takes the gutter like everything else. */
  .pf-layout-woo-full-screen div.product > .woocommerce-product-gallery {
    padding-inline: var(--woo-fullscreen-gutter);
  }
}

@media (min-width: 992px) {
  .pf-layout-woo-full-screen div.product > .woocommerce-product-gallery {
    flex: 0 0 var(--woo-fullscreen-gallery-width);
    max-width: var(--woo-fullscreen-gallery-width);
  }

  .pf-layout-woo-full-screen div.product > .summary,
  .pf-layout-woo-full-screen div.product > .entry-summary {
    flex: 1 1 0;
    max-width: none;
  }

  /* The main image bleeds off the left edge, so the card border and radius that
     suit a contained image would draw a line down the middle of it instead. The
     thumbnail row below keeps both — it is a row of cards, not a bleeding image.
     The current inset branch above deliberately inherits the card border from
     the base rules, matching the boxed layouts. */
  .pf-layout-woo-full-screen div.product .woocommerce-product-gallery__wrapper img {
    border: 0;
    border-radius: 0;
  }
}

/* Gallery: styled to match .product-gallery-main / .thumb-row from style.css,
   while leaving WooCommerce's FlexSlider markup and behaviour untouched. */
.woocommerce div.product div.images {
  margin: 0;
  width: auto;
  float: none;
}

.woocommerce div.product div.images img {
  border-radius: var(--radius-card);
  border: 1px solid var(--line);
  display: block;
  width: 100%;
  height: auto;
}

.woocommerce div.product .woocommerce-product-gallery__wrapper {
  margin: 0;
}

/* Thumbnail row — the FlexSlider control nav, restyled as the Hugo .thumb-row. */
.woocommerce div.product div.images .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: .6rem 0 0;
  padding: 0;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs li {
  width: auto;
  margin: 0;
  float: none;
  list-style: none;
}

.woocommerce div.product div.images .flex-control-thumbs img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-media);
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 1;
  transition: border-color .15s;
}

.woocommerce div.product div.images .flex-control-thumbs img:hover,
.woocommerce div.product div.images .flex-control-thumbs img.flex-active {
  border-color: var(--brand);
  opacity: 1;
}

/* The zoom/lightbox trigger sits over the main image. */
.woocommerce div.product div.images .woocommerce-product-gallery__trigger {
  top: .75rem;
  right: .75rem;
  left: auto;
  z-index: 2;
}

/* Summary column */
.woocommerce div.product .product_title {
  font-weight: var(--fw-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
  margin: 0 0 .75rem;
}

/* Price block — the bordered panel from the Hugo product page. */
.woocommerce div.product .summary > p.price,
.woocommerce div.product .summary > span.price,
.woocommerce div.product .entry-summary > p.price,
.woocommerce div.product .entry-summary > span.price {
  display: block;
  border: 1px solid var(--price-block-border);
  border-left: var(--price-block-edge);
  border-radius: var(--radius-card);
  padding: 1.2rem 1.4rem;
  background: var(--price-block-bg);
  margin: 1rem 0 1.4rem;
  font-size: 1.6rem;
  line-height: 1.2;
}

.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-prose);
  line-height: 1.75;
  margin-bottom: 1.25rem;
}

.woocommerce div.product form.cart {
  margin-bottom: 1.25rem;
}

.woocommerce div.product form.cart .quantity input.qty {
  min-height: 46px;
  width: 5rem;
  padding: .375rem .75rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  text-align: center;
}

.woocommerce div.product form.cart .quantity {
  margin-right: .6rem;
  float: none;
  display: inline-block;
  vertical-align: top;
}

.woocommerce div.product form.cart div.quantity + .button {
  vertical-align: top;
}

/* Variation selects */
.woocommerce div.product form.cart table.variations {
  margin-bottom: 1rem;
  border: 0;
  width: 100%;
}

.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td {
  border: 0;
  padding: .35rem 0;
  vertical-align: middle;
}

.woocommerce div.product form.cart table.variations th {
  width: 9rem;
  font-weight: var(--fw-table-label);
  text-align: left;
}

.woocommerce div.product form.cart table.variations select {
  min-height: 46px;
  width: 100%;
  max-width: 24rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: .375rem .75rem;
  background: var(--surface);
}

.woocommerce div.product .woocommerce-variation-price {
  margin-bottom: .75rem;
}

/* Enquiry buttons added by playforge_single_product_enquiry(). */
.woocommerce div.product .pf-enquiry {
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}

/* Meta */
.woocommerce div.product .product_meta {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .9rem;
  color: var(--muted);
}

.woocommerce div.product .product_meta > span {
  display: block;
  margin-bottom: .3rem;
}

.woocommerce div.product .product_meta a {
  color: var(--brand-dark);
  text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
  text-decoration: underline;
}

/* Stock */
.woocommerce div.product .stock {
  font-weight: var(--fw-bold);
}

.woocommerce div.product .stock.in-stock {
  color: var(--ok);
}

.woocommerce div.product .stock.out-of-stock {
  color: var(--danger);
}

/* ==========================================================================
   4. Tabs and reviews
   ========================================================================== */

/* Styled to read as Bootstrap nav-tabs. WooCommerce's own tabs.js handles panel
   switching, so the .wc-tabs classes and markup are left alone — only the
   appearance changes. */
.woocommerce div.product .woocommerce-tabs {
  margin-top: 3rem;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 -1px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
  content: none;
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background: transparent;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  box-shadow: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
  content: none;
  box-shadow: none;
  border: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--brand-dark);
  border-color: var(--line-soft) var(--line-soft) var(--line);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--surface);
  border-color: var(--line) var(--line) var(--surface);
  color: var(--brand-dark);
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 1.75rem 0 0;
  margin: 0;
  line-height: 1.75;
  color: var(--ink-prose);
}

/* The Description panel on a product built with Elementor — the body carries
   .pf-product-elementor-description from playforge_product_body_classes().

   An Elementor layout supplies all of its own spacing and expects the full width
   of what contains it, so the panel gives up its padding on all four sides. The
   negative side margins hand back whatever inset the .woocommerce-tabs wrapper
   applies, symmetrically, so the panel widens to the full width of the layout
   container and stays centred in it — the "Woo Fullscreen (edge to edge)" layout
   is where that matters, since there the container is the screen and the design
   then really does run edge to edge. In a boxed layout the wrapper has no inset,
   so there is nothing to give back and the panel fills the container instead:
   width comes from the chosen layout, the same rule page.php follows for an
   Elementor-built page.

   Only this panel. Every other tab holds content the theme or WooCommerce renders
   — the attributes table, the review form — and keeps the padding and alignment
   set above, which is why this targets the --description modifier rather than
   .panel. Without the body class nothing here applies and all tabs stay uniform. */
.pf-product-elementor-description div.product .woocommerce-tabs .woocommerce-Tabs-panel--description {
  padding: 0;
  max-width: none;
}

/* .pf-product-elementor-description is a body class and the layout class sits on
   an inner div, so the compound selector form could never match; this is a
   descendant selector. Legacy flush branch only: there the tabs carry their own
   gutter and the negative margin hands it back so the Elementor description runs
   edge to edge. In the current inset branch the product itself carries the
   gutter, so the panel must stay inside it to keep the aligned first edge the
   layout promises — no negative margin there. */
.pf-product-elementor-description .pf-layout-woo-full-screen div.product .woocommerce-tabs .woocommerce-Tabs-panel--description {
  margin-inline: calc(-1 * var(--woo-fullscreen-gutter));
}

.woocommerce div.product .woocommerce-tabs .panel > h2:first-child {
  /* The tab label already names the panel. */
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   List mode — PlayForge Options → WooCommerce → "Display product tabs as a
   list". The template override single-product/tabs/tabs.php keeps the
   .woocommerce-tabs wrapper (so the layout rules above still apply) but
   replaces the .tabs/.wc-tabs strip with .pf-tabs-list-nav and renders every
   panel as a visible .pf-tabs-list-panel <section>; WooCommerce's tabs.js does
   not bind because its click selector needs ul.tabs/.wc-tabs, so nothing here
   has to fight an inline display:none from it.

   The nav deliberately copies the clickable tab strip above rule for rule —
   same bottom rule on the row, same muted labels, padding and top-only
   rounding, same hover — so switching the option on changes the behaviour
   (scroll instead of click) but not the look. There is no active tab to style:
   every section is on the page at once.
   -------------------------------------------------------------------------- */
.woocommerce div.product .pf-tabs-list .pf-tabs-list-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  margin: 0 0 -1px;
  padding: 0;
  border-bottom: 1px solid var(--line);
  list-style: none;
}

.woocommerce div.product .pf-tabs-list .pf-tabs-list-nav a {
  display: block;
  padding: .75rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--muted);
  font-weight: var(--fw-bold);
  text-decoration: none;
  transition: color .15s, border-color .15s;
}

.woocommerce div.product .pf-tabs-list .pf-tabs-list-nav a:hover,
.woocommerce div.product .pf-tabs-list .pf-tabs-list-nav a:focus-visible {
  color: var(--brand-dark);
  border-color: var(--line-soft) var(--line-soft) var(--line);
}

.woocommerce div.product .pf-tabs-list .pf-tabs-list-panel {
  margin: 2rem 0 3.5rem;
  padding: 0 0 3.5rem;
  border-bottom: 1px solid var(--line-soft);
  line-height: 1.75;
  color: var(--ink-prose);
}

.woocommerce div.product .pf-tabs-list .pf-tabs-list-panel:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.woocommerce div.product .pf-tabs-list .pf-tabs-list-title {
  margin: 0 0 1.25rem;
  font-size: 1.4rem;
  line-height: 1.3;
  /* Clears the fixed/sticky header when an anchor link jumps here. */
  scroll-margin-top: 6rem;
}

/* Attributes table — the Hugo .spec-table look. */
.woocommerce table.shop_attributes {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  margin-bottom: 0;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
  border: 1px solid var(--line);
  padding: .7rem .9rem;
  font-style: normal;
  line-height: 1.5;
}

.woocommerce table.shop_attributes th {
  width: 34%;
  background: var(--spec-label-bg);
  font-weight: var(--fw-table-label);
  text-align: left;
}

.woocommerce table.shop_attributes td p {
  margin: 0;
  padding: 0;
}

.woocommerce table.shop_attributes tr:nth-child(even) td,
.woocommerce table.shop_attributes tr:nth-child(even) th {
  background: transparent;
}

.woocommerce table.shop_attributes tr:nth-child(even) th {
  background: var(--spec-label-bg);
}

/* Reviews */
.woocommerce #reviews #comments ol.commentlist {
  padding: 0;
  list-style: none;
}

.woocommerce #reviews #comments ol.commentlist li {
  margin-bottom: 1.5rem;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: flex;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--card-bg);
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: transparent;
  flex-shrink: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  min-width: 0;
}

.woocommerce #reviews .comment-form-rating select,
.woocommerce #reviews .comment-form input[type="text"],
.woocommerce #reviews .comment-form input[type="email"],
.woocommerce #reviews .comment-form textarea {
  min-height: 46px;
  width: 100%;
  max-width: 34rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: .375rem .75rem;
}

.woocommerce #reviews .comment-form textarea {
  min-height: 8rem;
}

.woocommerce .star-rating span,
.woocommerce p.stars a {
  color: var(--accent);
}

/* ==========================================================================
   5. Cart, checkout and account
   ========================================================================== */

.woocommerce table.shop_table {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 1.5rem;
}

.woocommerce table.shop_table th {
  background: var(--spec-label-bg);
  font-weight: var(--fw-table-label);
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

.woocommerce table.shop_table td {
  padding: .9rem 1rem;
  border-top: 1px solid var(--line);
  vertical-align: middle;
}

.woocommerce table.shop_table img {
  width: 64px;
  height: auto;
  border-radius: var(--radius-media);
}

.woocommerce table.cart td.actions .coupon input.input-text {
  min-height: 46px;
  width: 14rem;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: .375rem .75rem;
  margin-right: .5rem;
}

.woocommerce .cart_totals,
.woocommerce .cross-sells {
  margin-top: 1rem;
}

.woocommerce-cart .cart-collaterals .cart_totals table {
  border: 1px solid var(--line);
}

/* Form fields inside checkout and account share the theme's control styling. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  min-height: 46px;
  width: 100%;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: .375rem .75rem;
  background-color: var(--surface);
  color: var(--ink);
  line-height: 1.5;
}

.woocommerce form .form-row textarea {
  min-height: 7rem;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
  outline: 0;
  border-color: var(--control-focus-border);
  box-shadow: var(--ring);
}

.woocommerce form .form-row label {
  font-weight: var(--fw-semibold);
  margin-bottom: .3rem;
  display: block;
}

.woocommerce form .form-row .required {
  color: var(--danger);
  text-decoration: none;
}

.woocommerce-checkout #payment,
.woocommerce form.checkout_coupon,
.woocommerce form.login,
.woocommerce form.register {
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--soft);
  padding: 1.25rem 1.4rem;
}

.woocommerce-checkout #payment div.payment_box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink-prose);
}

.woocommerce-checkout #payment div.payment_box::before {
  border-bottom-color: var(--line);
}

.woocommerce-checkout #payment ul.payment_methods {
  border-bottom: 1px solid var(--line);
}

/* My Account navigation */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--surface);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
  border-bottom: 1px solid var(--line);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
  border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: .7rem 1rem;
  text-decoration: none;
  font-weight: var(--fw-semibold);
  color: var(--ink);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
  background: var(--brand-tint);
  color: var(--brand-dark);
}

/* ==========================================================================
   6. Notices
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
  border-top: 0;
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  background: var(--soft);
  color: var(--ink);
  padding: .9rem 1.1rem;
  margin: 0 0 1.5rem;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
  /* WooCommerce's pseudo-element icons are absolutely positioned for its own
     padding; the flex layout above replaces them. */
  content: none;
}

.woocommerce-message {
  border-left-color: var(--ok);
  background: var(--ok-tint);
}

.woocommerce-info {
  border-left-color: var(--info);
  background: var(--info-tint);
}

.woocommerce-error {
  border-left-color: var(--danger);
  background: var(--danger-tint);
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  margin-left: auto;
}

.woocommerce-error li {
  list-style: none;
  flex-basis: 100%;
}

/* ==========================================================================
   7. Pagination and sorting
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
  margin-top: 3rem;
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .35rem;
  border: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  display: block;
  min-width: 42px;
  padding: .5rem .75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--brand-dark);
  font-weight: var(--fw-pagination);
  text-decoration: none;
  line-height: 1.4;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li a:focus {
  background: var(--pagination-hover-bg);
  border-color: var(--pagination-hover-border);
  color: var(--brand-dark);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--on-brand);
}

/* Result count and sort dropdown */
.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
  margin-bottom: 1.75rem;
  color: var(--muted);
  font-size: .92rem;
}

.woocommerce .woocommerce-ordering select {
  min-height: 46px;
  border: 1px solid var(--control-border);
  border-radius: var(--radius-control);
  padding: .375rem 2rem .375rem .75rem;
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--fw-semibold);
}

/* ==========================================================================
   8. Widgets
   ========================================================================== */

.pf-sidebar .woocommerce ul.product_list_widget li,
.pf-sidebar ul.product_list_widget li {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .75rem 0;
  border-bottom: 1px solid var(--line);
}

.pf-sidebar ul.product_list_widget li:last-child {
  border-bottom: 0;
}

.pf-sidebar ul.product_list_widget li img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--radius-media);
  margin: 0;
  float: none;
}

.pf-sidebar ul.product_list_widget li a {
  display: block;
  font-weight: var(--fw-bold);
  text-decoration: none;
  color: var(--ink);
  line-height: 1.35;
}

.pf-sidebar ul.product_list_widget li a:hover {
  color: var(--brand-dark);
}

.pf-sidebar .woocommerce-Price-amount {
  font-size: .9rem;
}

.pf-sidebar .widget_shopping_cart .buttons .button,
.pf-sidebar .woocommerce-mini-cart__buttons .button {
  display: inline-block;
  margin-right: .4rem;
}

/* Price filter slider */
.pf-sidebar .price_slider_wrapper .ui-slider .ui-slider-range,
.pf-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle {
  background: var(--brand);
}

/* Header cart link added by playforge_cart_link(). */
.pf-cart-link .pf-cart-count {
  position: absolute;
  top: -.15rem;
  right: -.35rem;
  font-size: .65rem;
  line-height: 1;
  padding: .25em .45em;
  border-radius: var(--radius-badge);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--fw-label);
}