/* ==========================================================================
   CBD on Broadway — WooCommerce stylesheet
   --------------------------------------------------------------------------
   WHY THIS FILE EXISTS

   This theme overrides exactly three WooCommerce templates — archive-product,
   content-product and single-product. It overrides NOTHING that touches
   money, tax, stock, payment gateways or customer data: no cart.php, no
   checkout templates, no form-checkout.php, no payment.php, no
   order-review.php, no my-account templates.

   That is deliberate. Those templates change between WooCommerce releases,
   and a stale override does not fail loudly — it silently drops a tax line,
   a gateway field or a nonce and you find out from a customer. So the cart,
   the checkout, the payment box and the account pages run on WooCommerce's
   own, always-current markup, and everything below reshapes that markup with
   CSS alone. When WooCommerce updates, this file may need a nudge; nothing
   will break in a way that costs an order.

   Load order: enqueued after site.css (see cob_assets() in functions.php) so
   the theme's tokens and this file both win over WooCommerce's own CSS.

   CONTENTS
   01. Page frame & shared resets
   02. Buttons
   03. Notices & messages
   04. Forms & fields
   05. Breadcrumb
   06. Shop archive — grid, tools, pagination
   07. Product card (.pcard)
   08. Single product — gallery, summary, variations, quantity
   09. Single product — tabs, attributes, reviews, related
   10. Cart page
   11. Checkout page
   12. My account
   13. Blocks (cart/checkout blocks, if used) & odds and ends
   14. Responsive — 1080 / 980 / 560
   ========================================================================== */


/* ── 01. Page frame & shared resets ─────────────────────────────────────── */

/* The Woo wrapper in functions.php emits <main id="top"><section><div class="wrap">.
   site.css gives every <section> 78px of padding; shop pages want less. */
.woocommerce-page main#top > section,
.woocommerce main#top > section{padding:52px 0}

/* Breadcrumb-only hero used above the PDP. */
.phero-lite{padding:26px 0 30px}
.phero-lite .crumbs,
.phero-lite .woocommerce-breadcrumb{margin:0}

/* Woo's own layout stylesheet floats a lot of things. Undo it where we grid. */
.woocommerce .col2-set,
.woocommerce-page .col2-set{width:100%}
.woocommerce .col2-set::before,.woocommerce .col2-set::after,
.woocommerce ul.products::before,.woocommerce ul.products::after,
.woocommerce div.product::before,.woocommerce div.product::after{content:none;display:none}

/* Woo hides nothing by default; keep [hidden] authoritative as site.css does. */
.woocommerce [hidden]{display:none!important}

/* Scroll-reveal safety net: cards carry data-r and start at opacity 0. If
   scripting is off, show them rather than serving a blank grid. */
@media (scripting:none){
  [data-r]{opacity:1;transform:none}
}

/* Woo prints its own H2/H3 in several places — hand them the theme's type. */
.woocommerce h2,.woocommerce h3,
.woocommerce-page h2,.woocommerce-page h3{font-family:var(--disp);font-weight:600;color:var(--violet-ink);letter-spacing:-.015em;line-height:1.12}

.woocommerce-products-header{margin:0}
.woocommerce-products-header__title.page-title{font-size:clamp(2.1rem,4.4vw,3.3rem);color:var(--violet-ink);margin:12px 0 14px}
.term-description,
.woocommerce-product-details__short-description{color:var(--muted)}
.term-description p{color:var(--muted);font-size:clamp(1rem,1.4vw,1.14rem);max-width:620px}
.term-description p + p{margin-top:.9em}

/* Store notice (Woo → Customizer → "Store Notice"). */
.woocommerce-store-notice,
p.demo_store{background:var(--violet-ink);color:#efe7fb;font-family:var(--sans);font-size:.83rem;font-weight:600;
  padding:10px 16px;text-align:center;box-shadow:none}
.woocommerce-store-notice a,p.demo_store a{color:var(--amber);text-decoration:underline}


/* ── 02. Buttons ────────────────────────────────────────────────────────── */
/* Map every WooCommerce button onto the theme's .btn / .btn-primary look. */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.woocommerce-page #respond input#submit{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--sans);font-weight:700;font-size:.93rem;line-height:1.2;
  padding:.9em 1.6em;border-radius:100px;border:1.5px solid transparent;
  background:var(--violet);background-image:none;color:#fff;
  text-shadow:none;text-decoration:none;text-transform:none;letter-spacing:0;
  box-shadow:none;cursor:pointer;white-space:normal;
  transition:.28s cubic-bezier(.2,.8,.2,1);
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover,
.woocommerce-page input.button:hover{
  background:var(--violet-deep);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-sm)
}
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

/* Secondary / low-emphasis buttons: "Update cart", "Continue shopping". */
.woocommerce button[name="update_cart"],
.woocommerce input[name="update_cart"],
.woocommerce .wc-backward,
.woocommerce a.button.wc-backward{background:#fff;color:var(--ink);border-color:var(--line)}
.woocommerce button[name="update_cart"]:hover,
.woocommerce input[name="update_cart"]:hover,
.woocommerce .wc-backward:hover,
.woocommerce a.button.wc-backward:hover{background:#fff;color:var(--violet);border-color:var(--violet)}

/* Disabled / loading. */
.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button[disabled],
.woocommerce button.button:disabled[disabled],
.woocommerce input.button:disabled,
.woocommerce input.button[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;padding:.9em 1.6em}
.woocommerce a.button.loading,
.woocommerce button.button.loading{opacity:.6;pointer-events:none}
.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after{top:auto;right:auto;position:static;margin-left:.4em}
.woocommerce a.added_to_cart{display:inline-block;margin-top:8px;font-size:.82rem;font-weight:700;color:var(--violet);text-decoration:underline;text-underline-offset:3px}
.woocommerce a.added_to_cart:hover{color:var(--violet-deep)}

/* Big commit buttons want to fill their panel. */
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order,
.woocommerce-checkout #place_order{display:flex;width:100%;font-size:1rem;padding:1.05em 1.6em}


/* ── 03. Notices & messages ─────────────────────────────────────────────── */
/* → the theme's .notice / .notice-ok / .notice-info / .notice-warn look. */

.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-notices-wrapper > *:last-child{margin-bottom:22px}

.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-noreviews,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info,
.woocommerce-page .woocommerce-error{
  border:0;border-top:0;border-radius:16px;
  padding:18px 22px;margin:0 0 18px;
  font-family:var(--sans);font-size:.92rem;line-height:1.6;font-weight:500;
  display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  list-style:none;background:var(--sky);color:#2f5b87;box-shadow:none
}
/* Kill Woo's grey bar, tick glyph and left padding reservation. */
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-page .woocommerce-message::before,
.woocommerce-page .woocommerce-info::before,
.woocommerce-page .woocommerce-error::before{content:none;display:none}

.woocommerce .woocommerce-message,
.woocommerce-page .woocommerce-message{background:var(--mint);color:var(--green-deep)}
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-info{background:var(--sky);color:#2f5b87}
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error{background:var(--peach);color:var(--amber-deep);box-shadow:inset 0 0 0 1.5px rgba(181,98,63,.28)}
.woocommerce .woocommerce-error li{list-style:none;margin:0}
.woocommerce .woocommerce-message strong,
.woocommerce .woocommerce-info strong,
.woocommerce .woocommerce-error strong{font-weight:800}
.woocommerce .woocommerce-message a:not(.button),
.woocommerce .woocommerce-info a:not(.button),
.woocommerce .woocommerce-error a:not(.button){text-decoration:underline;text-underline-offset:3px;font-weight:700}

/* The inline button ("View cart") pushed to the right of the notice. */
.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-error .button{margin:0 0 0 auto;padding:.6em 1.2em;font-size:.84rem;flex-shrink:0}

/* Password-protected / no-reviews style notices. */
.woocommerce .woocommerce-noreviews,
.woocommerce p.no-comments{background:var(--bg);color:var(--muted);border-radius:16px;padding:16px 20px}


/* ── 04. Forms & fields ─────────────────────────────────────────────────── */
/* Everything maps onto site.css's .field styling: 1.5px --line border,
   14px radius, violet focus ring. */

.woocommerce form .form-row,
.woocommerce-page form .form-row{display:grid;gap:7px;margin:0 0 18px;padding:0}
.woocommerce form .form-row label,
.woocommerce-page form .form-row label{
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--violet);line-height:1.4;margin:0
}
.woocommerce form .form-row label.checkbox,
.woocommerce form .form-row .woocommerce-form__label-for-checkbox{
  display:flex;gap:11px;align-items:flex-start;
  font-size:.9rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--muted);cursor:pointer
}
.woocommerce form .form-row abbr.required,
.woocommerce form .form-row .required{color:var(--rust);border:0;text-decoration:none}
.woocommerce form .form-row .optional{color:var(--muted);font-weight:500}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row input[type="text"],
.woocommerce form .form-row input[type="email"],
.woocommerce form .form-row input[type="tel"],
.woocommerce form .form-row input[type="password"],
.woocommerce form .form-row input[type="number"],
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce .woocommerce-input-wrapper input.input-text{
  font-family:var(--sans);font-size:.98rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:14px;
  padding:.85em 1.1em;width:100%;line-height:1.4;box-shadow:none;transition:.2s
}
.woocommerce form .form-row textarea{min-height:130px;resize:vertical;line-height:1.6}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce .woocommerce-input-wrapper input.input-text:focus{
  outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)
}
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select{border-color:var(--rust)}
.woocommerce form .form-row.woocommerce-validated input.input-text{border-color:#c4e0cd}
.woocommerce form .form-row input[type="checkbox"],
.woocommerce form .form-row input[type="radio"]{width:19px;height:19px;accent-color:var(--violet);flex-shrink:0;margin:2px 0 0}
.woocommerce form .form-row ::placeholder{color:#9b93b0}

/* Native selects get the theme's violet caret. */
.woocommerce form .form-row select,
.woocommerce .woocommerce-ordering select,
.woocommerce div.product form.cart .variations select{
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e3aa8' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1em center;background-size:16px;padding-right:2.8em
}

/* Two-up rows (First name / Last name). */
.woocommerce form .form-row-first,
.woocommerce form .form-row-last{width:100%;float:none;margin-right:0}
.woocommerce form .form-row-wide,
.woocommerce form .form-row-full{width:100%;clear:both}

/* Select2 (country / state pickers) dressed as a .field input. */
.woocommerce .select2-container--default .select2-selection--single{
  height:auto;border:1.5px solid var(--line);border-radius:14px;background:#fff;padding:.55em .4em
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color:var(--ink);font-family:var(--sans);font-size:.98rem;line-height:1.7;padding-left:.7em
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{height:100%;right:8px}
.woocommerce .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)}
.select2-dropdown{border:1.5px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.select2-container--default .select2-results__option--highlighted[aria-selected]{background:var(--violet)}

/* Password strength / field descriptions. */
.woocommerce form .woocommerce-password-hint,
.woocommerce form .description,
.woocommerce-privacy-policy-text p{font-size:.82rem;color:var(--muted);line-height:1.6}
.woocommerce .woocommerce-password-strength{border-radius:10px;font-size:.78rem;font-weight:700;padding:.5em .9em;border:0}
.woocommerce .woocommerce-password-strength.strong{background:var(--mint);color:var(--green-deep)}
.woocommerce .woocommerce-password-strength.short,
.woocommerce .woocommerce-password-strength.bad{background:var(--peach);color:var(--amber-deep)}


/* ── 05. Breadcrumb ─────────────────────────────────────────────────────── */
/* functions.php already rewrites Woo's breadcrumb wrapper to <nav class="crumbs">,
   so site.css normally handles this. These rules are the safety net for any
   plugin that restores Woo's own markup. */

.woocommerce .woocommerce-breadcrumb,
nav.woocommerce-breadcrumb{
  font-family:var(--sans);font-size:.8rem;font-weight:600;color:var(--muted);
  display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0;padding:0
}
.woocommerce .woocommerce-breadcrumb::before,
.woocommerce .woocommerce-breadcrumb::after{content:none;display:none}
.woocommerce .woocommerce-breadcrumb a{color:var(--muted)}
.woocommerce .woocommerce-breadcrumb a:hover{color:var(--violet)}
.crumbs .sep,.woocommerce-breadcrumb .sep{opacity:.5}


/* ── 06. Shop archive — grid, tools, pagination ─────────────────────────── */

.shop-main{min-width:0}

/* The loop wrapper. archive-product.php swaps <ul class="products"> for
   <div class="prod-grid products">, but Woo still emits <ul class="products">
   for shortcodes and cross-sells, so both are handled. */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products,
div.prod-grid.products{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  margin:0 0 8px;padding:0;list-style:none;clear:both
}
.woocommerce ul.products.columns-1,ul.products.columns-1,div.prod-grid.columns-1{grid-template-columns:1fr}
.woocommerce ul.products.columns-2,ul.products.columns-2,div.prod-grid.columns-2{grid-template-columns:repeat(2,1fr)}
.woocommerce ul.products.columns-3,ul.products.columns-3,div.prod-grid.columns-3{grid-template-columns:repeat(3,1fr)}
.woocommerce ul.products.columns-4,ul.products.columns-4,div.prod-grid.columns-4{grid-template-columns:repeat(4,1fr)}

/* Kill Woo's float/percentage-width/clear grid entirely. */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product-category{
  width:auto!important;float:none!important;clear:none!important;margin:0!important;
  list-style:none;text-align:left
}
.woocommerce ul.products li.product::before,
.woocommerce ul.products li.product::after{content:none;display:none}
.woocommerce ul.products li.first,
.woocommerce ul.products li.last{clear:none!important}

/* Defensive: if any context renders a stock <li class="product"> card rather
   than our .pcard <article>, give it the same shell. */
.woocommerce ul.products li.product:not(.pcard){
  background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding:0 0 18px;position:relative
}
.woocommerce ul.products li.product:not(.pcard) > a img{margin:0 0 14px;border-radius:0}
.woocommerce ul.products li.product:not(.pcard) .woocommerce-loop-product__title{
  font-family:var(--disp);font-size:1.06rem;color:var(--violet-ink);padding:0 22px;margin:0 0 6px
}
.woocommerce ul.products li.product:not(.pcard) .price{padding:0 22px;color:var(--violet-ink)}
.woocommerce ul.products li.product:not(.pcard) .button{margin:12px 22px 0}

/* Result count + ordering → the theme's .shop-bar / .shop-tools. */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count{
  font-family:var(--sans);font-size:.9rem;font-weight:600;color:var(--muted);margin:0;float:none
}
.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering{margin:0;float:none}
.woocommerce .woocommerce-ordering select{
  width:auto;min-width:190px;padding:.6em 2.6em .6em 1em;font-size:.88rem;font-family:var(--sans);font-weight:600;
  color:var(--ink);background-color:#fff;border:1.5px solid var(--line);border-radius:100px;
  background-position:right .9em center;background-size:15px;transition:.2s;cursor:pointer
}
.woocommerce .woocommerce-ordering select:hover{border-color:var(--violet)}
.woocommerce .woocommerce-ordering select:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)}

/* Category tiles, if the archive is set to show subcategories. */
.woocommerce ul.products li.product-category a{
  display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;transition:.3s cubic-bezier(.2,.8,.2,1)
}
.woocommerce ul.products li.product-category a:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.woocommerce ul.products li.product-category h2{font-size:1.2rem;color:var(--violet-ink);margin:12px 0 0}
.woocommerce ul.products li.product-category mark.count{background:none;color:var(--muted);font-weight:600;font-size:.85rem}

/* Empty state. */
.empty-state .woocommerce-info{justify-content:center;text-align:center;background:transparent;color:var(--muted);padding:0;margin:0 0 6px}

/* Pagination → site.css's .pagination. */
.woocommerce nav.woocommerce-pagination{margin:40px 0 0;text-align:center}
.woocommerce nav.woocommerce-pagination ul{
  display:flex;gap:8px;justify-content:center;flex-wrap:wrap;
  border:0;margin:0;padding:0;white-space:normal
}
.woocommerce nav.woocommerce-pagination ul li{border:0;margin:0;padding:0;overflow:visible;float:none}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span{
  min-width:40px;height:40px;padding:0 12px;border-radius:12px;border:1.5px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:.9rem;font-weight:700;color:var(--ink);transition:.2s
}
.woocommerce nav.woocommerce-pagination ul li a:hover{background:#fff;border-color:var(--violet);color:var(--violet)}
.woocommerce nav.woocommerce-pagination ul li span.current,
.woocommerce nav.woocommerce-pagination ul li a.current{background:var(--violet);border-color:var(--violet);color:#fff}


/* ── 07. Product card (.pcard) ──────────────────────────────────────────── */

/* THE CLICK-TARGET FIX.
   site.css makes the whole card clickable with
   `.pcard h3 a::after{content:"";position:absolute;inset:0}`.
   That overlay would swallow every click aimed at the add-to-cart button, so
   the overlay is pinned to z-index 1 and .pcta is raised above it. Chosen
   over disabling the overlay because whole-card-clickable is better UX — the
   button genuinely sits on top and receives the click. */
.pcard{position:relative}
.pcard h3 a::after{z-index:1}
.pcard-tags{z-index:2}
.pcard .pcta{position:relative;z-index:3}
.pcard .pcta > *{position:relative;z-index:3}
.pcard-media-link{position:relative;z-index:0;display:block;width:100%;height:100%;align-self:stretch}
.pcard-media-link img{width:100%;height:100%;object-fit:cover}

/* Add-to-cart inside a card: outline pill, full width, small — matching the
   static design's `.btn.btn-line.btn-sm.btn-block`. */
.woocommerce .pcard .pcta a.button,
.woocommerce .pcard .pcta button.button,
.woocommerce .pcard .pcta a.button.alt{
  display:flex;width:100%;background:#fff;color:var(--ink);border-color:var(--line);
  font-size:.84rem;padding:.7em 1.2em
}
.woocommerce .pcard .pcta a.button:hover,
.woocommerce .pcard .pcta button.button:hover{background:#fff;color:var(--violet);border-color:var(--violet);transform:none;box-shadow:none}
.woocommerce .pcard .pcta a.added_to_cart{display:block;text-align:center;margin-top:8px}

.pcard .price ins,
.pcard .price .amount{text-decoration:none;font-family:var(--disp);font-weight:700;color:var(--violet-ink)}
.pcard .price del{font-family:var(--sans);font-size:.86rem;font-weight:600;color:var(--muted);opacity:1;margin-right:6px}
.pcard .price .woocommerce-Price-currencySymbol{font-size:.85em}
.pcard .star-rating{font-size:.78rem;color:var(--amber);margin:2px 0 0;float:none}

/* Stock badges — the theme ships tag-sale / tag-new / tag-full / tag-thcfree;
   these are the two extra states the card renders. */
.tag-stock{background:var(--lilac);color:var(--violet-deep)}
.tag-stock.tag-low{background:var(--peach);color:var(--amber-deep)}
.tag-stock.tag-out{background:#efe9f6;color:var(--rust)}

/* Woo's own sale flash, wherever it still appears. */
.woocommerce span.onsale{
  position:absolute;top:12px;left:12px;right:auto;min-width:0;min-height:0;line-height:1;
  padding:.3em .75em;border-radius:100px;background:var(--amber);color:var(--violet-ink);
  font-family:var(--sans);font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  margin:0;z-index:2
}


/* ── 08. Single product — gallery, summary, variations, quantity ────────── */

/* Undo Woo's 48% floated two-column layout; single-product.php grids it. */
.woocommerce div.product{margin:0}
.woocommerce div.product div.images,
.woocommerce div.product div.summary,
.woocommerce div.product .woocommerce-product-gallery{float:none;width:100%;margin:0}

/* IMPORTANT: Woo's product summary carries class="summary", which in site.css
   is the sticky grey cart-totals panel. Neutralise it here. */
.woocommerce div.product .summary.entry-summary{
  background:none;border:0;border-radius:0;padding:0;position:static;top:auto
}

.pdp-media-col{min-width:0;position:relative}
.woocommerce div.product .woocommerce-product-gallery{position:relative}
.woocommerce div.product .woocommerce-product-gallery__wrapper{margin:0;border-radius:24px;overflow:hidden;box-shadow:var(--shadow)}
.woocommerce div.product .woocommerce-product-gallery__image,
.woocommerce div.product .woocommerce-product-gallery__image a{display:block}
.woocommerce div.product .woocommerce-product-gallery__image img{width:100%;height:auto;display:block}
.woocommerce div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger{
  position:absolute;top:14px;right:14px;z-index:9;
  width:42px;height:42px;border-radius:50%;background:#fff;color:var(--violet);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);
  font-size:1rem;text-indent:0
}

/* Gallery thumbnails → .pdp-thumbs. */
.woocommerce div.product .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0 0;padding:0;list-style:none
}
.woocommerce div.product .flex-control-thumbs::after{content:none;display:none}
.woocommerce div.product .flex-control-thumbs li{width:auto;float:none;margin:0}
.woocommerce div.product .flex-control-thumbs li img{
  width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;border:2px solid transparent;opacity:.75;transition:.2s;cursor:pointer
}
.woocommerce div.product .flex-control-thumbs li img:hover,
.woocommerce div.product .flex-control-thumbs li img.flex-active{opacity:1;border-color:var(--violet)}

/* Summary type. */
.woocommerce div.product .product_title{font-size:clamp(1.8rem,3.4vw,2.6rem);color:var(--violet-ink);margin:10px 0 12px}
.woocommerce div.product .pdp-info > .eyebrow a{color:var(--violet)}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--disp);font-size:2rem;font-weight:700;color:var(--violet);margin:16px 0 6px;line-height:1.1
}
.woocommerce div.product p.price del{font-family:var(--sans);font-size:1.1rem;color:var(--muted);text-decoration:line-through;font-weight:600;opacity:1;margin-right:10px}
.woocommerce div.product p.price ins{text-decoration:none;font-weight:700}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted);font-size:1.02rem;margin-bottom:22px;line-height:1.6}
.woocommerce div.product .woocommerce-product-details__short-description p + p{margin-top:.9em}
.woocommerce div.product .woocommerce-product-rating{margin:0 0 6px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.woocommerce div.product .woocommerce-product-rating .star-rating{color:var(--amber);float:none;margin:0}
.woocommerce div.product .woocommerce-review-link{font-size:.85rem;color:var(--muted);font-weight:600}
.woocommerce div.product p.stock{font-size:.88rem;font-weight:700;margin:0 0 10px}
.woocommerce div.product p.stock.in-stock{color:var(--green-deep)}
.woocommerce div.product p.stock.out-of-stock,
.woocommerce div.product p.stock.available-on-backorder{color:var(--rust)}

/* Add-to-cart form. */
.woocommerce div.product form.cart{margin:24px 0 0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after{content:none;display:none}
.woocommerce div.product form.cart div.quantity{float:none;margin:0}
.woocommerce div.product form.cart .button{flex:0 1 auto}

/* Quantity stepper → the theme's .qty pill. */
.woocommerce .quantity,
.woocommerce-page .quantity{
  display:inline-flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:100px;overflow:hidden
}
.woocommerce .quantity input.qty,
.woocommerce-page .quantity input.qty{
  width:66px;height:44px;padding:0 6px;border:0;background:none;text-align:center;
  font-family:var(--sans);font-size:1rem;font-weight:700;color:var(--violet-ink);
  -moz-appearance:textfield;appearance:textfield;box-shadow:none
}
.woocommerce .quantity input.qty:focus{outline:0}
.woocommerce .quantity input.qty::-webkit-outer-spin-button,
.woocommerce .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
/* Plus/minus buttons, if a plugin adds them. */
.woocommerce .quantity .plus,
.woocommerce .quantity .minus{
  width:42px;height:44px;border:0;background:none;color:var(--violet);
  font-family:var(--sans);font-size:1.2rem;font-weight:700;cursor:pointer;transition:.18s
}
.woocommerce .quantity .plus:hover,
.woocommerce .quantity .minus:hover{background:var(--lilac)}

/* Variations → the theme's .opt-group look. */
.woocommerce div.product form.cart .variations{
  width:100%;margin:0 0 18px;border:0;border-collapse:collapse;display:block
}
.woocommerce div.product form.cart .variations tbody,
.woocommerce div.product form.cart .variations tr{display:block;border:0}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td{display:block;border:0;padding:0;text-align:left;background:none}
.woocommerce div.product form.cart .variations th.label{margin-bottom:8px}
.woocommerce div.product form.cart .variations th.label label{
  font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)
}
.woocommerce div.product form.cart .variations td.value{margin-bottom:16px}
.woocommerce div.product form.cart .variations select{
  width:100%;max-width:340px;font-family:var(--sans);font-size:.95rem;color:var(--ink);background-color:#fff;
  border:1.5px solid var(--line);border-radius:14px;padding:.8em 2.8em .8em 1.1em;transition:.2s
}
.woocommerce div.product form.cart .variations select:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)}
.woocommerce div.product form.cart a.reset_variations{
  display:inline-block;margin-top:6px;font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:underline;text-underline-offset:3px
}
.woocommerce div.product form.cart a.reset_variations:hover{color:var(--rust)}
.woocommerce div.product .woocommerce-variation-price{margin-bottom:14px}
.woocommerce div.product .woocommerce-variation-price .price{font-family:var(--disp);font-size:1.6rem;font-weight:700;color:var(--violet)}
.woocommerce div.product .woocommerce-variation-availability p{font-size:.88rem;font-weight:700;color:var(--green-deep)}
.woocommerce div.product .woocommerce-variation-add-to-cart{display:flex;gap:12px;align-items:center;flex-wrap:wrap;width:100%}

/* Grouped products table. */
.woocommerce div.product form.cart table.group_table{width:100%;border:1px solid var(--line);border-radius:16px;border-collapse:collapse;overflow:hidden}
.woocommerce div.product form.cart table.group_table td{border:0;border-bottom:1px solid var(--line);padding:12px 16px;vertical-align:middle}
.woocommerce div.product form.cart table.group_table tr:last-child td{border-bottom:0}

/* Product meta (SKU, categories, tags). */
.woocommerce div.product .product_meta{
  font-size:.85rem;color:var(--muted);display:grid;gap:6px;margin:18px 0 0;padding-top:18px;border-top:1px solid var(--line)
}
.woocommerce div.product .product_meta a{color:var(--violet);font-weight:600}
.woocommerce div.product .product_meta a:hover{text-decoration:underline}

/* The trust list sits right under the form. */
.pdp-trust{margin-top:24px}
.pdp-trust .hb a{color:var(--violet);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pdp-info .notice{margin-top:4px}


/* ── 09. Single product — tabs, attributes, reviews, related ────────────── */

.woocommerce div.product .woocommerce-tabs{margin-top:52px;clear:both}
.woocommerce div.product .woocommerce-tabs ul.tabs{
  display:flex;gap:6px;flex-wrap:wrap;align-items:flex-end;
  list-style:none;margin:0 0 26px;padding:0;border-bottom:1px solid var(--line)
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after{content:none;display:none;border:0}
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  background:none;border:0;border-radius:0;box-shadow:none;margin:0;padding:0
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after{content:none;display:none;border:0;box-shadow:none}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  display:block;padding:12px 18px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-family:var(--sans);font-size:.93rem;font-weight:700;color:var(--muted);transition:.2s
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--violet)}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--violet);border-bottom-color:var(--violet)}
.woocommerce div.product .woocommerce-tabs .panel{
  margin:0;padding:0;max-width:820px;font-size:1.02rem;color:#40385c;line-height:1.7
}
.woocommerce div.product .woocommerce-tabs .panel > * + *{margin-top:1.1em}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:clamp(1.4rem,2.4vw,1.8rem);color:var(--violet-ink);margin-bottom:.5em}
.woocommerce div.product .woocommerce-tabs .panel a{color:var(--violet);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.woocommerce div.product .woocommerce-tabs .panel ul,
.woocommerce div.product .woocommerce-tabs .panel ol{padding-left:1.3em;display:grid;gap:.5em}
.woocommerce div.product .woocommerce-tabs .panel li::marker{color:var(--violet)}

/* Attributes table → the theme's .spec-list. */
.woocommerce div.product table.shop_attributes{
  width:100%;max-width:560px;border:1px solid var(--line);border-radius:16px;border-collapse:collapse;overflow:hidden;margin:0
}
.woocommerce div.product table.shop_attributes th,
.woocommerce div.product table.shop_attributes td{
  border:0;border-bottom:1px solid var(--line);padding:13px 18px;font-size:.93rem;line-height:1.5;background:transparent
}
.woocommerce div.product table.shop_attributes tr:last-child th,
.woocommerce div.product table.shop_attributes tr:last-child td{border-bottom:0}
.woocommerce div.product table.shop_attributes tr:nth-child(odd) th,
.woocommerce div.product table.shop_attributes tr:nth-child(odd) td{background:var(--bg)}
.woocommerce div.product table.shop_attributes th{
  font-family:var(--sans);font-weight:600;color:var(--muted);text-align:left;width:45%;font-style:normal
}
.woocommerce div.product table.shop_attributes td{color:var(--violet-ink);font-weight:700;text-align:right}
.woocommerce div.product table.shop_attributes td p{margin:0;padding:0;font-style:normal}

/* Reviews. */
.woocommerce #reviews #comments h2{font-size:1.3rem;margin-bottom:18px}
.woocommerce #reviews ol.commentlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.woocommerce #reviews ol.commentlist li{margin:0;padding:0}
.woocommerce #reviews ol.commentlist li .comment_container{
  background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;display:flex;gap:16px;align-items:flex-start
}
.woocommerce #reviews ol.commentlist li img.avatar{
  position:static;width:52px;height:52px;border-radius:50%;border:0;padding:0;background:var(--lilac);flex-shrink:0
}
.woocommerce #reviews ol.commentlist li .comment-text{
  border:0;border-radius:0;padding:0;margin:0;width:auto
}
.woocommerce #reviews .comment-form{display:grid;gap:0;max-width:620px}
.woocommerce #reviews p.stars a{color:var(--amber)}
.woocommerce #review_form #respond textarea{
  font-family:var(--sans);font-size:.98rem;border:1.5px solid var(--line);border-radius:14px;padding:.85em 1.1em;min-height:130px;width:100%
}
.woocommerce #review_form #respond textarea:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)}
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before{color:var(--amber)}

/* Related products / up-sells. */
.woocommerce section.related,
.woocommerce section.up-sells,
.woocommerce .cross-sells{margin-top:56px;clear:both}
.woocommerce section.related > h2,
.woocommerce section.up-sells > h2,
.woocommerce .cross-sells > h2{
  font-size:clamp(1.5rem,2.6vw,2rem);color:var(--violet-ink);margin:0 0 24px;text-transform:lowercase
}


/* ── 10. Cart page ──────────────────────────────────────────────────────── */
/* NOTE: cart.php is NOT overridden. Everything here is pure restyling of
   WooCommerce's own cart markup. */

.woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:40px;align-items:start}
.woocommerce-cart .woocommerce > *{grid-column:1/-1;min-width:0}
.woocommerce-cart .woocommerce > form.woocommerce-cart-form{grid-column:1/2}
.woocommerce-cart .woocommerce > .cart-collaterals{grid-column:2/3}
.woocommerce-cart .cart-collaterals{width:100%;display:grid;gap:24px}
.woocommerce-cart .cart-collaterals .cross-sells{width:100%;margin-top:0}
.woocommerce-cart .cart-collaterals .cross-sells ul.products,
.woocommerce-cart .cart-collaterals .cross-sells div.prod-grid{grid-template-columns:1fr}

/* Cart rows as cards, echoing .citem. */
.woocommerce table.shop_table.cart,
.woocommerce-cart table.cart{
  border:0;border-radius:0;border-collapse:separate;border-spacing:0 14px;margin:0;width:100%
}
.woocommerce-cart table.cart thead th{
  background:none;border:0;padding:0 16px 4px;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)
}
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td{
  background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);border-left:0;border-right:0;
  padding:16px;vertical-align:middle
}
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td:first-child{border-left:1px solid var(--line);border-radius:18px 0 0 18px}
.woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td:last-child{border-right:1px solid var(--line);border-radius:0 18px 18px 0}
.woocommerce-cart table.cart td.product-thumbnail{width:112px}
.woocommerce-cart table.cart td.product-thumbnail img{width:96px;height:96px;border-radius:14px;object-fit:cover}
.woocommerce-cart table.cart td.product-name a{font-family:var(--disp);font-size:1.02rem;font-weight:600;color:var(--violet-ink);line-height:1.3}
.woocommerce-cart table.cart td.product-name a:hover{color:var(--violet)}
.woocommerce-cart table.cart td.product-name .variation,
.woocommerce-cart table.cart td.product-name dl.variation{font-size:.83rem;color:var(--muted);font-weight:600;margin-top:4px}
.woocommerce-cart table.cart td.product-name dl.variation dt,
.woocommerce-cart table.cart td.product-name dl.variation dd{display:inline;margin:0;font-weight:600}
.woocommerce-cart table.cart td.product-name dl.variation dd p{display:inline;margin:0}
.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal{font-family:var(--disp);font-size:1.15rem;font-weight:700;color:var(--violet-ink)}
.woocommerce-cart table.cart td.product-remove{width:52px;text-align:center}
.woocommerce-cart table.cart td.product-remove a.remove{
  width:28px;height:28px;line-height:26px;font-size:1.25rem;color:var(--muted)!important;background:var(--bg);border-radius:50%;margin:0 auto
}
.woocommerce-cart table.cart td.product-remove a.remove:hover{background:var(--peach);color:var(--rust)!important}
.woocommerce-cart table.cart td.product-quantity .quantity{border-radius:100px}
.woocommerce-cart table.cart td.actions{background:none!important;border:0!important;padding:8px 0 0!important}

/* Coupon → the theme's .promo row. */
.woocommerce-cart table.cart td.actions .coupon,
.woocommerce form.checkout_coupon .form-row-first,
.woocommerce .coupon{display:flex;gap:8px;align-items:center;flex-wrap:wrap;float:none;padding:0}
.woocommerce-cart table.cart td.actions .coupon::before,
.woocommerce-cart table.cart td.actions .coupon::after{content:none;display:none}
.woocommerce-cart table.cart td.actions .coupon label{display:none}
.woocommerce-cart table.cart td.actions .coupon .input-text,
.woocommerce form.checkout_coupon .input-text,
.woocommerce #coupon_code{
  float:none;width:auto;flex:1 1 180px;min-width:0;
  font-family:var(--sans);font-size:.88rem;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:100px;padding:.7em 1.1em;margin:0
}
.woocommerce-cart table.cart td.actions .coupon .input-text:focus,
.woocommerce #coupon_code:focus{outline:0;border-color:var(--violet);box-shadow:0 0 0 4px rgba(94,58,168,.1)}
.woocommerce-cart table.cart td.actions .button{float:none;padding:.75em 1.4em;font-size:.88rem}
.woocommerce-cart table.cart td.actions > .button[name="update_cart"]{margin-left:auto}
.woocommerce form.checkout_coupon{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin:0 0 24px
}
.woocommerce-form-coupon-toggle .woocommerce-info{background:var(--lilac);color:var(--violet-deep)}

/* Cart totals → the theme's .summary panel. */
.woocommerce .cart_totals{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:26px;position:sticky;top:96px;width:100%;float:none
}
.woocommerce .cart_totals h2{font-size:1.3rem;color:var(--violet-ink);margin:0 0 18px}
.woocommerce .cart_totals table.shop_table{border:0;border-radius:0;border-collapse:collapse;margin:0;width:100%}
.woocommerce .cart_totals table.shop_table th,
.woocommerce .cart_totals table.shop_table td{
  border:0;padding:9px 0;font-family:var(--sans);font-size:.95rem;color:var(--muted);font-weight:600;background:none;vertical-align:top
}
.woocommerce .cart_totals table.shop_table td{text-align:right;color:var(--violet-ink)}
.woocommerce .cart_totals table.shop_table tr.order-total th,
.woocommerce .cart_totals table.shop_table tr.order-total td{
  border-top:1px solid var(--line);padding-top:16px;margin-top:10px;font-size:1.1rem;font-weight:700;color:var(--violet-ink)
}
.woocommerce .cart_totals table.shop_table tr.order-total td .amount{font-family:var(--disp);font-size:1.5rem;color:var(--violet)}
.woocommerce .cart_totals .woocommerce-shipping-destination{font-size:.82rem;color:var(--muted);font-weight:500}
.woocommerce .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;display:grid;gap:8px;text-align:left}
.woocommerce .cart_totals ul#shipping_method li{margin:0;padding:0;font-size:.9rem;color:var(--ink);display:flex;gap:9px;align-items:flex-start}
.woocommerce .cart_totals ul#shipping_method li input{margin:3px 0 0;accent-color:var(--violet)}
.woocommerce .cart_totals a.shipping-calculator-button{color:var(--violet);font-weight:700;font-size:.85rem;text-decoration:underline;text-underline-offset:3px}
.woocommerce .wc-proceed-to-checkout{padding:18px 0 0}

/* Empty cart. */
.woocommerce .cart-empty,
.woocommerce .wc-empty-cart-message .cart-empty{
  text-align:center;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:50px 20px 20px;color:var(--muted);font-size:1.05rem
}
.woocommerce .return-to-shop{text-align:center;background:var(--bg);border:1px solid var(--line);border-top:0;
  border-radius:0 0 var(--r) var(--r);margin-top:-20px;padding:0 20px 50px}


/* ── 11. Checkout page ──────────────────────────────────────────────────── */
/* NOTE: no checkout template is overridden. Layout only. */

.woocommerce-checkout .woocommerce{min-width:0}
.woocommerce-checkout form.checkout.woocommerce-checkout{margin:0}
.woocommerce-checkout #customer_details.col2-set{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 28px}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2{
  width:auto;float:none;padding:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm)
}
.woocommerce-checkout #customer_details h3{font-size:1.25rem;color:var(--violet-ink);margin:0 0 20px}
.woocommerce-checkout #customer_details h3#ship-to-different-address{
  display:flex;gap:11px;align-items:center;font-size:1.05rem
}
.woocommerce-checkout #customer_details h3#ship-to-different-address label{font-family:var(--disp);font-weight:600;color:var(--violet-ink);text-transform:none;letter-spacing:0;font-size:1.05rem;display:flex;gap:11px;align-items:center;cursor:pointer}
.woocommerce-checkout .woocommerce-additional-fields{margin-top:8px}

/* Order review → the .summary panel. Sits BELOW customer details, full width.
   `clear:both` and `position:static` defend against WooCommerce's own floats
   and against any leftover positioning from earlier rules. */
.woocommerce-checkout #order_review_heading{
  font-size:1.3rem;color:var(--violet-ink);margin:0 0 14px;clear:both
}
.woocommerce-checkout #order_review{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:26px;width:100%;float:none;clear:both;position:static
}
@media(min-width:981px){
  /* Cap the measure so totals do not stretch across the full 1180px wrap. */
  .woocommerce-checkout #order_review_heading,
  .woocommerce-checkout #order_review{max-width:720px;margin-left:auto;margin-right:auto}
}
.woocommerce-checkout #order_review table.shop_table{
  border:0;border-radius:0;border-collapse:collapse;margin:0;width:100%
}
.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td{
  border:0;border-bottom:1px solid var(--line);padding:11px 0;
  font-family:var(--sans);font-size:.93rem;color:var(--muted);font-weight:600;background:none;vertical-align:top
}
.woocommerce-checkout #order_review table.shop_table thead th{
  font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);padding-bottom:8px
}
.woocommerce-checkout #order_review table.shop_table td{text-align:right;color:var(--violet-ink)}
.woocommerce-checkout #order_review table.shop_table td.product-name{text-align:left;color:var(--ink);font-weight:600}
.woocommerce-checkout #order_review table.shop_table .product-quantity{color:var(--muted);font-weight:600}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total th,
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td{
  border-bottom:0;padding-top:16px;font-size:1.1rem;font-weight:700;color:var(--violet-ink)
}
.woocommerce-checkout #order_review table.shop_table tfoot tr.order-total td .amount{font-family:var(--disp);font-size:1.5rem;color:var(--violet)}

/* Payment box. */
.woocommerce-checkout #payment{background:none;border-radius:0;margin-top:20px}
.woocommerce-checkout #payment ul.payment_methods{
  border:0;padding:0;margin:0 0 16px;list-style:none;display:grid;gap:10px
}
.woocommerce-checkout #payment ul.payment_methods li{
  background:#fff;border:1.5px solid var(--line);border-radius:16px;padding:14px 16px;margin:0;transition:.2s
}
.woocommerce-checkout #payment ul.payment_methods li:hover{border-color:var(--lilac-2)}
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"]{accent-color:var(--violet);width:18px;height:18px;margin-right:8px}
.woocommerce-checkout #payment ul.payment_methods li label{
  font-family:var(--sans);font-size:.95rem;font-weight:700;color:var(--violet-ink);text-transform:none;letter-spacing:0;
  display:inline-flex;gap:8px;align-items:center;cursor:pointer
}
.woocommerce-checkout #payment div.payment_box{
  background:var(--lilac);color:var(--violet-deep);border-radius:12px;padding:14px 16px;margin:12px 0 0;font-size:.88rem;line-height:1.6
}
.woocommerce-checkout #payment div.payment_box::before{
  border-bottom-color:var(--lilac);left:18px
}
.woocommerce-checkout #payment div.form-row{padding:0;margin:16px 0 0}
.woocommerce-checkout #payment .woocommerce-privacy-policy-text{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.woocommerce-checkout #payment .wc-terms-and-conditions{margin-bottom:14px}
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper .woocommerce-terms-and-conditions-checkbox-text{
  font-size:.88rem;color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0
}

/* The 21+ confirmation added by cob_checkout_age_confirm() in functions.php.
   This one has to be impossible to miss. */
.woocommerce-checkout #cob_age_confirm_field,
.woocommerce #cob_age_confirm_field{
  background:var(--peach);border:1.5px solid rgba(196,122,46,.4);border-radius:16px;
  padding:16px 18px;margin:18px 0 0
}
.woocommerce-checkout #cob_age_confirm_field.woocommerce-invalid{border-color:var(--rust);box-shadow:0 0 0 4px rgba(181,98,63,.12)}
/* Padding + absolute checkbox, NOT flex.
   WooCommerce renders the label text as a bare text node beside the input. In a
   flex label that text becomes an anonymous flex item, which shrinks to
   min-content in a narrow column and stacks one word per line. There is no
   selector for an anonymous flex item, so the fix is to not use flex here. */
.woocommerce-checkout #cob_age_confirm_field label,
.woocommerce #cob_age_confirm_field label.checkbox{
  display:block;position:relative;padding-left:34px;
  font-family:var(--sans);font-size:.95rem;font-weight:700;line-height:1.5;
  letter-spacing:0;text-transform:none;color:#8a5320;cursor:pointer;margin:0;
  min-width:0;overflow-wrap:break-word
}
.woocommerce-checkout #cob_age_confirm_field input[type="checkbox"],
.woocommerce #cob_age_confirm_field input[type="checkbox"]{
  position:absolute;left:0;top:1px;
  width:22px;height:22px;accent-color:var(--violet);flex-shrink:0;margin:0
}
.woocommerce-checkout #cob_age_confirm_field abbr.required{color:var(--rust)}

/* Login / register on checkout. */
.woocommerce-checkout .woocommerce-form-login,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:30px;box-shadow:var(--shadow-sm);margin:0 0 24px
}
.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info{background:var(--lilac);color:var(--violet-deep)}
.woocommerce-checkout .woocommerce-thankyou-order-received{
  font-family:var(--disp);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--violet-ink);margin-bottom:20px
}
.woocommerce ul.order_details{
  list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:0 0 30px;padding:0
}
.woocommerce ul.order_details li{
  border:0;border-right:1px solid var(--line);margin:0;padding:16px 18px;float:none;
  font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700
}
.woocommerce ul.order_details li:last-child{border-right:0}
.woocommerce ul.order_details li strong{display:block;margin-top:6px;font-family:var(--disp);font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--violet-ink)}


/* ── 12. My account ─────────────────────────────────────────────────────── */
/* NOTE: no my-account template is overridden. */

.woocommerce-account .woocommerce{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;align-items:start}
.woocommerce-account .woocommerce > *{grid-column:1/-1}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation{grid-column:1/2}
.woocommerce-account .woocommerce > .woocommerce-MyAccount-content{grid-column:2/3;min-width:0}
.woocommerce-account.logged-out .woocommerce{display:block;max-width:520px;margin:0 auto}

.woocommerce-account .woocommerce-MyAccount-navigation{width:auto;float:none;position:sticky;top:96px}
.woocommerce-account .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:0;display:grid;gap:3px}
.woocommerce-account .woocommerce-MyAccount-navigation ul li{margin:0}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a{
  display:block;padding:9px 13px;border-radius:10px;
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink);transition:.18s
}
.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover{background:var(--lilac);color:var(--violet)}
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a{background:var(--violet);color:#fff}
.woocommerce-account .woocommerce-MyAccount-content{width:auto;float:none}
.woocommerce-account .woocommerce-MyAccount-content > p{color:var(--muted);margin-bottom:1em}
.woocommerce-account .woocommerce-MyAccount-content a:not(.button){color:var(--violet);font-weight:600}
.woocommerce-account fieldset{border:1px solid var(--line);border-radius:16px;padding:22px;margin:24px 0 0}
.woocommerce-account fieldset legend{font-family:var(--sans);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);padding:0 8px}
.woocommerce-account table.shop_table,
.woocommerce table.woocommerce-orders-table,
.woocommerce table.shop_table.order_details{
  border:1px solid var(--line);border-radius:var(--r);border-collapse:collapse;overflow:hidden;width:100%;margin:0 0 24px
}
.woocommerce-account table.shop_table th,
.woocommerce table.shop_table.order_details th{
  background:var(--bg);border:0;border-bottom:1px solid var(--line);padding:14px 18px;text-align:left;
  font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--violet)
}
.woocommerce-account table.shop_table td,
.woocommerce table.shop_table.order_details td{border:0;border-bottom:1px solid var(--line);padding:14px 18px;font-size:.92rem;color:var(--ink)}
.woocommerce-account table.shop_table tr:last-child td{border-bottom:0}
.woocommerce .woocommerce-customer-details address{
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;font-style:normal;font-size:.94rem;color:var(--ink);line-height:1.7
}
.woocommerce-account .addresses .title h3{font-size:1.1rem;margin-bottom:8px}
.woocommerce-account .u-columns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.woocommerce-account .u-column1,
.woocommerce-account .u-column2{width:auto;float:none}


/* ── 13. Blocks & odds and ends ─────────────────────────────────────────── */

/* If the Cart/Checkout Blocks are used instead of the shortcodes, at least
   put the buttons and inputs in the right clothes. */
.wc-block-components-button:not(.is-link){
  background:var(--violet);color:#fff;border-radius:100px;font-family:var(--sans);font-weight:700;
  padding:.9em 1.6em;border:1.5px solid transparent;transition:.28s cubic-bezier(.2,.8,.2,1)
}
.wc-block-components-button:not(.is-link):hover{background:var(--violet-deep);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-select__container{
  border:1.5px solid var(--line)!important;border-radius:14px!important;font-family:var(--sans)
}
.wc-block-components-totals-item__value{color:var(--violet-ink);font-weight:700}

/* Widgets (price filter, product lists) if they end up in a sidebar. */
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle{background:var(--violet)}
.woocommerce .widget_price_filter .price_slider_wrapper .ui-widget-content{background:var(--lilac-2);border-radius:100px}
.woocommerce ul.cart_list li,
.woocommerce ul.product_list_widget li{padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem}
.woocommerce ul.cart_list li a,
.woocommerce ul.product_list_widget li a{font-weight:700;color:var(--violet-ink)}

/* Woo's blockUI overlay while AJAX runs. */
.woocommerce .blockUI.blockOverlay::before{color:var(--violet)}

/* Print: the sidebar and CTA are noise on a printed order. */
@media print{
  .shop-side,.side-cta,.woocommerce-ordering,.woocommerce-pagination{display:none!important}
}


/* ── 14. Responsive — mirrors site.css's 1080 / 980 / 560 ───────────────── */

@media(max-width:1080px){
  .woocommerce ul.products.columns-4,
  ul.products.columns-4,
  div.prod-grid.columns-4{grid-template-columns:repeat(3,1fr)}
  .woocommerce-account .woocommerce{grid-template-columns:1fr;gap:28px}
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-navigation,
  .woocommerce-account .woocommerce > .woocommerce-MyAccount-content{grid-column:1/-1}
  .woocommerce-account .woocommerce-MyAccount-navigation{position:static}
  .woocommerce-account .woocommerce-MyAccount-navigation ul{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;gap:6px;padding-bottom:6px}
}

/* NOTE — deliberately NOT a two-column grid.
   An earlier version made form.checkout a grid with a sticky 380px summary
   column, pinning #customer_details to rows 1-2 and #order_review to row 2.
   That breaks: WooCommerce injects extra children into this form (notices, the
   coupon toggle, login toggle, and anything a plugin adds via
   woocommerce_before_checkout_form). Those auto-place into row 1 and collide
   with the summary, which then renders on top of the billing fields.

   The checkout now flows normally: customer details (billing | shipping) full
   width, order review beneath. Because we do not own this template's DOM, the
   robust layout is the one that survives WooCommerce adding elements to it. */

@media(min-width:561px){
  /* WooCommerce's own `shop_table_responsive` CSS collapses cart / order /
     account tables into stacked rows at 768px, which lands in the middle of
     this theme's breakpoints and fights the card-row styling above. Hold the
     real table layout until the theme's own 560px breakpoint takes over. */
  .woocommerce table.shop_table_responsive thead,
  .woocommerce-page table.shop_table_responsive thead{display:table-header-group}
  .woocommerce table.shop_table_responsive tbody th,
  .woocommerce-page table.shop_table_responsive tbody th{display:table-cell}
  .woocommerce table.shop_table_responsive tr td,
  .woocommerce-page table.shop_table_responsive tr td{display:table-cell;text-align:left}
  .woocommerce table.shop_table_responsive tr td::before,
  .woocommerce-page table.shop_table_responsive tr td::before{content:none;display:none}
  /* ...and cancel Woo's zebra striping, which would tint every other cart row. */
  .woocommerce-cart table.cart tbody tr:nth-child(2n) td{background-color:#fff}
}

@media(max-width:980px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  div.prod-grid.products,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  div.prod-grid.columns-3,
  div.prod-grid.columns-4{grid-template-columns:repeat(2,1fr)}

  .woocommerce div.product .woocommerce-tabs{margin-top:36px}
  .woocommerce-cart .woocommerce{grid-template-columns:1fr;gap:28px}
  .woocommerce-cart .woocommerce > form.woocommerce-cart-form,
  .woocommerce-cart .woocommerce > .cart-collaterals{grid-column:1/-1}
  .woocommerce .cart_totals{position:static}
  .woocommerce-checkout #customer_details.col2-set{grid-template-columns:1fr}
  .woocommerce-account .u-columns{grid-template-columns:1fr}
}

@media(max-width:560px){
  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  div.prod-grid.products,
  .woocommerce ul.products.columns-2,
  .woocommerce ul.products.columns-3,
  .woocommerce ul.products.columns-4,
  div.prod-grid.columns-2,
  div.prod-grid.columns-3,
  div.prod-grid.columns-4{grid-template-columns:1fr}

  .shop-bar{flex-direction:column;align-items:stretch}
  .woocommerce .woocommerce-ordering select{width:100%;min-width:0}

  .woocommerce div.product form.cart{gap:10px}
  .woocommerce div.product form.cart .button{flex:1 1 auto}
  .woocommerce div.product .woocommerce-tabs ul.tabs{gap:0}
  .woocommerce div.product .woocommerce-tabs ul.tabs li a{padding:11px 12px;font-size:.86rem}
  .woocommerce div.product table.shop_attributes th,
  .woocommerce div.product table.shop_attributes td{padding:11px 13px;font-size:.88rem}

  /* Cart rows collapse to stacked cards. */
  .woocommerce-cart table.cart thead{display:none}
  .woocommerce-cart table.cart,
  .woocommerce-cart table.cart tbody{display:block;border-spacing:0}
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item{
    display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 14px;align-items:center;
    background:#fff;border:1px solid var(--line);border-radius:18px;padding:14px;margin-bottom:14px
  }
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td{
    display:block;border:0!important;border-radius:0!important;padding:0;text-align:left;background:none
  }
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-remove{grid-column:2;justify-self:end;width:auto}
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-thumbnail{grid-row:1/span 2;grid-column:1;width:64px}
  .woocommerce-cart table.cart td.product-thumbnail img{width:64px;height:64px}
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-name{grid-column:2}
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-price,
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-quantity,
  .woocommerce-cart table.cart tbody tr.woocommerce-cart-form__cart-item td.product-subtotal{grid-column:1/-1}
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td::before{
    content:attr(data-title) ": ";font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);font-weight:700
  }
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-thumbnail::before,
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-name::before,
  .woocommerce-cart table.cart tr.woocommerce-cart-form__cart-item td.product-remove::before{content:none}

  .woocommerce-cart table.cart td.actions .coupon{width:100%}
  .woocommerce-cart table.cart td.actions .coupon .input-text{flex:1 1 100%}
  .woocommerce-cart table.cart td.actions .button,
  .woocommerce-cart table.cart td.actions > .button[name="update_cart"]{width:100%;margin-left:0}

  .woocommerce ul.order_details{grid-template-columns:1fr}
  .woocommerce ul.order_details li{border-right:0;border-bottom:1px solid var(--line)}
  .woocommerce ul.order_details li:last-child{border-bottom:0}

  .woocommerce-checkout #customer_details .col-1,
  .woocommerce-checkout #customer_details .col-2,
  .woocommerce-checkout #order_review,
  .woocommerce form.woocommerce-form-login{padding:22px 18px}
}

@media(prefers-reduced-motion:reduce){
  .woocommerce a.button,
  .woocommerce button.button,
  .woocommerce input.button{transition:none}
  .woocommerce a.button:hover,
  .woocommerce button.button:hover,
  .woocommerce input.button:hover{transform:none}
}