/* ==========================================================================
   ASTYLIO — STOREFRONT LAYER
   Applies the ASTYLIO visual language (see ASTYLIO_DESIGN_SYSTEM_SPEC.md)
   to the LIVE storefront of the aksh-clothing child theme.

   Loaded site-wide AFTER style.css (parent-of-record for layout). This sheet
   only restyles — colour, typography, radius, shadow, motion — and deliberately
   does NOT touch the critical layout/fix values owned by style.css:
     - promo bar height (44/38) + fixed-top overlay positions
     - .home header overlay (top:44/38, transparent → .is-scrolled solid)
     - hero carousel heights, 8px dot pagination, dropdown hover bridge
     - product grid column counts (4/3/2), home top-padding zeroing
   All tokens mirror astylio-design-system.css (semantic --color-* / --astylio-*).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS (global — the storefront consumes these everywhere)
   -------------------------------------------------------------------------- */
:root {
	--astylio-burgundy:        #5A1F2B;
	--astylio-burgundy-dark:   #42151F;
	--astylio-ivory-warm:      #F7F3EE;
	--astylio-ivory-soft:      #FCFAF7;
	--astylio-gold:            #C8A97A;
	--astylio-charcoal:        #252525;
	--astylio-text-secondary:  #6B625D;
	--astylio-taupe:           #A89B91;
	--astylio-border:          #DED6CE;

	--color-bg-page:          var(--astylio-ivory-warm);
	--color-bg-surface:       var(--astylio-ivory-soft);
	--color-bg-surface-soft:  #F1EAE2;
	--color-bg-dark:          var(--astylio-burgundy-dark);

	--color-brand-primary:        var(--astylio-burgundy);
	--color-brand-primary-hover:  var(--astylio-burgundy-dark);
	--color-brand-primary-active: #471925;
	--color-brand-primary-light:  #7D3243;

	--color-accent-gold:          var(--astylio-gold);

	--color-text-primary:   var(--astylio-charcoal);
	--color-text-secondary: var(--astylio-text-secondary);
	--color-text-muted:     var(--astylio-taupe);
	--color-text-disabled:  #C9C2BA;
	--color-text-inverse:   #FDFBF8;

	/* Canonical responsive breakpoints (reference/documentation only).
	   Plain CSS media queries cannot consume var(); these values document the
	   canonical boundaries used across the child theme's @media rules. */
	--astylio-breakpoint-sm: 480px; /* small-mobile boundary */
	--astylio-breakpoint-md: 768px; /* mobile/desktop boundary */

	/* Icon size scale (site-wide; preview template also defines these). */
	--astylio-icon-xs: 12px;
	--astylio-icon-sm: 16px;
	--astylio-icon-md: 20px;
	--astylio-icon-lg: 24px;
	--astylio-icon-xl: 32px;

	/* Inverse-on-dark variants (Design System Extension — footer/announcement). */
	--color-text-inverse-strong:  rgba(253, 251, 248, 0.92);
	--color-text-inverse-soft:    rgba(253, 251, 248, 0.82);
	--color-text-inverse-muted:   rgba(253, 251, 248, 0.72);
	--color-text-inverse-faint:   rgba(253, 251, 248, 0.58);
	--color-border-inverse-subtle: rgba(253, 251, 248, 0.14);
	--color-surface-inverse-hover: rgba(253, 251, 248, 0.14);

	--color-border-subtle:  #E8E2DA;
	--color-border-default: var(--astylio-border);
	--color-border-strong:  #C4B9AD;
	--color-border-focus:   var(--astylio-burgundy);

	--color-success: #4E7A4F;
	--color-warning: #A87B34;
	--color-error:   #A03B3B;
	--color-info:    #4A6D8C;

	--astylio-font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
	--astylio-font-ui:      'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--astylio-fs-display-xl: 60px;
	--astylio-fs-display-lg: 50px;
	--astylio-fs-display-md: 42px;
	--astylio-fs-heading-xl: 38px;
	--astylio-fs-heading-lg: 31px;
	--astylio-fs-heading-md: 25px;
	--astylio-fs-heading-sm: 19px;
	--astylio-fs-body-lg: 18px;
	--astylio-fs-body-md: 15px;
	--astylio-fs-body-sm: 13px;
	--astylio-fs-label-md: 12px;
	--astylio-fs-caption: 13px;
	--astylio-fs-price: 15px;
	--astylio-fs-button: 13px;
	--astylio-fs-nav: 15.6px;

	--astylio-lh-display: 1.08;
	--astylio-lh-heading: 1.2;
	--astylio-lh-body: 1.65;
	--astylio-ls-nav: 0.12em;

	--astylio-space-1: 4px;   --astylio-space-2: 8px;  --astylio-space-3: 12px;
	--astylio-space-4: 16px;  --astylio-space-5: 20px; --astylio-space-6: 24px;
	--astylio-space-7: 32px;  --astylio-space-8: 40px; --astylio-space-9: 48px;
	--astylio-space-10: 56px; --astylio-space-11: 64px; --astylio-space-12: 80px;
	--astylio-space-13: 96px; --astylio-space-14: 120px;

	--astylio-radius-sm: 4px;
	--astylio-radius-md: 6px;
	--astylio-radius-lg: 10px;
	--astylio-radius-pill: 9999px;

	--astylio-shadow-subtle: 0 1px 3px rgba(37, 37, 37, 0.05);
	--astylio-shadow-card: 0 4px 18px rgba(37, 37, 37, 0.06);
	--astylio-shadow-floating: 0 12px 40px rgba(37, 37, 37, 0.12);

	--astylio-duration-fast: 150ms;
	--astylio-duration-normal: 250ms;
	--astylio-duration-slow: 400ms;
	--astylio-duration-reveal: 500ms;
	--astylio-duration-hero: 1200ms;
	--astylio-ease-standard: cubic-bezier(0.25, 0.1, 0.25, 1);
	--astylio-ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
	--astylio-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);

	/* Containers (Design System Extension — global layout needs these site-wide). */
	--astylio-container-sm: 640px;
	--astylio-container-md: 880px;
	--astylio-container-lg: 1080px;
	--astylio-container-xl: 1320px;
	--astylio-container-full: 100%;

	/* Central layering system (Step 2 spec §24) — new code MUST use these;
	   legacy hard values in style.css are intentionally left untouched to
	   avoid regressing known fixes. */
	--astylio-z-page: 1;
	--astylio-z-header: 1000;
	--astylio-z-nav-dropdown: 998;
	--astylio-z-mega: 1001;
	--astylio-z-drawer: 1050;
	--astylio-z-modal: 1200;
}

/* --------------------------------------------------------------------------
   2. BASE — warm ivory page, charcoal ink, Poppins UI, Playfair headings
   -------------------------------------------------------------------------- */
body {
	background-color: var(--color-bg-page);
	color: var(--color-text-primary);
	font-family: var(--astylio-font-ui);
	font-weight: 400;
	line-height: var(--astylio-lh-body);
	font-size: var(--astylio-fs-body-md);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.alpha, .beta, .gamma, .delta {
	font-family: var(--astylio-font-display);
	font-weight: 500;
	color: var(--color-text-primary);
	letter-spacing: -0.01em;
	line-height: var(--astylio-lh-heading);
}

a {
	color: var(--color-text-primary);
	transition: color var(--astylio-duration-fast) var(--astylio-ease-standard);
}
a:hover { color: var(--color-brand-primary); opacity: 1; }

::selection {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
}

/* Focus — burgundy ring (a11y: visible, keyboard-first) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.woocommerce a:focus-visible,
.woocommerce button:focus-visible {
	outline: 2px solid var(--color-border-focus);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   3. HEADER — brand wordmark, promo bar, nav, icons
   -------------------------------------------------------------------------- */

/* Brand wordmark: editorial ASTYLIO (parent sets the site title to ASTYLIO). */
.site-header .aksh-header-logo .site-title {
	display: block;                       /* re-show (style.css hid it) */
	font-family: var(--astylio-font-display);
	font-size: clamp(20px, 2vw, 26px);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	margin: 0;
}
.site-header .aksh-header-logo .site-title a {
	color: var(--color-text-primary);
	font-weight: 600;
	letter-spacing: 0.08em;
}
.site-header .aksh-header-logo .site-title a:hover { color: var(--color-brand-primary); opacity: 1; }

/* Hardcoded ASTYLIO logo (SVG lockup, openspec change — replaces the text
   wordmark). Scoped to the new container: keeps the existing .site-branding
   geometry, sizes the image within the 72px header, and mirrors the light /
   dark colour states of the header (white over hero, brand/charcoal when
   scrolled or on interior pages). Additive only — no existing rule removed. */
.site-header .aksh-header-logo .site-branding--astylio .astylio-logo {
	display: block;
	height: 44px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
	line-height: 1;
	margin: 0;
}
/* Homepage transparent-over-hero: white logo to match the light text/icons. */
.home .aksh-header.site-header .site-branding--astylio .astylio-logo {
	filter: brightness(0) invert(1);
}
/* Scrolled / interior: restore the black (charcoal-on-ivory) logo. */
.home .aksh-header.site-header.is-scrolled .site-branding--astylio .astylio-logo,
.aksh-header.site-header .site-branding--astylio .astylio-logo {
	filter: none;
}
@media (max-width: 480px) {
	.site-header .aksh-header-logo .site-branding--astylio .astylio-logo {
		height: 36px;
		max-width: 180px;
	}
}

/* Desktop only (logo is centered on mobile, ≤768px): nudge the lockup 20px
   in from the top-left edge. Additive — existing geometry untouched. */
@media (min-width: 769px) {
	.site-header .aksh-header-logo .site-branding--astylio {
		margin-left: 20px;
	}
	/* Desktop zoom ~25% (in the 20–30% range): 44px → 55px tall,
	   240px → 300px max-width. Scoped to the same top-left lockup only;
	   mobile (≤768px) keeps its own centered sizing untouched. */
	.site-header .aksh-header-logo .site-branding--astylio .astylio-logo {
		height: 55px;
		max-width: 300px;
	}
}

/* Intermediate widths (769px–1024px): tighten nav spacing so 9 items
   fit without collision. Above 1024px the nav is hidden and hamburger
   takes over, so this only affects the desktop-but-narrow zone. */
@media (min-width: 769px) and (max-width: 1100px) {
	.aksh-header-nav ul.aksh-nav {
		gap: 18px;
	}
	.site-header .aksh-header-logo .site-branding--astylio .astylio-logo {
		height: 48px;
		max-width: 260px;
	}
}

/* Interior (non-home) header surface: soft ivory, warm border. */
.aksh-header.site-header {
	background-color: var(--color-bg-surface);
	border-bottom: 1px solid var(--color-border-default);
}
/* Scrolled overlay header solidifies to soft ivory (ASTYLIO). */
.home .aksh-header.site-header.is-scrolled {
	background: rgba(252, 250, 247, 0.97);
	border-bottom: 1px solid var(--color-border-default);
	box-shadow: var(--astylio-shadow-subtle);
}
/* Non-home pages: scrolled shadow (surface already solid from base rule). */
.aksh-header.site-header.is-scrolled {
	box-shadow: var(--astylio-shadow-subtle);
}

/* Promo bar — deep burgundy, ivory text (spec: promotional bars = brand). */
.aksh-promo-bar {
	background: var(--color-bg-dark);
	color: var(--color-text-inverse);
}
.aksh-promo-cta {
	color: var(--color-text-inverse);
	border-bottom: 1px solid rgba(253, 251, 248, 0.6);
	text-decoration: none;
	font-weight: 500;
}
.aksh-promo-cta:hover { color: var(--astylio-gold); opacity: 1; }

/* Desktop nav — Poppins, refined uppercase, generous spacing. */
.aksh-header-nav ul.aksh-nav > li > a.aksh-nav-link {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-nav);
	font-weight: 500;
	letter-spacing: var(--astylio-ls-nav);
	text-transform: uppercase;
	color: var(--color-text-primary);
}
.aksh-header-nav ul.aksh-nav > li > a.aksh-nav-link:hover {
	color: var(--color-brand-primary);
	opacity: 1;
}
.aksh-header-nav ul.aksh-nav > li.current-menu-item > a.aksh-nav-link {
	border-bottom: 1px solid var(--color-brand-primary);
	color: var(--color-brand-primary);
}

/* Header action icons — thin line, hover to burgundy (non-home). */
.aksh-header-icon { color: var(--color-text-primary); }
@media (hover: hover) and (pointer: fine) {
	.aksh-header-icon:hover { background: transparent; color: var(--color-brand-primary); opacity: 1; }
}
.aksh-header-icon svg { transition: color var(--astylio-duration-fast) var(--astylio-ease-standard); }

/* Cart count badge — burgundy, subtle. */
.aksh-cart-count {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-family: var(--astylio-font-ui);
}

/* Search panel — soft ivory surface, burgundy focus. */
.aksh-search-panel {
	background: var(--color-bg-surface);
	border-top: 1px solid var(--color-border-default);
}
.aksh-search-panel .search-field {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	color: var(--color-text-primary);
	font-family: var(--astylio-font-ui);
}
.aksh-search-panel .search-field:focus {
	border-color: var(--color-border-focus);
	box-shadow: 0 0 0 3px rgba(90, 31, 43, 0.12);
	outline: none;
}
.aksh-search-panel input[type="submit"],
.aksh-search-panel button[type="submit"] {
	background: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-family: var(--astylio-font-ui);
	border-radius: var(--astylio-radius-md);
}
.aksh-search-panel button[type="submit"]:hover,
.aksh-search-panel input[type="submit"]:hover {
	background: var(--color-brand-primary-hover);
	border-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
}

/* Mobile stacked menu — soft ivory, refined. */
.aksh-mobile-menu.is-open {
	background: var(--color-bg-surface);
	color: var(--color-text-primary);
}
.aksh-mobile-list a {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	color: var(--color-text-primary);
}
.aksh-mobile-list a:hover { color: var(--color-brand-primary); }
.aksh-mobile-list > li { border-bottom-color: var(--color-border-default); }
.aksh-mobile-list .cb-acc-trigger,
.aksh-mobile-list .menu-item-has-children > span {
	font-family: var(--astylio-font-ui);
	color: var(--color-text-primary);
}

/* Dropdown surfaces — soft ivory, Poppins UI, burgundy hover accent. */
.aksh-dropdown {
	background: var(--color-bg-surface);
	border-color: var(--color-border-default);
}
.aksh-dropdown-item a {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	color: var(--color-text-secondary);
}
.aksh-dropdown-item a:hover {
	color: var(--color-brand-primary);
	background: var(--color-bg-page);
}

/* --------------------------------------------------------------------------
   4. BUTTONS — burgundy primary, subtle radius, restrained motion
   -------------------------------------------------------------------------- */
button,
.button,
a.button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.added_to_cart,
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wc-block-grid__products .wc-block-grid__product .wp-block-button__link,
.aksh-button,
.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
	border: 1px solid var(--color-brand-primary);
	border-radius: var(--astylio-radius-md);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-button);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	min-height: 44px;
	line-height: 1.2;
	text-shadow: none;
	box-shadow: none;
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            transform var(--astylio-duration-fast) var(--astylio-ease-standard);
}

button:hover,
.button:hover,
a.button:hover,
input[type="submit"]:hover,
.added_to_cart:hover,
.wp-block-button__link:hover,
.aksh-button:hover,
.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--color-brand-primary-hover);
	border-color: var(--color-brand-primary-hover);
	color: var(--color-text-inverse);
	opacity: 1;
}
button:active,
.button:active,
.aksh-button:active,
.single_add_to_cart_button:active {
	background-color: var(--color-brand-primary-active);
	transform: translateY(1px);
}
/* Header icons: no active background flash. */
.aksh-header-icon:active,
.aksh-menu-toggle:active {
	background: transparent;
	transform: none;
}

button[disabled],
.button[disabled],
input[type="submit"][disabled] {
	background-color: var(--color-text-disabled);
	border-color: var(--color-text-disabled);
	color: var(--color-bg-surface);
	cursor: not-allowed;
	opacity: 1;
}

/* --------------------------------------------------------------------------
   5. INPUTS — soft ivory, taupe border, burgundy focus
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="password"],
select,
textarea,
.woocommerce .quantity .qty,
.woocommerce-page .quantity .qty,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	color: var(--color-text-primary);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	box-shadow: none;
	padding: 0.65em 0.9em;
	transition: border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            box-shadow var(--astylio-duration-fast) var(--astylio-ease-standard);
}
input::placeholder,
textarea::placeholder { color: var(--color-text-muted); }
input:focus,
select:focus,
textarea:focus,
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--color-border-focus);
	outline: none;
	box-shadow: 0 0 0 3px rgba(90, 31, 43, 0.12);
}

/* --------------------------------------------------------------------------
   6. SHOP / ARCHIVE — grid, product cards, badges, pagination, ordering
   -------------------------------------------------------------------------- */

/* Product cards — image-focused 4:5 media, editorial name/price. */
.aksh-card-media {
	aspect-ratio: 4 / 5;
	background: linear-gradient(150deg, #F1EAE2 0%, #E5DBD0 100%);
	border-radius: var(--astylio-radius-lg);
	overflow: hidden;
}
ul.products li.product a.aksh-card-link .aksh-card-media img {
	height: 100%;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis);
}
a.aksh-card-link:hover .aksh-card-media img { transform: scale(1.03); }

.aksh-card-meta { margin-top: var(--astylio-space-4); }

.aksh-card-title {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	font-weight: 500;
	color: var(--color-text-primary);
	line-height: 1.4;
	margin-bottom: 0.15em;
}
.aksh-card-price {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-price);
	font-weight: 500;
	color: var(--color-text-primary);
}
.aksh-card-price .amount { color: var(--color-text-primary); }
.aksh-card-price del { color: var(--color-text-muted); opacity: 1; }
.aksh-card-price ins { color: var(--color-brand-primary); }

/* Sale badge — refined, small uppercase, burgundy. */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
ul.products li.product .onsale,
.wc-block-grid__product .onsale,
.single-product .product .onsale {
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-family: var(--astylio-font-ui);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.1em;
	padding: 4px 10px;
	border-radius: var(--astylio-radius-pill);
	min-height: auto;
	min-width: auto;
	line-height: 1.4;
}

/* Pagination — warm neutrals, burgundy current. */
.woocommerce-pagination .page-numbers li .page-numbers {
	background: var(--color-bg-surface);
	color: var(--color-text-secondary);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-sm);
	font-family: var(--astylio-font-ui);
}
.woocommerce-pagination .page-numbers li .page-numbers.current {
	background: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--color-text-inverse);
}
.woocommerce-pagination .page-numbers li .page-numbers:hover {
	color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
}

/* Ordering + result count. */
.woocommerce-ordering select {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	color: var(--color-text-primary);
	font-family: var(--astylio-font-ui);
	padding: 0.5em 0.9em;
}
.woocommerce-result-count {
	color: var(--color-text-secondary);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
}

/* Breadcrumb. */
.woocommerce-breadcrumb {
	color: var(--color-text-secondary);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
}
.woocommerce-breadcrumb a { color: var(--color-text-secondary); }
.woocommerce-breadcrumb a:hover { color: var(--color-brand-primary); }

/* --------------------------------------------------------------------------
   7. HOMEPAGE SECTIONS — Playfair editorial titles, generous spacing
   -------------------------------------------------------------------------- */
.aksh-new-arrivals,
.aksh-featured {
	background: var(--color-bg-surface);
}

.aksh-section-title {
	font-family: var(--astylio-font-display);
	font-size: clamp(26px, 3vw, var(--astylio-fs-heading-lg));
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
	margin: 0;
	text-transform: none;
}

.aksh-social {
	background: var(--color-bg-page);
}
.aksh-social-strip {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-pill);
	padding: 0.6em 1.6em;
}
.aksh-social-handle {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}
.aksh-social-link { color: var(--color-text-primary); }
.aksh-social-link:hover { color: var(--color-brand-primary); opacity: 1; }

/* Tiles — editorial label; soft zoom on the tile artwork. */
a.aksh-tile {
	background-color: var(--color-bg-surface-soft);
	border-radius: var(--astylio-radius-lg);
}
.aksh-tile-label {
	font-family: var(--astylio-font-display);
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--color-text-inverse);
	border-bottom: 1px solid rgba(253, 251, 248, 0.7);
}
a.aksh-tile:hover { opacity: 1; }
a.aksh-tile:hover::before { opacity: 1; }

/* --------------------------------------------------------------------------
   8. SINGLE PRODUCT
   -------------------------------------------------------------------------- */
.single-product div.product .product_title {
	font-family: var(--astylio-font-display);
	font-size: clamp(28px, 3vw, 36px);
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--color-text-primary);
}
.single-product div.product .summary .price {
	font-family: var(--astylio-font-ui);
	font-size: 20px;
	font-weight: 500;
	color: var(--color-text-primary);
}
.single-product div.product .summary .price del { color: var(--color-text-muted); }
.single-product div.product .summary .price ins { color: var(--color-brand-primary); text-decoration: none; }

.single-product div.product form.cart .variations select {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-md);
	font-family: var(--astylio-font-ui);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid var(--color-border-default);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-label-md);
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-text-secondary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
	color: var(--color-brand-primary);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	border-bottom: 2px solid var(--color-brand-primary);
}

.related.products > h2,
.upsells.products > h2,
.cross-sells > h2,
.woocommerce-tabs h2,
.woocommerce-tabs h3 {
	font-family: var(--astylio-font-display);
	font-weight: 500;
	color: var(--color-text-primary);
}

/* Product summary meta. */
.single-product div.product .product_meta {
	color: var(--color-text-secondary);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
}
.single-product div.product .product_meta a { color: var(--color-text-secondary); }
.single-product div.product .product_meta a:hover { color: var(--color-brand-primary); }

/* Notices — warm surfaces with semantic accents. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--color-bg-surface);
	border-top-color: var(--color-brand-primary);
	font-family: var(--astylio-font-ui);
	color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   9. FOOTER — deep burgundy brand anchor, ivory text
   -------------------------------------------------------------------------- */
.site-footer {
	background-color: var(--color-bg-dark);
	color: var(--color-text-inverse);
	padding: var(--astylio-space-11) 0 var(--astylio-space-8);
}
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6 {
	color: var(--color-text-inverse);
	font-family: var(--astylio-font-display);
	font-weight: 500;
}
.site-footer a {
	color: var(--color-text-inverse);
	opacity: 0.85;
}
.site-footer a:hover { color: var(--astylio-gold); opacity: 1; }
.site-footer .widget-title {
	font-family: var(--astylio-font-display);
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: var(--astylio-fs-label-md);
	color: var(--color-text-inverse);
}
.footer-widgets { border-bottom: 1px solid rgba(253, 251, 248, 0.15); }
.site-footer .site-info {
	color: rgba(253, 251, 248, 0.7);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-sm);
}
.site-footer .site-info a { color: rgba(253, 251, 248, 0.85); }
.site-footer .site-info a:hover { color: var(--astylio-gold); }

/* Storefront handheld footer bar (mobile) — matches footer. */
.storefront-handheld-footer-bar {
	background: var(--color-bg-dark);
}
.storefront-handheld-footer-bar ul li > a {
	color: rgba(253, 251, 248, 0.85);
}
.storefront-handheld-footer-bar ul li > a:hover {
	color: var(--astylio-gold);
}
.storefront-handheld-footer-bar ul li.search.active .site-search {
	background: var(--color-bg-dark);
}
.storefront-handheld-footer-bar ul li.cart .count {
	background: var(--astylio-gold);
	color: var(--color-bg-dark);
}

/* --------------------------------------------------------------------------
   10. MOTION — restraint + reduced-motion (Step 8 Premium Motion)
   -------------------------------------------------------------------------- */

/* --- Product card hover: lift + image zoom (pointer devices only) --- */
@media (hover: hover) and (pointer: fine) {
	a.aksh-card-link {
		transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis);
		will-change: transform;
	}
	a.aksh-card-link:hover {
		transform: translateY(-3px);
	}
	.aksh-card-media {
		overflow: hidden;
	}
	.aksh-card-media img,
	a.aksh-card-link .aksh-card-media img {
		transition: transform var(--astylio-duration-normal) var(--astylio-ease-emphasis),
		            opacity var(--astylio-duration-normal) var(--astylio-ease-standard);
		will-change: transform;
	}
	a.aksh-card-link:hover .aksh-card-media img {
		transform: scale(1.03);
	}
}

/* --- Add-to-Bag button settle animation --- */
@keyframes astylio-atc-settle {
	0%   { transform: scale(1); }
	40%  { transform: scale(0.97); }
	100% { transform: scale(1); }
}
.single_add_to_cart_button.atc-settle {
	animation: astylio-atc-settle 200ms var(--astylio-ease-emphasis) both;
}

/* --- Cart icon feedback pulse --- */
@keyframes astylio-cart-pulse {
	0%   { transform: scale(1); }
	50%  { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.aksh-header-cart.cart-pulse svg,
.aksh-header-cart.cart-pulse {
	animation: astylio-cart-pulse 300ms var(--astylio-ease-emphasis) both;
}

/* --- General button/link transitions --- */
.aksh-card-media img,
a.aksh-card-link .aksh-card-media img,
.aksh-button,
button,
.single_add_to_cart_button {
	transition: background-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            border-color var(--astylio-duration-fast) var(--astylio-ease-standard),
	            transform var(--astylio-duration-normal) var(--astylio-ease-emphasis);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	a.aksh-card-link:hover .aksh-card-media img,
	a.aksh-card-link .aksh-card-media img { transform: none; }
	a.aksh-card-link:hover { transform: none; }
	.aksh-card-media img { transform: none; }
	button,
	.button,
	.aksh-button,
	.single_add_to_cart_button { transition: none; }
	.single_add_to_cart_button.atc-settle { animation: none; }
	.aksh-header-cart.cart-pulse svg,
	.aksh-header-cart.cart-pulse { animation: none; }
}

/* --------------------------------------------------------------------------
   11. AJAX ADD TO BAG — loading state + error (openspec aksh-ajax-add-to-cart)
   --------------------------------------------------------------------------
   Reuses the existing ASTYLIO .astylio-btn.is-loading spinner pattern (tokens
   only, no new icon library). The badge is fragment-driven from WooCommerce and
   is hidden at count 0 while still present in the DOM as a stable fragment target.
   -------------------------------------------------------------------------- */
.single_add_to_cart_button.is-loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}
.single_add_to_cart_button.is-loading::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid var(--color-text-inverse);
	border-right-color: transparent;
	border-radius: 50%;
	background-color: var(--color-bg-surface, #FCFAF7);
	animation: astylio-spin 0.7s linear infinite;
}

/* Header bag-count badge: hidden at 0, target always present for fragments. */
.aksh-cart-count[data-count="0"] {
	display: none;
}

/* Hide WooCommerce's default injected "View cart" button that appears directly
   below the Add to Bag button after a successful AJAX add. The ASTYLIO floating
   confirmation card already provides the View Bag action (openspec
   aksh-add-to-bag-confirmation). Scoped to single-product pages + the exact
   injected sibling only — loop/card .added_to_cart links are unaffected. */
.single-product .single_add_to_cart_button + .added_to_cart.wc-forward {
	display: none;
}

/* Concise, non-technical, design-system-consistent add-to-bag error. */
.aksh-add-to-cart-error {
	margin-top: var(--astylio-space-3, 12px);
	padding: var(--astylio-space-3, 12px) var(--astylio-space-4, 16px);
	border: 1px solid var(--color-border-default);
	border-radius: var(--astylio-radius-md, 6px);
	background: var(--color-bg-surface, #FCFAF7);
	color: var(--color-brand-primary);
	font-family: var(--astylio-font-ui, Poppins);
	font-size: var(--astylio-fs-body-sm, 14px);
	line-height: 1.4;
}
.single_add_to_cart_button[aria-busy="true"] { cursor: not-allowed; }

/* Canonical icon rendering (Phase 2 P2 CP3, inc/icons.php shared sprite).
   Site-wide baseline so <use> symbols render at the standard size in
   production; components may override with their own scoped svg rules
   (e.g. .aksh-header-icon svg { width:21px }). Mirrors the preview-only
   design-system utilities. */
.astylio-icon {
	width: var(--astylio-icon-md, 20px);
	height: var(--astylio-icon-md, 20px);
	flex: none;
	vertical-align: middle;
}
.astylio-icon--xs { width: var(--astylio-icon-xs, 12px); height: var(--astylio-icon-xs, 12px); }
.astylio-icon--sm { width: var(--astylio-icon-sm, 16px); height: var(--astylio-icon-sm, 16px); }
.astylio-icon--md { width: var(--astylio-icon-md, 20px); height: var(--astylio-icon-md, 20px); }
.astylio-icon--lg { width: var(--astylio-icon-lg, 24px); height: var(--astylio-icon-lg, 24px); }
.astylio-icon--xl { width: var(--astylio-icon-xl, 32px); height: var(--astylio-icon-xl, 32px); }

/* astylio-spin keyframe is defined in design-system.css (design page only);
   redeclare here so the product button spinner animates site-wide. */
@keyframes astylio-spin { to { transform: rotate(360deg); } }

/* Skip-to-content link — hidden until focused (WCAG 2.4.1). */
.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 99999;
	width: auto;
	height: auto;
	padding: 12px 24px;
	background: var(--color-brand-primary);
	color: var(--color-text-inverse);
	font-family: var(--astylio-font-ui);
	font-size: var(--astylio-fs-body-md);
	font-weight: 500;
	text-decoration: none;
	clip: auto;
	overflow: visible;
}