/**
 * Universal Shop — Base component styles.
 *
 * Rules:
 *   - Every selector scoped with .{css-prefix}- (set by plugin)
 *   - No hex/rgb outside shop-tokens.css
 *   - No font imports, no body/h1/* overrides
 *   - font-family: inherit unless explicitly overridden with token
 */

[class*="-shop-wrapper"] {
	color: inherit;
	font-family: inherit;

	/* Flatsome already provides padding via its .col wrapper around <main>.
	   Adding padding-inline here double-pads and squeezes the product card
	   to ~282px on iPhone SE. Reset to 0 so Flatsome owns the gutter. */
	max-width: var(--shop-wrapper-max-width, 1200px);
	margin-inline: auto;
	padding-inline: 0;
	box-sizing: border-box;
}

/* ───── Archive / Taxonomy ───── */

[class*="-shop-archive-header"] {
	margin-bottom: var(--shop-space-md);
}

/* Inherit font-size from theme heading scale (Flatsome h1: 1.7em mobile · 3.5em desktop).
   Customize via theme Customizer → Typography, not here. */
[class*="-shop-archive-title"] {
	font-family: var(--shop-font-heading);
	margin: 0 0 var(--shop-space-sm);
}

[class*="-shop-archive-description"] {
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-base);
	max-width: 65ch;
}

/* ───── Product grid ───── */

[class*="-shop-product-grid"] {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: var(--shop-space-md);
	align-items: stretch; /* equal-height cards regardless of title/badge presence */
	list-style: none;
	padding: 0;
	margin: 0 0 var(--shop-space-lg);
}

[class*="-shop-product-card"] {
	background: var(--shop-color-surface);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-md);
	overflow: hidden;
	transition: box-shadow var(--shop-transition-fast);
}

[class*="-shop-product-card"]:hover {
	box-shadow: var(--shop-shadow-md);
}

[class*="-shop-product-link"] {
	color: inherit;
	text-decoration: none;
}

[class*="-shop-product-media"] {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--shop-color-surface-muted);
}

[class*="-shop-product-media"] img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--shop-transition-base);
}

[class*="-shop-product-title"] {
	font-family: var(--shop-font-heading);
	font-size: var(--shop-text-base);
	margin: 0;
	padding: var(--shop-space-sm);
	line-height: 1.4;
	transition: color var(--shop-transition-fast);
}

/* Hover affordance — desktop pointer only (mobile/touch unaffected per
   do-not-do.md #21). Pairs with :focus-within for keyboard a11y. Uses
   transform/color (compositor layer) — no reflow, SEO-safe (CSS-only,
   no DOM mutation). */
@media (hover: hover) and (pointer: fine) {
	[class*="-shop-product-card"]:hover [class*="-shop-product-media"] img,
	[class*="-shop-product-card"]:focus-within [class*="-shop-product-media"] img {
		transform: scale(1.05);
	}

	[class*="-shop-product-card"]:hover [class*="-shop-product-title"],
	[class*="-shop-product-card"]:focus-within [class*="-shop-product-title"] {
		color: var(--shop-color-accent);
	}
}

/* Respect prefers-reduced-motion — disable image zoom, keep color shift. */
@media (prefers-reduced-motion: reduce) {
	[class*="-shop-product-media"] img {
		transition: none;
	}
	[class*="-shop-product-card"]:hover [class*="-shop-product-media"] img,
	[class*="-shop-product-card"]:focus-within [class*="-shop-product-media"] img {
		transform: none;
	}
}

/* ───── Single product ───── */

[class*="-shop-single-product"] [class*="-shop-product-header"] {
	margin-bottom: var(--shop-space-md);
}

[class*="-shop-single-product"] [class*="-shop-product-title"] {
	padding: 0;
}

[class*="-shop-single-product"] [class*="-shop-product-media"] {
	aspect-ratio: auto;
	margin: 0 0 var(--shop-space-md);
	border-radius: var(--shop-radius-md);
}

[class*="-shop-product-content"] {
	max-width: 65ch;
}

/* ───── Archive toolbar (count + sort) ─────
   Renders above the product grid on taxonomy archives. Pattern: count on the
   left, sort on the right — matches Thai e-commerce convention (HomePro,
   NocNoc, Lazada). Mobile stacks vertically because Thai labels are wider
   than English. Uses tokens only — no hardcoded colours/spacing. */
/* Toolbar = pill row. Chips (eyebrow + count) on the left, sort form
   pushed to the right with margin-left:auto. flex-wrap allows mobile
   to stack chips into multiple rows without breaking layout. Border
   strips live in shop-seo.css so the SEO surface owns the frame look. */
[class*="-shop-archive-toolbar"] {
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-sm);
	align-items: center;
	padding: var(--shop-space-sm) 0;
	margin-bottom: var(--shop-space-md);
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-sm);
}

/* Eyebrow = inline metadata reading as one phrase: "🏷 {term} มี N สินค้า".
   Tag icon + term link + muted count read together as a single line of
   supporting text — Thai e-commerce convention (Lazada/HomePro style).
   The toolbar's `gap` handles spacing from the sort dropdown on the
   right; flex-wrap on the parent drops the form to its own row on
   mobile. */
[class*="-shop-archive-eyebrow"] {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-sm);
}

[class*="-shop-archive-eyebrow__icon"] {
	flex: none;
	color: var(--shop-color-text-muted);
}

/* Count tail — sits after the term link, reads as supporting muted text
   ("มี 22 สินค้า"). Inherits the eyebrow's gap so spacing is consistent
   regardless of which element comes first. */
[class*="-shop-archive-eyebrow__count"] {
	color: var(--shop-color-text-muted);
}

/* Screen-reader-only utility — visually hidden but available to AT.
   Used by the sort form <label> so a11y stays compliant while the
   visual UI shows only the dropdown (Lazada/Shopee Thai convention).
   Standard WCAG-recommended .sr-only recipe; brand-prefixed so it
   doesn't collide with any theme rule that might define a generic
   .screen-reader-text. */
[class*="-shop-sr-only"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Category name = gold link inside the chip. When rendered as <a> it
   inherits the same colour treatment; falling back to <span> when the
   term has no permalink (edge case) keeps the visual identical. */
[class*="-shop-archive-eyebrow__name"] {
	color: var(--shop-color-accent);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--shop-transition-fast);
}

a[class*="-shop-archive-eyebrow__name"]:hover,
a[class*="-shop-archive-eyebrow__name"]:focus-visible {
	border-bottom-color: var(--shop-color-accent);
	outline: none;
}

/* Sort form — pushed to the row's trailing edge on wider viewports.
   On mobile (flex-wrap kicks in) the form drops to its own row aligned
   to flex-start; margin-left:auto only matters when there's room. */
[class*="-shop-archive-sort"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-xs);
	margin: 0 0 0 auto;
}

[class*="-shop-archive-sort"] label {
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-sm);
	/* Thai label "เรียงตาม:" must stay on one line — flex children with whitespace
	   in the source can wrap on narrow viewports without nowrap. */
	white-space: nowrap;
}

/* Custom caret — replaces browser default which is invisible against our surface
   token in some themes. SVG is inlined as data URI (no extra HTTP request).
   Stroke is a fixed mid-grey because data: URIs cannot resolve CSS variables
   or currentColor — but the value is the same shade as text-muted on every
   theme that respects WCAG (Flatsome contrast-2 / WP base contrast). */
[class*="-shop-archive-sort"] select {
	font: inherit;
	/* Match the label's --shop-text-sm — both are secondary UI in the same
	   hierarchy. Inheriting from .toolbar (--shop-text-base) made the select
	   visually heavier than its own label. */
	font-size: var(--shop-text-sm);
	color: var(--shop-color-text);
	background-color: var(--shop-color-surface);
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23636363' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>");
	background-repeat: no-repeat;
	background-position: right 0.6rem center;
	background-size: 0.75rem auto;
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-sm);
	padding: 0.35rem 1.85rem 0.35rem 0.6rem;
	min-height: 2rem;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}

[class*="-shop-archive-sort"] select:focus-visible {
	outline: 2px solid var(--shop-color-accent);
	outline-offset: 2px;
}

@media (max-width: 549px) {
	[class*="-shop-archive-toolbar"] {
		flex-direction: column;
		align-items: stretch;
	}
	[class*="-shop-archive-sort"] {
		justify-content: space-between;
	}
	[class*="-shop-archive-sort"] select {
		flex: 1;
	}
}

/* ───── Empty + Pagination ───── */

[class*="-shop-empty"] {
	color: var(--shop-color-text-muted);
	padding: var(--shop-space-lg) 0;
	text-align: center;
}

[class*="-shop-empty-title"] {
	color: var(--shop-color-text);
	font-size: var(--shop-text-lg);
	font-family: var(--shop-font-heading);
	margin: 0 0 var(--shop-space-xs);
}

[class*="-shop-empty-text"] {
	margin: 0 0 var(--shop-space-md);
}

[class*="-shop-empty-suggest"] {
	margin: 0 0 var(--shop-space-sm);
	color: var(--shop-color-text);
}

[class*="-shop-empty-links"] {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--shop-space-xs);
}

[class*="-shop-empty-links"] a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-pill);
	color: var(--shop-color-text);
	background: var(--shop-color-bg-soft);
	text-decoration: none;
	font-size: var(--shop-text-sm);
	transition: background-color var(--shop-transition-fast, 0.15s ease);
}

[class*="-shop-empty-links"] a:hover,
[class*="-shop-empty-links"] a:focus-visible {
	background: var(--shop-color-bg-hover);
	outline: none;
}

/* Guest empty-state (account page) — Two-CTA card.
   Reuses the .shop-empty wrapper above; adds icon halo, action row, divider. */
[class*="-shop-empty--guest"] {
	max-width: 32rem;
	margin: 0 auto;
	padding: var(--shop-space-xl) var(--shop-space-md);
}

[class*="-shop-empty__icon"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin: 0 auto var(--shop-space-md);
	border-radius: var(--shop-radius-pill);
	background: var(--shop-color-bg-soft);
	color: var(--shop-color-accent);
}

[class*="-shop-empty__actions"] {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--shop-space-sm);
	margin: var(--shop-space-md) 0;
}

[class*="-shop-empty__actions"] > a {
	min-width: 10rem;
}

[class*="-shop-empty__divider"] {
	display: flex;
	align-items: center;
	gap: var(--shop-space-sm);
	margin: var(--shop-space-md) 0 var(--shop-space-sm);
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-sm);
}

[class*="-shop-empty__divider"]::before,
[class*="-shop-empty__divider"]::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--shop-color-border);
}

/* Pagination — rewritten to fix glyph baseline drift between bare text-nodes
   and span-wrapped labels. Strategy: flex centering with inherited line-height
   (same as the cart button — proven Thai-safe).
   ⚠️ The `[class*="-shop-pagination"]` wildcard ALSO matches `__label` and
   `__icon`, so every margin/padding declared on this rule cascades into
   children unless we explicitly reset them below. Root cause of the
   "icon not centered" bug: vertical margins (16px top, 24px bottom) were
   applied to the inner <span>/<svg>, inflating the flex item's bounding
   box and pushing the icon off-center. Lesson: prefer `:where()`/exact
   class names for properties you don't want to inherit, or reset explicitly. */
[class*="-shop-pagination"] {
	margin-top: var(--shop-space-lg);
	margin-bottom: var(--shop-space-xl);
	font-family: var(--shop-font-body);
}

/* Reset margins on inner elements — wildcard above leaks otherwise. */
[class*="-shop-pagination__label"],
[class*="-shop-pagination__icon"] {
	margin-top: 0;
	margin-bottom: 0;
}

[class*="-shop-pagination"] .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--shop-pagination-gap);
}

/* Same flex pattern as the cart button (.shop-product-cta) which already
   centers Thai glyphs correctly — proven on the live storefront. flex
   align-items uses the line-box, not box geometry, but with the theme's
   inherited line-height (~1.6) the line-box is taller than the glyph and
   absorbs Sarabun's asymmetric ascender/descender into vertical padding.
   No line-height override, no inner wrapper sizing, no grid math. */
[class*="-shop-pagination"] .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	box-sizing: border-box;
	min-width: var(--shop-pagination-size);
	height: var(--shop-pagination-size);
	padding: 0 0.875rem;
	margin: 0;
	border: 1px solid var(--shop-pagination-border);
	border-radius: var(--shop-pagination-radius);
	background: var(--shop-pagination-bg);
	color: var(--shop-pagination-color);
	font-size: var(--shop-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background var(--shop-transition-fast), color var(--shop-transition-fast), border-color var(--shop-transition-fast);
}

/* No sizing on the label — let it flow naturally inside the flex parent.
   No line-height override either; inherit from the button so single-glyph
   <span>1</span> and multi-glyph <span>ก่อนหน้า</span> share the same
   line-box height. */
[class*="-shop-pagination__label"] {
	display: inline-block;
}

[class*="-shop-pagination__icon"] {
	display: block;
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
}

/* Hover/focus — link-only (current/dots are non-interactive) */
[class*="-shop-pagination"] a.page-numbers:hover,
[class*="-shop-pagination"] a.page-numbers:focus-visible {
	background: var(--shop-pagination-hover-bg);
	color: var(--shop-pagination-color);
	text-decoration: none;
	outline: none;
}

[class*="-shop-pagination"] a.page-numbers:focus-visible {
	outline: 2px solid var(--shop-color-accent);
	outline-offset: 2px;
}

/* Current page — accent fill */
[class*="-shop-pagination"] .page-numbers.current {
	background: var(--shop-pagination-current-bg);
	border-color: var(--shop-pagination-current-border);
	color: var(--shop-pagination-current-color);
	cursor: default;
}

/* Dots */
[class*="-shop-pagination"] .page-numbers.dots {
	border-color: transparent;
	background: transparent;
	color: var(--shop-pagination-disabled-color);
}

/* Screen-reader-only: applied at all sizes for icon_only style mode
   (Pagination SSOT) — keeps the label in the AT tree without showing it.
   Mobile fallback below also reuses this pattern when the responsive
   media query kicks in. */
[class*="-shop-pagination__label--sr"] {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mobile: hide "ก่อนหน้า/ถัดไป" label by default, keep arrows only.
   Only collapses when an icon exists alongside the label — text_only
   mode (where the label IS the button) keeps showing because there's
   no .__icon sibling to fall back to. */
@media (max-width: 549px) {
	[class*="-shop-pagination"] .prev.page-numbers:has([class*="-shop-pagination__icon"]) [class*="-shop-pagination__label"]:not([class*="--sr"]),
	[class*="-shop-pagination"] .next.page-numbers:has([class*="-shop-pagination__icon"]) [class*="-shop-pagination__label"]:not([class*="--sr"]) {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}
}

/* ───── Responsive ───── */

@media (max-width: 849px) {
	[class*="-shop-product-grid"] {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
		gap: var(--shop-space-sm);
	}
}

/* ───── Password toggle (register/login) ───── */

[class*="-shop-pw-wrap"] {
	display: flex;
	align-items: stretch;
	gap: 0;
}
[class*="-shop-pw-wrap"] input[type="password"],
[class*="-shop-pw-wrap"] input[type="text"] {
	flex: 1 1 auto;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
[class*="-shop-pw-toggle"] {
	flex: 0 0 auto;
	padding: 0 .8rem;
	border: 1px solid var(--shop-color-border, #ccc);
	border-left: 0;
	background: var(--shop-color-bg-soft, #f6f6f6);
	cursor: pointer;
	font-size: 1.1rem;
	border-top-right-radius: var(--shop-radius-sm, 4px);
	border-bottom-right-radius: var(--shop-radius-sm, 4px);
}
[class*="-shop-pw-toggle"]:hover {
	background: var(--shop-color-bg-hover, #ececec);
}
[class*="-shop-pw-toggle"]:focus-visible {
	outline: 2px solid var(--shop-color-accent, #2271b1);
	outline-offset: -2px;
}

/* ───── My Account — Phase 2 ───── */

[class*="-shop-welcome"] {
	padding: var(--shop-space-md, 1rem);
	margin-bottom: var(--shop-space-md, 1rem);
	background: color-mix(in srgb, var(--fs-color-success, #7a9c59) 12%, transparent);
	border: 1px solid color-mix(in srgb, var(--fs-color-success, #7a9c59) 35%, transparent);
	border-radius: var(--shop-radius-sm, 4px);
	color: var(--fs-color-success, #7a9c59);
}
[class*="-shop-welcome"] strong {
	margin-right: .4em;
}

/* Page-level h1 — used at the top of /account/, /cart/, /checkout/, etc.
 * (Section h2/h3 keep their own native rendering — this only targets the
 * one outermost page heading.) */
[class*="-shop-page-title"] {
	margin: 0 0 var(--shop-space-md, 1rem);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--shop-color-text, inherit);
}

/* Hero card — dashboard top block. Combines greeting + email/verified +
 * member-since into one compact card. Optional __alert section attaches
 * to the bottom (verify-email warning, just-verified success) so the
 * customer sees a single hero unit instead of stacked separate boxes. */
[class*="-shop-hero-card"] {
	margin-bottom: var(--shop-space-md, 1rem);
	background: var(--shop-color-bg-soft, #f6f6f6);
	border-radius: var(--shop-radius-sm, 4px);
	overflow: hidden; /* clips __alert bg to the rounded corners */
}
[class*="-shop-hero-card__body"] {
	padding: var(--shop-space-md, 1rem) var(--shop-space-lg, 1.5rem);
}
[class*="-shop-hero-card__hello"] {
	margin: 0;
	font-size: 1.1em;
	font-weight: 600;
	color: var(--shop-color-text, inherit);
}
[class*="-shop-hero-card__meta"] {
	margin: .35rem 0 0;
	font-size: .85em;
	color: var(--shop-color-text-muted, #555);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .25em .75em;
}
[class*="-shop-hero-card__email"] {
	color: inherit;
}

/* Inline alert section — attaches to the bottom of __body, separated by
 * a divider rather than its own card. Variants chain to the same
 * Flatsome state colour tokens that .shop-notice uses. */
[class*="-shop-hero-card__alert"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	justify-content: space-between;
	padding: .75rem var(--shop-space-lg, 1.5rem);
	border-top: 1px solid var(--shop-color-border, #ddd);
	font-size: .9em;
}
[class*="-shop-hero-card__alert"] > div:first-child {
	flex: 1 1 auto;
	min-width: 14rem;
}
[class*="-shop-hero-card__alert--warning"] {
	background: color-mix(in srgb, var(--fs-color-secondary, #d26e4b) 10%, transparent);
	border-top-color: color-mix(in srgb, var(--fs-color-secondary, #d26e4b) 30%, transparent);
	color: var(--fs-color-secondary, #d26e4b);
}
[class*="-shop-hero-card__alert--success"] {
	background: color-mix(in srgb, var(--fs-color-success, #7a9c59) 10%, transparent);
	border-top-color: color-mix(in srgb, var(--fs-color-success, #7a9c59) 30%, transparent);
	color: var(--fs-color-success, #7a9c59);
}
[class*="-shop-hero-card__alert--error"] {
	background: color-mix(in srgb, var(--fs-color-alert, #b20000) 10%, transparent);
	border-top-color: color-mix(in srgb, var(--fs-color-alert, #b20000) 30%, transparent);
	color: var(--fs-color-alert, #b20000);
}

/* Logout secondary action — sits right under the hero card, right-aligned
 * so the user finds the exit above the fold without hunting through the
 * nav list at the bottom. Muted styling so it never competes with the
 * primary CTAs (orders, profile, write-review). */
[class*="-shop-hero-card__logout"] {
	margin: var(--shop-space-sm, .5rem) 0 0;
	text-align: right;
}
[class*="-shop-hero-card__logout-link"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--shop-color-text-muted, #555);
	font-size: var(--shop-text-xs, .85em);
	text-decoration: none;
	padding: 4px 8px;
	border-radius: var(--shop-radius-sm, 4px);
}
[class*="-shop-hero-card__logout-link"]:hover,
[class*="-shop-hero-card__logout-link"]:focus-visible {
	color: var(--fs-color-alert, #b20000);
	background: var(--shop-color-bg-soft, #f3f4f6);
}
[class*="-shop-hero-card__logout-link"] svg {
	transform: rotate(180deg); /* arrow-right → "↪ exit" feel */
}

/* Verified pill — same alpha-on-state-color pattern as status badges so
 * the "✅ ยืนยันแล้ว" indicator visually belongs to the badge family.
 *
 * Hardening: position:static !important defends against Flatsome's
 * `.badge { position:absolute }` rule which would activate if a future
 * theme update changed selector specificity (current Flatsome doesn't
 * match our class, but we want to be safe — bug#42 troubleshooting). */
[class*="-shop-badge--verified"] {
	position: static !important;
	display: inline-flex;
	align-items: center;
	gap: .25em;
	padding: .15em .55em;
	border-radius: 999px;
	font-size: .75em;
	font-weight: 600;
	line-height: 1.4;
	background: color-mix(in srgb, var(--fs-color-success, #7a9c59) 15%, transparent);
	color: var(--fs-color-success, #7a9c59);
	white-space: nowrap;
	vertical-align: middle;
}

[class*="-shop-account-grid"] {
	display: grid;
	gap: var(--shop-space-lg, 1.5rem);
	grid-template-columns: 12rem 1fr;
}
@media (max-width: 849px) {
	[class*="-shop-account-grid"] {
		grid-template-columns: 1fr;
	}
}

[class*="-shop-account-nav"] {
	border: 1px solid var(--shop-color-border, #ddd);
	border-radius: var(--shop-radius-sm, 4px);
	padding: var(--shop-space-md, 1rem);
	align-self: start;
	position: sticky;
	top: 1rem;
}
@media (max-width: 849px) {
	[class*="-shop-account-nav"] { position: static; }
}
[class*="-shop-account-greeting"] {
	margin: 0 0 var(--shop-space-sm, .75rem);
	font-weight: 600;
	font-size: .95em;
	color: var(--shop-color-text-muted, #555);
}
[class*="-shop-account-nav"] ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
[class*="-shop-account-nav"] li + li {
	margin-top: .25rem;
}
[class*="-shop-account-nav"] a {
	display: block;
	padding: .5rem .75rem;
	border-radius: var(--shop-radius-sm, 4px);
	text-decoration: none;
	color: inherit;
}
[class*="-shop-account-nav"] a:hover {
	background: var(--shop-color-bg-hover, #f3f4f6);
}
[class*="-shop-account-nav"] a[aria-current="page"] {
	background: var(--shop-color-bg-soft, #f6f6f6);
	font-weight: 600;
}
[class*="-shop-account-nav__logout"] {
	color: var(--fs-color-alert, #b20000) !important;
}

/* Mobile: orders table on dashboard would force horizontal scroll on
 * narrow screens (4 columns). Allow native horizontal scroll inside the
 * main column rather than reflowing rows — preserves the at-a-glance
 * "number / date / status / total" scan that's the whole point of the table. */
@media (max-width: 849px) {
	[class*="-shop-account-main"] {
		overflow-x: auto;
	}
	[class*="-shop-account-main"] [class*="-shop-orders-table"] {
		min-width: 32rem;
	}
}

/* Status badges (shared with my-orders) — SSOT chain: Flatsome state colors
 * (--fs-color-success / --fs-color-alert / --fs-color-secondary) feed the
 * --shop-color-* tokens declared in shop-compat-flatsome.css. We mix each
 * state colour at low alpha for the badge background and use the full
 * value for the text — same alpha pattern across all 4 states for visual
 * consistency. Hex literals appear ONLY inside var(... , #fallback). */
[class*="-shop-status"] {
	display: inline-block;
	padding: .15em .55em;
	border-radius: 999px;
	font-size: .85em;
	background: color-mix(in srgb, var(--fs-color-base, #4a4a4a) 8%, transparent);
	color: var(--fs-color-base, #4a4a4a);
}
[class*="-shop-status--paid"],
[class*="-shop-status--completed"] {
	background: color-mix(in srgb, var(--fs-color-success, #7a9c59) 18%, transparent);
	color: var(--fs-color-success, #7a9c59);
}
[class*="-shop-status--shipped"] {
	background: color-mix(in srgb, var(--fs-color-primary, #446084) 18%, transparent);
	color: var(--fs-color-primary, #446084);
}
[class*="-shop-status--cancelled"],
[class*="-shop-status--refunded"] {
	background: color-mix(in srgb, var(--fs-color-alert, #b20000) 15%, transparent);
	color: var(--fs-color-alert, #b20000);
}
[class*="-shop-status--awaiting_payment"],
[class*="-shop-status--pending"] {
	background: color-mix(in srgb, var(--fs-color-secondary, #d26e4b) 18%, transparent);
	color: var(--fs-color-secondary, #d26e4b);
}

/* ───── Modern dashboard primitives ─────
 * The pieces below back the Stripe+Notion redesign of /account/. They're
 * generic enough to reuse on any plugin page that wants a quiet, sectioned
 * layout instead of the heavy table+sidebar pattern. */

/* Section divider — quiet hairline between sections. Use the <hr> element
 * so screen readers announce a real boundary; visual remains a 1px line. */
[class*="-shop-section-divider"] {
	border: 0;
	height: 1px;
	background: var(--shop-color-border, #e5e7eb);
	margin: var(--shop-space-lg, 1.5rem) 0;
}

/* Section header row — title on the left, optional action link on the right
 * ("View all →"). Used to label the order-list and nav-list sections. */
[class*="-shop-section-head"] {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 var(--shop-space-md, 1rem);
}
[class*="-shop-section-head"] > h2,
[class*="-shop-section-head"] > h3 {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--shop-color-text-muted, #555);
	text-transform: none;
	letter-spacing: 0;
}
[class*="-shop-section-head__action"] {
	font-size: .85em;
	color: var(--shop-color-text-muted, #555);
	text-decoration: none;
}
[class*="-shop-section-head__action"]:hover {
	color: var(--fs-color-primary, #446084);
}

/* Stats grid — explicit 2-step responsive:
 *   mobile (≤48em) → 2 columns (avoids the awkward 3+1 wrap when a 4-stat
 *                    grid hits a narrow viewport)
 *   desktop        → up to 4 columns (auto-fit fills available room)
 * Each card is flat (no border, no shadow); whitespace does the dividing. */
[class*="-shop-stats-grid"] {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--shop-space-md, 1rem);
	margin: 0 0 var(--shop-space-lg, 1.5rem);
}
@media (min-width: 850px) {
	[class*="-shop-stats-grid"] {
		grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	}
}
[class*="-shop-stat"] {
	padding: var(--shop-space-sm, .75rem) 0;
}
[class*="-shop-stat__num"] {
	display: block;
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--shop-color-text, inherit);
}
[class*="-shop-stat__label"] {
	display: block;
	margin-top: .25rem;
	font-size: .85em;
	color: var(--shop-color-text-muted, #555);
}

/* Orders list — flat row layout (replacing the heavy 4-col table on the
 * dashboard). Each row is a flex row that wraps gracefully on mobile.
 * The full table view stays at /my-orders/ for power users. */
[class*="-shop-orders-list"] {
	margin: 0 0 var(--shop-space-md, 1rem);
}
[class*="-shop-orders-row"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem 1rem;
	padding: .85rem 0;
	border-bottom: 1px solid var(--shop-color-border, #eaecef);
	text-decoration: none;
	color: inherit;
	transition: background .15s;
}
[class*="-shop-orders-row"]:hover {
	background: var(--shop-color-bg-soft, #f9fafb);
}
[class*="-shop-orders-row__num"] {
	font-weight: 600;
	flex: 0 0 auto;
	min-width: 6rem;
}
[class*="-shop-orders-row__date"] {
	flex: 1 1 6rem;
	color: var(--shop-color-text-muted, #555);
	font-size: .9em;
}
[class*="-shop-orders-row__status"] {
	flex: 0 0 auto;
	font-size: .9em;
}
[class*="-shop-orders-row__total"] {
	flex: 0 0 auto;
	font-weight: 600;
	margin-left: auto;
}

/* Status dot — minimal alternative to the .shop-status pill. Same Flatsome
 * state-colour token chain so dots and pills agree on what "paid" looks
 * like across the site. */
[class*="-shop-status-dot"] {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	color: var(--shop-color-text-muted, #555);
}
[class*="-shop-status-dot"]::before {
	content: "";
	display: inline-block;
	width: .55em;
	height: .55em;
	border-radius: 50%;
	background: var(--fs-color-base, #4a4a4a);
}
[class*="-shop-status-dot--paid"]::before,
[class*="-shop-status-dot--completed"]::before {
	background: var(--fs-color-success, #7a9c59);
}
[class*="-shop-status-dot--shipped"]::before {
	background: var(--fs-color-primary, #446084);
}
[class*="-shop-status-dot--cancelled"]::before,
[class*="-shop-status-dot--refunded"]::before {
	background: var(--fs-color-alert, #b20000);
}
[class*="-shop-status-dot--awaiting_payment"]::before,
[class*="-shop-status-dot--pending"]::before {
	background: var(--fs-color-secondary, #d26e4b);
}

/* Nav list — flat list of action links with a chevron on the right.
 * Replaces the bordered sidebar on /account/ when we want the dashboard
 * to flow as a single column. The .shop-account-nav sidebar is still
 * available for pages that prefer the two-column layout. */
[class*="-shop-nav-list"] {
	list-style: none;
	margin: 0;
	padding: 0;
}
[class*="-shop-nav-list"] li + li {
	border-top: 1px solid var(--shop-color-border, #eaecef);
}
[class*="-shop-nav-list__link"] {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .85rem 0;
	text-decoration: none;
	color: inherit;
	font-size: .95em;
}
[class*="-shop-nav-list__link"]:hover {
	color: var(--fs-color-primary, #446084);
}
/* Leading icon — fixed size, muted by default, tints with link on hover */
[class*="-shop-nav-list__icon"] {
	flex: 0 0 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--shop-color-text-muted, #555);
	transition: color .15s;
}
[class*="-shop-nav-list__link"]:hover [class*="-shop-nav-list__icon"] {
	color: var(--fs-color-primary, #446084);
}
/* Label takes remaining space so chevron + count stay right-aligned even
 * without the old margin-left:auto on the trailing svg. */
[class*="-shop-nav-list__label"] {
	flex: 1 1 auto;
	min-width: 0;
}
/* Trailing chevron (last svg child) */
[class*="-shop-nav-list__link"] > svg:last-child {
	flex: 0 0 auto;
	opacity: .5;
	transition: transform .15s, opacity .15s;
}
[class*="-shop-nav-list__link"]:hover > svg:last-child {
	opacity: 1;
	transform: translateX(2px);
}
[class*="-shop-nav-list__count"] {
	flex: 0 0 auto;
	font-size: .85em;
	color: var(--shop-color-text-muted, #555);
}
[class*="-shop-nav-list__link"] > [class*="__count"] + svg {
	margin-left: .5rem;
}
[class*="-shop-nav-list__link--alert"] {
	color: var(--fs-color-alert, #b20000);
}

/* ───── Order status timeline ───── */

[class*="-shop-order-timeline"] {
	display: flex;
	list-style: none;
	margin: var(--shop-space-md, 1rem) 0 var(--shop-space-lg, 1.5rem);
	padding: 0;
	gap: 0;
	counter-reset: step;
}
[class*="-shop-order-timeline__step"] {
	flex: 1;
	position: relative;
	text-align: center;
	padding-top: 1.6rem;
	color: var(--shop-color-text-muted, #888);
	font-size: .9em;
}
/* connector line between dots */
[class*="-shop-order-timeline__step"]:not(:last-child)::after {
	content: "";
	position: absolute;
	top: .5rem;
	left: 50%;
	right: -50%;
	height: 2px;
	background: var(--shop-color-border, #ddd);
	z-index: 0;
}
/* Timeline connector + dots — completed steps inherit Flatsome's success
 * colour (the SSOT for "good outcome" across the site). Hex literals
 * appear ONLY inside var(... , #fallback). */
[class*="-shop-order-timeline__step--done"]:not(:last-child)::after,
[class*="-shop-order-timeline__step--active"]:not(:last-child)::after {
	background: var(--fs-color-success, #7a9c59);
}
[class*="-shop-order-timeline__dot"] {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--shop-color-surface, #fff);
	border: 2px solid var(--shop-color-border, #ddd);
	z-index: 1;
}
[class*="-shop-order-timeline__step--done"] [class*="-shop-order-timeline__dot"] {
	background: var(--fs-color-success, #7a9c59);
	border-color: var(--fs-color-success, #7a9c59);
}
[class*="-shop-order-timeline__step--active"] [class*="-shop-order-timeline__dot"] {
	background: var(--shop-color-surface, #fff);
	border-color: var(--fs-color-success, #7a9c59);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--fs-color-success, #7a9c59) 20%, transparent);
}
[class*="-shop-order-timeline__step--done"],
[class*="-shop-order-timeline__step--active"] {
	color: var(--shop-color-text, #222);
}
[class*="-shop-order-timeline__step--active"] [class*="-shop-order-timeline__label"] {
	font-weight: 600;
}

@media (max-width: 549px) {
	[class*="-shop-order-timeline"] {
		flex-direction: column;
		gap: .5rem;
	}
	[class*="-shop-order-timeline__step"] {
		text-align: left;
		padding: 0 0 0 1.6rem;
	}
	[class*="-shop-order-timeline__step"]:not(:last-child)::after {
		top: 1rem;
		left: .5rem;
		right: auto;
		bottom: -1rem;
		width: 2px;
		height: auto;
	}
	[class*="-shop-order-timeline__dot"] {
		top: .15rem;
		left: 0;
		transform: none;
	}
}

/* ───── Cart Status Bar ─────
   Renders right after <body> via wp_body_open. Visible only when the
   cart has items (server gates it with [hidden]; shop-cart.js flips the
   same attr on broadcast). Two doors — secondary "ดูตะกร้า" (view) and
   primary "ไปจ่ายเงิน" (checkout) — so the bar carries the user's intent
   instead of forcing a single guess.

   Boxed layout: the wrapper is transparent and only paints inner padding
   to keep the bar inside the container. The inner block carries the
   accent paint, border-radius, and all spacing. Earlier full-bleed
   styling read as a layout bug on wide viewports.

   Colour: --shop-color-primary maps to Flatsome's primary (navy via the
   compat shim) so the bar matches the "ใส่รถเข็น" button. Falls back to
   the WP contrast token on non-Flatsome themes.

   IMPORTANT — wildcard substring trap (do-not-do.md rule 25):
   `[class*="-shop-cart-bar"]` would also match `-shop-cart-bar__btn`
   etc. The wrapper rule uses `[class$="-shop-cart-bar"]` (ends-with) so
   the modifier classes don't inherit the wrapper's positioning. */
[class$="-shop-cart-bar"] {
	width: 100%;
	padding: 0.5rem var(--shop-wrapper-padding-inline, 1rem);
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-sm);
	line-height: 1.4;
	box-sizing: border-box;
}
[class$="-shop-cart-bar"][hidden] {
	display: none !important;
}
[class*="-shop-cart-bar__inner"] {
	max-width: var(--shop-wrapper-max-width, 1200px);
	margin: 0 auto;
	padding: 0.625rem 1rem;
	background: var(--shop-color-primary);
	color: var(--shop-color-on-primary);
	border-radius: var(--shop-radius-md);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

[class*="-shop-cart-bar__status"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-width: 0;
}
[class*="-shop-cart-bar__icon"] {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}
[class*="-shop-cart-bar__icon"] svg {
	width: 1.125rem;
	height: 1.125rem;
}
[class*="-shop-cart-bar__text"] {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem;
	min-width: 0;
}
[class*="-shop-cart-bar__count-wrap"] {
	font-weight: 600;
}
[class*="-shop-cart-bar__sep"] {
	opacity: 0.6;
}
[class*="-shop-cart-bar__subtotal"] {
	font-weight: 700;
}

[class*="-shop-cart-bar__actions"] {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	flex-wrap: wrap;
}
[class*="-shop-cart-bar__btn"] {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.4rem 0.9rem;
	border-radius: var(--shop-radius-sm);
	font-family: inherit;
	font-size: var(--shop-text-sm);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background var(--shop-transition-fast), color var(--shop-transition-fast);
}
[class*="-shop-cart-bar__btn--secondary"] {
	background: transparent;
	color: var(--shop-color-on-primary);
	border: 1px solid color-mix(in srgb, var(--shop-color-on-primary) 50%, transparent);
}
[class*="-shop-cart-bar__btn--secondary"]:hover,
[class*="-shop-cart-bar__btn--secondary"]:focus-visible {
	background: color-mix(in srgb, var(--shop-color-on-primary) 12%, transparent);
	color: var(--shop-color-on-primary);
	outline: none;
}
[class*="-shop-cart-bar__btn--primary"] {
	background: var(--shop-color-on-primary);
	color: var(--shop-color-primary);
}
[class*="-shop-cart-bar__btn--primary"]:hover,
[class*="-shop-cart-bar__btn--primary"]:focus-visible {
	background: color-mix(in srgb, var(--shop-color-on-primary) 88%, var(--shop-color-text));
	color: var(--shop-color-primary);
	outline: none;
}

@media (max-width: 549px) {
	[class*="-shop-cart-bar__inner"] {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
	/* Mobile: actions row spans full width and the two buttons split it
	   50/50 so each is a comfortable touch target (~140px wide × 40px
	   tall on a 390px viewport). Desktop keeps the natural-width row. */
	[class*="-shop-cart-bar__actions"] {
		width: 100%;
		gap: 0.5rem;
	}
	[class*="-shop-cart-bar__btn"] {
		flex: 1 1 0;
		justify-content: center;
		padding: 0.5rem 0.7rem;
		font-size: var(--shop-text-sm);
	}
}

/* Toast offset — kept for backward compat with the FAB era. The status
   bar lives at the top of the page so it doesn't collide with the
   bottom-right toast, but if a future surface (e.g. a sticky checkout
   bar) reuses this var, both stay coordinated. */
.shop-toast {
	bottom: var(--shop-toast-bottom, 1.25rem);
}

/* ───── Toast (add-to-cart confirmation) ─────
   Theme-agnostic: every colour comes from --shop-toast-* in shop-tokens.css.
   Layout uses flex + flex-wrap so the (optional) progress bar can sit on
   its own row below the message + CTA without the wrapper having to know
   whether the bar exists. */

.shop-toast {
	position: fixed;
	right: 1.25rem;
	z-index: var(--shop-z-toast, 10001);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem .9rem;
	max-width: min(24rem, calc(100vw - 2.5rem));
	padding: .85rem 1.1rem;
	background: var(--shop-toast-bg-success);
	color: var(--shop-toast-color);
	border-radius: var(--shop-toast-radius);
	box-shadow: var(--shop-toast-shadow);
	font-family: var(--shop-font-body);
	font-size: var(--shop-text-sm);
	line-height: 1.4;
	opacity: 0;
	transform: translateY(.5rem);
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.shop-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.shop-toast__icon {
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 1.05em;
	line-height: 1;
}
.shop-toast__msg {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 500;
}
.shop-toast__cta {
	color: var(--shop-toast-cta-color);
	text-decoration: underline;
	white-space: nowrap;
}
.shop-toast__cta:hover,
.shop-toast__cta:focus-visible {
	color: var(--shop-toast-cta-hover);
	outline-offset: 2px;
}

/* Progress bar — countdown indicator. The track sits on its own flex row
   (flex-basis: 100%) so it spans the full toast width regardless of how
   long the message + CTA are. The fill animates width from 100% → 0%
   over the toast duration, set inline via --shop-toast-duration on .show. */
.shop-toast__progress {
	flex-basis: 100%;
	height: 2px;
	margin-top: .35rem;
	background: var(--shop-toast-progress-bg);
	border-radius: 2px;
	overflow: hidden;
}
.shop-toast__progress-fill {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--shop-toast-progress-fill);
	transform-origin: left center;
}
.shop-toast.is-visible .shop-toast__progress-fill {
	animation: shop-toast-countdown var(--shop-toast-duration, 5s) linear forwards;
}
@keyframes shop-toast-countdown {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}
@media (prefers-reduced-motion: reduce) {
	.shop-toast.is-visible .shop-toast__progress-fill {
		animation: none;
		transform: scaleX(0); /* show end state — bar empty */
	}
}

/* Type variants — only the background changes; CTA + text colours come
   from the same tokens so contrast is consistent across states. */
.shop-toast--error   { background: var(--shop-toast-bg-error);   }
.shop-toast--info    { background: var(--shop-toast-bg-info);    }
.shop-toast--warning { background: var(--shop-toast-bg-warning); }

@media (max-width: 549px) {
	.shop-toast {
		left: 1rem;
		right: 1rem;
		bottom: var(--shop-toast-bottom, 1rem); /* honors FAB nudge */
		max-width: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.shop-toast {
		transition: opacity .15s ease;
		transform: none;
	}
}

/* ───── Account sidebar — badge + divider ───── */

[class*="-shop-account-nav"] a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
}
[class*="-shop-account-nav__badge"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4em;
	height: 1.4em;
	padding: 0 .4em;
	border-radius: 999px;
	background: var(--shop-color-accent, #2271b1);
	color: var(--shop-color-on-accent, #fff);
	font-size: .8em;
	font-weight: 600;
	line-height: 1;
}
[class*="-shop-account-nav__badge"][hidden] {
	display: none;
}
[class*="-shop-account-nav__divider"] {
	height: 1px;
	background: var(--shop-color-border, #e5e7eb);
	margin: .5rem 0;
	padding: 0;
	list-style: none;
}

/* ───── Inline checkbox row (under textareas) ───── */
[class*="-shop-checkbox-row"] {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: .5rem;
	font-size: .9em;
	color: var(--shop-color-text-muted, #555);
	cursor: pointer;
}
[class*="-shop-checkbox-row"] input[type="checkbox"] {
	margin: 0;
}

/* ───── Notices (form feedback: success / error / info / warning) ───── */

[class*="-shop-notice"] {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1rem;
	margin: 0 0 1rem;
	border: 1px solid transparent;
	border-radius: var(--shop-radius-sm, 4px);
	font-size: .95em;
	line-height: 1.5;
}
/* Variant for actionable notices (button on the right) — pushes the
 * inner content + action apart while keeping the leading ::before icon
 * vertically centered with the title. */
[class*="-shop-notice--action"] {
	flex-wrap: wrap;
	gap: .75rem 1rem;
	justify-content: space-between;
}
[class*="-shop-notice--action"] > div:first-of-type {
	flex: 1 1 auto;
	min-width: 14rem;
}
[class*="-shop-notice"] p {
	margin: 0;
}
/* Add a leading icon via ::before so the template stays clean. */
[class*="-shop-notice"]::before {
	flex: 0 0 auto;
	font-weight: 700;
	line-height: 1.4;
}
/* Notice variants — chain to Flatsome state colors (--fs-color-success
 * /alert/primary/secondary). Background = state colour at low alpha,
 * border = same colour slightly stronger, text = full colour. Same alpha
 * pattern across all 4 variants for visual consistency. Hex literals
 * appear ONLY inside var(... , #fallback). */
[class*="-shop-notice--success"] {
	background: color-mix(in srgb, var(--fs-color-success, #7a9c59) 12%, transparent);
	border-color: color-mix(in srgb, var(--fs-color-success, #7a9c59) 35%, transparent);
	color: var(--fs-color-success, #7a9c59);
}
[class*="-shop-notice--success"]::before {
	content: "✓";
}
[class*="-shop-notice--error"] {
	background: color-mix(in srgb, var(--fs-color-alert, #b20000) 10%, transparent);
	border-color: color-mix(in srgb, var(--fs-color-alert, #b20000) 30%, transparent);
	color: var(--fs-color-alert, #b20000);
}
[class*="-shop-notice--error"]::before {
	content: "✕";
}
[class*="-shop-notice--info"] {
	background: color-mix(in srgb, var(--fs-color-primary, #446084) 10%, transparent);
	border-color: color-mix(in srgb, var(--fs-color-primary, #446084) 30%, transparent);
	color: var(--fs-color-primary, #446084);
}
[class*="-shop-notice--info"]::before {
	content: "ℹ";
}
[class*="-shop-notice--warning"] {
	background: color-mix(in srgb, var(--fs-color-secondary, #d26e4b) 12%, transparent);
	border-color: color-mix(in srgb, var(--fs-color-secondary, #d26e4b) 35%, transparent);
	color: var(--fs-color-secondary, #d26e4b);
}
[class*="-shop-notice--warning"]::before {
	content: "!";
}

/* ───── Buttons (theme-agnostic) ───── */
/* Pair the attribute selector with `button`/`a`/`input` so we beat themes
   like Flatsome that style raw `button { background: none; }` (same
   specificity wins last in the cascade only when this rule is more
   specific). Cover anchor "buttons" too — used as styled links elsewhere. */

button[class*="-shop-button"],
a[class*="-shop-button"],
input[type="submit"][class*="-shop-button"],
input[type="button"][class*="-shop-button"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	padding: .7rem 1.4rem;
	min-height: 2.75rem;
	border: 1px solid transparent;
	border-radius: var(--shop-radius-sm, 4px);
	background: var(--shop-color-bg-soft, #f3f4f6);
	color: var(--shop-color-text, #111);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	transition: background-color .15s ease, transform .05s ease, box-shadow .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
button[class*="-shop-button"]:hover,
a[class*="-shop-button"]:hover,
input[type="submit"][class*="-shop-button"]:hover,
input[type="button"][class*="-shop-button"]:hover {
	background: var(--shop-color-bg-hover, #e5e7eb);
	color: var(--shop-color-text, #111);
	text-decoration: none;
}
button[class*="-shop-button"]:active,
a[class*="-shop-button"]:active,
input[type="submit"][class*="-shop-button"]:active,
input[type="button"][class*="-shop-button"]:active {
	transform: translateY(1px);
}
button[class*="-shop-button"]:focus-visible,
a[class*="-shop-button"]:focus-visible,
input[type="submit"][class*="-shop-button"]:focus-visible,
input[type="button"][class*="-shop-button"]:focus-visible {
	outline: 2px solid var(--shop-color-accent, #2271b1);
	outline-offset: 2px;
}
button[class*="-shop-button"]:disabled,
button[class*="-shop-button"][aria-busy="true"],
input[type="submit"][class*="-shop-button"]:disabled,
input[type="submit"][class*="-shop-button"][aria-busy="true"] {
	opacity: .65;
	cursor: not-allowed;
	pointer-events: none;
}

/* Primary — solid accent, high contrast on any theme background. */
button[class*="-shop-button--primary"],
a[class*="-shop-button--primary"],
input[type="submit"][class*="-shop-button--primary"],
input[type="button"][class*="-shop-button--primary"] {
	background: var(--shop-color-accent, #111827);
	border-color: var(--shop-color-accent, #111827);
	color: var(--shop-color-on-accent, #fff);
}
button[class*="-shop-button--primary"]:hover,
a[class*="-shop-button--primary"]:hover,
input[type="submit"][class*="-shop-button--primary"]:hover,
input[type="button"][class*="-shop-button--primary"]:hover {
	background: var(--shop-color-accent-hover, #1f2937);
	border-color: var(--shop-color-accent-hover, #1f2937);
	color: var(--shop-color-on-accent, #fff);
}

/* Block — full width (mobile, modal-like contexts). */
button[class*="-shop-button--block"],
a[class*="-shop-button--block"],
input[type="submit"][class*="-shop-button--block"] {
	display: flex;
	width: 100%;
}

/* Small — for inline contexts like notice banners where the default
 * height would dwarf the surrounding text. */
button[class*="-shop-button--sm"],
a[class*="-shop-button--sm"],
input[type="submit"][class*="-shop-button--sm"] {
	padding: .4em .9em;
	font-size: .85em;
	border-radius: var(--shop-radius-sm, 4px);
}

/* Cart variant — sized to sit beside the qty stepper. Same height as
   the stepper (3.25rem); slightly larger outer radius (12px) and more
   horizontal padding (28px) so the call-to-action reads heavier than
   the neutral stepper next to it. Theme accent comes from --primary. */
button[class*="-shop-button--cart"],
a[class*="-shop-button--cart"] {
	height: 3.25rem;
	gap: .6rem;
	border-radius: 12px;
	padding: 0 1.75rem;
	font-size: 1.0625rem;
	font-weight: 700;
	white-space: nowrap;
}
/* Icon inside the cart button — slightly larger than the default 1.25rem
   to balance the heavier label weight. */
button[class*="-shop-button--cart"] svg,
a[class*="-shop-button--cart"] svg {
	width: 1.375rem;
	height: 1.375rem;
}

/* Spinner shown via aria-busy. Keeps the label visible so screen readers
   still announce the action; sighted users get the visual cue. */
button[class*="-shop-button"][aria-busy="true"]::before,
a[class*="-shop-button"][aria-busy="true"]::before,
input[type="submit"][class*="-shop-button"][aria-busy="true"]::before {
	content: "";
	width: 1em;
	height: 1em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: shop-spin .6s linear infinite;
	flex: 0 0 auto;
}
@keyframes shop-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	button[class*="-shop-button"][aria-busy="true"]::before {
		animation-duration: 1.6s;
	}
}

/* ───── Quantity stepper (cart + product) ───── */
/* Container owns the border + corner radius + outer surface; the buttons
   are bare, the input keeps left+right divider borders. Plus button gets
   the accent colour so it reads as the primary affordance. Sizing matches
   the team's reference mockup: 10rem total, 3.25rem tall.
   On focus the inner control's outline is allowed through (no
   overflow:hidden trick — we keep the corners with a single rounded
   container instead, which doesn't clip a 2px outline). */

[class*="-shop-qty-stepper"] {
	display: inline-flex;
	align-items: stretch;
	width: 8.75rem; /* 44 + 52 + 44 = 140px at 16px base */
	max-width: 100%;
	height: 3.25rem;
	border: 1.5px solid var(--shop-color-border, #ddd);
	border-radius: 10px;
	background: var(--shop-color-surface, #fff);
	overflow: hidden;
}
[class*="-shop-qty-stepper__btn"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	width: 2.75rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	color: var(--shop-color-text-muted, #555);
	cursor: pointer;
	transition: background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
[class*="-shop-qty-stepper__btn"]:hover:not(:disabled) {
	background: var(--shop-color-bg-hover, #f0f0f0);
}
[class*="-shop-qty-stepper__btn"]:focus-visible {
	outline: 2px solid var(--shop-color-accent, #2271b1);
	outline-offset: -3px;
	border-radius: inherit;
}
[class*="-shop-qty-stepper__btn"]:disabled {
	color: var(--shop-color-border, #ccc);
	cursor: not-allowed;
}
/* Input is the centre cell; left + right borders become the dividers
   between the controls. */
[class*="-shop-qty-stepper"] [class*="-shop-cart-qty"] {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	margin: 0;
	border: 0;
	border-left: 1.5px solid var(--shop-color-border, #ddd);
	border-right: 1.5px solid var(--shop-color-border, #ddd);
	border-radius: 0;
	padding: 0;
	text-align: center;
	font: inherit;
	font-size: 1.2rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	background: transparent;
	color: var(--shop-color-text, #333);
	-moz-appearance: textfield;
	box-sizing: border-box;
}
/* Hide native spinner — buttons own that role. */
[class*="-shop-qty-stepper"] [class*="-shop-cart-qty"]::-webkit-outer-spin-button,
[class*="-shop-qty-stepper"] [class*="-shop-cart-qty"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ───── Product actions row (single product) ───── */
/* Stepper + Add-to-Cart inline on desktop, stack on mobile. */

[class*="-shop-product-actions"] {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--shop-space-sm, .75rem);
	margin: var(--shop-space-md, 1rem) 0;
}
/* Force every direct child to the same baseline regardless of which
   side (stepper container vs button border-box) the height is computed
   from. Prevents 1–2px misalignment when one side is content-box and
   the other border-box. */
[class*="-shop-product-actions"] > * {
	height: 3.25rem;
	margin: 0;
	box-sizing: border-box;
}

@media (max-width: 549px) {
	[class*="-shop-product-actions"] [class*="-shop-button"] {
		flex: 1 1 100%;
	}
}

/* ───── Inline SVG icons ───── */
/* Class-icons.php emits <svg> with width/height attrs; these rules align the
   icon with surrounding text and let buttons center it cleanly. */

[class*="-shop-button"] svg,
[class*="-shop-qty-stepper__btn"] svg,
[class*="-shop-cart-remove"] svg,
[class*="-shop-link-arrow"] svg {
	display: block;
	vertical-align: middle;
	overflow: visible;       /* override Flatsome's `svg:not(:root) { overflow: hidden }` */
	flex: 0 0 auto;
	width: 1.25rem;          /* lock against any stylesheet that resizes inline svg */
	height: 1.25rem;
}

/* Stepper button display rules live in the canonical .shop-qty-stepper
   block earlier in this file — don't redeclare here, the duplicate
   override-ed height:100% that the layout fix relies on. */

/* Cart remove × — keep button compact, no padding around the icon. */
[class*="-shop-cart-remove"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--shop-color-text-muted, #6b7280);
	border-radius: var(--shop-radius-sm, 4px);
	cursor: pointer;
}
[class*="-shop-cart-remove"]:hover {
	background: var(--shop-color-bg-hover, #f3f4f6);
	color: var(--fs-color-alert, #b20000);
}

/* Inline link arrow — sits on the baseline of the surrounding text. */
[class*="-shop-link-arrow"] {
	display: inline-flex;
	align-items: center;
	gap: .25em;
	text-decoration: none;
}
[class*="-shop-link-arrow"]:hover {
	text-decoration: underline;
}
[class*="-shop-link-arrow"] svg {
	transition: transform .15s ease;
}
[class*="-shop-link-arrow"]:hover svg {
	transform: translateX(2px);
}

/* ──────────────────────────────────────────────────────────────────────
   Pending reviews list (Account page + /my-reviews/)
   ────────────────────────────────────────────────────────────────────── */
ul[class*="-shop-pending-reviews__list"] {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-sm);
}
ul[class*="-shop-pending-reviews__list"] > li[class*="-shop-pending-reviews__item"] {
	list-style: none !important;
	margin: 0;
	padding: var(--shop-space-sm) var(--shop-space-md);
	display: flex;
	align-items: center;
	gap: var(--shop-space-md);
	background: var(--shop-color-surface);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-md);
}
ul[class*="-shop-pending-reviews__list"] > li[class*="-shop-pending-reviews__item"]::before,
ul[class*="-shop-pending-reviews__list"] > li[class*="-shop-pending-reviews__item"]::marker {
	content: none !important;
	display: none !important;
}
[class*="-shop-pending-reviews__title"] {
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-xs);
	margin: 0 0 var(--shop-space-sm);
}
[class*="-shop-pending-reviews__thumb"] {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: var(--shop-radius-sm);
	flex-shrink: 0;
}
[class*="-shop-pending-reviews__body"] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
[class*="-shop-pending-reviews__name"] {
	font-weight: 600;
	color: var(--shop-color-text);
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
[class*="-shop-pending-reviews__name"]:hover {
	color: var(--shop-color-accent);
}
[class*="-shop-pending-reviews__meta"] {
	font-size: var(--shop-text-xs);
	color: var(--shop-color-text-muted);
}

/* Order Detail — review column cell */
[class*="-shop-order-items__review"] {
	white-space: nowrap;
}
[class*="-shop-order-items__review-cta"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--shop-color-accent);
	text-decoration: none;
	font-weight: 600;
}
[class*="-shop-order-items__review-cta"]:hover { text-decoration: underline; }
[class*="-shop-order-items__review-done"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--shop-color-success);
	text-decoration: none;
	font-size: var(--shop-text-xs);
}
[class*="-shop-order-items__review-done"]:hover { text-decoration: underline; }
[class*="-shop-order-items__review-hint"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--shop-color-text-muted);
	font-size: var(--shop-text-xs);
}

/* /my-reviews/ page */
[class*="-shop-my-reviews"] {
	max-width: 760px;
	margin: 0 auto;
}
ul[class*="-shop-my-reviews__list"] {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--shop-space-md);
}
ul[class*="-shop-my-reviews__list"] > li[class*="-shop-my-reviews__item"] {
	list-style: none !important;
	margin: 0;
	padding: var(--shop-space-md);
	background: var(--shop-color-surface);
	border: 1px solid var(--shop-color-border);
	border-radius: var(--shop-radius-md);
}
ul[class*="-shop-my-reviews__list"] > li[class*="-shop-my-reviews__item"]::before,
ul[class*="-shop-my-reviews__list"] > li[class*="-shop-my-reviews__item"]::marker {
	content: none !important;
	display: none !important;
}
[class*="-shop-my-reviews__head"] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--shop-space-sm) var(--shop-space-md);
	margin-bottom: var(--shop-space-sm);
}
[class*="-shop-my-reviews__rating"] {
	font-size: 1.1em;
	letter-spacing: 1px;
}
[class*="-shop-my-reviews__product"] {
	font-weight: 600;
	color: var(--shop-color-text);
	text-decoration: none;
}
[class*="-shop-my-reviews__product"]:hover {
	color: var(--shop-color-accent);
}
[class*="-shop-my-reviews__status"] {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--shop-text-xs);
	padding: 2px 8px;
	border-radius: var(--shop-radius-pill);
}
[class*="-shop-my-reviews__status--pending"] {
	background: var(--shop-color-bg-soft);
	color: var(--shop-color-text-muted);
}
[class*="-shop-my-reviews__status--approved"] {
	background: var(--shop-color-bg-soft);
	color: var(--shop-color-success);
}
[class*="-shop-my-reviews__date"] {
	margin-left: auto;
	font-size: var(--shop-text-xs);
	color: var(--shop-color-text-muted);
}
[class*="-shop-my-reviews__body"] {
	color: var(--shop-color-text);
	line-height: 1.6;
	margin: 0 0 var(--shop-space-sm);
}
ul[class*="-shop-my-reviews__images"] {
	list-style: none !important;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--shop-space-sm);
}
ul[class*="-shop-my-reviews__images"] > li {
	list-style: none !important;
	margin: 0;
	padding: 0;
}
ul[class*="-shop-my-reviews__images"] > li::before,
ul[class*="-shop-my-reviews__images"] > li::marker {
	content: none !important;
	display: none !important;
}
ul[class*="-shop-my-reviews__images"] img {
	width: 64px;
	height: 64px;
	object-fit: cover;
	border-radius: var(--shop-radius-sm);
	border: 1px solid var(--shop-color-border);
	display: block;
}

@media (max-width: 849px) {
	ul[class*="-shop-pending-reviews__list"] > li[class*="-shop-pending-reviews__item"] {
		flex-wrap: wrap;
	}
}