/* WooCommerce overrides. Specificity note: Woo ships selectors at (0,4,2) in places, so a theme
   rule at (0,3,1) silently loses. Where that matters below, the selector matches Woo's own shape
   rather than trying to out-specify it with !important. */

.woocommerce-products-header { padding-block: var(--s-6) var(--s-4); }
.woocommerce-products-header__title { font-size: var(--t-3xl); }
.term-description { max-width: 68ch; color: var(--c-ink-soft); }

/* Shop loop: our card markup renders inside Woo's li, so the li is stripped back to a cell. */
/* minmax(0,1fr) rather than 1fr: a 1fr track cannot shrink below its item's intrinsic width,
   and WooCommerce's small-screen sheet sets li.product { width: 200px }, which overflows a 390
   viewport. The zero minimum lets the track win. */
.woocommerce ul.products { display: grid; gap: var(--s-4); list-style: none; margin: 0 0 var(--s-6); padding: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)); }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; }
.woocommerce ul.products li.product { width: auto !important; min-width: 0; margin: 0 !important;
  float: none !important; clear: none !important; max-width: 100%; }
.woocommerce ul.products li.product::before, .woocommerce ul.products li.product::after { content: none; }
@media (min-width: 700px)  { .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .woocommerce ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); } }

.woocommerce-result-count, .woocommerce-ordering { font-family: var(--f-ui); font-size: var(--t-sm); }
.woocommerce-ordering select { font-family: var(--f-ui); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-line); background: var(--c-surface); min-height: 44px; }

/* Buttons: Woo's .button is everywhere, so it adopts the theme button rather than fighting it. */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce #respond input#submit {
  font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; background: var(--c-accent); color: #fff; border: 2px solid transparent;
  border-radius: var(--r-pill); padding: var(--s-3) var(--s-6); min-height: 48px; line-height: 1.2;
}
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover {
  background: var(--c-accent-deep); color: #fff;
}
.woocommerce .pcard .button { width: 100%; justify-content: center; display: inline-flex; }
.woocommerce .pcard .added_to_cart { display: none; }

/* Single product */
.single-product div.product { display: grid; gap: var(--s-5); padding-block: var(--s-6); }
.single-product div.product .product_title { font-size: var(--t-2xl); }
.single-product div.product .price { font-family: var(--f-ui); font-size: var(--t-xl); font-weight: 700;
  color: var(--c-ink); }
.single-product .woocommerce-product-gallery { position: static; }
.single-product div.product .summary { margin: 0; }
.single-product .quantity .qty { min-height: 48px; padding: var(--s-2); border: 1px solid var(--c-line);
  font-family: var(--f-ui); width: 5rem; text-align: center; }
@media (min-width: 900px) {
  .single-product div.product { grid-template-columns: 1fr 1fr; gap: var(--s-8); align-items: start; }
  .single-product div.product .woocommerce-tabs,
  .single-product div.product .related, .single-product div.product .up-sells { grid-column: 1 / -1; }
  .single-product div.product .product_title { font-size: var(--t-3xl); }
}
/* Woo ships .woocommerce div.product div.images.woocommerce-product-gallery { position: relative }
   at (0,4,2). Matching that shape is the only way a theme rule holds on narrow screens. */
@media (max-width: 899px) {
  .woocommerce div.product div.images.woocommerce-product-gallery { position: static; top: auto; }
}

.woocommerce-tabs ul.tabs { list-style: none; padding: 0; margin: 0 0 var(--s-5);
  display: flex; gap: var(--s-4); flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
.woocommerce-tabs ul.tabs li { margin: 0; }
.woocommerce-tabs ul.tabs li a { font-family: var(--f-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; font-size: var(--t-sm); text-decoration: none; display: block;
  padding: var(--s-3) 0; border-bottom: 3px solid transparent; }
.woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--c-accent); }

/* The product facts panel: spectrum, potency, servings, lab result. */
.facts { border: 1px solid var(--c-line); background: var(--c-surface); padding: var(--s-4);
  margin-block: var(--s-4); }
.facts dl { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2) var(--s-4); margin: 0; }
.facts dt { font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-faint); }
.facts dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.facts__coa { margin-top: var(--s-3); font-size: var(--t-sm); }

/* Cart, checkout, account */
.woocommerce table.shop_table { border: 1px solid var(--c-line); border-radius: 0; }
.woocommerce table.shop_table th { font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; }
.woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea,
.woocommerce form .form-row select, .select2-container .select2-selection--single {
  font-family: var(--f-body); font-size: var(--t-base); padding: var(--s-3);
  border: 1px solid var(--c-line); background: var(--c-surface); min-height: 48px; border-radius: 0;
}
.woocommerce form .form-row label { font-family: var(--f-ui); font-size: var(--t-sm); font-weight: 600; }
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  border-top: 0; border-left: 4px solid var(--c-accent); background: var(--c-accent-soft);
  font-size: var(--t-sm); padding: var(--s-4) var(--s-5); }
.woocommerce-error { border-left-color: var(--c-crit); background: #F8E8E4; }
.woocommerce-message { border-left-color: var(--c-good); background: var(--c-leaf-soft); }
.woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { content: none; }

/* Empty cart gets a real empty state, not a bare sentence. */
.cart-empty.woocommerce-info { text-align: center; }
.return-to-shop { text-align: center; margin-bottom: var(--s-7); }

/* ---- Checkout: two columns ----
   WooCommerce stacks the billing form above the order review, which on a wide screen leaves a
   column of empty space and pushes the total below the fold. The standard shape is form left,
   sticky order summary right. */
@media (min-width: 900px) {
  .woocommerce form.checkout.woocommerce-checkout {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);
    grid-template-rows: auto 1fr;
    /* Column gap only: a row gap here opens a hole between the order heading and its box. */
    column-gap: var(--s-8); row-gap: 0; align-items: start;
  }
  /* The billing column has to span both rows, otherwise the order box is pushed to row 2,
     which starts only after the whole billing form ends, leaving it stranded down the page. */
  .woocommerce form.checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; }
  .woocommerce form.checkout > h3#order_review_heading { grid-column: 2; grid-row: 1; }
  .woocommerce form.checkout > #order_review { grid-column: 2; grid-row: 2; }
  .woocommerce form.checkout > h3#order_review_heading { margin-top: 0; }
  /* The summary follows you down the billing form rather than scrolling away. */
  .woocommerce form.checkout > #order_review {
    position: sticky; top: calc(var(--s-8) + 40px);
    background: var(--c-surface); border: 1px solid var(--c-line);
    padding: var(--s-5); border-radius: var(--r-md);
  }
  /* Woo's own two-col billing/shipping inside the left column would make four columns. */
  .woocommerce form.checkout #customer_details .col-1,
  .woocommerce form.checkout #customer_details .col-2 { width: 100%; float: none; }
  .woocommerce form.checkout #customer_details .col2-set { display: grid; gap: var(--s-5); }
}
.woocommerce #order_review table.shop_table { margin-bottom: var(--s-4); }
.woocommerce #order_review .order-total .amount { font-size: var(--t-xl); }
#payment .payment_methods li { padding-block: var(--s-2); }
#payment .payment_box { background: var(--c-accent-soft); border-radius: var(--r-sm);
  padding: var(--s-3) var(--s-4); margin-top: var(--s-2); }
#payment .payment_box::before { content: none; }
#place_order { width: 100%; margin-top: var(--s-4); }

/* Cart: totals beside the table rather than under it. */
@media (min-width: 900px) {
  .woocommerce .cart-collaterals { float: none; width: 100%; }
  .woocommerce-cart-form { margin-bottom: var(--s-6); }
  .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px;
    margin-left: auto; background: var(--c-surface); border: 1px solid var(--c-line);
    padding: var(--s-5); border-radius: var(--r-md); }
}

@media (min-width: 900px) {
  /* The heading carries a default top margin that opened an 80px hole above the order box. */
  .woocommerce form.checkout > h3#order_review_heading { margin: 0 0 var(--s-3); line-height: 1.2; }
  .woocommerce form.checkout > #order_review { margin-top: 0; }
}

/* ===================================================================
   Single product, rebuilt.
   WooCommerce sets div.images and .summary to width:48% with floats.
   Inside a grid those percentages resolve against an auto track that
   has already collapsed, which is why both columns rendered at 276px
   on a 1280px container. The widths have to be neutralised, and the
   tracks given a zero floor so they can actually divide the row.
   =================================================================== */
.single-product div.product {
  display: grid; gap: var(--s-6); padding-block: var(--s-6);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 900px) {
  .single-product div.product {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: var(--s-8); row-gap: var(--s-7); align-items: start;
  }
}
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product div.images.woocommerce-product-gallery {
  width: 100% !important; float: none !important; margin: 0 !important; max-width: 100%;
}
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .up-sells { grid-column: 1 / -1; width: 100%; }

/* Gallery */
.woocommerce div.product div.images img { border-radius: var(--r-md); }
.woocommerce div.product div.images .flex-viewport { border-radius: var(--r-md); }
.woocommerce div.product div.images .flex-control-thumbs { display: flex; gap: var(--s-2);
  margin-top: var(--s-3); padding: 0; }
.woocommerce div.product div.images .flex-control-thumbs li { width: 72px; margin: 0; }
.woocommerce div.product div.images .flex-control-thumbs img { border-radius: var(--r-sm);
  opacity: .6; transition: opacity .18s; }
.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover { opacity: 1; }
.woocommerce span.onsale { background: var(--c-crit); color: #fff; border-radius: var(--r-pill);
  font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; min-height: 0; min-width: 0; padding: 5px 14px; line-height: 1.4;
  top: var(--s-3); left: var(--s-3); margin: 0; }

/* Summary */
.single-product .summary > * { margin-bottom: var(--s-4); }
.single-product div.product .product_title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); margin-bottom: var(--s-2); }
.single-product .woocommerce-product-rating { display: flex; align-items: center; gap: var(--s-3);
  margin-bottom: var(--s-3); font-size: var(--t-sm); }
.single-product .woocommerce-product-rating .star-rating { color: var(--c-accent); }
.single-product div.product p.price { font-family: var(--f-ui); font-size: var(--t-2xl);
  font-weight: 700; color: var(--c-ink); display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-1); }
.single-product div.product p.price del { font-size: var(--t-lg); font-weight: 400;
  color: var(--c-ink-faint); }
.single-product div.product p.price ins { text-decoration: none; }
.pdp-permg { font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-ink-faint);
  margin-bottom: var(--s-4); }
.single-product .woocommerce-product-details__short-description { font-size: var(--t-lg);
  color: var(--c-ink-soft); }

/* Buy row */
.single-product form.cart { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: stretch;
  margin-bottom: var(--s-4); }
.single-product form.cart .quantity { display: flex; }
.single-product .quantity .qty { width: 72px; height: 100%; min-height: 52px; border-radius: var(--r-pill);
  border: 2px solid var(--c-line); font-family: var(--f-ui); font-size: var(--t-base); }
.single-product form.cart button.single_add_to_cart_button { flex: 1 1 200px; min-height: 52px;
  font-size: var(--t-base); }
.single-product form.cart.variations_form { display: block; }
.single-product form.cart.variations_form .woocommerce-variation-add-to-cart {
  display: flex; gap: var(--s-3); align-items: stretch; margin-top: var(--s-4); }

/* Variation selector as pills rather than a dropdown */
.single-product table.variations { width: 100%; border: 0; margin-bottom: var(--s-4); }
.single-product table.variations tr { display: block; margin-bottom: var(--s-4); }
.single-product table.variations td, .single-product table.variations th { display: block; border: 0; padding: 0; }
.single-product table.variations th label { font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-faint); font-weight: 700;
  margin-bottom: var(--s-2); display: block; }
.single-product table.variations select { width: 100%; min-height: 52px; padding: var(--s-2) var(--s-4);
  border: 2px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-surface);
  font-family: var(--f-ui); font-size: var(--t-base); }
.single-product .reset_variations { font-family: var(--f-ui); font-size: var(--t-xs);
  text-transform: uppercase; letter-spacing: .08em; }
.woocommerce-variation-price { font-family: var(--f-ui); font-size: var(--t-xl); font-weight: 700; }

/* Trust strip under the buy button */
.pdp-trust { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
  padding: var(--s-4); background: var(--c-band); border-radius: var(--r-md); }
.pdp-trust div { display: flex; align-items: center; gap: var(--s-2); font-family: var(--f-ui);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-soft); }
.pdp-trust span { color: var(--c-accent); font-size: 16px; }

/* Facts panel */
.facts { border: 0; background: var(--c-surface); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); padding: var(--s-5); }
.facts dl { grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-4); }
.facts dt { align-self: center; }
.facts dd { text-align: right; font-variant-numeric: tabular-nums; }
.facts dl > div { display: contents; }

/* Tabs */
.woocommerce-tabs { margin-top: var(--s-7); }
.woocommerce div.product .woocommerce-tabs .panel { max-width: 70ch; }
.woocommerce #reviews #comments ol.commentlist li .comment-text { border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--s-4); margin-left: 60px; }
.woocommerce #reviews #comments ol.commentlist li img.avatar { width: 44px; border: 0;
  border-radius: 50%; padding: 0; }

/* Sticky buy bar on phones */
.pdp-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--c-page); border-top: 1px solid var(--c-line); padding: var(--s-3) var(--gutter);
  display: flex; gap: var(--s-3); align-items: center; box-shadow: 0 -4px 20px rgba(6,60,48,.10);
  transform: translateY(110%); transition: transform .25s ease; }
.pdp-sticky[data-show="true"] { transform: translateY(0); }
.pdp-sticky__price { font-family: var(--f-ui); font-weight: 700; font-size: var(--t-lg); }
.pdp-sticky .btn { flex: 1; }
@media (min-width: 900px) { .pdp-sticky { display: none; } }

/* Cart progress toward the minimum and toward free shipping. */
.cart-progress { background: var(--c-surface); border-radius: var(--r-md); padding: var(--s-4);
  margin-bottom: var(--s-5); box-shadow: var(--shadow-card); }
.cart-progress__bar { height: 8px; background: var(--c-band-deep); border-radius: var(--r-pill);
  overflow: hidden; margin-bottom: var(--s-3); }
.cart-progress__bar span { display: block; height: 100%; background: var(--c-accent);
  border-radius: var(--r-pill); transition: width .3s ease; }
.cart-progress p { margin: 0; font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-ink-soft); }

/* ---- Cart totals ----
   The panel was capped at 420px, which wrapped every shipping label mid-sentence and left
   the label column squeezed against the values. Wider panel, a label column that can hold
   its words, and shipping options as proper stacked rows. */
@media (min-width: 900px) {
  .woocommerce .cart-collaterals .cart_totals { max-width: 560px; padding: var(--s-6); }
}
.woocommerce .cart_totals h2 { font-size: var(--t-xl); margin-bottom: var(--s-4); }
.woocommerce .cart_totals table.shop_table { border: 0; margin: 0; }
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td {
  border: 0; border-bottom: 1px solid var(--c-line); padding: var(--s-4) 0; vertical-align: top;
}
.woocommerce .cart_totals table.shop_table tr:last-child th,
.woocommerce .cart_totals table.shop_table tr:last-child td { border-bottom: 0; }
.woocommerce .cart_totals table.shop_table th {
  width: 38%; font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-ink-faint); font-weight: 700; padding-right: var(--s-4);
}
.woocommerce .cart_totals table.shop_table td { text-align: right; font-variant-numeric: tabular-nums; }
.woocommerce .cart_totals .order-total th { color: var(--c-ink); font-size: var(--t-sm); }
.woocommerce .cart_totals .order-total td { font-size: var(--t-xl); font-weight: 700; }

/* Shipping choices: one row each, radio and label on the same line, price pushed right. */
.woocommerce .cart_totals #shipping_method { margin: 0; padding: 0; list-style: none;
  display: grid; gap: var(--s-2); text-align: left; }
.woocommerce .cart_totals #shipping_method li {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-3);
  padding: var(--s-3); margin: 0; border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--c-page); transition: border-color .15s, background .15s;
}
.woocommerce .cart_totals #shipping_method li:hover { border-color: var(--c-accent); }
.woocommerce .cart_totals #shipping_method li:has(input:checked) {
  border-color: var(--c-accent); background: var(--c-accent-soft);
}
.woocommerce .cart_totals #shipping_method input { margin: 0; accent-color: var(--c-accent);
  width: 18px; height: 18px; }
.woocommerce .cart_totals #shipping_method label { margin: 0; font-size: var(--t-sm);
  line-height: 1.35; display: block; }
.woocommerce .cart_totals #shipping_method .woocommerce-Price-amount {
  font-family: var(--f-ui); font-weight: 700; white-space: nowrap; }
.woocommerce .cart_totals .woocommerce-shipping-destination { margin: var(--s-3) 0 0;
  font-size: var(--t-xs); color: var(--c-ink-faint); }
.woocommerce .cart_totals .shipping-calculator-button { font-family: var(--f-ui);
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em; }
.woocommerce .cart_totals .wc-proceed-to-checkout { padding: var(--s-5) 0 0; }
.woocommerce .cart_totals .checkout-button { width: 100%; }
.woocommerce .cart_totals .fee td { color: var(--c-good); font-weight: 600; }

/* "Lab results" was breaking onto two lines and pushing the row out of alignment. */
.nav > ul > li > a { white-space: nowrap; }

/* Cart line items: a thumbnail you can actually see, and a coupon field wide enough to type in. */
.woocommerce table.shop_table_responsive.cart img,
.woocommerce table.cart img { width: 72px; height: 72px; object-fit: cover;
  border-radius: var(--r-sm); box-shadow: var(--shadow-card); }
.woocommerce table.cart td.product-thumbnail { width: 92px; }
.woocommerce table.cart td, .woocommerce table.cart th { padding: var(--s-4) var(--s-3); }
.woocommerce table.cart td.product-name a { font-weight: 600; text-decoration: none; }
.woocommerce table.cart td.product-name a:hover { color: var(--c-accent); }
.woocommerce table.cart td.product-remove a.remove { color: var(--c-ink-faint) !important;
  font-size: 20px; width: 28px; height: 28px; line-height: 26px; }
.woocommerce table.cart td.product-remove a.remove:hover { background: var(--c-crit); color: #fff !important; }

.woocommerce .coupon { display: flex; gap: var(--s-3); align-items: center; flex: 1 1 auto; }
.woocommerce .coupon #coupon_code { flex: 1 1 200px; min-width: 160px; width: auto !important;
  min-height: 48px; padding: var(--s-2) var(--s-4); border: 2px solid var(--c-line);
  border-radius: var(--r-pill); font-family: var(--f-body); font-size: var(--t-sm); }
.woocommerce .actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center;
  justify-content: space-between; padding: var(--s-4) !important; }
.woocommerce .actions .button[name="update_cart"] { margin-left: auto; }

/* ---- Cart: basket and total side by side ----
   WooCommerce stacks the totals below the table, which on a wide screen leaves them beside an
   empty column and easy to miss. Same shape as the checkout. */
.cart-shell { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .cart-shell { grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.8fr);
    column-gap: var(--s-7); align-items: start; }
  .cart-shell__totals { position: sticky; top: calc(var(--s-7) + 40px); }
  .woocommerce .cart-collaterals { width: 100%; float: none; }
  .woocommerce .cart-collaterals .cart_totals { float: none; width: 100%; max-width: none;
    margin: 0; }
  .woocommerce .cart-shell__items table.cart { margin-bottom: 0; }
}
.woocommerce .cart-collaterals .cross-sells { width: 100%; float: none; }

/* ---- Shop with filters ---- */
.shop-shell { display: block; }
.shop-shell__main { min-width: 0; }
@media (min-width: 1000px) {
  .shop-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr);
    column-gap: var(--s-7); align-items: start; }
  .filters { position: sticky; top: calc(var(--s-7) + 40px); }
  .filters__toggle { display: none; }
  .filters__form { display: block !important; }
}
.filters__toggle { width: 100%; margin-bottom: var(--s-4); }
.filters__form { display: none; background: var(--c-surface); border-radius: var(--r-md);
  padding: var(--s-5); box-shadow: var(--shadow-card); margin-bottom: var(--s-5); }
.filters__form[data-open="true"] { display: block; }
.filters__head { display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: var(--s-4); }
.filters__head h2 { font-size: var(--t-lg); margin: 0; }
.filters__clear { font-family: var(--f-ui); font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .08em; color: var(--c-accent); }
.filters__group { border: 0; padding: 0; margin: 0 0 var(--s-5); }
.filters__group legend { font-family: var(--f-ui); font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--c-ink-faint);
  padding: 0 0 var(--s-3); }
.filters__check { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) 0;
  font-size: var(--t-sm); cursor: pointer; }
.filters__check input { width: 17px; height: 17px; accent-color: var(--c-accent); margin: 0; }
.filters__check span { flex: 1; }
.filters__check em { font-family: var(--f-ui); font-size: var(--t-xs); font-style: normal;
  color: var(--c-ink-faint); font-variant-numeric: tabular-nums; }
.filters__check:hover span { color: var(--c-accent); }
.filters__range { display: flex; align-items: center; gap: var(--s-2); }
.filters__range input { width: 100%; min-width: 0; min-height: 44px; padding: var(--s-2);
  border: 1px solid var(--c-line); border-radius: var(--r-sm); text-align: center;
  font-family: var(--f-ui); font-size: var(--t-sm); }
.filters__quick { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.filters__quick a { font-family: var(--f-ui); font-size: var(--t-xs); padding: 5px 11px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill); text-decoration: none;
  color: var(--c-ink-soft); }
.filters__quick a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.active-filters { font-family: var(--f-ui); font-size: var(--t-sm); background: var(--c-accent-soft);
  padding: var(--s-3) var(--s-4); border-radius: var(--r-sm); margin-bottom: var(--s-4); }
.active-filters a { color: var(--c-accent); text-transform: uppercase; font-size: var(--t-xs);
  letter-spacing: .08em; margin-left: var(--s-3); }
@media (min-width: 1000px) { .woocommerce .shop-shell ul.products { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width: 1280px) { .woocommerce .shop-shell ul.products { grid-template-columns: repeat(4, minmax(0,1fr)); } }

/* ---- Cart: items on the left, totals on the right ----
   WooCommerce stacks the totals under the table, which on a wide screen pushes the one figure
   people came to read below the fold. The page is a grid instead, with the progress bar and
   notices spanning both columns and the totals panel sticky beside the items. */
@media (min-width: 1000px) {
  body.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
    gap: var(--s-6);
    align-items: start;
  }
  body.woocommerce-cart .woocommerce > .cart-progress,
  body.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
  body.woocommerce-cart .woocommerce > .woocommerce-cart-form { grid-column: 1; margin-bottom: 0; }
  body.woocommerce-cart .woocommerce > .cart-collaterals {
    grid-column: 2; width: 100%; margin: 0; position: sticky; top: var(--s-5);
  }
  body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
    float: none; width: 100%; max-width: none; margin: 0;
  }
}

/* The remove column had no width of its own, so it absorbed every spare pixel: 491px of a
   1214px table, which pushed the product name and its thumbnail into the middle of the row. */
@media (min-width: 720px) {
  /* Fixed layout, so the declared column widths are honoured exactly. Without it the remove
     column absorbed every spare pixel (491px of a 1214px table). */
  .woocommerce-cart-form table.shop_table { table-layout: fixed; width: 100%; }
  /* The actions cell already carries colspan="6"; under fixed layout that spans the whole
     table. Forcing display:block on it took it out of the table and shrank it to one column. */
  .woocommerce-cart-form table.shop_table th.product-remove,
  .woocommerce-cart-form table.shop_table td.product-remove    { width: 52px; text-align: center; }
  .woocommerce-cart-form table.shop_table th.product-thumbnail,
  .woocommerce-cart-form table.shop_table td.product-thumbnail { width: 104px; }
  .woocommerce-cart-form table.shop_table th.product-price,
  .woocommerce-cart-form table.shop_table td.product-price     { width: 104px; }
  .woocommerce-cart-form table.shop_table th.product-quantity,
  .woocommerce-cart-form table.shop_table td.product-quantity  { width: 156px; }
  .woocommerce-cart-form table.shop_table th.product-subtotal,
  .woocommerce-cart-form table.shop_table td.product-subtotal  { width: 116px; text-align: right; }
  .woocommerce-cart-form table.shop_table td.product-name      { word-break: break-word; }
}

/* ---- Live totals ----
   A running total under the add-to-cart button, so nobody multiplies in their head, and cart
   line totals that move with the stepper while the server catches up. */
.qty-total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  margin: var(--s-3) 0 0; padding-top: var(--s-3); border-top: 1px solid var(--c-line);
  font-family: var(--f-ui); font-size: var(--t-sm); color: var(--c-ink-soft); }
.qty-total strong { font-size: var(--t-lg); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.qty-total[hidden] { display: none; }

.cart_totals.is-stale { opacity: .72; transition: opacity .15s ease; }
.woocommerce-cart-form.is-updating { opacity: .6; pointer-events: none; transition: opacity .15s ease; }

/* ---- Cart actions ----
   Once the cart became a narrower left column, the labels wrapped inside their pills: "APPLY
   COUPON" over two lines and "UPDATE CART" sitting underneath as a washed-out blob. Labels no
   longer wrap, the row lays out as coupon on the left and update on the right, and update reads
   as the secondary action it is rather than a disabled-looking duplicate of apply. */
.woocommerce .actions { align-items: stretch; row-gap: var(--s-3); }
.woocommerce .actions .button,
.woocommerce .actions button { white-space: nowrap; }
/* The coupon group was growing to fill the row, which pushed Update cart onto a line of its
   own. It takes the width it needs and Update sits beside it. */
.woocommerce .coupon { flex: 0 1 auto; }
.woocommerce .coupon #coupon_code { flex: 0 1 11rem; min-width: 7rem; }

.woocommerce .actions .button[name="update_cart"],
.woocommerce .actions button[name="update_cart"] {
  margin-left: auto; background: transparent; color: var(--c-ink);
  border: 1px solid var(--c-ink); box-shadow: none;
}
.woocommerce .actions .button[name="update_cart"]:hover:not(:disabled),
.woocommerce .actions button[name="update_cart"]:hover:not(:disabled) {
  background: var(--c-ink); color: var(--c-page);
}
/* Disabled until something changes: say so with opacity, not a muddy fill. */
.woocommerce .actions .button[name="update_cart"]:disabled,
.woocommerce .actions button[name="update_cart"]:disabled {
  opacity: .45; background: transparent; color: var(--c-ink); cursor: not-allowed;
}
@media (max-width: 560px) {
  .woocommerce .coupon { flex: 1 1 100%; }
  .woocommerce .actions .button[name="update_cart"],
  .woocommerce .actions button[name="update_cart"] { margin-left: 0; width: 100%; }
}

/* ---- Cart actions cell ----
   `.woocommerce .actions { display: flex }` was being applied to the <td> itself. A flex td is
   no longer a table cell, so its colspan="6" was ignored and it took the width of column one:
   52px, which is why the coupon field and both buttons stacked. The cell stays a table cell and
   its children do the laying out, so colspan spans the table as it should. */
.woocommerce-cart-form td.actions {
  display: table-cell; width: auto; text-align: left; padding: var(--s-5) !important;
}
.woocommerce-cart-form td.actions .coupon {
  display: inline-flex; flex-wrap: wrap; vertical-align: middle; gap: var(--s-3); width: auto;
}
.woocommerce-cart-form td.actions .button[name="update_cart"],
.woocommerce-cart-form td.actions button[name="update_cart"] {
  float: right; margin-left: var(--s-3); margin-top: 0;
}
@media (max-width: 560px) {
  .woocommerce-cart-form td.actions .coupon { width: 100%; }
  .woocommerce-cart-form td.actions .coupon #coupon_code { flex: 1 1 8rem; min-width: 0; }
  .woocommerce-cart-form td.actions .button[name="update_cart"],
  .woocommerce-cart-form td.actions button[name="update_cart"] {
    float: none; width: 100%; margin: var(--s-3) 0 0;
  }
}

/* ---- Product description ----
   The copy runs 700 to 1000 words. The .panel rule above caps it at 70ch, which on a wide
   screen left the right half of the page empty. Two columns were worse: spanning headings reset
   the flow and left ragged holes. One column across the full width, with the global 68ch
   paragraph measure lifted inside it. */
.woocommerce div.product .woocommerce-tabs .panel.woocommerce-Tabs-panel--description {
  max-width: none;
}
.woocommerce-Tabs-panel--description p,
.woocommerce-Tabs-panel--description li { max-width: none; }
.woocommerce-Tabs-panel--description table { width: 100%; }
.woocommerce-Tabs-panel--description > h2 { margin-top: var(--s-6); }
.woocommerce-Tabs-panel--description > h2:first-child { margin-top: 0; }

}

/* ---- Specification table ----
   The writers produced the specs as a bare <table> on some products and a list of
   "<strong>Label:</strong> value" on others. Both are now one table, and this is what makes it
   read as a table rather than two loose columns of text. */
.spec-table { width: 100%; border-collapse: collapse; margin: var(--s-4) 0 var(--s-5);
  font-size: var(--t-sm); }
.spec-table th, .spec-table td { padding: var(--s-3) var(--s-4); text-align: left;
  vertical-align: top; border-bottom: 1px solid var(--c-line); }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--c-line); }
.spec-table th[scope="row"] { width: 32%; font-family: var(--f-ui); font-weight: 700;
  color: var(--c-ink); white-space: normal; }
.spec-table td { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.spec-table tbody tr:nth-child(even) { background: var(--c-page); }
@media (max-width: 599px) {
  /* Stack on a phone: a two-column table at 358px squeezes both sides to nothing. */
  .spec-table, .spec-table tbody, .spec-table tr, .spec-table th, .spec-table td { display: block; width: auto; }
  .spec-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--c-line); }
  .spec-table th, .spec-table td { border: 0; padding: 0; }
  .spec-table th[scope="row"] { width: auto; margin-bottom: 2px; }
  .spec-table tbody tr:nth-child(even) { background: none; }
}

/* The first-order code, said where the coupon box is. */
.first-order-hint { margin: 0 0 var(--s-4); font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--c-ink-soft); }
.first-order-hint code { font-family: var(--f-ui); font-weight: 700; letter-spacing: .04em;
  background: var(--c-accent-soft); color: var(--c-ink); padding: 2px var(--s-2);
  border-radius: var(--r-sm); }

/* ---- Bitcoin help at checkout ----
   Bitcoin is the only payment method, so someone who has never used it needs the guide before
   the payment step rather than after it. */
.btc-help { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  justify-content: space-between; background: var(--c-accent-soft);
  border: 1px solid var(--c-line); border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md); padding: var(--s-5) var(--s-6); margin-bottom: var(--s-6); }
.btc-help__body { flex: 1 1 24rem; }
.btc-help h2 { font-size: var(--t-lg); margin: 0 0 var(--s-2); }
.btc-help p { margin: 0; font-size: var(--t-sm); color: var(--c-ink-soft); max-width: 62ch; }
.btc-help__cta { flex: 0 0 auto; }
.btc-help__inline { display: inline-block; margin-top: var(--s-2); font-family: var(--f-ui);
  font-size: var(--t-sm); font-weight: 600; }
@media (max-width: 599px) {
  .btc-help { padding: var(--s-4); }
  .btc-help__cta, .btc-help__cta .btn { width: 100%; }
}

/* The Bitcoin guide offered at the cart, under the checkout button. */
.cart-btc-note { margin: var(--s-3) 0 0; font-family: var(--f-ui); font-size: var(--t-sm);
  color: var(--c-ink-soft); text-align: center; }
.cart-btc-note a { font-weight: 600; }