/*
Theme Name: AKNX
Theme URI: https://aknx.shop
Author: AKNX
Author URI: https://aknx.shop
Description: Custom theme for AKINEX — AI-powered custom sportswear ecommerce. All Kinds. No Limits. Xtreme.
Version: 0.1.0
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: aknx
Tags: woocommerce, custom, dark, premium, ecommerce
*/

/*
 * Styling is delivered via Tailwind Play CDN — see inc/enqueue.php.
 * TODO: before v1 launch, compile Tailwind to wp-content/themes/aknx/assets/tailwind.css and dequeue the CDN.
 *
 * Only put here:
 *  - CSS that Tailwind utilities can't easily express
 *  - Resets / Gutenberg overrides for editor parity
 */

/* Crisp text under backdrop-blur nav on Safari */
html { -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/*
 * Instant dark base — applied BEFORE Tailwind Play CDN initialises,
 * so there's no white flash on first paint. Once we compile Tailwind
 * for v1 this is redundant (utility classes resolve synchronously),
 * but it's the right belt-and-braces for the CDN phase.
 */
html, body {
	background: #0a0a0a;
	color: #fafaf7;
}
a { color: inherit; }

/* Selection */
::selection { background: #d8ff35; color: #0a0a0a; }

/* Hide WP admin bar margin offset on front page when admin bar is off */
html { margin-top: 0 !important; }
* html body { margin-top: 0 !important; }

/*
 * Image placeholders — the "AKNX tile" treatment.
 * Used as a stand-in for product / category photography during build.
 * Replace with real <img> wrappers when shoots come in.
 */
.aknx-tile {
	background: linear-gradient(135deg, #222 0%, #151515 60%, #0e0e0e 100%);
	color: rgba(250, 250, 247, 0.5);
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.06);
	transition: border-color 0.25s ease;
}
.aknx-tile:hover { border-color: rgba(255, 255, 255, 0.18); }
.aknx-tile::before {
	content: "";
	position: absolute; inset: 0;
	background:
		repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.025) 14px 15px),
		radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.05), transparent 60%);
	pointer-events: none;
}
.aknx-tile::after {
	content: "";
	position: absolute; top: 12px; right: 12px;
	width: 6px; height: 6px;
	background: rgba(250, 250, 247, 0.45);
}
.aknx-tile .label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	position: relative;
	z-index: 1;
}
.aknx-tile-dark {
	background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 60%, #101010 100%);
	color: rgba(250, 250, 247, 0.55);
}
.aknx-tile-dark::after { background: rgba(250, 250, 247, 0.55); }
.aknx-tile-dark.accent::after { background: #d8ff35; box-shadow: 0 0 12px #d8ff35; }

/* When a tile has a background-image, hide the gradient/noise so the photo wins. */
.aknx-tile[style*="background-image"] {
	background-color: #0a0a0a;
}
.aknx-tile[style*="background-image"]::before { opacity: 0; }

/* FAQ accordion mechanics — Tailwind arbitrary group selectors are flaky on Play CDN, so keep these in plain CSS. */
.aknx-faq-row.aknx-faq-open .aknx-faq-a { display: block; }
.aknx-faq-row.aknx-faq-open .aknx-faq-plus { transform: rotate(45deg); }

/* ==========================================================================
 * AI Studio hero form
 * ========================================================================== */

/* Chip button base (used for both garment selectors AND example pills) */
.aknx-chip {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid rgba(250,250,247,0.2);
	background: transparent;
	color: #fafaf7;
	cursor: pointer;
	transition: all 0.15s ease;
	line-height: 1;
}
.aknx-chip:hover:not(:disabled) { border-color: #fafaf7; }
.aknx-chip.is-active {
	background: #fafaf7;
	color: #0a0a0a;
	border-color: #fafaf7;
}
.aknx-chip.aknx-chip-disabled,
.aknx-chip:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	border-color: rgba(250,250,247,0.1);
	color: rgba(250,250,247,0.35);
}
.aknx-chip.aknx-chip-disabled:hover,
.aknx-chip:disabled:hover { border-color: rgba(250,250,247,0.1); }

/* Textarea placeholder styling */
#aknx-prompt-input {
	caret-color: #fafaf7;
}
#aknx-prompt-input::placeholder {
	color: rgba(250,250,247,0.4);
	font-family: Inter, system-ui, sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 0;
	opacity: 1;
}

/* Tile loading shimmer */
@keyframes aknx-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}
.aknx-tile.is-loading {
	background: linear-gradient(90deg, #141414 0%, #2a2a2a 50%, #141414 100%) !important;
	background-size: 200% 100% !important;
	animation: aknx-shimmer 1.6s linear infinite;
	border-color: rgba(216, 255, 53, 0.35);
}
.aknx-tile.is-loading::before { opacity: 0; }
.aknx-tile.is-loading::after {
	background: #d8ff35 !important;
	box-shadow: 0 0 0 0 rgba(216, 255, 53, 0.6);
	animation: pulse-ring 1.4s infinite;
}
@keyframes pulse-ring {
	0%, 100% { box-shadow: 0 0 0 0 rgba(216, 255, 53, 0.6); }
	70%      { box-shadow: 0 0 0 6px rgba(216, 255, 53, 0); }
}
.aknx-tile.is-loading .label {
	color: rgba(250,250,247,0.45) !important;
}

/* Tile success state — actual generated image as background */
.aknx-tile.has-image {
	background-color: #0a0a0a !important;
	background-size: cover !important;
	background-position: center !important;
	border-color: rgba(255,255,255,0.18);
}
.aknx-tile.has-image::before,
.aknx-tile.has-image::after { opacity: 0; }
.aknx-tile.has-image .label {
	opacity: 0;
	transition: opacity 0.2s ease;
	background: rgba(0,0,0,0.7);
	padding: 4px 8px;
	border-radius: 0;
}
.aknx-tile.has-image:hover .label { opacity: 1; }

/* ==========================================================================
 * WooCommerce — dark-mode overrides.
 * WC ships with its own button / form / table styling tuned for light themes.
 * These overrides keep the brand language consistent on /shop/, /cart/,
 * /checkout/, /my-account/, single product, and any [woocommerce_*] shortcode.
 * ========================================================================== */

.woocommerce, .woocommerce-page,
.woocommerce *,
.woocommerce-page * {
	color: inherit;
}

/* Headings */
.woocommerce h1, .woocommerce h2, .woocommerce h3, .woocommerce h4,
.woocommerce-page h1, .woocommerce-page h2, .woocommerce-page h3, .woocommerce-page h4 {
	color: #fafaf7;
	font-family: "Archivo Black", Impact, system-ui, sans-serif;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button,
.wc-block-components-button {
	background: #fafaf7 !important;
	color: #0a0a0a !important;
	border: none !important;
	border-radius: 0 !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	padding: 14px 22px !important;
	font-size: 13px !important;
	transition: all 0.18s ease !important;
	box-shadow: none !important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background: #d8ff35 !important;
	transform: translateY(-1px);
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: #d8ff35 !important;
	color: #0a0a0a !important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: #e6ff5c !important;
}

/* Form inputs */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row select,
.woocommerce-page form .form-row textarea,
.select2-container--default .select2-selection--single {
	background: #141414 !important;
	border: 1px solid rgba(250,250,247,0.2) !important;
	border-radius: 0 !important;
	color: #fafaf7 !important;
	padding: 12px 16px !important;
	font-family: Inter, system-ui, sans-serif !important;
	font-size: 15px !important;
	min-height: auto;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus,
.woocommerce form .form-row textarea:focus {
	border-color: #fafaf7 !important;
	outline: none !important;
}
.woocommerce form .form-row label {
	color: rgba(250,250,247,0.7);
	font-size: 13px;
	letter-spacing: 0.04em;
}

/* Tables — cart, order summary, account */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table {
	border-color: rgba(250,250,247,0.15) !important;
	background: transparent !important;
	border-radius: 0 !important;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border-color: rgba(250,250,247,0.1) !important;
	background: transparent !important;
	color: #fafaf7 !important;
	padding: 16px 12px !important;
}
.woocommerce table.shop_table thead th {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(250,250,247,0.6) !important;
}

/* Product loop (shop archive) */
.woocommerce ul.products li.product .price,
.woocommerce-page ul.products li.product .price {
	color: #fafaf7 !important;
	font-weight: 700;
}
.woocommerce ul.products li.product .price del { color: rgba(250,250,247,0.4) !important; }
.woocommerce ul.products li.product .price ins { color: #d8ff35 !important; background: none !important; }

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: #fafaf7 !important;
	font-family: Inter, system-ui, sans-serif !important;
	font-weight: 700 !important;
	text-transform: none !important;
	font-size: 15px !important;
}

.woocommerce ul.products li.product a img {
	border-radius: 0 !important;
	background: #141414;
}

.woocommerce span.onsale {
	background: #d8ff35 !important;
	color: #0a0a0a !important;
	border-radius: 0 !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 10px !important;
	letter-spacing: 0.2em !important;
	font-weight: 700 !important;
	min-height: auto !important;
	min-width: auto !important;
	padding: 5px 10px !important;
	line-height: 1 !important;
	top: 12px !important;
	left: 12px !important;
	right: auto !important;
	margin: 0 !important;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce p.no-comments {
	background: #141414 !important;
	border-top: 3px solid #d8ff35 !important;
	color: #fafaf7 !important;
	padding: 18px 22px 18px 56px !important;
	border-radius: 0 !important;
}
.woocommerce-message::before,
.woocommerce-info::before {
	color: #d8ff35 !important;
}
.woocommerce-error {
	border-top-color: #ff5252 !important;
}

/* Single product page */
.woocommerce div.product .product_title {
	font-family: "Archivo Black", Impact, system-ui, sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: -0.01em !important;
	text-transform: uppercase !important;
	color: #fafaf7 !important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: #fafaf7 !important;
	font-size: 24px !important;
	font-weight: 700 !important;
}
.woocommerce div.product .woocommerce-product-rating .star-rating { color: #d8ff35; }

/* Tabs */
.woocommerce div.product .woocommerce-tabs ul.tabs {
	border-bottom: 1px solid rgba(250,250,247,0.15) !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before { border-color: rgba(250,250,247,0.15) !important; }
.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: transparent !important;
	border: 1px solid rgba(250,250,247,0.15) !important;
	border-bottom: none !important;
	border-radius: 0 !important;
	color: rgba(250,250,247,0.6) !important;
	margin: 0 4px 0 0 !important;
	padding: 0 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	color: rgba(250,250,247,0.6) !important;
	padding: 12px 20px !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	font-size: 12px !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
	background: #fafaf7 !important;
	border-color: #fafaf7 !important;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: #0a0a0a !important; }
.woocommerce div.product .woocommerce-tabs .panel { padding: 32px 0 !important; }

/* Quantity selector */
.woocommerce .quantity .qty {
	background: #141414 !important;
	border: 1px solid rgba(250,250,247,0.2) !important;
	color: #fafaf7 !important;
	border-radius: 0 !important;
	min-height: 50px;
}

/* Cart / Checkout / My account specific */
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.woocommerce-MyAccount-navigation {
	color: #fafaf7;
}

.woocommerce-cart .cart_totals,
.woocommerce-checkout #order_review {
	background: #141414;
	padding: 28px;
	border: 1px solid rgba(250,250,247,0.1);
}

.woocommerce-cart .cart_totals h2,
.woocommerce-checkout #order_review_heading {
	font-family: "Archivo Black", Impact, system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: #fafaf7 !important;
	margin-top: 0;
}

.woocommerce-checkout .woocommerce-checkout-payment {
	background: #141414 !important;
	border-radius: 0 !important;
	padding: 28px !important;
}
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods {
	background: transparent !important;
	border-bottom: 1px solid rgba(250,250,247,0.1) !important;
}
.woocommerce-checkout .woocommerce-checkout-payment ul.payment_methods li {
	background: transparent !important;
	color: #fafaf7 !important;
}
.woocommerce-checkout .woocommerce-checkout-payment div.payment_box {
	background: rgba(255,255,255,0.04) !important;
	color: #fafaf7 !important;
}
.woocommerce-checkout .woocommerce-checkout-payment div.payment_box::before { border-bottom-color: rgba(255,255,255,0.04) !important; }

/* My Account sidebar */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	margin: 0;
	border: 1px solid rgba(250,250,247,0.1);
}
.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid rgba(250,250,247,0.08);
}
.woocommerce-account .woocommerce-MyAccount-navigation li:last-child { border-bottom: none; }
.woocommerce-account .woocommerce-MyAccount-navigation li a {
	color: #fafaf7;
	padding: 14px 18px;
	display: block;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.04em;
	font-size: 13px;
	text-transform: uppercase;
	transition: all 0.18s;
}
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
	background: #fafaf7;
	color: #0a0a0a;
}

/* Generic links inside WC content (not buttons) */
.woocommerce-page a:not(.button):not(.wc-forward):not(.checkout-button) {
	color: #d8ff35;
}
.woocommerce-page a:not(.button):not(.wc-forward):hover { color: #fafaf7; }

/* Breadcrumb */
.woocommerce-breadcrumb {
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 11px !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: rgba(250,250,247,0.5) !important;
	margin-bottom: 32px !important;
}
.woocommerce-breadcrumb a { color: rgba(250,250,247,0.7) !important; }

/* Sort dropdown */
.woocommerce .woocommerce-ordering select {
	background: #141414;
	color: #fafaf7;
	border: 1px solid rgba(250,250,247,0.2);
	padding: 10px 14px;
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* Result count */
.woocommerce .woocommerce-result-count {
	color: rgba(250,250,247,0.6);
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* Stripe / WC payment icons — keep but neutralise bg */
.woocommerce-checkout .wc_payment_method label img { filter: brightness(1.5) contrast(0.9); }

/* Pagination */
.woocommerce nav.woocommerce-pagination ul {
	border: none !important;
}
.woocommerce nav.woocommerce-pagination ul li {
	border-right: 1px solid rgba(250,250,247,0.15) !important;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: #fafaf7 !important;
	background: transparent !important;
	font-family: "JetBrains Mono", ui-monospace, monospace !important;
	font-size: 13px !important;
	letter-spacing: 0.12em !important;
}
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: #fafaf7 !important;
	color: #0a0a0a !important;
}

/* Stock pill */
.woocommerce .stock,
.woocommerce-page .stock { color: #d8ff35 !important; }
.woocommerce .out-of-stock { color: #ff8a8a !important; }

/* ==========================================================================
 * AKNX Configurator — single product page
 * ========================================================================== */

#aknx-configurator { background: #0a0a0a; color: #fafaf7; }

/* Field labels */
.aknx-field-label {
	font-family: "JetBrains Mono", ui-monospace, monospace;
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: rgba(250,250,247,0.7);
	display: flex;
	align-items: center;
	gap: 10px;
	font-weight: 500;
}
.aknx-field-label .num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	background: rgba(250,250,247,0.08);
	border: 1px solid rgba(250,250,247,0.15);
	color: #d8ff35;
	font-family: "Archivo Black", Impact, sans-serif;
	font-size: 11px;
	letter-spacing: 0;
}

/* Garment buttons */
.aknx-garment-btn {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 4px;
	padding: 16px 18px;
	background: transparent;
	border: 1px solid rgba(250,250,247,0.18);
	color: #fafaf7;
	cursor: pointer;
	text-align: left;
	transition: all 0.18s ease;
	font-family: Inter, system-ui, sans-serif;
}
.aknx-garment-btn:hover { border-color: rgba(250,250,247,0.45); transform: translateY(-1px); }
.aknx-garment-btn.is-active {
	background: #fafaf7;
	color: #0a0a0a;
	border-color: #fafaf7;
}
.aknx-garment-name {
	font-family: "Archivo Black", Impact, sans-serif;
	font-weight: 400;
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	line-height: 1;
}
.aknx-garment-price {
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.18em;
	color: inherit;
	opacity: 0.6;
	line-height: 1;
}

/* Fabric buttons */
.aknx-fabric-btn {
	padding: 10px 16px;
	background: transparent;
	border: 1px solid rgba(250,250,247,0.18);
	color: #fafaf7;
	font-family: "JetBrains Mono", monospace;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.18s;
	line-height: 1;
}
.aknx-fabric-btn:hover { border-color: rgba(250,250,247,0.45); }
.aknx-fabric-btn.is-active {
	background: #fafaf7;
	color: #0a0a0a;
	border-color: #fafaf7;
}

/* Color pickers */
.aknx-color-swatch {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(250,250,247,0.18);
	cursor: pointer;
	transition: border-color 0.18s;
}
.aknx-color-swatch:hover { border-color: rgba(250,250,247,0.4); }
.aknx-color-swatch input[type="color"] {
	position: absolute;
	width: 1px; height: 1px;
	opacity: 0;
	pointer-events: none;
}
.aknx-color-swatch-circle {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 2px solid rgba(255,255,255,0.18);
	flex-shrink: 0;
	transition: transform 0.18s;
}
.aknx-color-swatch:hover .aknx-color-swatch-circle { transform: scale(1.06); }
.aknx-color-swatch-value {
	font-family: "JetBrains Mono", monospace;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: #fafaf7;
}

/* Color presets */
.aknx-preset {
	display: inline-flex;
	width: 32px;
	height: 18px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(250,250,247,0.2);
	cursor: pointer;
	overflow: hidden;
	transition: transform 0.15s, border-color 0.15s;
}
.aknx-preset:hover { border-color: #fafaf7; transform: scale(1.1); }
.aknx-preset > span { flex: 1; display: block; height: 100%; }

/* Size buttons */
.aknx-size-btn {
	padding: 10px 12px;
	min-width: 42px;
	background: transparent;
	border: 1px solid rgba(250,250,247,0.18);
	color: #fafaf7;
	font-family: "JetBrains Mono", monospace;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.15s;
	line-height: 1;
}
.aknx-size-btn:hover { border-color: rgba(250,250,247,0.45); }
.aknx-size-btn.is-active {
	background: #fafaf7;
	color: #0a0a0a;
	border-color: #fafaf7;
}

/* Qty input */
.aknx-qty-input {
	width: 100%;
	background: rgba(255,255,255,0.04);
	border: 1px solid rgba(250,250,247,0.18);
	color: #fafaf7;
	padding: 12px 14px;
	font-family: "JetBrains Mono", monospace;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	border-radius: 0;
	-webkit-appearance: none;
	appearance: none;
	min-height: 50px;
}
.aknx-qty-input:focus {
	border-color: #fafaf7;
	outline: none;
}

/* CTA */
.aknx-cta {
	width: 100%;
	background: #fafaf7;
	color: #0a0a0a;
	border: none;
	padding: 18px 22px;
	font-family: Inter, system-ui, sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	transition: all 0.18s;
}
.aknx-cta:hover {
	background: #d8ff35;
	transform: translateY(-1px);
}

/* Shirt preview — silhouettes */
.aknx-preview-stage {
	background: linear-gradient(135deg, #161616 0%, #0e0e0e 100%);
	min-height: 480px;
}
.aknx-shirt {
	position: relative;
	width: 80%;
	max-width: 480px;
	aspect-ratio: 1 / 1.05;
	margin: 0 auto;
}
.aknx-shirt-primary, .aknx-shirt-accent { position: absolute; inset: 0; }
.aknx-shirt-primary { background: var(--primary); }
.aknx-shirt-accent {
	background: var(--accent);
	-webkit-mask-size: 55% auto; mask-size: 55% auto;
	-webkit-mask-repeat: repeat; mask-repeat: repeat;
}
.aknx-shirt-collar {
	position: absolute;
	top: 0; left: 30%; right: 30%;
	height: 6%;
	background: var(--accent);
	opacity: 0.92;
}

/* Garment clip-paths */
.aknx-shirt--jersey {
	clip-path: polygon(32% 0%, 50% 10%, 68% 0%, 80% 2%, 100% 22%, 93% 38%, 80% 32%, 80% 100%, 20% 100%, 20% 32%, 7% 38%, 0% 22%, 20% 2%);
}
.aknx-shirt--jersey .aknx-shirt-collar { display: none; }
.aknx-shirt--singlet {
	clip-path: polygon(35% 0%, 50% 6%, 65% 0%, 75% 0%, 75% 14%, 65% 18%, 65% 100%, 35% 100%, 35% 18%, 25% 14%, 25% 0%);
}
.aknx-shirt--singlet .aknx-shirt-collar { display: none; }
.aknx-shirt--tshirt {
	clip-path: polygon(30% 0%, 70% 0%, 82% 4%, 100% 22%, 94% 36%, 78% 30%, 78% 100%, 22% 100%, 22% 30%, 6% 36%, 0% 22%, 18% 4%);
}
.aknx-shirt--hoodie {
	clip-path: polygon(28% 0%, 35% 14%, 50% 8%, 65% 14%, 72% 0%, 85% 2%, 100% 24%, 95% 42%, 82% 36%, 82% 100%, 18% 100%, 18% 36%, 5% 42%, 0% 24%, 15% 2%);
}
.aknx-shirt--hoodie .aknx-shirt-collar { top: 8%; }

/* ==========================================================================
 * NEW: Realistic shirt photo + multiply-blend recolor + accent pattern overlay
 * Three-layer CSS composite. No JS needed beyond setting CSS variables.
 * Drives: --garment-template (URL), --primary (hex), --accent (hex), --pattern (URL).
 * ========================================================================== */
.aknx-shirt-real {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	background-image: var(--garment-template, none);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	background-color: transparent;
	isolation: isolate; /* contains the blend modes so they don't bleed onto the page bg */
}
.aknx-shirt-real::before {
	content: "";
	position: absolute; inset: 0;
	background: var(--primary, #0a0f3a);
	mix-blend-mode: multiply;
	-webkit-mask-image: var(--garment-template, none);
	mask-image: var(--garment-template, none);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-mode: alpha;
	mask-mode: alpha;
	pointer-events: none;
}
/* ::after = solid accent pass — guarantees pattern visibility on any primary
 * (light or dark). 60% opacity lets fabric texture show through subtly. */
.aknx-shirt-real::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--accent, #d8ff35);
	-webkit-mask-image: var(--pattern, none), var(--garment-template, none);
	mask-image: var(--pattern, none), var(--garment-template, none);
	-webkit-mask-size: 42% auto, contain;
	mask-size: 42% auto, contain;
	-webkit-mask-position: 50% 65%, center;
	mask-position: 50% 65%, center;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
	opacity: 0.62;
}

/* Second pass: multiply blend on top of the solid pass adds the
 * "printed-into-fabric" texture (fabric shadows darken the pattern lines naturally).
 * Together they give: visible accent + fabric integration. */
.aknx-shirt-real-overlay {
	position: absolute; inset: 0;
	background: var(--accent, #d8ff35);
	-webkit-mask-image: var(--pattern, none), var(--garment-template, none);
	mask-image: var(--pattern, none), var(--garment-template, none);
	-webkit-mask-size: 42% auto, contain;
	mask-size: 42% auto, contain;
	-webkit-mask-position: 50% 65%, center;
	mask-position: 50% 65%, center;
	-webkit-mask-repeat: repeat, no-repeat;
	mask-repeat: repeat, no-repeat;
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
	mix-blend-mode: multiply;
	opacity: 0.5;
}

/* Subtle saturation lift so primary colours don't look dull through multiply */
.aknx-shirt-real { filter: saturate(1.08) contrast(1.02); }

/* Hero featured-pattern strip controls */
.aknx-hero-g {
	background: transparent;
	border: 1px solid transparent;
	color: rgba(250, 250, 247, 0.5);
	padding: 4px 8px;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: all 0.18s;
	line-height: 1;
}
.aknx-hero-g:hover { color: #fafaf7; }
.aknx-hero-g.is-active {
	background: #fafaf7;
	color: #0a0a0a;
}

.aknx-hero-cw {
	display: flex;
	height: 28px;
	background: transparent;
	border: 1px solid rgba(250, 250, 247, 0.2);
	cursor: pointer;
	overflow: hidden;
	padding: 0;
	transition: border-color 0.15s, transform 0.15s;
}
.aknx-hero-cw:hover { border-color: #fafaf7; transform: scale(1.04); }
.aknx-hero-cw.is-active { border-color: #d8ff35; }
.aknx-hero-cw > span { flex: 1; display: block; height: 100%; }

/* Line-clamp utility — Tailwind Play CDN doesn't always emit this */
.line-clamp-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}