/* =========================================================================
   THE BRADO — WooCommerce-specific styles (shop, single product, cart,
   checkout, account). Loaded only when WooCommerce is active.
   ========================================================================= */

.brado-shop-main { margin: 0 auto; padding: 0 0 80px; background: var(--brado-surface); }
.brado-shop-main .brado-shipping-bar { margin: 0; }

/* Archive header / filter chips / sort row sit on the ivory "surface" tone;
   the product grid itself sits on the slightly deeper "bg" tone and bleeds
   edge-to-edge, matching the two-tone split in the design. */
.brado-shop-main .brado-archive-header,
.brado-shop-main .brado-filter-chips,
.brado-shop-main .brado-sort-filter-row { padding-left: 18px; padding-right: 18px; }
.brado-shop-main .brado-archive-header { padding-top: 24px; }

.brado-shop-main ul.products {
	background: var(--brado-bg);
	padding: 20px 18px 28px !important;
	gap: 18px 12px !important;
}
.brado-shop-main ul.products .brado-product-card__name,
.brado-shop-main ul.products .brado-product-card__body { font-size: 12.5px; }
.brado-shop-main ul.products .price { font-size: 13.5px; }

/* Single product / checkout / account (no .products grid) still need the
   usual side padding since they skip the two-tone split above. The cart page
   is excluded — its own blocks (.brado-cart-items, .brado-cart-actions,
   .cart-collaterals) each manage their own full-bleed background + padding,
   matching the design's stacked full-width panels. */
.single-product .brado-shop-main,
.woocommerce-checkout .brado-shop-main,
.woocommerce-account .brado-shop-main { padding-left: 18px; padding-right: 18px; }

/* -------------------------------------------------------------------------
   Single product
   ------------------------------------------------------------------------- */
.single-product div.product {
	/* WooCommerce's own .onsale badge CSS is `position: absolute; top:
	   -.5em; left: -.5em` — it expects this wrapper to establish the
	   positioning context so the badge anchors to the product block's
	   top-left corner (over the gallery image). Without this, the badge
	   anchors to the page/viewport instead and drifts up under the
	   sticky header. */
	position: relative;
}
/* WooCommerce's own default colors (olive #958e09 bg + white text) only
   reach 3.33:1 contrast — fails WCAG AA's 4.5:1 for text. Point it at the
   theme's brand colors instead, which are dark enough to pass. WC's actual
   rule is `.woocommerce span.onsale` (2 classes + 1 element) — matching
   that exactly, since anything less specific loses regardless of
   stylesheet order. */
.woocommerce span.onsale { background-color: var(--brado-accent); color: var(--brado-ink-on-ink); }
.woocommerce #content div.product div.images,
.woocommerce div.product div.images,
.woocommerce-page #content div.product div.images,
.woocommerce-page div.product div.images {
	width: 100%;
	float: none;
}
/*
 * WooCommerce's core desktop CSS (woocommerce-layout.css, loaded on every
 * viewport) floats div.summary right at 48% width for its classic 2-column
 * image+summary layout. That float is only reset to `float: none` inside
 * woocommerce-smallscreen.css, which is loaded with
 * `media="only screen and (max-width: 768px)"` — so on an actual wide
 * desktop viewport (where this theme still forces the mobile-only frame
 * via .brado-site's max-width) the reset never applies. The summary stays
 * floated and out of normal flow, so whatever comes after it in the DOM
 * (e.g. the "You may also like" section) renders as if the summary had
 * zero height, overlapping it. Setting width: 100% alone (done above)
 * wasn't enough — float: none is what actually returns it to normal block
 * flow at every viewport width, not just ≤768px.
 */
.woocommerce #content div.product div.summary,
.woocommerce div.product div.summary,
.woocommerce-page #content div.product div.summary,
.woocommerce-page div.product div.summary {
	width: 100%;
	float: none;
	clear: both;
}
/*
 * 4:5 gallery slider — matches the actual uploaded product photo ratio (see
 * 'brado-product-thumb', registered 600x750 in functions.php) so images
 * show uncropped, full-bleed slides scrolled/swiped through directly, no
 * separate thumbnail grid below it. Every .woocommerce-product-gallery__image
 * div WooCommerce prints (one per image) becomes one slide; see
 * initProductGallery() in main.js for the dot indicators that track scroll
 * position.
 */
.single-product .woocommerce-product-gallery {
	position: relative;
	border-radius: var(--brado-radius);
	overflow: hidden;
	background: var(--brado-border);
	/* WooCommerce's actual rule is `.woocommerce div.product div.images`
	   (2 classes + 3 elements) — beats a 2-classes-only selector regardless
	   of stylesheet order, same recurring issue as elsewhere in this file.
	   Its 2em (~30px) default, combined with .summary's own padding-top,
	   left a noticeably large gap between the gallery and the category/
	   title block below it. */
	margin-bottom: 12px !important;
}
.single-product .woocommerce-product-gallery__wrapper {
	display: flex !important;
	flex-wrap: nowrap !important;
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.single-product .woocommerce-product-gallery__wrapper::-webkit-scrollbar { display: none; }
.single-product .woocommerce-product-gallery__image,
.single-product .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
}
.single-product .woocommerce-product-gallery__image {
	flex: 1 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 5;
}
.single-product .woocommerce-product-gallery img {
	width: 100% !important;
	height: 100% !important;
	max-width: none;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
/* No real photo uploaded yet — same 4:5 treatment, just a single slide. */
.single-product .woocommerce-product-gallery__image--placeholder {
	flex: 1 0 100%;
	aspect-ratio: 4 / 5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-product .woocommerce-product-gallery__image--placeholder img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
.brado-gallery-dots {
	position: absolute;
	left: 0; right: 0; bottom: 12px;
	display: flex;
	justify-content: center;
	gap: 6px;
	z-index: 2;
}
.brado-gallery-dots__dot {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: rgba(253, 252, 250, .55);
	padding: 0;
	transition: background-color .15s ease, transform .15s ease;
}
.brado-gallery-dots__dot.is-active { background: var(--brado-surface); transform: scale(1.3); }

.brado-gallery-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 34px; height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--brado-ink) 45%, transparent);
	color: var(--brado-surface);
	border-radius: 50%;
	z-index: 2;
	transition: background-color .15s ease, opacity .15s ease;
}
.brado-gallery-arrow svg { width: 18px; height: 18px; }
.brado-gallery-arrow:hover { background: color-mix(in srgb, var(--brado-ink) 65%, transparent); }
.brado-gallery-arrow:disabled { opacity: 0; pointer-events: none; }
.brado-gallery-arrow--prev { left: 10px; }
.brado-gallery-arrow--prev svg { transform: rotate(180deg); }
.brado-gallery-arrow--next { right: 10px; }

/* Product video slide — same 4:5 slot as the photo slides, letterboxed
   (object-fit: contain equivalent) on a black backdrop rather than cropped,
   since a 16:9 video doesn't natively fill a 4:5 frame the way a photo does. */
.single-product .brado-gallery-video-slide {
	flex: 1 0 100%;
	scroll-snap-align: start;
	aspect-ratio: 4 / 5;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.single-product .brado-gallery-video-slide iframe,
.single-product .brado-gallery-video-slide video {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.single-product .brado-gallery-video-slide video { object-fit: contain; background: #000; }
.single-product .summary { padding: 10px 18px 8px; }

.brado-product-eyebrow { margin-top: 4px; font-size: 12.5px; }
.single-product .product_title { font-size: 24px; margin-top: 6px; }
.single-product .woocommerce-product-details__short-description { font-size: 14px; line-height: 1.8; }

.single-product p.price,
.single-product span.price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	font-size: 20px;
	font-weight: 500;
	color: var(--brado-ink);
}
.single-product p.price del { color: var(--brado-muted-2); font-size: 13px; font-weight: 400; text-decoration: line-through; }
.single-product p.price ins { text-decoration: none; }
.brado-discount-badge { font-size: 11px; letter-spacing: .06em; color: var(--brado-success); font-weight: 500; }

.single-product .woocommerce-product-rating {
	display: flex; align-items: center; gap: 6px;
	font-size: 11.5px; color: var(--brado-muted);
	margin-top: 8px;
}
.single-product .woocommerce-product-rating .woocommerce-review-link,
.single-product .woocommerce-product-rating .brado-rating-average { color: var(--brado-muted); text-decoration: none; }
.single-product .star-rating { color: var(--brado-accent); }

.single-product form.cart {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 20px 0;
}
.single-product .quantity input.qty {
	width: 64px; height: 48px;
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	text-align: center;
	border-radius: var(--brado-radius);
}
/* WooCommerce's own core CSS (10.x) targets `button.button.alt` (a bare
   `button` element selector sits outside its `:where(...)` wrapper, which
   always has zero specificity) — that's (0,3,1): 3 classes + 1 element.
   Our previous selector here was only (0,3,0), one column short, so WC's
   purple .alt background always won regardless of stylesheet order. Adding
   the `button` element type plus the `.alt` class it already carries pushes
   this to (0,4,1), an unambiguous win. */
.single-product button.single_add_to_cart_button.button.alt {
	flex: 1;
	min-width: 130px;
	height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--brado-ink);
	font-size: 12.5px;
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	border-radius: var(--brado-radius);
	border: 1px solid var(--brado-ink);
}
.single-product button.single_add_to_cart_button.button.alt:hover,
.single-product button.single_add_to_cart_button.button.alt:focus {
	background: var(--brado-ink);
	border-color: var(--brado-ink);
	color: var(--brado-ink-on-ink);
}
/*
 * Before a variable product's variation is picked, WooCommerce adds a
 * `.disabled` CSS class here — NOT a real `disabled` attribute, the button
 * stays genuinely clickable and WooCommerce's own JS shows a "please
 * choose product options" prompt on click. But WC's own rule for `.disabled`
 * (`.woocommerce button.button.disabled` etc., wrapped in :where() only on
 * the outer conditions — the class chain itself sits outside it) sets
 * `cursor: not-allowed; opacity: .5`, which read as "broken"/unclickable
 * rather than "pick a size first." Per explicit request, this now looks and
 * behaves exactly like the normal enabled button at every stage.
 */
.single-product button.single_add_to_cart_button.button.alt.disabled {
	cursor: pointer !important;
	opacity: 1 !important;
	background: transparent;
	border-color: var(--brado-ink);
	color: var(--brado-ink);
}
.single-product button.single_add_to_cart_button.button.alt.disabled:hover,
.single-product button.single_add_to_cart_button.button.alt.disabled:focus {
	cursor: pointer !important;
	opacity: 1 !important;
	background: var(--brado-ink);
	border-color: var(--brado-ink);
	color: var(--brado-ink-on-ink);
}
.single-product .brado-buy-now-inline {
	flex: 1;
	min-width: 130px;
	height: 48px;
	margin: 0;
}

.brado-variation-attribute { flex: 1 0 100%; margin: 4px 0 20px; }
.brado-variation-attribute__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 12px;
}
.brado-variation-attribute__label {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brado-ink);
}
.brado-variation-attribute__guide {
	font-size: 11.5px;
	color: var(--brado-accent);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.brado-variation-attribute__swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.brado-variation-swatch {
	min-width: 44px;
	height: 44px;
	padding: 0 10px;
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	color: var(--brado-ink);
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.brado-variation-swatch.is-selected {
	background: var(--brado-ink);
	border-color: var(--brado-ink);
	color: var(--brado-ink-on-ink);
}
.brado-variation-swatch.is-disabled {
	opacity: .35;
	text-decoration: line-through;
	cursor: not-allowed;
}
.single-product .single_variation_wrap { flex: 1 0 100%; }
.single-product .woocommerce-variation-add-to-cart.variations_button {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	width: 100%;
	margin-top: 8px;
}
.single-product .woocommerce-variation-price .price { font-size: 20px; }
.single-product .woocommerce-variation-availability .stock { font-size: 12.5px; color: var(--brado-muted); }

.brado-offers { margin: 16px 0 4px; }
.brado-offers__label {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--brado-ink);
	margin-bottom: 10px;
}
.brado-offers__list { display: flex; flex-direction: column; gap: 8px; }
.brado-offer-card {
	display: flex;
	align-items: center;
	gap: 12px;
	border: 1px dashed var(--brado-accent);
	background: color-mix(in srgb, var(--brado-accent) 6%, var(--brado-surface));
	padding: 11px 14px;
	border-radius: var(--brado-radius);
}
.brado-offer-card--plain { border-style: dashed; border-color: var(--brado-border); background: transparent; }
.brado-offer-card__icon { flex: none; color: var(--brado-accent); }
.brado-offer-card__icon .brado-icon { width: 18px; height: 18px; }
.brado-offer-card__body { flex: 1; min-width: 0; }
.brado-offer-card__title { font-size: 12.5px; color: var(--brado-ink); font-weight: 500; }
.brado-offer-card__code { font-size: 11px; color: var(--brado-muted); margin-top: 2px; }
.brado-offer-card__code strong { color: var(--brado-accent); font-weight: 500; letter-spacing: .06em; }
.brado-offer-card__copy {
	flex: none;
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--brado-accent);
	border-bottom: 1px solid var(--brado-accent);
	padding-bottom: 2px;
}
.brado-offer-card__copy.is-copied { color: var(--brado-success); border-color: var(--brado-success); }

.brado-trust-badges {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	font-size: 11px;
	color: var(--brado-body-text);
	margin: 18px 0;
	padding: 16px 0;
	border-top: 1px solid var(--brado-border);
	border-bottom: 1px solid var(--brado-border);
}
.brado-trust-badges li { display: flex; align-items: center; gap: 8px; }
.brado-trust-check { color: var(--brado-accent); font-weight: 600; }

/* Accordion tabs (see woocommerce/single-product/tabs/tabs.php) — native
   <details>/<summary>, styled as stacked rows with a +/− toggle instead of
   WooCommerce's default horizontal tab bar. */
.brado-accordion { margin: 18px 0; }
.brado-accordion__item { border-bottom: 1px solid var(--brado-border); }
.brado-accordion__item:last-of-type { border-bottom: 0; }
.brado-accordion__trigger {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 14px 0;
	font-size: 13px;
	color: var(--brado-ink);
	cursor: pointer;
	list-style: none;
}
.brado-accordion__trigger::-webkit-details-marker { display: none; }
.brado-accordion__trigger-label { display: flex; align-items: center; gap: 8px; }
.brado-accordion__trigger-icon { width: 16px; height: 16px; flex: none; color: var(--brado-accent); }
.brado-accordion__icon { color: var(--brado-muted); font-size: 15px; line-height: 1; }
.brado-accordion__icon::before { content: '+'; }
.brado-accordion__item[open] .brado-accordion__icon::before { content: '−'; }
.brado-accordion__panel { padding: 0 0 16px; font-size: 13px; line-height: 1.8; color: var(--brado-body-text); }

/* Product Specifications table (WooCommerce's own custom product
   attributes, filled in per product via Product data → Attributes →
   "Visible on the product page") — WC's default table borders/padding
   replaced with a clean label/value row list matching the rest of the
   design. */
/*
 * `!important` throughout this table: WC's own `table.shop_attributes`
 * rules (dotted borders, italic values, and a zebra-stripe background on
 * even rows via `tr:nth-child(even) td/th`) target `table`/`tr`/`th`/`td`
 * element types directly, which out-specifies these class-only selectors
 * regardless of stylesheet order — same recurring issue as elsewhere in
 * this file.
 */
.woocommerce-product-attributes {
	width: 100% !important;
	border-collapse: collapse !important;
	border: 0 !important;
	margin-bottom: 0 !important;
}
.woocommerce-product-attributes-item,
.woocommerce-product-attributes-item:nth-child(even) {
	border-bottom: 1px solid var(--brado-border) !important;
}
.woocommerce-product-attributes-item:last-child { border-bottom: 0 !important; }
.woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item__value,
.woocommerce-product-attributes-item:nth-child(even) .woocommerce-product-attributes-item__label,
.woocommerce-product-attributes-item:nth-child(even) .woocommerce-product-attributes-item__value {
	padding: 10px 0 !important;
	font-size: 13px !important;
	font-style: normal !important;
	font-weight: 400;
	text-align: left;
	vertical-align: top;
	border: 0 !important;
	background: transparent !important;
}
.woocommerce-product-attributes-item__label {
	width: 40%;
	color: var(--brado-muted);
	padding-right: 12px !important;
}
.woocommerce-product-attributes-item__value { color: var(--brado-ink); }
.woocommerce-product-attributes-item__value p { margin: 0; }

/* Related/upsell products — horizontal-scroll slider of fixed-width cards,
   matching the design's "You may also like" strip (not a wrapping grid). */
.related.products,
.upsells.products { margin-top: 40px; padding: 0 18px; }
.brado-product-slider__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
}
.related.products h2,
.upsells.products h2 {
	text-align: left;
	font-family: var(--brado-font-heading);
	font-size: 18px;
	font-weight: 400;
	color: var(--brado-ink);
}
.brado-product-slider__arrows { display: none; gap: 8px; flex: none; }
[data-brado-slider].has-overflow .brado-product-slider__arrows { display: flex; }
.brado-product-slider__arrow {
	width: 32px; height: 32px;
	display: flex; align-items: center; justify-content: center;
	background: var(--brado-surface);
	border: 1px solid var(--brado-border);
	border-radius: 50%;
	color: var(--brado-ink);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.brado-product-slider__arrow:hover { background: var(--brado-ink); color: var(--brado-ink-on-ink); border-color: var(--brado-ink); }
.brado-product-slider__arrow:disabled { opacity: .3; pointer-events: none; }
.brado-product-slider__arrow-icon { width: 15px; height: 15px; }
.brado-product-slider__arrow--prev .brado-product-slider__arrow-icon { transform: rotate(180deg); }
.related.products ul.products,
.upsells.products ul.products {
	display: flex !important;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	gap: 12px !important;
	padding: 0 !important;
	margin: 0 -18px !important;
	padding-left: 18px !important;
	padding-right: 18px !important;
	-ms-overflow-style: none;
	scrollbar-width: none;
}
.related.products ul.products::-webkit-scrollbar,
.upsells.products ul.products::-webkit-scrollbar { display: none; }
.related.products ul.products li.product,
.upsells.products ul.products li.product {
	/*
	 * !important because main.css's `li.product { width: 100% !important }`
	 * (added to fix WooCommerce core's own float-based width fighting the
	 * shop grid) otherwise wins here too and stretches these slider cards
	 * to the full row width instead of their fixed 140px.
	 */
	flex: none !important;
	width: 140px !important;
	scroll-snap-align: start;
}
.related.products .brado-product-card__image,
.upsells.products .brado-product-card__image { aspect-ratio: auto; height: 172px; }

/* Modern pill "Add to cart" on product cards (loop items) — covers the
   default add_to_cart_button/added_to_cart anchors WooCommerce prints via
   woocommerce_after_shop_loop_item(), plus the "Select options"/"Read more"
   fallback links for variable/external products (all share the .button
   class from WooCommerce core).

   WooCommerce's own core CSS targets `a.button` (a bare element selector
   outside its zero-specificity `:where(...)` wrapper) = 2 classes + 1
   element. `.brado-product-card .button` alone is only 2 classes + 0
   elements — one column short — so WC's default grey button always won
   here. `.product` is already on the same <li> WooCommerce itself adds
   (wc_product_class()), so combining it with `.brado-product-card` plus
   the `a` element type gives 3 classes + 1 element, an unambiguous win
   over that particular rule — but WC also ships
   `.woocommerce ul.products li.product .button { display:inline-block;
   margin-top:1em }`, which is 4 classes + 2 elements and so still beats
   this rule on `display`/`margin-top` specifically (class count is
   compared before element count). That silently left this button as
   `display:block` instead of flex, which is what broke vertical centering
   of its label — hence `!important` on just those two properties. */
.brado-product-card.product a.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
	width: 100%;
	height: 34px;
	margin-top: 10px !important;
	/* Unlike <button>, an <a> isn't covered by the base `button{}` line-height
	   reset in main.css, so it still inherits body's unitless 1.6 ratio,
	   which inflates this element's line box taller than its own text.
	   Flexbox centers that oversized line box, not the glyph, which visibly
	   offsets the label inside a fixed-height button. Same fix applied to
	   every other anchor-styled button on the site (.brado-btn, .brado-chip,
	   .wc-proceed-to-checkout a.checkout-button.alt). */
	line-height: normal;
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .1em;
	text-transform: uppercase;
	border: 1px solid var(--brado-ink);
	border-radius: var(--brado-radius);
	transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.brado-product-card.product a.button:hover,
.brado-product-card.product a.button:focus {
	background: var(--brado-accent);
	border-color: var(--brado-accent);
	box-shadow: 0 6px 16px rgba(28, 26, 23, .18);
	transform: translateY(-1px);
}
.brado-product-card.product a.button.loading { opacity: .55; pointer-events: none; }
.brado-product-card .added_to_cart {
	background: var(--brado-surface);
	color: var(--brado-ink);
}

/* -------------------------------------------------------------------------
   Reviews (see woocommerce/single-product-reviews.php)
   ------------------------------------------------------------------------- */
.brado-reviews { padding: 24px 18px 26px; background: var(--brado-bg); margin-top: 24px; }
.brado-reviews__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.woocommerce-Reviews-title { font-family: var(--brado-font-heading); font-size: 18px; font-weight: 400; color: var(--brado-ink); margin: 0; }

.brado-rating-summary {
	display: flex;
	gap: 18px;
	align-items: center;
	background: var(--brado-surface);
	border: 1px solid var(--brado-border);
	padding: 16px;
	margin-bottom: 12px;
	border-radius: var(--brado-radius);
}
.brado-rating-summary__score { text-align: center; flex: none; }
.brado-rating-summary__number { font-family: var(--brado-font-heading); font-size: 32px; color: var(--brado-ink); line-height: 1; }
.brado-rating-summary__score .star-rating { margin: 4px auto 0; }
.brado-rating-summary__count { font-size: 10px; color: var(--brado-muted); margin-top: 3px; }
.brado-rating-summary__bars { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brado-rating-bar { display: flex; align-items: center; gap: 8px; }
.brado-rating-bar__label { font-size: 10px; color: var(--brado-muted); width: 8px; }
.brado-rating-bar__track { flex: 1; height: 4px; background: var(--brado-border); border-radius: 2px; overflow: hidden; }
.brado-rating-bar__fill { display: block; height: 100%; background: var(--brado-accent); border-radius: 2px; }
.brado-rating-bar__count { font-size: 10px; color: var(--brado-muted-2); width: 26px; text-align: right; }

.commentlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.commentlist .comment_container {
	background: var(--brado-surface);
	border: 1px solid var(--brado-border);
	padding: 14px 16px;
	border-radius: var(--brado-radius);
}
.brado-review-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 8px;
}
.brado-review-card__date { font-size: 11px; color: var(--brado-muted); }
.commentlist .description p { font-size: 13px; line-height: 1.6; color: var(--brado-body-text); margin: 0; }
.brado-review-card__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.brado-review-card__author { font-size: 12.5px; font-weight: 500; color: var(--brado-ink); }
.brado-review-card__verified {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 10px;
	letter-spacing: .02em;
	color: var(--brado-success);
	background: color-mix(in srgb, var(--brado-success) 12%, transparent);
	padding: 3px 8px;
	border-radius: 999px;
}
.commentlist li[hidden] { display: none; }
.brado-reviews-see-all { width: 100%; margin-top: 14px; }

/* Star ratings — everywhere WooCommerce prints a .star-rating widget
   (archive loop rating, single product rating, review list). */
.star-rating { color: var(--brado-border); font-size: 14px; }
.star-rating span { color: var(--brado-accent); }

.woocommerce-pagination { margin-top: 32px; display: flex; justify-content: center; }
.woocommerce-pagination ul.page-numbers {
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}
/* Plain, borderless numbers — only the current page and the prev/next
   arrows get a filled/outlined treatment, so a long run of pages (see
   end_size/mid_size above) still reads as light and uncluttered rather
   than a wall of bordered boxes. */
.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	font-size: 13px;
	color: var(--brado-muted);
	border-radius: 50%;
	transition: background-color .15s ease, color .15s ease;
}
/*
 * WooCommerce's own core CSS has
 * `.woocommerce nav.woocommerce-pagination ul li a:hover,
 *  .woocommerce nav.woocommerce-pagination ul li a:focus,
 *  .woocommerce nav.woocommerce-pagination ul li span.current`
 * (3 classes + 4 elements) styled with its own leftover purple
 * (#816f98 on #e9e6ed) — that beats the plain-class rules above on
 * `:hover`/`:focus`/`.current` specifically (class count ties at 3, and WC
 * wins on element count), which is why the current page and hover state
 * were showing WC's purple instead of the theme's ink/gold palette.
 * `!important` on just those properties fixes it without fighting the rest
 * of WC's (otherwise fine) layout/spacing rules for this component.
 */
.woocommerce-pagination a.page-numbers:hover,
.woocommerce-pagination a.page-numbers:focus {
	background: transparent !important;
	color: var(--brado-ink) !important;
}
.woocommerce-pagination .page-numbers.current {
	background: var(--brado-ink) !important;
	color: var(--brado-ink-on-ink) !important;
	font-weight: 500;
}
.woocommerce-pagination .page-numbers.dots { color: var(--brado-muted-2); }
.woocommerce-pagination .page-numbers.next,
.woocommerce-pagination .page-numbers.prev {
	min-width: 32px;
	width: 32px;
	height: 32px;
	margin: 0 4px;
	border: 1px solid var(--brado-border);
	color: var(--brado-ink);
}
.woocommerce-pagination .page-numbers.next:hover,
.woocommerce-pagination .page-numbers.prev:hover,
.woocommerce-pagination .page-numbers.next:focus,
.woocommerce-pagination .page-numbers.prev:focus {
	background: var(--brado-ink) !important;
	color: var(--brado-ink-on-ink) !important;
	border-color: var(--brado-ink);
}

/* Infinite scroll mode (Customizer → Shop & Product Page → "Shop pagination
   style") — the numbered nav stays in the page (its "next" link is what
   initInfiniteScroll() in main.js fetches) but is visually hidden in favour
   of the auto-loading status row below the grid. */
body.brado-pagination-infinite .woocommerce-pagination { display: none; }
.brado-infinite-scroll-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 40px;
	margin-top: 20px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--brado-muted);
	opacity: 0;
	transition: opacity .15s ease;
}
.brado-infinite-scroll-status.is-loading,
.brado-infinite-scroll-status.is-error { opacity: 1; }
.brado-infinite-scroll-status::after {
	content: '';
	width: 14px; height: 14px;
	border-radius: 50%;
	border: 2px solid var(--brado-border);
	border-top-color: var(--brado-accent);
	display: none;
	animation: brado-spin .7s linear infinite;
}
.brado-infinite-scroll-status.is-loading::after { display: block; }
@keyframes brado-spin { to { transform: rotate(360deg); } }

/* Enquiry (call/email/WhatsApp popover) + Add to Wishlist + Share row,
   right after the Add to Cart / Buy Now buttons. */
.brado-product-actions {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--brado-border);
}
.brado-enquiry { flex: 1; display: flex; }
.brado-product-actions__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	flex: 1;
	position: relative;
	padding: 4px 4px;
	font-size: 11.5px;
	color: var(--brado-ink);
}
.brado-product-actions__btn:not(:last-child)::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 16px;
	background: var(--brado-border);
}
.brado-product-actions__btn .brado-icon { width: 15px; height: 15px; flex: none; color: var(--brado-accent); }
.brado-product-actions__btn[data-brado-wishlist].is-active .brado-icon { fill: var(--brado-accent); }
.brado-product-actions__btn.is-copied span { color: var(--brado-success); }

.brado-enquiry__panel {
	position: absolute;
	bottom: calc(100% + 14px);
	left: 50%;
	transform: translateX(-50%);
	width: 240px;
	max-width: 80vw;
	background: var(--brado-surface);
	border: 1px solid var(--brado-border);
	border-radius: var(--brado-radius);
	box-shadow: 0 10px 28px rgba(28, 26, 23, .18);
	z-index: 20;
	padding: 4px 0;
}
.brado-enquiry__panel::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 0; height: 0;
	border: 7px solid transparent;
	border-top-color: var(--brado-surface);
}
.brado-enquiry__row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	color: var(--brado-ink);
}
.brado-enquiry__row:not(:last-child) { border-bottom: 1px solid var(--brado-border); }
.brado-enquiry__row .brado-icon { width: 16px; height: 16px; flex: none; color: var(--brado-accent); }
.brado-enquiry__row strong {
	display: block;
	font-size: 10.5px;
	font-weight: 500;
	color: var(--brado-muted);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: 2px;
}
.brado-enquiry__row span { font-size: 13px; }

/* Sticky Add-to-Bag bar — pinned to the bottom of the mobile "screen" frame
   itself (not the browser viewport), so it stays put at the same width as
   the rest of the design on every device. */
.brado-sticky-atc {
	position: fixed;
	left: 50%;
	bottom: 0;
	width: 100%;
	max-width: var(--brado-container);
	transform: translate(-50%, 100%);
	z-index: 50;
	padding: 16px 16px 12px;
	background: var(--brado-surface);
	border-top: 1px solid var(--brado-border);
	box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
	transition: transform .2s ease;
}
.brado-sticky-atc.is-visible { transform: translate(-50%, 0); }
.brado-sticky-atc__row { display: flex; gap: 10px; }
.brado-sticky-atc__buy-now { flex: 1; position: relative; }
.brado-sticky-atc__ribbon {
	position: absolute;
	top: -10px; left: 14px;
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	font-size: 9.5px;
	letter-spacing: .1em;
	font-style: italic;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 3px;
	z-index: 1;
}
.brado-sticky-atc__cta {
	width: 100%;
	height: 52px;
	font-size: 13.5px;
	letter-spacing: .06em;
	text-transform: none;
	font-weight: 600;
	border-radius: 6px;
}
.brado-sticky-atc .brado-btn--outline { flex: 1; max-width: 120px; font-weight: 500; }
.brado-sticky-atc__urgency {
	text-align: center;
	font-size: 11.5px;
	color: var(--brado-muted);
	margin-top: 9px;
}
.brado-sticky-atc__urgency-count { color: var(--brado-accent); font-weight: 500; }

/* -------------------------------------------------------------------------
   Cart
   ------------------------------------------------------------------------- */
.brado-shipping-bar {
	background: color-mix(in srgb, var(--brado-accent) 14%, var(--brado-surface));
	text-align: center;
	font-size: 11px;
	color: color-mix(in srgb, var(--brado-accent) 65%, var(--brado-ink));
	padding: 9px 14px;
	letter-spacing: .04em;
}
.brado-shipping-bar--unlocked { color: var(--brado-success); }

/* Cart item cards (see woocommerce/cart/cart.php) */
.brado-cart-items {
	padding: 18px;
	background: var(--brado-surface);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.brado-cart-item { display: flex; gap: 14px; }
.brado-cart-item__media { flex: none; width: 92px; height: 110px; overflow: hidden; background: var(--brado-border); }
.brado-cart-item__media img { width: 100%; height: 100%; object-fit: cover; }
.brado-cart-item__body { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.brado-cart-item__name { font-size: 13.5px; color: var(--brado-ink); line-height: 1.3; }
.brado-cart-item__name a { color: inherit; }
.brado-cart-item__variant { font-size: 11px; color: var(--brado-muted); }
.brado-cart-item__variant p { margin: 0; }
.brado-cart-item__price { font-size: 14px; font-weight: 500; color: var(--brado-ink); }
.brado-cart-item__row { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
.brado-cart-item__remove { font-size: 11px; color: var(--brado-muted-2); text-decoration: underline; }

.brado-qty-stepper { display: flex; align-items: center; border: 1px solid var(--brado-border); }
.brado-qty-stepper.is-loading { opacity: .5; pointer-events: none; }
.brado-qty-stepper__btn {
	width: 32px; height: 30px;
	display: flex; align-items: center; justify-content: center;
	font-size: 14px; color: var(--brado-ink);
}
.brado-qty-stepper__btn:disabled { color: var(--brado-muted-2); cursor: not-allowed; }
.brado-qty-stepper__input {
	width: 30px;
	text-align: center;
	font-size: 13px;
	color: var(--brado-ink);
	border: 0;
	-moz-appearance: textfield;
}
.brado-qty-stepper__input::-webkit-outer-spin-button,
.brado-qty-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.brado-cart-actions {
	padding: 18px;
	background: var(--brado-bg);
}
.brado-coupon { display: flex; gap: 8px; }
.brado-coupon__input {
	flex: 1; height: 44px;
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	padding: 0 14px;
	font-size: 12px;
	letter-spacing: .02em;
}
.brado-coupon__apply {
	height: 44px;
	padding: 0 20px;
	border: 1px solid var(--brado-ink);
	font-size: 11px;
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	color: var(--brado-ink);
}
.brado-coupon__apply:hover { background: var(--brado-ink); color: var(--brado-ink-on-ink); }

.cart-collaterals { background: var(--brado-bg); padding: 0 18px 18px; }
/*
 * WooCommerce's core CSS floats cross-sells left (48%) and cart_totals
 * right (48%) unconditionally (no media query) — the same category of
 * desktop-only-looking split fixed on the checkout page's .col2-set. This
 * theme is single-column at every viewport width, so stack both full-width
 * instead, cross-sells first (upsell) then the totals/checkout block.
 * !important because WooCommerce's own rule is actually
 * `.woocommerce-page .cart-collaterals .cross-sells` (3 classes) — one
 * column of specificity above the plain 2-class selector this had before,
 * so it kept winning regardless of stylesheet load order.
 */
.cart-collaterals .cross-sells,
.cart-collaterals .cart_totals {
	float: none !important;
	width: 100% !important;
	max-width: 100% !important;
}
.cart-collaterals .cross-sells { margin-bottom: 28px; order: 1; }
.cart-collaterals .cart_totals { order: 2; }
.cart-collaterals { display: flex; flex-direction: column; }
.cart-collaterals .cart_totals table { width: 100%; }
.cart-collaterals .cart_totals table,
.cart-collaterals .cart_totals table th,
.cart-collaterals .cart_totals table td { border: 0; }
.cart-collaterals .cart_totals tr th,
.cart-collaterals .cart_totals tr td {
	font-size: 13px; color: var(--brado-body-text);
	padding: 5px 0;
	text-align: right;
}
.cart-collaterals .cart_totals tr th { text-align: left; font-weight: 400; }
.cart-collaterals .cart_totals tr:last-child th,
.cart-collaterals .cart_totals tr:last-child td {
	font-size: 15px; font-weight: 500; color: var(--brado-ink);
	border-top: 1px solid var(--brado-border);
	padding-top: 10px;
}

.wc-proceed-to-checkout { margin-top: 6px; }

/*
 * WooCommerce's own core CSS targets `a.button.alt` (specificity 0,3,1 —
 * the bare `a`/`button` element sits outside its zero-specificity
 * :where(...) wrapper). This button's real classes are
 * "checkout-button button alt wc-forward", and the old selector here
 * (.wc-proceed-to-checkout .checkout-button, 0,2,0) lost to it regardless
 * of stylesheet order — the exact same bug fixed on the single-product Add
 * to Cart button. Adding the `a` element type plus `.alt` pushes this to
 * 0,4,1, an unambiguous win.
 */
.wc-proceed-to-checkout a.checkout-button.alt {
	display: flex; align-items: center; width: 100%; height: 54px;
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	letter-spacing: var(--brado-tracking);
	text-transform: uppercase;
	text-align: center;
	justify-content: center;
	border-radius: var(--brado-radius);
	line-height: normal; /* see .brado-product-card.product a.button for why */
}
.wc-proceed-to-checkout a.checkout-button.alt:hover { background: var(--brado-accent); color: var(--brado-ink-on-ink); }

.cart-collaterals .cart_totals > h2 { display: none; }

.brado-cart-trust-line {
	text-align: center;
	font-size: 10.5px;
	color: var(--brado-muted);
	letter-spacing: .04em;
	margin: 10px 0 0;
}

/* -------------------------------------------------------------------------
   Checkout / My Account (light-touch — mostly inherit WC defaults, restyled
   just enough to feel native to the theme)
   ------------------------------------------------------------------------- */
/*
 * WooCommerce's core CSS floats "Billing details" / "Additional information"
 * into a 2-column .col2-set layout unconditionally (no media query) — a
 * genuine desktop-style split that was never neutralized here. This theme
 * forces the same single-column mobile layout at every viewport width, so
 * this 2-column form split doesn't belong regardless of screen size.
 */
.woocommerce-checkout .col2-set,
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 {
	float: none !important;
	width: 100% !important;
}
.woocommerce-checkout .col2-set .col-2 { margin-top: 24px; }

.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.woocommerce-account input.input-text {
	border: 1px solid var(--brado-border);
	background: var(--brado-surface);
	padding: 12px 14px;
	border-radius: var(--brado-radius);
	width: 100%;
}
.woocommerce-checkout #place_order,
.woocommerce-account .button {
	background: var(--brado-ink);
	color: var(--brado-ink-on-ink);
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 24px;
	border-radius: var(--brado-radius);
}
.woocommerce-checkout #place_order:hover,
.woocommerce-account .button:hover { background: var(--brado-accent); }

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews {
	background: var(--brado-surface);
	border: 1px solid var(--brado-border);
	border-left: 3px solid var(--brado-accent);
	padding: 14px 18px;
	border-radius: var(--brado-radius);
	list-style: none;
}

/* -------------------------------------------------------------------------
   Cart drawer (design's "2b Cart Sidebar") — slides from the right, opens
   automatically on add-to-cart. Same fixed-position frame-relative anchoring
   and opacity/visibility hide technique as .brado-nav (see main.css), just
   mirrored to the right edge.
   ------------------------------------------------------------------------- */
.brado-cart-drawer-scrim {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	/*
	 * Above WooCommerce core's own .woocommerce-product-gallery__trigger
	 * (the zoom/magnifier icon on the product image), which is z-index: 99
	 * — higher than this drawer used to be, so it floated above the open
	 * drawer instead of being covered by the scrim underneath it.
	 */
	z-index: 190;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, background-color .3s ease;
}
.brado-cart-drawer-scrim.is-open {
	background: color-mix(in srgb, var(--brado-ink) 45%, transparent);
	opacity: 1;
	pointer-events: auto;
}
.brado-cart-drawer {
	position: fixed;
	top: 0; bottom: 0; right: 0;
	width: 330px;
	max-width: 88vw;
	background: var(--brado-surface);
	box-shadow: -8px 0 32px rgba(0, 0, 0, .25);
	z-index: 191;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .3s ease-out, opacity .3s ease-out, visibility 0s linear .3s;
}
.brado-cart-drawer.is-open {
	transform: translateX(0);
	opacity: 1;
	visibility: visible;
	transition: transform .3s ease-out, opacity .3s ease-out, visibility 0s linear 0s;
}
.brado-cart-drawer__added {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	background: #eef4ee;
	color: var(--brado-success);
	font-size: 12.5px;
}
.brado-cart-drawer__body { flex: 1; overflow-y: auto; padding: 18px 20px 24px; }
.brado-cart-drawer__empty { font-size: 13px; color: var(--brado-muted); margin: 0 0 16px; }
.brado-cart-drawer__shop-link { width: 100%; }

.brado-cart-drawer__items { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.brado-cart-drawer__item { display: flex; gap: 12px; align-items: flex-start; }
.brado-cart-drawer__item-image {
	flex: none;
	width: 76px; height: 92px;
	display: block;
	border-radius: var(--brado-radius);
	overflow: hidden;
	background: var(--brado-border);
}
.brado-cart-drawer__item-image img { width: 100%; height: 100%; object-fit: cover; }
.brado-cart-drawer__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.brado-cart-drawer__item-name { font-size: 13px; color: var(--brado-ink); line-height: 1.3; }
.brado-cart-drawer__item-body dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 4px;
	font-size: 11px;
	color: var(--brado-muted);
	margin: 0;
}
.brado-cart-drawer__item-body dl.variation dt,
.brado-cart-drawer__item-body dl.variation dd { margin: 0; display: inline; }
.brado-cart-drawer__item-body dl.variation dd:not(:last-child)::after { content: '\00b7'; margin-left: 4px; }
.brado-cart-drawer__item-body dl.variation p { display: inline; margin: 0; }
.brado-cart-drawer__item-price { font-size: 12.5px; font-weight: 500; color: var(--brado-ink); }
.brado-cart-drawer__qty { margin-top: 2px; }
.brado-cart-drawer__qty .brado-qty-stepper__value { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 30px; font-size: 12.5px; }
.brado-cart-drawer__remove { flex: none; font-size: 11px; color: var(--brado-muted-2); align-self: flex-start; }

.brado-cart-drawer__cross-sells { border-top: 1px solid var(--brado-border); padding-top: 16px; margin-bottom: 18px; }
.brado-cart-drawer__cross-sells-label { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--brado-accent); margin-bottom: 10px; }
.brado-cart-drawer__cross-sell { display: flex; align-items: center; gap: 10px; }
.brado-cart-drawer__cross-sell-image {
	flex: none;
	width: 52px; height: 62px;
	display: block;
	border-radius: var(--brado-radius);
	overflow: hidden;
	background: var(--brado-border);
}
.brado-cart-drawer__cross-sell-image img { width: 100%; height: 100%; object-fit: cover; }
.brado-cart-drawer__cross-sell-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.brado-cart-drawer__cross-sell-name { font-size: 12px; color: var(--brado-ink); }
.brado-cart-drawer__cross-sell-price { font-size: 11.5px; color: var(--brado-muted); }
.brado-cart-drawer__cross-sell-add { flex: none; height: 34px; padding: 0 14px; font-size: 10.5px; }

.brado-cart-drawer__footer { border-top: 1px solid var(--brado-border); padding-top: 16px; }
.brado-cart-drawer__subtotal-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--brado-ink);
}
.brado-cart-drawer__note { font-size: 11px; color: var(--brado-muted); margin: 4px 0 14px; }
.brado-cart-drawer__checkout { width: 100%; height: 50px; }
.brado-cart-drawer__view-full { display: block; text-align: center; font-size: 11.5px; color: var(--brado-accent); margin-top: 12px; }