/**
 * wavePRESS — woocommerce.css (shop pages only)
 *
 * WooCommerce in the theme's colours, fonts, corners and buttons. WooCommerce's
 * own stylesheets still load on these pages (they handle the gallery, star font,
 * spinners and layout basics); this file changes how things look.
 *
 * Specificity: WooCommerce's selectors are long (some include #respond), so rules
 * here start with #page (the theme's page wrapper) to win cleanly without
 * !important. To change something from a child theme, start the selector with
 * #page too.
 *
 * Sections:
 *   1. Buttons
 *   2. Prices, sale badge, ratings
 *   3. Notices, breadcrumbs, store notice
 *   4. Forms and quantity
 *   5. Product grid (shop, categories, related, upsells)
 *   6. Single product
 *   7. Tables, cart, checkout, account
 *   8. Cart and Checkout blocks
 *   9. Cartoon button style
 */

/* ── 1. Buttons ───────────────────────────────────────────────────────────────
   "alt" buttons (Add to cart, Checkout, Place order) and the shop's Add to cart
   buttons follow Style & Buttons, like .btn--primary. Other WooCommerce buttons
   (Update cart, Apply coupon…) are outline buttons. */

#page :is(a.button, button.button, input.button, #respond input#submit),
#page .wc-block-components-button:not(.is-link) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65em 1.4em;
  border: 2px solid var(--color-primary);
  border-radius: var(--button-radius);
  background: transparent;
  color: var(--color-primary);
  font-family: var(--font-button);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-button);
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

#page :is(a.button, button.button, input.button, #respond input#submit):is(:hover, :focus-visible) {
  background: var(--color-primary);
  color: var(--color-accent);
}

#page :is(a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, li.product .add_to_cart_button, li.product a.button.product_type_variable, li.product a.button.product_type_grouped, li.product a.button.product_type_external),
#page .wc-block-components-button:not(.is-link):not(.outlined) {
  border-color: var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-text);
}

#page :is(a.button.alt, button.button.alt, input.button.alt, #respond input#submit.alt, li.product .add_to_cart_button, li.product a.button.product_type_variable, li.product a.button.product_type_grouped, li.product a.button.product_type_external):is(:hover, :focus-visible),
#page .wc-block-components-button:not(.is-link):not(.outlined):is(:hover, :focus-visible) {
  border-color: var(--btn-border-hover);
  background: var(--btn-bg-hover);
  color: var(--btn-text-hover);
  transform: var(--btn-transform-hover);
  box-shadow: var(--btn-shadow-hover);
}

.wavepress-btn-upper #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button:not(.is-link)) {
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

#page :is(a.button, button.button, input.button):is(.disabled, :disabled) {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Spinner while adding: WooCommerce's icon, in the button's text colour */
#page :is(a.button, button.button).loading {
  opacity: 0.7;
  padding-right: 2.6em;
}

#page :is(a.button, button.button).loading::after {
  top: auto;
  right: 0.9em;
}

/* "View cart" link that appears after adding from the shop */
#page a.added_to_cart {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

/* ── 2. Prices, sale badge, ratings ────────────────────────────────────────── */

#page :is(.price, .amount) {
  color: inherit;
}

#page :is(p.price, span.price) {
  color: var(--color-text);
  font-weight: 600;
}

#page .price del {
  margin-right: 0.35em;
  color: var(--color-text-muted);
  font-weight: 400;
  opacity: 1;
}

#page .price ins {
  text-decoration: none;
  font-weight: 700;
}

#page span.onsale {
  top: 0.75rem;
  left: 0.75rem;
  right: auto;
  z-index: 3;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0.4em 0.75em;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-accent);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

#page :is(.star-rating, p.stars a) {
  color: var(--color-primary);
}

#page .star-rating::before {
  color: color-mix(in srgb, var(--color-text) 25%, transparent);
  opacity: 1;
}

/* ── 3. Notices, breadcrumbs, store notice ─────────────────────────────────── */

#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.mini-cart :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  --notice: var(--color-primary);
  margin: 0 0 var(--space-lg);
  padding: var(--space-md) var(--space-lg) var(--space-md) 3.25rem;
  border: 0;
  border-left: 4px solid var(--notice);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--notice) 8%, var(--color-bg));
  color: var(--color-text);
  list-style: none;
}

#page .woocommerce-error {
  --notice: #b3261e;
}

#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  top: var(--space-md);
  left: 1.25rem;
  color: var(--notice);
}

#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) li {
  margin: 0;
}

#page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a:not(.button) {
  color: inherit;
  font-weight: 600;
}

#page :is(.woocommerce-message, .woocommerce-info) .button {
  float: right;
  margin: -0.35em 0 -0.35em var(--space-md);
  padding: 0.4em 1em;
  font-size: var(--font-size-sm);
}

/* Phones: a notice's button goes under its text instead of squeezing it */
@media (max-width: 600px) {
  #page :is(.woocommerce-message, .woocommerce-info):has(> .button) {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  #page :is(.woocommerce-message, .woocommerce-info) > .button {
    float: none;
    margin: 0;
  }
}

#page .woocommerce-error:focus {
  outline: 2px solid var(--notice);
  outline-offset: 2px;
}

/* Product pages: Home / Category / Product above the product */
#page .woocommerce-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0;
  margin: 0 0 var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

#page .woocommerce-breadcrumb a {
  color: inherit;
  text-decoration: none;
}

#page .woocommerce-breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.woocommerce-breadcrumb__sep {
  margin-inline: 0.6em;
  opacity: 0.6;
}

/* Store notice (Customizer > WooCommerce > Store Notice) */
p.demo_store,
.woocommerce-store-notice {
  background: var(--color-primary);
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
}

.woocommerce-store-notice a {
  color: inherit;
}

/* ── 4. Forms and quantity ─────────────────────────────────────────────────── */

#page :is(.woocommerce form .form-row, .woocommerce-page form .form-row) :is(.input-text, select, textarea),
#page :is(.woocommerce-ordering select, .variations select, .coupon .input-text, #review_form textarea, #review_form input[type="text"], #review_form input[type="email"]) {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.6em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  line-height: 1.4;
}

#page :is(.woocommerce-ordering select, .variations select) {
  width: auto;
  max-width: 100%;
  padding-right: 2.25em;
}

#page :is(input, select, textarea):focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

#page .woocommerce form .form-row label {
  margin-bottom: 0.25rem;
  font-weight: 600;
  line-height: 1.4;
}

#page .woocommerce form .form-row .required {
  color: #b3261e;
  text-decoration: none;
}

/* Select2 (country / state boxes on classic checkout) */
#page .select2-container--default .select2-selection--single {
  height: 2.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
}

#page .select2-container--default .select2-selection--single .select2-selection__rendered {
  display: flex;
  align-items: center;
  height: 100%;
  padding-block: 0;
  padding-inline: 0.8em;
  color: var(--color-text);
  line-height: 1.4;
}

#page .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.65rem;
}

/* Quantity: − [ 2 ] +  (buttons added by woocommerce.js) */
#page .quantity .qty {
  width: 4em;
  min-height: 2.75rem;
  padding: 0.5em 0.25em;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  color: var(--color-text);
  font: inherit;
  text-align: center;
}

#page .quantity.has-buttons {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: var(--color-bg);
  overflow: hidden;
}

#page .quantity.has-buttons .qty {
  width: 3em;
  border: 0;
  border-radius: 0;
  -moz-appearance: textfield;
  appearance: textfield;
}

#page .quantity.has-buttons .qty::-webkit-outer-spin-button,
#page .quantity.has-buttons .qty::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.qty-btn {
  width: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}

.qty-btn:hover,
.qty-btn:focus-visible {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

/* ── 5. Product grid ──────────────────────────────────────────────────────────
   A CSS grid instead of WooCommerce's floats. Columns follow Customizer >
   WooCommerce > Product Catalogue (or the shortcode/block); two on phones. */

#page .woocommerce-products-header,
#page .term-description {
  margin-bottom: var(--space-lg);
}

/* With the title banner on, the header is left empty */
#page .woocommerce-products-header:not(:has(*)) {
  display: none;
}

#page .woocommerce-products-header__title {
  margin-bottom: var(--space-sm);
}

#page :is(.woocommerce-result-count, .woocommerce-ordering) {
  margin: 0 0 var(--space-xl);
}

#page .woocommerce-result-count {
  padding-top: 0.6em;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

#page ul.products {
  --columns: 4;
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-lg);
  clear: both;
  margin: 0 0 var(--space-2xl);
  padding: 0;
  list-style: none;
}

#page ul.products::before,
#page ul.products::after {
  display: none;
}

#page ul.products.columns-1 { --columns: 1; }
#page ul.products.columns-2 { --columns: 2; }
#page ul.products.columns-3 { --columns: 3; }
#page ul.products.columns-4 { --columns: 4; }
#page ul.products.columns-5 { --columns: 5; }
#page ul.products.columns-6 { --columns: 6; }

#page ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  text-align: left;
}

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

#page ul.products li.product img {
  width: 100%;
  margin: 0 0 var(--space-md);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#page ul.products li.product a:hover img {
  opacity: 0.9;
}

/* Product and category names in the body font, bold */
#page ul.products li.product :is(.woocommerce-loop-product__title, .woocommerce-loop-category__title, h2, h3) {
  margin: 0 0 0.35rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Product Catalogue > "Product card text: Centred": name, rating and price centred */
.wavepress-cards-center #page ul.products li.product {
  text-align: center;
}

.wavepress-cards-center #page ul.products li.product .star-rating {
  float: none;
  margin-inline: auto;
}

#page ul.products li.product .star-rating {
  margin: 0 0 0.4rem;
  font-size: 0.8em;
}

#page ul.products li.product .price {
  display: block;
  margin: 0 0 var(--space-md);
  font-size: 1rem;
}

/* Buttons line up along the bottom of each row */
#page ul.products li.product .button {
  width: 100%;
  margin-top: auto;
}

#page ul.products li.product .onsale {
  top: 0.6rem;
  left: 0.6rem;
  right: auto;
  margin: 0;
}

#page ul.products li.product-category mark {
  background: none;
  color: var(--color-text-muted);
  font-weight: 400;
}

@media (max-width: 900px) {
  #page ul.products:not(.columns-1) {
    --columns: 3;
  }
}

@media (max-width: 768px) {
  #page ul.products:not(.columns-1) {
    --columns: 2;
    gap: var(--space-xl) var(--space-md);
  }

  #page ul.products li.product :is(.woocommerce-loop-product__title, h2, h3) {
    font-size: 0.95rem;
  }

  #page ul.products li.product .button {
    padding-inline: 0.75em;
    font-size: var(--font-size-sm);
  }

  #page :is(.woocommerce-result-count, .woocommerce-ordering) {
    float: none;
    margin-bottom: var(--space-md);
  }

  #page .woocommerce-ordering select {
    width: 100%;
  }
}

/* ── Grid / list view (inc/shop-view.php) ──────────────────────────────────────
   The buttons beside Sort, and the list rows. List view is on when <html> has
   .wavepress-view-list (the visitor's choice, set in <head>), or the List default is
   on and they haven't picked Grid. Only the main listing switches
   (.products--switchable); related products and shortcodes stay as grids. */
.shop-view {
  display: inline-flex;
  gap: 4px;
  float: right;
  margin: 0 0 var(--space-xl) var(--space-sm);
}

.shop-view[hidden] {
  display: none;
}

.shop-view__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.shop-view__button .wavepress-icon {
  width: 18px;
  height: 18px;
}

.shop-view__button:hover {
  color: var(--color-text);
}

.shop-view__button[aria-pressed="true"] {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-text);
}

/* In the product filters' bar it's one more item in the row, after Sort */
#page .shop-filters-bar .shop-view {
  order: 1;
  float: none;
  margin: 0;
}

/* Only list rows show the SKU line and short description */
#page ul.products li.product :is(.product-list__code, .product-list__excerpt) {
  display: none;
}

/* Category tiles keep the grid (they're navigation, and a list of big category
   pictures was huge); each product row spans every column. Only products: */
:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product:not(.product-category) {
  grid-column: 1 / -1;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable {
  row-gap: var(--space-sm);
}

/* Shop showing categories and products: the tiles keep their grid spacing */
:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product-category {
  margin-bottom: calc(var(--space-2xl) - var(--space-sm));
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product:not(.product-category) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-sm);
  padding-right: var(--space-md);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 5%, var(--color-bg));
  text-align: left;
  transition: background-color 0.15s ease;
}

/* The whole row is the link: a light Primary tint while it's pointed at or focused */
:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product:has(a.woocommerce-LoopProduct-link:is(:hover, :focus-visible)) {
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
}

/* Image in a white box on the left, then the name, code and the rest */
:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product a.woocommerce-LoopProduct-link {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  grid-auto-flow: row dense;
  align-content: center;
  column-gap: var(--space-lg);
  flex: 1 1 20rem;
  min-width: 0;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product a.woocommerce-LoopProduct-link > img {
  grid-column: 1;
  grid-row: 1 / span 6;
  align-self: center;
  width: 120px;
  height: 120px;
  margin: 0;
  padding: 6px;
  border-radius: calc(var(--border-radius) * 0.75);
  background: #fff;
  object-fit: contain;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product a.woocommerce-LoopProduct-link > :not(img) {
  grid-column: 2;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product :is(.product-list__code, .product-list__excerpt) {
  display: block;
}

.product-list__code {
  margin: 0 0 0.35rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.product-list__excerpt {
  display: -webkit-box;
  margin: 0 0 0.35rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product .price {
  margin: 0;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product :is(.button, .added_to_cart) {
  flex: none;
  width: auto;
  margin: 0;
}

:is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product .star-rating {
  float: none;
  margin-inline: 0;
}

@media (max-width: 768px) {
  /* Sort fills the row beside the buttons */
  #page .shop-view {
    margin-bottom: var(--space-md);
  }

  #page .shop-view + .woocommerce-ordering {
    overflow: hidden;
  }

  /* Compact rows: a small image beside the name and code; price and button under them */
  :is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product a.woocommerce-LoopProduct-link {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: var(--space-md);
    flex-basis: 100%;
  }

  :is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product a.woocommerce-LoopProduct-link > img {
    width: 72px;
    height: 72px;
    padding: 4px;
  }

  :is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product :is(.button, .added_to_cart) {
    margin-left: calc(72px + var(--space-md));
  }

  /* Computers and tablets only (the setting says so) */
  :is(.wavepress-view-list, :not(.wavepress-view-grid) > .wavepress-list-default) #page ul.products--switchable li.product .product-list__excerpt {
    display: none;
  }
}

/* Page numbers, same look as the blog */
#page nav.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  border: 0;
  margin: 0;
}

#page nav.woocommerce-pagination ul li {
  float: none;
  border: 0;
  overflow: visible;
}

#page nav.woocommerce-pagination ul li .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 0.6rem;
  border-radius: max(var(--border-radius), 4px);
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

#page nav.woocommerce-pagination ul li a.page-numbers:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--color-primary) 15%, transparent);
  color: var(--color-primary);
}

#page nav.woocommerce-pagination ul li span.current {
  background: var(--color-primary);
  color: var(--color-accent);
}

/* ── 6. Single product ────────────────────────────────────────────────────────
   Gallery and summary side by side on a grid in .product-main (gallery left, or
   right with body.wavepress-gallery-right). Tabs, upsells and related products
   follow below. With "Keep the shorter side in view", both columns are
   sticky: the shorter one stays put while the longer one scrolls. */

#page div.product .product-main {
  --product-gap: clamp(1.5rem, 4vw, 3.5rem);
  --product-sticky-top: 1.5rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "gallery summary";
  column-gap: var(--product-gap);
  align-items: start;
}

.wavepress-header-fixed #page div.product .product-main {
  --product-sticky-top: calc(var(--header-offset) + var(--admin-bar-offset) + 1.5rem);
}

.wavepress-gallery-right #page div.product .product-main {
  grid-template-areas: "summary gallery";
}

/* The gallery column (.product-media): sale badge, images, then anything placed
   "Under the gallery" in the layout builder.
   (#content too: WooCommerce's own widths use .woocommerce-page #content div.product …) */
#page #content div.product .product-main > .product-media {
  grid-area: gallery;
  position: relative;
  min-width: 0;
}

#page #content div.product .product-media > .woocommerce-product-gallery,
#page #content div.product .product-media > div.images {
  float: none;
  width: auto;
  margin: 0;
}

#page div.product .product-media > :is(.woocommerce-product-gallery, div.images) ~ * {
  margin-top: var(--space-md);
}

#page #content div.product .product-main > .summary {
  grid-area: summary;
  float: none;
  width: auto;
  margin: 0;
}

/* The sale badge sits on the gallery, whichever side that's on */
#page div.product .product-media > span.onsale {
  position: absolute;
  z-index: 5;
  top: 0.75rem;
  left: 0.75rem;
}

/* Gallery above the details, in one centred column (Product Page > Gallery position) */
.wavepress-gallery-stacked #page div.product .product-main {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "gallery" "summary";
  row-gap: var(--space-xl);
  max-width: 640px;
  margin-inline: auto;
}

/* Custom blocks (Product Page > Layout) */
.product-custom-block {
  margin: 0 0 var(--space-lg);
}

#page div.product > .product-custom-block {
  margin-top: var(--space-2xl);
}

@media (min-width: 769px) {
  /* #content: must outrank the gallery column's position: relative above, or the
     sticky offset just pushes the gallery down instead */
  .wavepress-product-sticky:not(.wavepress-gallery-stacked) #page #content div.product .product-main > :is(.product-media, .summary) {
    position: sticky;
    top: var(--product-sticky-top);
  }
}

/* Reviews hidden in the Customizer: keep the stars, drop the "(3 customer reviews)" link */
.wavepress-reviews-hidden #page div.product .woocommerce-review-link {
  display: none;
}

/* Gallery */
#page div.product .woocommerce-product-gallery__image img,
#page div.product .woocommerce-product-gallery__image--placeholder img {
  border-radius: var(--border-radius);
}

#page div.product .flex-viewport {
  border-radius: var(--border-radius);
}

#page div.product .flex-control-thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: var(--space-sm) 0 0;
  padding: 0;
}

#page div.product .flex-control-thumbs::before,
#page div.product .flex-control-thumbs::after {
  display: none;
}

#page div.product .flex-control-thumbs li {
  float: none;
  width: auto;
  margin: 0;
}

#page div.product .flex-control-thumbs img {
  border-radius: var(--border-radius);
  opacity: 0.55;
  transition: opacity 0.15s ease;
}

#page div.product .flex-control-thumbs img:is(:hover, .flex-active) {
  opacity: 1;
}

#page .woocommerce-product-gallery__trigger {
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  background: var(--color-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

/* Summary */
#page div.product .product_title {
  margin-bottom: var(--space-sm);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
}

#page div.product .woocommerce-product-rating {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-sm);
}

#page div.product .woocommerce-product-rating .star-rating {
  float: none;
  margin: 0;
}

#page div.product .woocommerce-review-link {
  color: var(--color-text-muted);
}

#page div.product .summary p.price {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}

#page div.product .woocommerce-product-details__short-description {
  margin-bottom: var(--space-lg);
}

#page div.product .stock {
  font-weight: 600;
}

#page div.product .stock.in-stock {
  color: #1e7d32;
}

#page div.product .stock.out-of-stock {
  color: #b3261e;
}

/* Quantity and Add to cart on one row */
#page div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

#page div.product form.cart::before,
#page div.product form.cart::after {
  display: none;
}

#page div.product form.cart .quantity {
  float: none;
  margin: 0;
}

#page div.product form.cart .single_add_to_cart_button {
  flex: 1 1 12rem;
  float: none;
}

/* Variable products: the options table, then quantity + button */
#page div.product form.cart:is(.variations_form, .grouped_form) {
  display: block;
}

#page div.product form.cart .variations {
  width: 100%;
  margin-bottom: var(--space-md);
  border: 0;
}

#page div.product form.cart .variations :is(th, td) {
  display: block;
  padding: 0;
  border: 0;
  text-align: left;
  line-height: 1.4;
}

#page div.product form.cart .variations th label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
}

#page div.product form.cart .variations td {
  padding-bottom: var(--space-md);
}

#page div.product form.cart .variations select {
  width: 100%;
  margin: 0;
}

#page div.product form.cart .reset_variations {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: var(--font-size-sm);
}

#page div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

/* The chosen option's price and stock ("28 in stock") appear under the button,
   so picking a size or colour doesn't push the quantity and button down */
#page div.product form.cart .single_variation_wrap {
  display: flex;
  flex-direction: column;
}

#page div.product form.cart .single_variation_wrap > .woocommerce-variation-add-to-cart {
  order: 1;
}

#page div.product form.cart .single_variation_wrap > .woocommerce-variation {
  order: 2;
  margin-top: var(--space-sm);
}

#page div.product form.cart .woocommerce-variation > div {
  display: inline;
}

#page div.product form.cart .woocommerce-variation-price .price {
  display: inline;
  margin: 0 0.6rem 0 0;
  font-size: 1rem;
}

#page div.product form.cart .woocommerce-variation-availability .stock,
#page div.product form.cart > .stock {
  display: inline;
  margin: 0;
  font-size: var(--font-size-sm);
}

#page div.product form.cart .woocommerce-variation-description p {
  margin: var(--space-xs) 0 0;
  font-size: var(--font-size-sm);
}

/* Simple products: the stock line moves inside the form, under the button */
#page div.product form.cart > .stock {
  display: block;
  flex-basis: 100%;
}

#page div.product .product_meta {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

#page div.product .product_meta > span {
  display: block;
  margin-bottom: 0.2rem;
}

#page div.product .product_meta a {
  color: inherit;
}

/* Shipping / returns / secure lines, and payment icons */
.product-notes {
  margin: 0 0 var(--space-lg);
}

.product-notes__list {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.product-notes__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
}

.product-notes__item .wavepress-icon {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  color: var(--color-primary);
}

.payment-icons__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-icons__item {
  display: inline-flex;
  color: var(--color-text-muted);
}

.payment-icons__item .wavepress-icon {
  width: 2.1rem;
  height: 1.5rem;
}

/* Tabs: a simple underlined row */
#page div.product .woocommerce-tabs {
  margin-top: var(--space-3xl);
}

#page div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: var(--space-xs);
  margin: 0 0 var(--space-xl);
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
  scrollbar-width: none;
}

/* #content: WooCommerce's clearfix (.woocommerce #content … ul.tabs::before) outweighed
   it, so its own grey line showed over the theme's border and the active underline */
#page #content div.product .woocommerce-tabs ul.tabs::before {
  display: none;
}

#page div.product .woocommerce-tabs ul.tabs li {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

#page div.product .woocommerce-tabs ul.tabs li::before,
#page div.product .woocommerce-tabs ul.tabs li::after {
  display: none;
}

#page div.product .woocommerce-tabs ul.tabs li a {
  display: block;
  margin-bottom: -1px;
  padding: 0.75rem 1rem;
  border-bottom: 2px solid transparent;
  color: var(--color-text-muted);
  font-family: var(--font-nav);
  font-weight: 600;
  text-decoration: none;
}

#page div.product .woocommerce-tabs ul.tabs li a:hover {
  color: var(--color-text);
}

#page div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-color: var(--color-primary);
  color: var(--color-text);
}

#page div.product .woocommerce-tabs .panel {
  max-width: var(--content-width);
  margin: 0;
}

/* No headings repeating the tab name: Description / Additional information have
   theirs switched off (inc/woocommerce.php); this catches Reviews ("2 reviews for…")
   and any plugin tab that adds one. The review form's "Add a review" stays. */
#page div.product :is(.woocommerce-tabs .panel, .product-accordion__panel) > h2:first-child,
#page div.product #reviews .woocommerce-Reviews-title {
  display: none;
}

/* Accordion (Product Page > "Accordion under Add to cart") */
.product-accordion {
  margin: 0 0 var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.product-accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.product-accordion__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-family: var(--font-nav);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.product-accordion__title::-webkit-details-marker {
  display: none;
}

/* Chevron, turning when open */
.product-accordion__title::after {
  content: "";
  flex: none;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.25em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.product-accordion__item[open] > .product-accordion__title::after {
  transform: translateY(25%) rotate(-135deg);
}

.product-accordion__title:hover {
  color: var(--color-primary);
}

.product-accordion__panel {
  padding-bottom: var(--space-lg);
}

/* Phones: the tabs become an accordion like the one above (the strip of tabs was
   wider than the screen, so Reviews was off to the right). Same markup and
   WooCommerce's own tab script: the tab list dissolves (display: contents) and each
   tab is ordered in above its panel, so a tap opens that section and closes the
   one that was open; shop.js lets a tap on the open one close it. Links to #reviews
   still open Reviews (WooCommerce does that), now in place. One section left (Show
   tickboxes): just its heading, open, no chevron. */
@media (max-width: 768px) {
  #page div.product .woocommerce-tabs {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--color-border);
  }

  #page div.product .woocommerce-tabs > * {
    order: 99;   /* anything a plugin adds after the panels stays after them */
  }

  #page div.product .woocommerce-tabs ul.tabs {
    display: contents;
  }

  #page div.product .woocommerce-tabs ul.tabs li {
    border-bottom: 1px solid var(--color-border);
  }

  #page div.product .woocommerce-tabs ul.tabs li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 44px;
    margin: 0;
    padding: var(--space-md) 0;
    border: 0;
    color: var(--color-text);
  }

  #page div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--color-primary);
  }

  /* Chevron, as on .product-accordion__title */
  #page div.product .woocommerce-tabs ul.tabs li a::after {
    content: "";
    flex: none;
    width: 0.5em;
    height: 0.5em;
    margin-right: 0.25em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  #page div.product .woocommerce-tabs ul.tabs li.active a::after {
    transform: translateY(25%) rotate(-135deg);
  }

  #page div.product .woocommerce-tabs ul.tabs li:only-child a {
    pointer-events: none;
  }

  #page div.product .woocommerce-tabs ul.tabs li:only-child a::after {
    display: none;
  }

  #page div.product .woocommerce-tabs .panel {
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-border);
  }

  /* Tab n above panel n (WooCommerce has 3; room for plugin tabs) */
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(1) { order: 1; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(1) { order: 2; }
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(2) { order: 3; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(2) { order: 4; }
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(3) { order: 5; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(3) { order: 6; }
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(4) { order: 7; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(4) { order: 8; }
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(5) { order: 9; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(5) { order: 10; }
  #page div.product .woocommerce-tabs ul.tabs li:nth-child(6) { order: 11; }
  #page div.product .woocommerce-tabs > .panel:nth-of-type(6) { order: 12; }

  #page div.product .woocommerce-tabs ul.tabs li.active {
    border-bottom: 0;   /* the open section is closed off by its panel's line */
  }

  /* body: to outweigh the Cartoon tab underline further down */
  body.wavepress-btn-cartoon #page div.product .woocommerce-tabs ul.tabs li.active a {
    border-bottom-width: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    #page div.product .woocommerce-tabs ul.tabs li a::after {
      transition: none;
    }
  }
}

/* Reviews */
#page #reviews #comments ol.commentlist {
  margin: 0 0 var(--space-xl);
  padding: 0;
}

#page #reviews #comments ol.commentlist li img.avatar {
  width: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
}

#page #reviews #comments ol.commentlist li .comment-text {
  margin-left: 56px;
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

#page #reviews #comments ol.commentlist li .comment-text p.meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

#page #review_form #respond {
  padding: var(--space-lg);
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

/* Related products and upsells */
#page div.product :is(.related, .upsells) {
  margin-top: var(--space-3xl);
}

#page div.product :is(.related, .upsells) > h2 {
  margin-bottom: var(--space-lg);
  font-size: 1.5rem;
}

@media (max-width: 768px) {
  #page div.product .product-main,
  .wavepress-gallery-right #page div.product .product-main {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "gallery" "summary";
    row-gap: var(--space-xl);
  }

  #page div.product .flex-control-thumbs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  #page div.product .woocommerce-tabs {
    margin-top: var(--space-2xl);
  }
}

/* ── Product page style: Showcase (Product Page Layout > Product page style) ──
   A narrower centred page, a framed main image with arrows, a small thumbnail
   strip, a large title, a "Qty:" label, and the description / reviews as open
   sections with headings (wavepress_product_sections()). */
.wavepress-product-showcase #page div.product {
  max-width: 960px;
  margin-inline: auto;
}

.wavepress-product-showcase #page div.product .product-main {
  --product-gap: 2rem;
}

.wavepress-product-showcase #page div.product .woocommerce-product-gallery {
  position: relative;
}

.wavepress-product-showcase #page div.product :is(.flex-viewport, .woocommerce-product-gallery__wrapper:only-child) {
  border: 2px solid color-mix(in srgb, var(--color-text) 18%, transparent);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.wavepress-product-showcase #page div.product .woocommerce-product-gallery__image img {
  border-radius: 0;
}

/* Small thumbnail strip */
.wavepress-product-showcase #page div.product .flex-control-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}

.wavepress-product-showcase #page div.product .flex-control-thumbs li {
  width: 52px;
}

.wavepress-product-showcase #page div.product .flex-control-thumbs img {
  opacity: 1;
  border: 2px solid transparent;
  border-radius: calc(var(--border-radius) / 2);
}

.wavepress-product-showcase #page div.product .flex-control-thumbs img.flex-active,
.wavepress-product-showcase #page div.product .flex-control-thumbs img:hover {
  border-color: var(--color-primary);
}

/* Arrows on the main image */
.wavepress-product-showcase #page div.product .flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wavepress-product-showcase #page div.product .flex-direction-nav a {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  text-decoration: none;
  transition: background 0.15s ease;
}

.wavepress-product-showcase #page div.product .flex-direction-nav a:is(:hover, :focus-visible) {
  background: rgba(0, 0, 0, 0.7);
}

.wavepress-product-showcase #page div.product .flex-direction-nav a::before {
  font-size: 1rem;
  line-height: 1;
}

.wavepress-product-showcase #page div.product .flex-direction-nav .flex-prev { left: 0.5rem; }
.wavepress-product-showcase #page div.product .flex-direction-nav .flex-next { right: 0.5rem; }
.wavepress-product-showcase #page div.product .flex-direction-nav .flex-prev::before { content: "\276E"; }
.wavepress-product-showcase #page div.product .flex-direction-nav .flex-next::before { content: "\276F"; }

.wavepress-product-showcase #page div.product .flex-direction-nav .flex-disabled {
  display: none;
}

/* Summary */
.wavepress-product-showcase #page div.product .product_title {
  font-size: clamp(2rem, 1.3rem + 2.4vw, 3rem);
  line-height: 1.1;
  margin-bottom: var(--space-lg);
}

.wavepress-product-showcase #page div.product .summary p.price {
  font-size: 1.4rem;
  font-weight: 700;
}

.wavepress-product-showcase #page div.product .product-qty-label {
  align-self: center;
  margin-right: 0.5rem;
  font-size: var(--font-size-sm);
  font-weight: 700;
}

/* Description, reviews and info as open sections */
.wavepress-product-showcase #page div.product .product-section {
  margin-top: var(--space-2xl);
}

.wavepress-product-showcase #page div.product .product-section__title {
  margin-bottom: var(--space-md);
  font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem);
}

.wavepress-product-showcase #page div.product :is(.related, .upsells) > h2 {
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-primary);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

/* Sticky Add to cart bar (phones) */
.sticky-atc {
  display: none;
}

@media (max-width: 768px) {
  .sticky-atc:not([hidden]) {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 0.6rem var(--gutter) calc(0.6rem + env(safe-area-inset-bottom));
    background: var(--color-bg);
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
  }

  @media (prefers-reduced-motion: no-preference) {
    .sticky-atc:not([hidden]) {
      animation: wavepress-slide-up 0.2s ease-out;
    }
  }

  /* Above the mobile action bar when that's on */
  .wavepress-has-action-bar .sticky-atc:not([hidden]) {
    bottom: calc(3.75rem + 1px + env(safe-area-inset-bottom));
    padding-bottom: 0.6rem;
  }

  .sticky-atc__product {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
  }

  .sticky-atc__image {
    width: 2.75rem;
    height: 2.75rem;
    flex: none;
    object-fit: cover;
    border-radius: var(--border-radius);
  }

  .sticky-atc__text {
    min-width: 0;
  }

  .sticky-atc__name,
  .sticky-atc__price {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: var(--font-size-sm);
    line-height: 1.3;
  }

  .sticky-atc__name {
    font-weight: 600;
  }

  .sticky-atc__price del {
    color: var(--color-text-muted);
  }

  .sticky-atc__price ins {
    text-decoration: none;
  }

  .sticky-atc__btn {
    flex: none;
    padding-inline: 1.1em;
    white-space: nowrap;
  }

  /* Back-to-top button moves up out of the way */
  .wavepress-sticky-atc-visible .back-to-top {
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
  }

  .wavepress-sticky-atc-visible.wavepress-has-action-bar .back-to-top {
    bottom: calc(3.75rem + 1px + 4.5rem + env(safe-area-inset-bottom));
  }
}

@keyframes wavepress-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* ── 7. Tables, cart, checkout, account (classic shortcodes) ───────────────── */

#page table.shop_table {
  margin-bottom: var(--space-xl);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  border-collapse: separate;
}

#page table.shop_table :is(th, td) {
  padding: var(--space-sm) var(--space-md);
  border-color: var(--color-border);
}

#page table.shop_table th {
  font-weight: 600;
}

#page table.shop_table img {
  width: 64px;
  border-radius: var(--border-radius);
}

#page table.shop_table a.remove {
  color: var(--color-text-muted) !important;   /* WooCommerce sets red with !important */
  font-weight: 400;
}

#page table.shop_table a.remove:hover {
  background: color-mix(in srgb, #b3261e 12%, transparent);
  color: #b3261e !important;
}

/* Checkout headings in the body font, bold (classic checkout and the Checkout block) */
#page :is(.woocommerce-checkout, .wp-block-woocommerce-checkout) :is(h2, h3, .wc-block-components-title, .wc-block-components-checkout-step__title, .wc-block-components-checkout-order-summary__title-text) {
  font-family: var(--font-body);
  font-weight: 700;
}

#page .cart-collaterals .cart_totals h2,
#page #order_review_heading,
#page .woocommerce-billing-fields h3,
#page .woocommerce-shipping-fields h3,
#page .woocommerce-additional-fields h3 {
  font-size: 1.35rem;
}

#page #payment {
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 4%, transparent);
}

#page #payment div.payment_box {
  border-radius: var(--border-radius);
  background: color-mix(in srgb, var(--color-text) 7%, transparent);
  color: var(--color-text);
}

#page #payment div.payment_box::before {
  border-bottom-color: color-mix(in srgb, var(--color-text) 7%, transparent);
}

/* "Shipping address same as billing" (classic checkout) */
#page .wavepress-same-address {
  margin: var(--space-lg) 0 var(--space-md);
}

#page .wavepress-same-address label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  cursor: pointer;
}

#page .wavepress-same-address input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  accent-color: var(--color-primary);
}

/* My account: the menu as a list of links, the current one highlighted */
#page .woocommerce-MyAccount-navigation ul {
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

#page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--border-radius);
  color: var(--color-text);
  text-decoration: none;
}

#page .woocommerce-MyAccount-navigation li a:hover {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
}

#page .woocommerce-MyAccount-navigation li.is-active a {
  background: var(--color-primary);
  color: var(--color-accent);
}

/* Order status badges (orders list, latest order card) */
#page .wavepress-status {
  --status: var(--color-text);
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--status) 14%, transparent);
  color: color-mix(in srgb, var(--status) 85%, var(--color-text));
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

#page .wavepress-status--completed { --status: #1f7a3d; }
#page .wavepress-status--processing { --status: var(--color-primary); }
#page :is(.wavepress-status--on-hold, .wavepress-status--pending, .wavepress-status--checkout-draft) { --status: #9a6400; }
#page :is(.wavepress-status--failed, .wavepress-status--cancelled) { --status: #b42318; }
#page .wavepress-status--refunded { --status: color-mix(in srgb, var(--color-text) 60%, var(--color-bg)); }

/* Phone-only "app style" header (inc/woocommerce-account.php): hidden on computers */
#page .account-app {
  display: none;
}

@media (max-width: 768px) {
  #page .account-app {
    display: block;
  }

  /* WooCommerce's menu and dashboard text give way to the app header */
  .wavepress-account #page .woocommerce-MyAccount-navigation,
  .wavepress-account--dashboard #page .woocommerce-MyAccount-content > p {
    display: none;
  }

  #page .account-app--dashboard {
    display: grid;
    gap: var(--space-md);
  }

  #page .account-app__hello {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 1.6rem;
    line-height: 1.2;
  }

  /* Latest order card */
  #page .account-app__order {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--color-bg));
  }

  #page .account-app__order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  #page .account-app__order-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted, inherit);
  }

  #page .account-app__order-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    margin: 0;
  }

  #page .account-app__order-view {
    justify-self: stretch;
    text-align: center;
  }

  /* Section rows */
  #page .account-app__rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    overflow: hidden;
  }

  #page .account-app__rows li + li {
    border-top: 1px solid var(--color-border);
  }

  #page .account-app__row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 3.25rem;
    padding: 0.75rem var(--space-md);
    color: var(--color-text);
    text-decoration: none;
    font-weight: 600;
  }

  #page .account-app__row:is(:hover, :focus-visible) {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  }

  #page .account-app__row:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
  }

  #page .account-app__icon {
    display: inline-flex;
    flex: none;
    color: var(--color-primary);
  }

  #page .account-app__icon svg {
    width: 1.15rem;
    height: 1.15rem;
  }

  #page .account-app__label {
    flex: 1;
  }

  #page .account-app__chevron {
    display: inline-flex;
    opacity: 0.45;
  }

  #page .account-app__chevron svg {
    width: 0.8rem;
    height: 0.8rem;
  }

  #page .account-app__row--logout {
    margin-top: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    font-weight: 400;
  }

  /* Section pages: back link and title */
  #page .account-app--section {
    margin-bottom: var(--space-lg);
  }

  #page .account-app__back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.75rem;
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
  }

  #page .account-app__back svg {
    width: 0.75rem;
    height: 0.75rem;
  }

  #page .account-app__title {
    margin: 0.25rem 0 0;
    font-size: 1.6rem;
  }

  /* Orders: one card per order */
  #page table.shop_table.woocommerce-orders-table,
  #page .woocommerce-orders-table tbody {
    display: block;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  #page .woocommerce-orders-table thead {
    display: none;
  }

  #page .woocommerce-orders-table tr.woocommerce-orders-table__row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "number status"
      "date   total"
      "actions actions";
    gap: 0.35rem var(--space-sm);
    align-items: center;
    margin: 0 0 var(--space-sm);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    background: none;
  }

  #page .woocommerce-orders-table tr.woocommerce-orders-table__row > :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    background: none;
    text-align: left !important;   /* WooCommerce's small-screen table rule is !important too */
  }

  #page .woocommerce-orders-table tr.woocommerce-orders-table__row > :is(th, td)::before {
    display: none;
  }

  #page .woocommerce-orders-table__cell-order-number { grid-area: number; font-weight: 700; font-size: 1.05rem; }
  #page .woocommerce-orders-table__cell-order-number a { text-decoration: none; }
  #page .woocommerce-orders-table__cell-order-status { grid-area: status; justify-self: end; }
  #page .woocommerce-orders-table__cell-order-date { grid-area: date; color: var(--color-text-muted, inherit); font-size: var(--font-size-sm); }
  #page .woocommerce-orders-table__cell-order-total { grid-area: total; justify-self: end; font-size: var(--font-size-sm); }

  #page .woocommerce-orders-table__cell-order-actions {
    grid-area: actions;
    display: flex !important;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-xs);
  }

  #page .woocommerce-orders-table__cell-order-actions .button {
    flex: 1;
    margin: 0;
    text-align: center;
  }

  /* Addresses: two cards with an Edit button */
  #page .woocommerce-Addresses {
    display: grid;
    gap: var(--space-md);
  }

  #page .woocommerce-Addresses::before,
  #page .woocommerce-Addresses::after {
    display: none;
  }

  #page .woocommerce-Address {
    float: none;
    width: auto;
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
  }

  #page .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  #page .woocommerce-Address-title::before,
  #page .woocommerce-Address-title::after {
    display: none;
  }

  #page .woocommerce-Address-title :is(h2, h3) {
    margin: 0;
    font-size: 1.15rem;
  }

  #page .woocommerce-Address-title .edit {
    float: none;
    flex: none;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--color-primary);
    border-radius: var(--border-radius);
    color: var(--color-primary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-decoration: none;
  }

  #page .woocommerce-Address address {
    margin: 0;
    font-style: normal;
    text-align: center;
  }

  /* Headings centred on phones */
  #page :is(.account-app__hello, .account-app__title),
  .wavepress-account #page .woocommerce-MyAccount-content :is(h2, h3) {
    text-align: center;
  }

  .wavepress-account #page .woocommerce-MyAccount-content legend {
    margin-inline: auto;
    padding-inline: 0.5rem;
    text-align: center;
  }

  /* Address cards: title on top, address, then a full-width Edit button */
  #page .woocommerce-Address {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  #page .woocommerce-Address-title {
    display: contents;
  }

  #page .woocommerce-Address-title :is(h2, h3) {
    order: 1;
  }

  #page .woocommerce-Address address {
    order: 2;
  }

  /* Styled like the theme's WooCommerce buttons (outline) */
  #page .woocommerce-Address-title .edit {
    order: 3;
    display: flex;
    justify-content: center;
    margin-top: var(--space-xs);
    padding: 0.65em 1.4em;
    border: 2px solid var(--color-primary);
    border-radius: var(--button-radius);
    font-family: var(--font-button);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-button);
    line-height: 1.4;
    transition: background-color 0.15s ease, color 0.15s ease;
  }

  #page .woocommerce-Address-title .edit:is(:hover, :focus-visible) {
    background: var(--color-primary);
    color: var(--color-accent);
  }

  /* Save buttons on the account forms: full width with room above, like View */
  .wavepress-account #page .woocommerce-MyAccount-content form :is(button[type="submit"], .woocommerce-Button) {
    display: flex;
    width: 100%;
    margin: var(--space-lg) 0 0;
    text-align: center;
  }

  /* Order again etc. on a single order */
  .wavepress-account #page .woocommerce-MyAccount-content .order-again .button {
    display: flex;
    width: 100%;
    text-align: center;
  }
}

#page :is(.woocommerce-form-login, .woocommerce-form-register, .woocommerce-ResetPassword) {
  padding: var(--space-lg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

/* ── 8. Cart and Checkout blocks ───────────────────────────────────────────── */

#page :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) {
  font-family: var(--font-body);
}

#page :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) a:not(.wc-block-components-button) {
  color: var(--color-primary);
}

#page .wc-block-components-product-name {
  color: var(--color-text) !important;   /* beats the block's own link colour */
  font-weight: 600;
  text-decoration: none;
}

#page .wc-block-components-sale-badge {
  border-color: var(--color-primary);
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-accent);
}

#page :is(.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-components-textarea, .wc-blocks-components-select .wc-blocks-components-select__select) {
  border-color: var(--color-border);
  border-radius: var(--border-radius);
}

#page .wc-block-components-text-input.is-active input,
#page .wc-block-components-text-input input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

#page .wc-block-components-quantity-selector {
  border-radius: var(--border-radius);
}

#page .wc-block-components-quantity-selector::after {
  border-color: var(--color-border);
  border-radius: var(--border-radius);
}

#page .wc-block-components-radio-control__input:checked {
  border-color: var(--color-primary);
}

#page .wc-block-components-radio-control__input:checked::before {
  background: var(--color-primary);
}

#page .wc-block-components-checkbox .wc-block-components-checkbox__input:checked {
  border-color: var(--color-primary);
  background: var(--color-primary);
}

#page .wc-block-components-checkbox .wc-block-components-checkbox__mark {
  fill: var(--color-accent);
}

#page .wc-block-cart__submit-button,
#page .wc-block-components-checkout-place-order-button {
  width: 100%;
  min-height: 3.25rem;
}

/* The free shipping bar above the Cart / Checkout block */
#page .wavepress-freeship + :is(.wp-block-woocommerce-cart, .wp-block-woocommerce-checkout) {
  margin-top: 0;
}

/* ── 9. Cartoon button style ───────────────────────────────────────────────── */

.wavepress-btn-cartoon #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button:not(.is-link)) {
  border: 3px solid var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.wavepress-btn-cartoon #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button:not(.is-link)):not(.alt):not(.add_to_cart_button):not(.product_type_variable) {
  color: var(--ink);
}

.wavepress-btn-cartoon #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button:not(.is-link)):is(:hover, :focus-visible) {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink);
}

.wavepress-btn-cartoon #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button:not(.is-link)):active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--ink);
}

.wavepress-btn-cartoon #page ul.products li.product {
  padding: var(--space-sm) var(--space-sm) var(--space-md);
  border: 3px solid var(--ink);
  border-radius: var(--border-radius);
  box-shadow: 5px 5px 0 var(--ink);
  background: var(--color-bg);
}

.wavepress-btn-cartoon #page ul.products li.product img {
  border: 2px solid var(--ink);
}

.wavepress-btn-cartoon #page span.onsale {
  border: 2px solid var(--ink);
}

.wavepress-btn-cartoon #page :is(.woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce-ordering select, .variations select, .coupon .input-text, #review_form textarea, .quantity.has-buttons, .quantity .qty:not(.has-buttons .qty)) {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.wavepress-btn-cartoon #page :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  border: 3px solid var(--ink);
  border-left-width: 8px;
}

.wavepress-btn-cartoon #page div.product .woocommerce-product-gallery__image img,
.wavepress-btn-cartoon #page div.product .flex-viewport {
  border: 3px solid var(--ink);
}

/* With the slider, the frame goes round the slider, not each image inside it */
.wavepress-btn-cartoon #page div.product .flex-viewport .woocommerce-product-gallery__image img {
  border: 0;
}

.wavepress-btn-cartoon #page div.product .woocommerce-tabs ul.tabs li.active a {
  border-bottom-width: 4px;
  border-bottom-color: var(--ink);
}

.wavepress-btn-cartoon .sticky-atc {
  border-top: 3px solid var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  #page :is(a.button, button.button, input.button, #respond input#submit, .wc-block-components-button):is(:hover, :active) {
    transform: none !important;
  }
}

/* ── Dark backgrounds (.wavepress-dark-bg, inc/customizer.php) ────────────────
   The block checkout's fields are white by default, which left the site's light
   text (labels, typing) on white; WooCommerce's show-password eye is a black icon. */
.wavepress-dark-bg #page :is(.wc-block-components-text-input input, .wc-block-components-combobox .wc-block-components-combobox-control input, .wc-block-components-textarea, .wc-blocks-components-select .wc-blocks-components-select__select) {
  background-color: var(--color-bg);
  color: var(--color-text);
}

.wavepress-dark-bg #page .wc-blocks-components-select__container {
  background-color: var(--color-bg);
}

.wavepress-dark-bg #page :is(.wc-block-components-text-input label, .wc-blocks-components-select__label) {
  color: var(--color-text-muted);
}

.wavepress-dark-bg #page .show-password-input::before {
  filter: invert(1);
}