/* ==========================================================================
   JandJRoo — WooCommerce
   Product cards, shop archive + filters, single product, cart, checkout
   ========================================================================== */

/* --- Product grid ---------------------------------------------------------
   WooCommerce ships a float grid (li.product { float:left; width:22.05% }).
   Inside a CSS grid that percentage resolves against the track, not the row,
   which collapses every card. Neutralise the float layout first, then lay the
   grid out ourselves. Selectors are .woocommerce-prefixed to outrank Woo's.
   ------------------------------------------------------------------------ */
ul.products,
.woocommerce ul.products,
.woocommerce-page ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--gutter);
}

/* Woo's clearfix pseudo-elements become stray grid items — remove them. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after { content: none; display: none; }

/* woocommerce-smallscreen.css re-applies the float grid under 768px with
   `ul.products[class*=columns-] li.product { width:48%; float:left }`, so the
   reset has to carry the same attribute selector to outrank it. */
ul.products li.product,
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce ul.products[class*="columns-"] li.product:nth-child(2n),
.woocommerce-page ul.products[class*="columns-"] li.product:nth-child(2n) {
  float: none;
  clear: none;
  width: auto;
  margin: 0;
  padding: 0;
}

ul.products.columns-2, .woocommerce ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); }
ul.products.columns-3, .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }

/*
 * Count the columns from the row's own width, not the viewport's.
 *
 * The filter rail takes ~300px out of the row, so a flat four columns left
 * cards 158px wide between 1024px and 1280px — narrower than the two-column
 * cards on a phone. The max() sets each track to a quarter of the row, but
 * never below 210px, and auto-fill then drops to three or two columns on its
 * own. Four stays the ceiling, so wide screens are unchanged.
 */
ul.products.columns-4, .woocommerce ul.products.columns-4,
ul.products.columns-5, .woocommerce ul.products.columns-5 {
  grid-template-columns: repeat(auto-fill, minmax(max(210px, (100% - 3 * var(--gutter)) / 4), 1fr));
}

@media (max-width: 1199px) {
  ul.products.columns-5, .woocommerce ul.products.columns-5 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1023px) {
  ul.products.columns-4, .woocommerce ul.products.columns-4,
  ul.products.columns-5, .woocommerce ul.products.columns-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 749px) {
  ul.products.columns-3, .woocommerce ul.products.columns-3,
  ul.products.columns-4, .woocommerce ul.products.columns-4,
  ul.products.columns-5, .woocommerce ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Inside a slider the track owns the columns, not the grid. */
.slider__track ul.products,
.slider__track.products { display: contents; }

.product-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #fff;
  border: 1px solid var(--c-border);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.product-card:hover { border-color: var(--c-disabled); box-shadow: var(--shadow); }

.product-card__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-white);
}
/* Photographic catalogue imagery: fill the frame so every card crops to the
   same square. Swap to `contain` + padding for cut-out shots on white.
   Woo ships `.woocommerce ul.products li.product a img { height:auto;
   margin:0 0 1em }` — these selectors have to match it to win. */
.product-card__media img,
.woocommerce ul.products li.product a.product-card__media img,
.woocommerce-page ul.products li.product a.product-card__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
  transition: transform .4s var(--ease), opacity var(--dur) var(--ease);
}
.product-card:hover .product-card__media img { transform: scale(1.04); }

.product-card__media .img-alt {
  position: absolute; inset: 0;
  opacity: 0;
}
.product-card:hover .product-card__media .img-alt { opacity: 1; }

/* Badges read as one row and wrap only when they genuinely run out of room. */
.product-card__badges {
  position: absolute;
  top: 10px; left: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px;
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 7px;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--c-border);
}

.product-card__brand {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.product-card__title {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-snug);
}
.product-card__title a { color: var(--c-black); }
.product-card__title a:hover { text-decoration: underline; }

.product-card__price { margin-top: auto; padding-top: 4px; }

.price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-price);
}
.price del {
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  color: var(--c-was-price);
  text-decoration: line-through;
}
.price ins { text-decoration: none; color: var(--c-price); }

/*
 * WooCommerce sets ".woocommerce ul.products li.product .price del" to
 * color:inherit and "del" to opacity:.7, which together dropped the struck
 * price to roughly 2.3:1. Match its specificity and drop the opacity so the
 * accessible --c-was-price actually applies.
 */
.woocommerce ul.products li.product .price del,
.woocommerce div.product span.price del,
.product-card .price del,
.price del {
  color: var(--c-was-price);
  opacity: 1;
}
.price .from-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.product-card__save {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--c-sale);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.product-card__stock {
  font-size: var(--fs-xs);
  line-height: 1.45;
  display: flex;
  /*
   * Top-aligned, not centred: on a narrow card "In stock — for shipping contact store"
   * runs to two lines, and a centred dot then floats between them.
   */
  align-items: flex-start;
  gap: 6px;
}
.product-card__stock::before {
  content: "";
  width: 7px; height: 7px;
  margin-top: .38em;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--c-success);
}
.product-card__stock.is-out { color: var(--c-muted); }
.product-card__stock.is-out::before { background: var(--c-disabled); }
.product-card__stock.is-preorder::before { background: var(--c-price); }

.product-card__cta { margin-top: 10px; }
.product-card__cta .btn { width: 100%; }

/* Finance line (Afterpay / Zip style) */
.finance-line {
  font-size: var(--fs-xs);
  color: var(--c-muted);
  line-height: 1.5;
}
.finance-line strong { color: var(--c-black); font-weight: var(--fw-bold); }

/* --- Shop archive layout -------------------------------------------------- */
.shop-hero { padding-block: 34px 26px; border-bottom: 1px solid var(--c-border-soft); }
.shop-hero h1 { margin-bottom: 10px; text-transform: uppercase; }
.shop-hero__desc { max-width: 820px; font-size: var(--fs-sm); }
.shop-hero__desc p:last-child { margin-bottom: 0; }

.shop-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 44px;
  padding-block: 34px;
  align-items: start;
}
@media (max-width: 1023px) { .shop-layout { grid-template-columns: 1fr; gap: 0; } }

/*
 * On a small laptop the rail and its gap cost nearly a third of the row, which
 * is what pushed the product grid down to two columns there. Narrow both: the
 * filters still fit, and the grid gets a third column back.
 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .shop-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
}

.shop-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-border);
}
.woocommerce-result-count { margin: 0; font-size: var(--fs-sm); }
.woocommerce-ordering select { width: auto; min-width: 210px; height: 42px; padding-block: 0; }

.filter-toggle { display: none; }
@media (max-width: 1023px) {
  .filter-toggle { display: inline-flex; }
  .shop-sidebar { display: none; }
}

/* Sidebar filters */
.shop-sidebar { position: sticky; top: 150px; }
.filter-group { border-bottom: 1px solid var(--c-border); padding-block: 18px; }
.filter-group:first-child { padding-top: 0; }
.filter-group__title {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%; background: none; border: 0; padding: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-black);
}
.filter-group__body { padding-top: 14px; }
.filter-group__body[hidden] { display: none; }

.filter-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.filter-list li + li { margin-top: 9px; }
.filter-list label {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.filter-list input[type="checkbox"] { width: 16px; height: 16px; flex: 0 0 auto; accent-color: #000; }
.filter-list .count { margin-left: auto; font-size: var(--fs-xs); color: var(--c-muted); }

.price-filter { display: flex; align-items: center; gap: 10px; }
.price-filter input { height: 40px; }

.active-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.active-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px;
  font-size: var(--fs-xs);
  border: 1px solid var(--c-border);
  background: var(--c-bg-dim);
  color: var(--c-black);
}
.active-filter:hover { border-color: var(--c-black); color: var(--c-black); }
.active-filter--clear { background: none; border-style: dashed; }

/* Sidebar filter form */
.shop-filters { margin: 0; }
.shop-sidebar__head { display: none; }

.filter-list a.filter-link {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.filter-list a.filter-link:hover { color: var(--c-black); }
.filter-list a.filter-link.is-active { color: var(--c-black); font-weight: var(--fw-bold); }

.filter-group__title .accordion__icon,
.filter-group__title svg { transition: transform var(--dur) var(--ease); }
.filter-group__title[aria-expanded="false"] svg { transform: rotate(-90deg); }

.filter-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-top: 22px;
}
.filter-clear {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  text-decoration: underline;
}

/* Sidebar becomes a drawer on small screens. */
@media (max-width: 1023px) {
  .shop-sidebar {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(380px, 88vw);
    z-index: var(--z-drawer);
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s var(--ease);
    overflow-y: auto;
    padding-bottom: 24px;
  }
  .shop-sidebar.is-open { transform: none; }

  .shop-sidebar__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px var(--page-pad);
    border-bottom: 1px solid var(--c-border);
    position: sticky; top: 0; background: #fff; z-index: 1;
  }
  .shop-filters { padding-inline: var(--page-pad); }
}

/* --- Single product ------------------------------------------------------- */
.pdp { padding-block: 30px 50px; }

.pdp__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: 54px;
  align-items: start;
}
@media (max-width: 1023px) { .pdp__grid { grid-template-columns: 1fr; gap: 30px; } }

/* Gallery */
.pdp__gallery { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: start; }

/* No gallery images -> no thumb rail, so don't reserve its column or the
   stage collapses into an 84px box. */
.pdp__gallery--solo { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 749px) { .pdp__gallery { grid-template-columns: 1fr; } }

.pdp__thumbs { display: flex; flex-direction: column; gap: 10px; max-height: 560px; overflow-y: auto; }
@media (max-width: 749px) { .pdp__thumbs { flex-direction: row; order: 2; overflow-x: auto; } }

.pdp__thumb {
  flex: 0 0 auto;
  width: 84px; height: 84px;
  border: 1px solid var(--c-border);
  background: #fff;
  padding: 0;
  overflow: hidden;
}
.pdp__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.pdp__thumb.is-active { border-color: var(--c-black); }

.pdp__stage {
  position: relative;
  border: 1px solid var(--c-border);
  background: #fff;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.pdp__stage img { width: 100%; height: 100%; object-fit: contain; padding: 24px; }
.pdp__stage .product-card__badges { top: 14px; left: 14px; }

/* Summary column */
.pdp__brand {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
  display: block;
}
.pdp__title { font-size: var(--fs-2xl); margin-bottom: 12px; }
.pdp__meta {
  display: flex; flex-wrap: wrap; gap: 14px;
  font-size: var(--fs-xs);
  color: var(--c-muted);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-border);
}
.pdp__price { padding-block: 18px; }
.pdp__price .price { font-size: var(--fs-xl); }

.pdp__finance {
  padding: 12px 14px;
  background: var(--c-bg-specs);
  border: 1px solid var(--c-border);
  font-size: var(--fs-sm);
  margin-bottom: 20px;
}
.pdp__finance-row { display: flex; align-items: center; gap: 10px; }
.pdp__finance-row + .pdp__finance-row { margin-top: 8px; }

.pdp__variations { margin-bottom: 20px; }
.pdp__variations label {
  display: block;
  margin-bottom: 8px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-black);
}

.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  padding: 9px 16px;
  border: 1px solid var(--c-border);
  background: #fff;
  font-size: var(--fs-sm);
  color: var(--c-black);
}
.swatch:hover { border-color: var(--c-btn-bg); }
/* Primary, as the site's buttons use it: darkened only if white text needs it. */
.swatch.is-active { border-color: var(--c-btn-bg); background: var(--c-btn-bg); color: var(--c-btn-text); }
.swatch.is-disabled { opacity: .4; text-decoration: line-through; pointer-events: none; }

/* Woo emits <form class="cart"> — that IS our buy row. */
.pdp__buy,
.woocommerce div.product form.cart {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  margin-bottom: 16px;
}

/* Variation tables and grouped-product tables need the full row. */
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-grouped-product-list,
.woocommerce div.product form.cart .woocommerce-variation { flex: 1 0 100%; }

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  text-align: left;
  padding: 6px 0;
  border: 0;
}
.woocommerce div.product form.cart .variations label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-black);
  margin: 0;
}
.woocommerce div.product form.cart .reset_variations {
  font-size: var(--fs-xs);
  text-decoration: underline;
}

.qty,
.woocommerce div.product form.cart .quantity {
  display: flex; align-items: center;
  flex: 0 0 auto;
  border: 1px solid var(--c-border);
  background: var(--c-bg-dim);
}
.qty button {
  width: 42px;
  min-height: 48px;
  background: none; border: 0;
  font-size: 18px;
  color: var(--c-faint);
}
.qty button:hover { color: var(--c-black); }

.qty input,
.woocommerce div.product form.cart .quantity input.qty {
  width: 54px;
  min-height: 48px;
  border: 0; background: none;
  text-align: center;
  padding: 0;
  font-weight: var(--fw-bold);
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty input::-webkit-outer-spin-button,
.qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* The add-to-cart button fills the rest of the row. */
.pdp__buy .btn,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  flex: 1 1 200px;
  min-height: 48px;
}

.pdp__stock {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm);
  margin-bottom: 18px;
}
.pdp__stock::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--c-success); }
.pdp__stock.is-out::before { background: var(--c-disabled); }

.pdp__usps { list-style: none; margin: 0 0 22px; padding: 0; font-size: var(--fs-sm); }
.pdp__usps li { display: flex; gap: 10px; padding-block: 7px; }
.pdp__usps svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--c-black); margin-top: 2px; }

.showroom-box {
  border: 1px solid var(--c-border);
  padding: 18px;
  font-size: var(--fs-sm);
  background: var(--c-bg-specs);
}
.showroom-box h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 8px; }

/* Description / long-form content */
.pdp__content { padding-block: 50px; border-top: 1px solid var(--c-border); }
.pdp__content h2 { font-size: var(--fs-xl); text-transform: uppercase; }
.pdp__content h3 { font-size: var(--fs-md); }
.pdp__content ul { padding-left: 1.1em; }
.pdp__content li { margin-bottom: 6px; }

.faq-list { max-width: 900px; }

/* --- Cart ----------------------------------------------------------------- */
.cart-page { padding-block: 40px 60px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 44px; align-items: start; }
@media (max-width: 1023px) { .cart-layout { grid-template-columns: 1fr; } }

.cart-table th {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-black);
  text-align: left;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--c-border);
}
.cart-table td { padding: 20px 0; border-bottom: 1px solid var(--c-border); vertical-align: top; }

.cart-item { display: flex; gap: 16px; }
.cart-item__img { width: 92px; height: 92px; flex: 0 0 auto; border: 1px solid var(--c-border); }
.cart-item__img img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-item__title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-black); }
.cart-item__meta { font-size: var(--fs-xs); color: var(--c-muted); }
.cart-item__remove { background: none; border: 0; padding: 0; font-size: var(--fs-xs); color: var(--c-muted); text-decoration: underline; }

.cart-summary {
  border: 1px solid var(--c-border);
  padding: 24px;
  position: sticky;
  top: 150px;
}
.cart-summary h2 { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: var(--ls-wide); }
.cart-summary__row { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; font-size: var(--fs-sm); }
.cart-summary__row--total {
  border-top: 1px solid var(--c-border);
  margin-top: 8px; padding-top: 16px;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--c-black);
}

/* --- Mini cart (drawer) ---------------------------------------------------
   Woo's default markup is a loosely-classed <ul>; the template override in
   woocommerce/cart/mini-cart.php gives each part a real hook.
   ------------------------------------------------------------------------ */
.mini-cart { list-style: none; margin: 0; padding: 0; }

.mini-cart__item {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 16px 26px 16px 0;
  border-bottom: 1px solid var(--c-border-soft);
}

.mini-cart__media {
  display: block;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
  overflow: hidden;
}
.mini-cart__media img { width: 100%; height: 72px; object-fit: cover; display: block; }

.mini-cart__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.mini-cart__title a,
.mini-cart__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--c-black);
}
.mini-cart__title a:hover { text-decoration: underline; }

.mini-cart__qty .quantity {
  font-size: var(--fs-sm);
  color: var(--c-body);
}
.mini-cart__qty .amount { color: var(--c-price); font-weight: var(--fw-bold); }

/* Woo's variation list inside an item. */
.mini-cart__item dl.variation { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.mini-cart__item dl.variation dt,
.mini-cart__item dl.variation dd { display: inline; margin: 0; }
.mini-cart__item dl.variation dd::after { content: " "; }
.mini-cart__item dl.variation p { margin: 0; }

.mini-cart__remove {
  position: absolute;
  top: 14px;
  right: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  font-size: 18px;
  line-height: 1;
  color: var(--c-muted);
  border-radius: 50%;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mini-cart__remove:hover { background: var(--c-bg-dim); color: var(--c-black); }

.mini-cart__foot { padding-top: 18px; }

.mini-cart__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0 16px;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-sm);
}
.mini-cart__total strong { font-size: var(--fs-md); color: var(--c-price); }

.mini-cart__buttons { display: grid; gap: 10px; }

.mini-cart__empty { text-align: center; padding-block: 56px 40px; }
.mini-cart__empty-icon {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--c-bg-specs);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
}
.mini-cart__empty p { font-size: var(--fs-sm); margin-bottom: 20px; }

/* --- WooCommerce message overrides ---------------------------------------- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  list-style: none;
  margin: 0 0 24px;
  padding: 15px 18px;
  font-size: var(--fs-sm);
  border-left: 3px solid var(--c-black);
  background: var(--c-bg-specs);
}
.woocommerce-error { border-left-color: var(--c-sale); }
.woocommerce-message { border-left-color: var(--c-success); }
.woocommerce-message .button,
.woocommerce-info .button { float: right; }

/* Woo default button mapping */
.woocommerce .button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 28px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid var(--c-ink);
  border-radius: var(--radius-sm);
  background: var(--c-ink);
  color: var(--c-btn-text);
  line-height: 1.2;
}
.woocommerce .button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
  background: var(--c-ink-hover);
  border-color: var(--c-ink-hover);
  color: var(--c-btn-text);
}

/* Woo's `.alt` variant is its brand purple, set via selectors like
   `.woocommerce button.button.alt` (0,3,1). Ours has to match that depth or
   Add to cart / Place order stay purple. */
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce button.button.alt.disabled,
.woocommerce div.product form.cart button.single_add_to_cart_button {
  background-color: var(--c-ink);
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-btn-text);
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce div.product form.cart button.single_add_to_cart_button:hover {
  background-color: var(--c-ink-hover);
  background: var(--c-ink-hover);
  border-color: var(--c-ink-hover);
  color: var(--c-btn-text);
}

/* Woo also colours links, price and a few accents with its own palette. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info { border-left-color: var(--c-ink); }

.woocommerce span.onsale {
  background-color: var(--c-secondary);
  color: var(--c-on-secondary);
}

/* Checkout */
.checkout-page { padding-block: 40px 60px; }
.woocommerce-checkout .form-row { margin-bottom: 16px; }
.woocommerce-checkout label { font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--c-black); display: block; margin-bottom: 6px; }
#order_review_heading { margin-top: 32px; }
.woocommerce-checkout-review-order { border: 1px solid var(--c-border); padding: 24px; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td { padding: 10px 0; border-bottom: 1px solid var(--c-border-soft); font-size: var(--fs-sm); text-align: left; }

/* --- Related / upsells ---------------------------------------------------- */
.related, .upsells, .cross-sells { padding-top: 50px; border-top: 1px solid var(--c-border); }
.related > h2, .upsells > h2 {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin-bottom: 26px;
}

/* --- Notice icons ---------------------------------------------------------
   Woo paints an icon-font glyph on notices via ::before, positioned
   absolutely against its own padding. The glyph does not resolve here and
   the absolute position lands it on top of our text, so drop it — our
   notices carry their meaning through the left border instead.
   ------------------------------------------------------------------------ */
.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::after,
.woocommerce-message::after,
.woocommerce-error::after {
  content: none;
  display: none;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
  padding: 15px 18px;
}

/* --- Empty results state -------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: clamp(48px, 7vw, 90px) var(--page-pad);
  border: 1px solid var(--c-border);
  background: var(--c-bg-specs);
}

.empty-state__icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  color: var(--c-ink);
}

.empty-state__title {
  font-size: var(--fs-xl);
  text-transform: uppercase;
  margin: 0 0 6px;
}

.empty-state__text {
  max-width: 460px;
  font-size: var(--fs-sm);
  margin: 0 0 24px;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

/* --- Star ratings ---------------------------------------------------------
   WooCommerce renders stars as an icon font in its own purple; align them
   with the theme's review stars.
   ------------------------------------------------------------------------ */
.woocommerce .star-rating,
.woocommerce .star-rating::before,
.woocommerce p.stars a,
.woocommerce .comment-form-rating .stars a { color: var(--c-star); }

.testimonial__stars svg,
.review-summary__score svg { color: var(--c-star); fill: currentColor; }

.showroom-box__title {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: 8px;
}

/* --- Account: login / register -------------------------------------------- */
.account-page { padding-block: 44px 60px; }

.account-page__intro { text-align: center; margin-bottom: 34px; }
.account-page__title { font-size: var(--fs-2xl); text-transform: uppercase; margin-bottom: 10px; }
.account-page__lead { max-width: 520px; margin: 0 auto; font-size: var(--fs-sm); }

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
  max-width: 960px;
  margin-inline: auto;
  align-items: start;
}
.account-grid--single { grid-template-columns: minmax(0, 460px); justify-content: center; }
@media (max-width: 860px) { .account-grid { grid-template-columns: 1fr; } }

.account-card {
  padding: 32px;
  border: 1px solid var(--c-border);
  background: var(--c-bg);
}

.account-card__title {
  font-size: var(--fs-md);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding-bottom: 14px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--c-border);
}

.account-card .form-row { margin-bottom: 18px; }

.account-card label {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-black);
}
.account-card .required { color: var(--c-sale); border: 0; }

.account-card input[type="text"],
.account-card input[type="email"],
.account-card input[type="password"] { height: 46px; }

.account-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}

.account-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-body);
}
.account-remember input { width: 16px; height: 16px; accent-color: var(--c-ink); }

.account-card__link {
  font-size: var(--fs-sm);
  color: var(--c-primary-text);
}
.account-card__link:hover { text-decoration: underline; }

.account-card__note {
  font-size: var(--fs-sm);
  color: var(--c-muted);
  margin-bottom: 20px;
}

.account-perks {
  list-style: none;
  margin: 22px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--c-border-soft);
  font-size: var(--fs-sm);
}
.account-perks li { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; }
.account-perks svg { flex: 0 0 auto; margin-top: 3px; color: var(--c-success); }

/* Woo prints its own headings above these forms; ours replace them. */
.woocommerce-account .account-page + h2,
.woocommerce-account .u-columns > .col-1 > h2,
.woocommerce-account .u-columns > .col-2 > h2 { display: none; }

/* --- Filtering state ------------------------------------------------------ */
.shop-main { position: relative; transition: opacity var(--dur) var(--ease); }
.shop-main.is-loading { opacity: .45; pointer-events: none; }

.shop-main.is-loading::after {
  content: "";
  position: absolute;
  top: 120px;
  left: 50%;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-ink);
  border-radius: 50%;
  animation: jandroo-spin .7s linear infinite;
}

@keyframes jandroo-spin { to { transform: rotate(360deg); } }

/* The Apply button is only needed without JS. */
html.js-on .filter-actions .btn[type="submit"] { display: none; }

/* --- Account forms -------------------------------------------------------
   WooCommerce styles form.login / form.register as standalone panels with
   their own border, padding and margin. Ours already sit inside .account-card,
   so that produced a box inside a box. Its .form-row input rule also outranks
   a plain element selector, which is why the fields came out 36px tall with a
   dark red-black border instead of the theme's.
   ------------------------------------------------------------------------- */
.woocommerce .account-card form.login,
.woocommerce .account-card form.register {
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
}

.woocommerce .account-card .form-row input.input-text,
.woocommerce .account-card .form-row input[type="text"],
.woocommerce .account-card .form-row input[type="email"],
.woocommerce .account-card .form-row input[type="password"] {
  height: 46px;
  padding: 11px 14px;
  background: var(--c-white);
  color: var(--c-black);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.woocommerce .account-card .form-row input.input-text:focus {
  border-color: var(--c-black);
  outline: none;
}

/* Woo's reveal toggle overlays the field, so keep clear of the text. */
.account-card .password-input {
  position: relative;
  display: block;
}

.account-card .password-input input {
  padding-right: 46px;
}

.account-card .show-password-input {
  color: var(--c-muted);
  cursor: pointer;
}

/* Consent copy Woo injects above the register button. */
.account-card .woocommerce-privacy-policy-text {
  margin-bottom: 20px;
}

.account-card .woocommerce-privacy-policy-text p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-muted);
}

.account-card .woocommerce-privacy-policy-text a {
  color: var(--c-primary-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* The list reset missed the inline start padding. */
.account-perks {
  padding-left: 0;
}

/* Unavailable products get their own treatment so they cannot be mistaken for
   a "View options" call to action. */
.btn--oos,
.btn--oos:hover,
.btn--oos:focus {
  background: var(--c-bg-specs);
  border-color: var(--c-border);
  color: var(--c-muted);
  cursor: default;
}

.btn--oos:hover { border-color: var(--c-border); }

/* --- Cart drawer layout ---------------------------------------------------
   The item list and the totals are siblings inside the scrolling drawer body,
   so with only a few items the totals floated mid-panel with dead space under
   them. Make the body a column and push the totals to the bottom.
   -------------------------------------------------------------------------- */
#cart-drawer .drawer__body {
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

/* The replaceable fragment wrapper has to carry the column layout too. */
#cart-drawer .widget_shopping_cart_content {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

#cart-drawer .mini-cart { flex: 0 0 auto; }

#cart-drawer .mini-cart__foot {
  margin-top: auto;
  position: sticky;
  bottom: 0;
  padding-top: 0;
  padding-bottom: 18px;
  background: var(--c-white);
}

/* The rule already sits on .mini-cart__total, so avoid doubling it up. */
#cart-drawer .mini-cart__total { margin-top: 18px; }

#cart-drawer .mini-cart__empty { margin: auto 0; }

/* WooCommerce injects a "View cart" link beside the button after an AJAX add.
   The cart drawer opens on the same event, so the link is redundant — hidden
   here as well as removed in JS, so it never flashes in first. */
.product-card a.added_to_cart,
.slider a.added_to_cart { display: none !important; }

/* WooCommerce ships an olive #958e09 for prices in product loops, which lands
   at 3.4:1 on white. Our --c-price is 5.4:1, so make it actually apply. */
.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount,
.product-card .price,
.product-card .price .woocommerce-Price-amount,
.product-card .price ins .woocommerce-Price-amount {
  color: var(--c-price);
}

.woocommerce ul.products li.product .price del,
.woocommerce ul.products li.product .price del .woocommerce-Price-amount,
.product-card .price del,
.product-card .price del .woocommerce-Price-amount {
  color: var(--c-was-price);
}

/* Fade the row while its removal is in flight. */
.mini-cart__item.is-removing {
  opacity: .4;
  pointer-events: none;
  transition: opacity .15s var(--ease);
}

/* --- Mini cart: hold the layout against WooCommerce's widget defaults ------
   The <ul> carries Woo's cart_list / product_list_widget classes, and its
   stylesheet floats and resizes list images. Pin the two cells explicitly so
   the thumbnail cannot end up in the text column.
   -------------------------------------------------------------------------- */
.mini-cart__item > .mini-cart__media { grid-column: 1; grid-row: 1; }
.mini-cart__item > .mini-cart__body  { grid-column: 2; grid-row: 1; }

.woocommerce ul.cart_list li img,
.woocommerce ul.product_list_widget li img,
.mini-cart__media img {
  float: none;
  width: 100%;
  height: 72px;
  margin: 0;
  box-shadow: none;
}

.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li {
  padding: 16px 26px 16px 0;
  margin: 0;
}

/* The chosen variation's price and stock are written into the existing lines
   above the selector, so WooCommerce's duplicate block below it is noise. */
.pdp .woocommerce-variation-price,
.pdp .woocommerce-variation-availability { display: none; }

/* Short description under the price. */
.pdp__excerpt {
  margin: 4px 0 18px;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--c-body);
}

.pdp__excerpt p { margin: 0 0 .6em; }
.pdp__excerpt p:last-child { margin-bottom: 0; }
.pdp__excerpt ul { margin: 0 0 .6em; padding-left: 1.2em; }

/* ==========================================================================
   Enquiry-only products

   Sold over the counter rather than through the checkout, so the contact
   details occupy the space the buy row would have used and need to carry the
   same visual weight.
   ========================================================================== */

.enquiry {
  margin-bottom: 22px;
  padding: 20px;
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  background: var(--c-bg-specs);
}

.enquiry__lead {
  margin: 0 0 16px;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--c-body);
}

.enquiry__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Matches the buy row, so the call button reads as the primary action. */
.enquiry__actions .btn {
  flex: 1 1 190px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.enquiry__actions .btn svg {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

.enquiry__meta {
  list-style: none;
  margin: 16px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  line-height: 1.55;
}

.enquiry__meta li {
  display: flex;
  gap: 9px;
  padding-block: 5px;
}

.enquiry__meta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--c-muted);
}

.enquiry__meta a { color: var(--c-primary-text); }

/* Neither a promise of stock nor a sold-out warning — its own neutral state. */
.pdp__stock.is-enquiry::before,
.product-card__stock.is-enquiry::before { background: var(--c-price); }

/* No sidebar on curated categories: let the grid use the whole container. */
.shop-layout--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }

/* --------------------------------------------------------------------------
   Narrow cards

   Two columns on a phone leaves each card about 160px wide. At the default
   button padding "Add to cart" broke onto a second line, which is what made
   the cards look broken rather than merely tight.
   -------------------------------------------------------------------------- */
@media (max-width: 749px) {
  .product-card__body { padding: 12px 12px 14px; gap: 6px; }

  .product-card__cta .btn {
    padding: 12px 8px;
    font-size: var(--fs-xs);
    letter-spacing: .02em;
  }
}

/* Bulk rate, under the price on the product page — a highlighted offer. */
.pdp__bulk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 9px 14px;
  background: var(--c-primary-soft);
  border: 1px solid var(--c-price);
  border-left-width: 4px;
  border-radius: var(--radius);
  font-size: 15px;
  font-weight: var(--fw-bold);
  color: var(--c-price);
}
.pdp__bulk::before {
  /* Price-tag icon, drawn in the text colour. */
  content: "";
  flex: 0 0 auto;
  width: 18px; height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L2 12V2h10l8.6 8.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7' cy='7' r='1.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pdp__bulk[hidden] { display: none; }

/* Spec tables inside product copy. */
.pdp__content .specs { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: var(--fs-sm); }
.pdp__content .specs th,
.pdp__content .specs td { padding: 9px 12px; border: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.pdp__content .specs th { width: 34%; background: var(--c-bg-specs); color: var(--c-black); font-weight: var(--fw-bold); }

/* Variation radios reuse .swatch; the input itself is visually hidden. */
.variation-radios .swatch { cursor: pointer; }
.variation-radios .swatch:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }
.woocommerce div.product form.cart .variations td.value { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.woocommerce div.product form.cart .variations .swatch.is-active { color: var(--c-btn-text); }

/* Frequently bought together — sits between the buy box and the description. */
.fbt { padding-block: calc(var(--section-pad) / 2); }

/* Delivery & assembly callout on machine PDPs. */
.pdp__service {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  background: var(--c-secondary-soft);
  border: 1px solid var(--c-secondary);
  border-left-width: 4px;
  color: var(--c-black);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}
.pdp__service svg { flex: 0 0 auto; color: var(--c-secondary-text); }