/* Maktune — v3 commerce surfaces: shop archive, product page, policy docs,
   cart/checkout/account shell, 404.

   Layered on home-v3.css (tokens, buttons, section heads, cards, reveal engine)
   and pages-v3.css (page hero, prose, CTA). Scoped to `body.v3-page` so nothing
   can reach back onto the homepage.

   Two house rules that have bitten this project repeatedly and are obeyed
   throughout this file:
   1. Never put a `padding` shorthand or a `max-width` on an element that also
      carries `.container` — it wipes the gutter and the page goes edge-to-edge
      on mobile while looking correct on desktop. Constrain the children instead.
   2. Any rule that has to beat `body.home-v3 h1..h4` (0,1,2) or the reveal
      engine's `.reveal.in-view { transform: none }` (0,3,0) must be body-scoped
      to match, and hover transforms on reveal targets must come last. */

/* ================================================= Commerce page hero
   The editorial hero from pages-v3.css is sized for a story page. On a
   catalogue it costs the entire first screen: measured at 1440x710 the first
   product row started at 743px, so a customer landing on /shop/ saw a headline
   and no products at all. Tighter block padding and a smaller ceiling on the
   display size pull the grid back above the fold without changing the design. */
body.v3-page.v3-commerce .v3-pagehero { padding-block: 30px 34px; }
body.v3-page.v3-commerce .v3-pagehero-title { font-size: clamp(26px, 3.1vw, 38px); max-width: 24ch; }
body.v3-page.v3-commerce .v3-pagehero-lead { font-size: 15px; margin-top: 12px; max-width: 68ch; }
body.v3-page.v3-commerce .v3-crumbs { margin-bottom: 16px; }

/* ======================================================== Category rail */
body.v3-page .v3-rail {
	background: #fff;
	border-bottom: 1px solid var(--v3-line);
	position: relative;
	z-index: 2;
}
.v3-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 8px;
	/* The rail must scroll rather than wrap: four categories wrap to two rows at
	   390px and the row heights stop matching. */
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	padding-block: 12px;
}
.v3-rail-list::-webkit-scrollbar { display: none; }
body.v3-page .v3-rail-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	padding: 8px 15px;
	border-radius: 100px;
	border: 1px solid var(--v3-line);
	background: #fff;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--v3-ink);
	transition: border-color .2s var(--v3-ease), background-color .2s var(--v3-ease), color .2s var(--v3-ease);
}
body.v3-page .v3-rail-item:hover { border-color: #B9C4DA; background: var(--v3-alt); }
body.v3-page .v3-rail-item.is-active {
	background: var(--v3-blue);
	border-color: var(--v3-blue);
	color: #fff;
}
.v3-rail-n {
	font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: 11px;
	font-weight: 700;
	padding: 2px 6px;
	border-radius: 100px;
	background: var(--v3-alt);
	color: var(--v3-muted);
}
body.v3-page .v3-rail-item.is-active .v3-rail-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* ============================================================== Toolbar */
.v3-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	padding-bottom: 22px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--v3-line);
}
body.v3-page .v3-toolbar-count { margin: 0; font-size: 14px; color: var(--v3-muted); }
body.v3-page .v3-toolbar-count strong { color: var(--v3-ink); font-weight: 700; }

.v3-sort { display: flex; align-items: center; gap: 10px; }
body.v3-page .v3-sort label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--v3-muted);
}
.v3-sort-field { position: relative; display: inline-flex; align-items: center; }
body.v3-page .v3-sort-field select {
	appearance: none;
	-webkit-appearance: none;
	padding: 9px 34px 9px 13px;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	background: #fff;
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--v3-ink);
	cursor: pointer;
	transition: border-color .2s var(--v3-ease);
}
body.v3-page .v3-sort-field select:hover { border-color: #B9C4DA; }
body.v3-page .v3-sort-field select:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 1px; }
.v3-sort-field svg { position: absolute; right: 12px; pointer-events: none; color: var(--v3-muted); }
.v3-sort-go { margin-left: 8px; }

/* ================================================================= Grid */
/* .v3-grid is 4-up from home-v3.css; the shop keeps that but needs its own
   breakpoints because it can run to a full page of products. */
@media (max-width: 1080px) { .v3-grid-shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .v3-grid-shop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .v3-grid-shop { gap: 12px; } }

/* ========================================================== Pagination */
.v3-pager {
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 40px;
}
body.v3-page .v3-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 13px;
	border-radius: var(--v3-r);
	border: 1px solid var(--v3-line);
	background: #fff;
	font-size: 14px;
	font-weight: 600;
	color: var(--v3-ink);
	transition: border-color .2s var(--v3-ease), background-color .2s var(--v3-ease), color .2s var(--v3-ease);
}
body.v3-page .v3-pager .page-numbers:hover { border-color: #B9C4DA; background: var(--v3-alt); }
body.v3-page .v3-pager .page-numbers.current {
	background: var(--v3-blue);
	border-color: var(--v3-blue);
	color: #fff;
}
body.v3-page .v3-pager .page-numbers.dots { border-color: transparent; background: transparent; }

/* ========================================================= Empty state */
.v3-empty {
	text-align: center;
	padding: 56px 20px 60px;
	border: 1px dashed var(--v3-line);
	border-radius: var(--v3-r);
	background: var(--v3-alt);
}
.v3-empty > svg { color: #9AA6BC; margin-bottom: 14px; }
body.v3-page .v3-empty h2 { font-size: 22px; margin: 0 0 8px; }
body.v3-page .v3-empty p { font-size: 15px; line-height: 1.6; color: var(--v3-muted); margin: 0 auto 22px; max-width: 52ch; }
.v3-empty-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ========================================================= Crumb bar */
body.v3-page .v3-crumbbar {
	background: #fff;
	border-bottom: 1px solid var(--v3-line);
	padding-block: 14px;
}
/* The crumbs component is styled for the navy hero in pages-v3.css; on this
   white bar it has to be re-coloured, and its hero bottom margin removed. */
body.v3-page .v3-crumbbar .v3-crumbs {
	margin-bottom: 0;
	color: var(--v3-muted);
	flex-wrap: wrap;
}
body.v3-page .v3-crumbbar .v3-crumbs a { color: var(--v3-muted); }
body.v3-page .v3-crumbbar .v3-crumbs a:hover { color: var(--v3-blue); }
body.v3-page .v3-crumbbar .v3-crumbs [aria-current="page"] { color: var(--v3-ink); font-weight: 600; }

/* ============================================================== PDP */
.v3-pdp { padding-block: 40px 12px; }
.v3-pdp-grid {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 48px;
	align-items: start;
}

/* A grid item's default `min-width: auto` refuses to shrink below its content's
   intrinsic width, so one long product title or an unbroken part number pushes
   the column past the grid track instead of wrapping. */
.v3-pdp-media,
.v3-pdp-buy,
.v3-doc-body,
.v3-specs-body { min-width: 0; }

.v3-pdp-media { position: sticky; top: 20px; }
.v3-pdp-stage {
	position: relative;
	margin: 0;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	overflow: hidden;
	/* Plain white, NOT the tinted panel used for the homepage category tiles.
	   Those tiles hold transparent PNG cut-outs; product photos are white-
	   background JPEGs, so a tinted panel renders the photo as a visible white
	   rectangle floating inside a grey frame. The border supplies the edge. */
	background: #fff;
	aspect-ratio: 1 / 1;
	display: grid;
	place-items: center;
}
.v3-pdp-main {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 6%;
	transition: opacity .25s var(--v3-ease);
}
.v3-pdp-stage.is-swapping .v3-pdp-main { opacity: .35; }
/* The discount flag is a homepage card component; on this much larger surface
   it needs to sit above the image and keep its own corner. */
body.v3-page .v3-pdp-stage .v3-card-flag { top: 14px; left: 14px; z-index: 2; }

.v3-pdp-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-bottom: 2px;
}
.v3-pdp-thumbs::-webkit-scrollbar { display: none; }
.v3-pdp-thumb {
	flex: 0 0 auto;
	width: 74px;
	height: 74px;
	padding: 0;
	border: 1.5px solid var(--v3-line);
	border-radius: 6px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color .2s var(--v3-ease);
}
.v3-pdp-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.v3-pdp-thumb:hover { border-color: #B9C4DA; }
.v3-pdp-thumb.is-active { border-color: var(--v3-blue); }
.v3-pdp-thumb:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }

.v3-pdp-sku {
	display: block;
	font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--mk-muted-soft);
	margin-bottom: 10px;
}
body.v3-page .v3-pdp-title {
	font-size: clamp(25px, 3.4vw, 38px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.025em;
	margin: 0 0 12px;
}
body.v3-page .v3-pdp-rating {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--v3-ink);
	margin-bottom: 14px;
}
.v3-pdp-rating-n { color: var(--v3-muted); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
body.v3-page .v3-pdp-rating:hover .v3-pdp-rating-n { color: var(--v3-blue); }
body.v3-page .v3-pdp-lede {
	font-size: 15.5px;
	line-height: 1.62;
	color: var(--v3-muted);
	margin: 0 0 22px;
	max-width: 54ch;
}

.v3-pdp-price { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.v3-pdp-price .amt { font-size: 31px; font-weight: 800; letter-spacing: -.02em; color: var(--v3-ink); }
.v3-pdp-price del { font-size: 17px; color: var(--mk-muted-soft); }
.v3-pdp-save {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .04em;
	padding: 4px 9px;
	border-radius: 4px;
	background: rgba(242, 96, 12, .12);
	color: #B84600;
}
body.v3-page .v3-pdp-tax { margin: 6px 0 0; font-size: 12.5px; color: var(--v3-muted); }
body.v3-page .v3-pdp-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 0;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--v3-green);
}
.v3-pdp-stock::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
}
body.v3-page .v3-pdp-stock.is-out { color: #B4232B; }

/* --- WooCommerce add-to-cart form ------------------------------------- */
.v3-pdp-cart { margin-top: 22px; }
body.v3-page .v3-pdp-cart form.cart {
	display: flex;
	gap: 12px;
	align-items: stretch;
	flex-wrap: wrap;
	margin: 0;
}
body.v3-page .v3-pdp-cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1.5px solid var(--v3-line);
	border-radius: var(--v3-r);
	background: #fff;
	overflow: hidden;
}
body.v3-page .v3-pdp-cart .quantity input.qty {
	width: 74px;
	height: 52px;
	padding: 0 6px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	color: var(--v3-ink);
	-moz-appearance: textfield;
}
body.v3-page .v3-pdp-cart .quantity input.qty::-webkit-outer-spin-button,
body.v3-page .v3-pdp-cart .quantity input.qty::-webkit-inner-spin-button { opacity: 1; height: 34px; }
body.v3-page .v3-pdp-cart button.single_add_to_cart_button {
	flex: 1 1 220px;
	min-height: 52px;
	padding: 0 30px;
	border: 0;
	border-radius: 100px;
	background: var(--v3-blue);
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background-color .2s var(--v3-ease), transform .2s var(--v3-ease), box-shadow .2s var(--v3-ease);
}
body.v3-page .v3-pdp-cart button.single_add_to_cart_button:hover {
	background: var(--v3-blue-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 24px rgba(14, 44, 203, .26);
}
body.v3-page .v3-pdp-cart button.single_add_to_cart_button:active { transform: none; }
body.v3-page .v3-pdp-cart button.single_add_to_cart_button:disabled { opacity: .45; cursor: not-allowed; }
body.v3-page .v3-pdp-cart .added_to_cart {
	align-self: center;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--v3-blue);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.v3-page .v3-pdp-cart .stock.out-of-stock {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #B4232B;
}

.v3-pdp-assure {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--v3-line);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.v3-pdp-assure li { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: var(--v3-muted); }
.v3-pdp-assure svg { flex: 0 0 auto; margin-top: 1px; color: var(--v3-blue); }
body.v3-page .v3-pdp-assure a { color: var(--v3-blue); font-weight: 600; }
body.v3-page .v3-pdp-assure a:hover { text-decoration: underline; }
body.v3-page .v3-pdp-help {
	margin: 18px 0 0;
	font-size: 13.5px;
	color: var(--v3-muted);
}
body.v3-page .v3-pdp-help a { color: var(--v3-blue); font-weight: 600; }
body.v3-page .v3-pdp-help a:hover { text-decoration: underline; }

/* ==================================================== Specification */
.v3-specs-body { max-width: 72ch; }
.v3-spectable { margin: 22px 0 0; padding: 0; border-top: 1px solid var(--v3-line); }
.v3-specrow {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px solid var(--v3-line);
}
body.v3-page .v3-specrow dt {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--v3-muted);
}
body.v3-page .v3-specrow dd { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--v3-ink); }
body.v3-page .v3-specrow dd.is-wide { grid-column: 1 / -1; }
body.v3-page .v3-specnote {
	margin: 20px 0 0;
	padding: 14px 16px;
	border-radius: var(--v3-r);
	background: var(--v3-alt);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--v3-muted);
}

/* ========================================================== Reviews
   The review block is now theme-owned markup (woocommerce/single-product-reviews.php
   + maktune_review_card()), so these rules target v3 classes rather than
   fighting WooCommerce's. The stock star rendering — five icon-font glyphs at
   the ambient font size with no tracking — is what read as a congested smudge;
   the summary panel and the cards both use the SVG sprite at a set size instead. */

.v3-reviewwrap { background: #fff; border: 1px solid var(--v3-line); border-radius: var(--v3-r); padding: 28px 30px; }
body.v3-page .v3-reviewwrap #reviews { margin: 0; }

/* ---- Summary panel ---- */
.v3-rsum {
	display: grid;
	grid-template-columns: minmax(180px, 220px) 1fr;
	gap: 34px;
	align-items: center;
	padding: 22px 24px;
	margin: 0 0 26px;
	background: var(--v3-alt);
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
}

.v3-rsum-score { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
/* NOT var(--display) — that token is Fraunces, the Morning Light serif, and it
   lands as a serif numeral beside v3's sans headings. v3 has no sans token; its
   headings simply inherit the body face, so this must too. */
.v3-rsum-avg { font-size: 46px; line-height: 1; font-weight: 800; color: var(--v3-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.v3-rsum-outof { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--v3-muted); font-weight: 700; margin-bottom: 7px; }
.v3-rsum-count { font-size: 13px; color: var(--v3-muted); margin-top: 7px; }

.v3-rsum-bars { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.v3-rbar { display: grid; grid-template-columns: 58px 1fr 34px; gap: 12px; align-items: center; }
.v3-rbar-label { font-size: 12.5px; color: var(--v3-muted); white-space: nowrap; }
.v3-rbar-track { height: 8px; border-radius: 100px; background: #E6EAF1; overflow: hidden; }
.v3-rbar-fill { display: block; height: 100%; border-radius: 100px; background: var(--star, #F0A93B); }
.v3-rbar-n { font-size: 12.5px; color: var(--v3-muted); text-align: right; font-variant-numeric: tabular-nums; }
.v3-rbar.is-empty .v3-rbar-n { opacity: .5; }

/* ---- Review cards ---- */
body.v3-page .v3-reviewlist { list-style: none; margin: 0; padding: 0; }
body.v3-page .v3-reviewlist li.v3-review { padding: 0; margin: 0 0 14px; }
body.v3-page .v3-reviewlist li.v3-review:last-child { margin-bottom: 0; }

.v3-review-inner { border: 1px solid var(--v3-line); border-radius: var(--v3-r); padding: 18px 20px; background: #fff; }

.v3-review-head { display: flex; align-items: center; gap: 12px; margin: 0 0 11px; }
.v3-review-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; }
.v3-review-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.v3-review-author { font-size: 14.5px; font-weight: 700; color: var(--v3-ink); }
.v3-review-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; font-size: 12.5px; color: var(--v3-muted); }

.v3-review-verified { display: inline-flex; align-items: center; gap: 4px; color: var(--v3-green); font-weight: 700; }

/* The stars sit at the end of the header row on desktop and drop under the
   byline on narrow screens — never inline with the name, which is what made
   the stock layout look crowded. */
.v3-review-stars { flex: 0 0 auto; margin-left: auto; }

.v3-review-body p { font-size: 14.5px; line-height: 1.65; color: var(--v3-muted); margin: 0 0 9px; }
.v3-review-body p:last-child { margin-bottom: 0; }
.v3-review-pending { margin: 10px 0 0; font-size: 13px; color: var(--v3-orange); }

/* ---- Empty state ---- */
.v3-reviews-none {
	text-align: center;
	padding: 34px 24px;
	border: 1px dashed var(--v3-line);
	border-radius: var(--v3-r);
	color: var(--v3-muted);
}
.v3-reviews-none svg { color: var(--v3-line); margin-bottom: 10px; }
.v3-reviews-none p { margin: 0 0 6px; font-size: 14px; line-height: 1.6; }
.v3-reviews-none p strong { color: var(--v3-ink); font-size: 15px; }
.v3-reviews-none p:last-child { margin-bottom: 0; max-width: 46ch; margin-inline: auto; }

.v3-reviews-gate { margin: 18px 0 0; font-size: 13.5px; color: var(--v3-muted); }

/* ---- Form ---- */
body.v3-page .v3-reviewwrap #review_form_wrapper { margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--v3-line); }
body.v3-page .v3-reviewwrap #respond { margin-top: 0; padding-top: 0; border-top: 0; }
body.v3-page .v3-reviewform-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; display: block; color: var(--v3-ink); }
body.v3-page .v3-rate select {
	padding: 10px 12px;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	font: inherit;
	font-size: 14px;
	background: #fff;
	color: var(--v3-ink);
	min-width: 190px;
}

/* Interactive rating control.
   WooCommerce's script hides the <select> and injects
   `<p class="stars"><span><a class="star-N">N of 5 stars</a>…</span></p>`.
   That `p.stars` collides with the theme's own `.stars` display sprite, which
   pins it to 88×16 with a background image — the anchors then pile up on top of
   each other with their accessible text showing. So the shell has to be undone
   explicitly before the control can be rebuilt.

   Fill logic, no :has() needed: hovering the row golds every star, then the
   siblings AFTER the hovered one revert. Same trick for the chosen value via
   WooCommerce's `.selected` / `.active` classes. */
body.v3-page .v3-rate p.stars {
	display: flex;
	width: auto;
	height: auto;
	background: none;
	margin: 0;
}
body.v3-page .v3-rate p.stars span { display: flex; gap: 6px; }
body.v3-page .v3-rate p.stars a {
	display: block;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 0;
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CBD2DE' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E") center/contain no-repeat;
	transition: transform .12s var(--v3-ease);
}
body.v3-page .v3-rate p.stars:hover a,
body.v3-page .v3-rate p.stars.selected a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23F0A93B' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}
body.v3-page .v3-rate p.stars a:hover ~ a,
body.v3-page .v3-rate p.stars.selected a.active ~ a,
body.v3-page .v3-rate p.stars.selected:hover a:hover ~ a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23CBD2DE' d='M12 2l3 6.3 6.9 1-5 4.9 1.2 6.9L12 17.8 5.9 21.1 7.1 14.2l-5-4.9 6.9-1z'/%3E%3C/svg%3E");
}
body.v3-page .v3-rate p.stars a:hover { transform: scale(1.12); }
body.v3-page .v3-rate p.stars a:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 2px; }
body.v3-page .v3-reviewwrap #reply-title { font-size: 16px; font-weight: 700; margin: 0 0 6px; display: block; }
body.v3-page .v3-reviewwrap .comment-form label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--v3-ink); }
body.v3-page .v3-reviewwrap .comment-form input[type="text"],
body.v3-page .v3-reviewwrap .comment-form input[type="email"],
body.v3-page .v3-reviewwrap .comment-form textarea {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	font: inherit;
	font-size: 14.5px;
	background: #fff;
	color: var(--v3-ink);
}
body.v3-page .v3-reviewwrap .comment-form textarea { min-height: 110px; resize: vertical; }
body.v3-page .v3-reviewwrap .comment-form p { margin: 0 0 14px; }
body.v3-page .v3-reviewwrap .comment-form input:focus-visible,
body.v3-page .v3-reviewwrap .comment-form textarea:focus-visible { outline: 2px solid var(--v3-blue); outline-offset: 1px; border-color: var(--v3-blue); }
body.v3-page .v3-reviewwrap .comment-form-rating .stars { display: inline-flex; gap: 3px; }
body.v3-page .v3-reviewwrap .form-submit input[type="submit"] {
	min-height: 46px;
	padding: 0 28px;
	border: 0;
	border-radius: 100px;
	background: var(--v3-blue);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s var(--v3-ease);
}
body.v3-page .v3-reviewwrap .form-submit input[type="submit"]:hover { background: var(--v3-blue-dark); }

/* ======================================================= Sticky buy bar
   The bar's shell (fixed position, slide-in transform, `.is-on`) is already
   defined once in home-v3.css, which loads on this page too — so only the
   differences live here. Redefining the shell is how `.v3-social` ended up
   with two conflicting definitions; one component, one home.
   The homepage bar uses `-media`/`-meta`/`-price` children; the product page
   needs a simpler two-part layout, hence `-info` rather than reusing those. */
.v3-stickybuy-inner { justify-content: space-between; }
.v3-stickybuy-info { display: flex; align-items: center; gap: 13px; min-width: 0; }
.v3-stickybuy-info img { width: 44px; height: 44px; object-fit: contain; border: 1px solid var(--v3-line); border-radius: 6px; background: #fff; flex: 0 0 auto; }
.v3-stickybuy-info strong {
	display: block;
	font-size: 14px;
	font-weight: 700;
	color: var(--v3-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 46ch;
}
.v3-stickybuy-info .amt { font-size: 14.5px; font-weight: 800; color: var(--v3-ink); }
body.v3-page .v3-stickybuy .v3-btn { flex: 0 0 auto; }

/* ============================================================ Policy docs */
.v3-doc-grid { display: grid; grid-template-columns: 260px 1fr; gap: 52px; align-items: start; }
.v3-doc-side { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 18px; }
body.v3-page .v3-toc-head {
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--v3-muted);
	margin: 0 0 12px;
}
.v3-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--v3-line); }
.v3-toc li { margin: 0; }
body.v3-page .v3-toc a {
	display: block;
	padding: 7px 0 7px 14px;
	margin-left: -2px;
	border-left: 2px solid transparent;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--v3-muted);
	transition: color .2s var(--v3-ease), border-color .2s var(--v3-ease);
}
body.v3-page .v3-toc a:hover { color: var(--v3-ink); border-left-color: #B9C4DA; }
body.v3-page .v3-toc a.is-current { color: var(--v3-blue); border-left-color: var(--v3-blue); font-weight: 600; }

.v3-doc-aside { padding: 20px; border-radius: var(--v3-r); background: var(--v3-alt); }
/* h2 since the heading-order fix; h3 kept so any un-migrated markup still
   matches rather than falling back to the browser's default heading size. */
body.v3-page .v3-doc-aside h2,
body.v3-page .v3-doc-aside h3 { font-size: 14.5px; margin: 0 0 6px; }
body.v3-page .v3-doc-aside p { font-size: 13px; line-height: 1.55; color: var(--v3-muted); margin: 0 0 14px; }

/* Policy copy is authored as raw headings and paragraphs, so it is styled here
   rather than in the markup. */
.v3-doc-body { max-width: 68ch; }
body.v3-page .v3-doc-body h2 {
	font-size: 21px;
	font-weight: 800;
	letter-spacing: -.015em;
	margin: 38px 0 12px;
	/* Anchor links land under the sticky header without this. */
	scroll-margin-top: 90px;
}
body.v3-page .v3-doc-body > h2:first-child { margin-top: 0; }
body.v3-page .v3-doc-body h3 { font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
body.v3-page .v3-doc-body ul,
body.v3-page .v3-doc-body ol { margin: 0 0 16px; padding-left: 20px; }
body.v3-page .v3-doc-body li { font-size: 15.5px; line-height: 1.7; color: var(--v3-muted); margin-bottom: 6px; }
body.v3-page .v3-doc-body table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14.5px; }
body.v3-page .v3-doc-body th,
body.v3-page .v3-doc-body td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--v3-line); }

.v3-doclinks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
body.v3-page .v3-doclink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 18px 20px;
	border: 1px solid var(--v3-line);
	border-radius: var(--v3-r);
	background: #fff;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--v3-ink);
	transition: border-color .25s var(--v3-ease), box-shadow .25s var(--v3-ease), color .25s var(--v3-ease);
}
body.v3-page .v3-doclink svg { flex: 0 0 auto; color: var(--v3-muted); transition: transform .25s var(--v3-ease), color .25s var(--v3-ease); }
body.v3-page .v3-doclink:hover { border-color: #B9C4DA; box-shadow: 0 10px 24px rgba(15, 26, 50, .09); color: var(--v3-blue); }
body.v3-page .v3-doclink:hover svg { transform: translateX(4px); color: var(--v3-blue); }

/* ================================================ Cart / checkout shell */
.v3-commerce-head { margin-bottom: 28px; }
body.v3-page .v3-commerce-title {
	font-size: clamp(26px, 3.4vw, 36px);
	font-weight: 800;
	letter-spacing: -.025em;
	margin: 0;
}
.v3-steps-bar {
	list-style: none;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 18px 0 0;
	padding: 0;
}
.v3-steps-bar li {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 15px 8px 8px;
	border-radius: 100px;
	background: var(--v3-alt);
	font-size: 13px;
	font-weight: 600;
	color: var(--v3-muted);
}
.v3-steps-bar .n {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--v3-line);
	font-family: var(--mono, ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: 11px;
	font-weight: 700;
}
.v3-steps-bar li.is-on { background: rgba(14, 44, 203, .09); color: var(--v3-blue); }
.v3-steps-bar li.is-on .n { background: var(--v3-blue); border-color: var(--v3-blue); color: #fff; }

.v3-commerce-assure {
	list-style: none;
	display: flex;
	gap: 10px 28px;
	flex-wrap: wrap;
	margin: 34px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--v3-line);
	font-size: 13px;
	color: var(--v3-muted);
}
body.v3-page .v3-commerce-assure a { color: var(--v3-blue); font-weight: 600; }
body.v3-page .v3-commerce-assure a:hover { text-decoration: underline; }

/* checkout-account.css sets the whole `product-metadata` block in monospace —
   correct for the variation and SKU spec lines it was written for, but that
   container also carries the product's short description. The result was the
   cart's only full sentence rendered as 12px monospace, the least readable text
   on the page. Targeting the description directly beats the inherited value. */
body.v3-page .wc-block-components-product-metadata__description {
	/* NOT `inherit` — the monospace comes from the PARENT, so inheriting is
	   exactly what has to be undone. This repeats the body stack because the
	   theme has no sans-serif custom property, only --display and --mono. */
	font-family: Inter, -apple-system, "system-ui", sans-serif;
	font-size: 13px;
	line-height: 1.5;
	letter-spacing: 0;
}

/* ================================================================= 404 */
.v3-notfound { display: flex; flex-direction: column; align-items: center; gap: 34px; }
.v3-bigsearch {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 620px;
	padding: 6px 6px 6px 16px;
	border: 1.5px solid var(--v3-line);
	border-radius: 100px;
	background: #fff;
	transition: border-color .2s var(--v3-ease), box-shadow .2s var(--v3-ease);
}
.v3-bigsearch:focus-within { border-color: var(--v3-blue); box-shadow: 0 0 0 4px rgba(14, 44, 203, .10); }
.v3-bigsearch > svg { color: var(--v3-muted); flex: 0 0 auto; }
.v3-bigsearch input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 15px;
	color: var(--v3-ink);
	padding: 12px 0;
}
.v3-bigsearch input[type="search"]:focus { outline: none; }
.v3-bigsearch button {
	flex: 0 0 auto;
	min-height: 44px;
	padding: 0 24px;
	border: 0;
	border-radius: 100px;
	background: var(--v3-blue);
	color: #fff;
	font: inherit;
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s var(--v3-ease);
}
.v3-bigsearch button:hover { background: var(--v3-blue-dark); }
.v3-notfound-cats { width: 100%; text-align: center; }
body.v3-page .v3-notfound-cats h2 {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--v3-muted);
	margin: 0 0 14px;
}
.v3-notfound-cats .v3-rail-list { justify-content: center; flex-wrap: wrap; overflow: visible; padding-block: 0; }

/* ========================================================== Responsive */
@media (max-width: 1080px) {
	.v3-pdp-grid { grid-template-columns: 1fr; gap: 30px; }
	.v3-pdp-media { position: static; }
	.v3-pdp-stage { max-width: 520px; }
	.v3-doc-grid { grid-template-columns: 1fr; gap: 28px; }
	.v3-doc-side { position: static; }
	.v3-doclinks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
	.v3-specrow { grid-template-columns: 1fr; gap: 4px; }
	.v3-doclinks { grid-template-columns: 1fr; }
	.v3-toolbar { padding-bottom: 16px; margin-bottom: 20px; }
	body.v3-page .v3-toc { display: none; }
	.v3-doc-side { gap: 0; }

	/* Score above the bars: side by side, the bars drop under ~200px wide and
	   the fills stop being readable as proportions. */
	.v3-rsum { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
	.v3-reviewwrap { padding: 22px 18px; }
}
@media (max-width: 640px) {
	.v3-toolbar { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* Stars move off the header row and sit under the byline — kept on the row
	   they would squeeze the author name to a couple of characters. */
	.v3-review-head { flex-wrap: wrap; }
	.v3-review-stars { margin-left: 0; flex-basis: 100%; order: 3; }
	.v3-rsum-avg { font-size: 40px; }
	.v3-rbar { grid-template-columns: 54px 1fr 28px; gap: 9px; }
	.v3-sort { width: 100%; justify-content: space-between; }
	/* The bar duplicates the buy button, so on a narrow screen drop the product
	   line rather than letting the button shrink below a usable width. */
	.v3-stickybuy-info img { display: none; }
	.v3-stickybuy-info strong { max-width: 18ch; }
	.v3-pdp { padding-block: 26px 8px; }
	body.v3-page .v3-pdp-cart form.cart { gap: 10px; }
	body.v3-page .v3-pdp-cart button.single_add_to_cart_button { flex: 1 1 100%; }
}
@media (max-width: 420px) {
	.v3-stickybuy-info { display: none; }
	.v3-stickybuy-inner { justify-content: stretch; }
	body.v3-page .v3-stickybuy .v3-btn { flex: 1 1 auto; text-align: center; justify-content: center; }
	.v3-bigsearch { padding-left: 14px; }
	.v3-bigsearch button { padding: 0 18px; }
}

@media (prefers-reduced-motion: reduce) {
	.v3-stickybuy,
	.v3-pdp-main,
	body.v3-page .v3-doclink,
	body.v3-page .v3-doclink svg { transition: none; }
	body.v3-page .v3-doclink:hover svg { transform: none; }
}