/**
 * 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 two 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.
 *
 * 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
 */

/* ==========================================================================
   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;
  font-size: 1.05rem;
  font-weight: var(--fw-card-title);
  line-height: 1.35;
  color: var(--ink);
}

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

.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%;
  }
}

/* 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);
}

.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;
}

/* 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);
}