/*
Theme Name: HELLWATT Motors - Claude Design
Theme URI: https://hellwatt.quntm.xyz
Author: HELLWATT Motors
Description: Claude Design port - high-performance electric dirt bike WooCommerce storefront.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Text Domain: hellwatt-claude
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: woocommerce, dark, e-commerce, custom-colors, responsive-layout
*/

/* ==========================================================================
   HELLWATT MOTORS - Claude Design port
   Fonts (Archivo 600/700/800/900 + Inter 400/500/600/700) are enqueued from
   functions.php via Google Fonts. Every stateful style that lived in the
   design as style-hover=""/style-active="" or as a JS-computed inline style
   object is expressed here as a real CSS rule on the hw- class.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
	--hw-purple: #7F54B3;
	--hw-purple-dark: #674399;
	--hw-purple-glow: #9B6FD4;
	--hw-bg: #0D0D10;
	--hw-surface: #17171C;
	--hw-surface2: #131318;
	--hw-border: #2A2A32;
	--hw-text: #F5F5F7;
	--hw-muted: #A0A0AB;
	--hw-muted2: #8a8a95;
	--hw-dim: #6b6b76;
	--hw-in: #3FB950;
	--hw-low: #E3B341;
	--hw-sold: #A0A0AB;

	/* Supporting shades taken verbatim from the design source. */
	--hw-ink: #0B0B0E;
	--hw-hairline: #23232b;
	--hw-hairline2: #1f1f26;
	--hw-body: #c9c9d1;
	--hw-body2: #d4d4da;
	--hw-faint: #3a3a44;
	--hw-disabled-bg: #1c1c22;
	--hw-disabled-fg: #7c7c86;
	--hw-danger: #e35b5b;
	--hw-shot: #f3f3f1;

	--hw-font-display: 'Archivo', 'Archivo Black', system-ui, -apple-system, sans-serif;
	--hw-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

	--hw-max: 1280px;
	--hw-gutter: 24px;
	--hw-nav-h: 92px;
	--hw-ease: cubic-bezier(.16, .84, .44, 1);

	color-scheme: dark;
}

/* --------------------------------------------------------------------------
   2. Base / reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}

body {
	margin: 0;
	background: var(--hw-bg);
	color: var(--hw-text);
	font-family: var(--hw-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
	max-width: 100%;
}

img,
svg,
video,
canvas,
iframe {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button {
	font-family: inherit;
	cursor: pointer;
}

input,
select,
textarea {
	font-family: inherit;
}

input::placeholder,
textarea::placeholder {
	color: var(--hw-dim);
}

a {
	color: inherit;
	text-decoration: none;
	transition: color .2s ease;
}

a:hover,
a:focus {
	color: var(--hw-purple-glow);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--hw-font-display);
	letter-spacing: -.03em;
}

hr {
	border: 0;
	border-top: 1px solid var(--hw-border);
	margin: 28px 0;
}

::selection {
	background: var(--hw-purple);
	color: #fff;
}

::-webkit-scrollbar {
	width: 11px;
	height: 11px;
}

::-webkit-scrollbar-thumb {
	background: var(--hw-border);
	border-radius: 0;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--hw-faint);
}

::-webkit-scrollbar-track {
	background: var(--hw-bg);
}

* {
	scrollbar-color: var(--hw-border) var(--hw-bg);
	scrollbar-width: thin;
}

:focus-visible {
	outline: 2px solid var(--hw-purple-glow);
	outline-offset: 2px;
}

/* WordPress a11y helpers */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus,
.skip-link:focus {
	background: var(--hw-purple);
	color: #fff;
	clip: auto;
	clip-path: none;
	display: block;
	font-family: var(--hw-font-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	height: auto;
	width: auto;
	left: 12px;
	top: 12px;
	padding: 14px 22px;
	z-index: 1000;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   3. Keyframes
   -------------------------------------------------------------------------- */
@keyframes hw-pulse {
	0%, 100% { opacity: .5; }
	50%      { opacity: .85; }
}

@keyframes hw-rise {
	from { opacity: 0; transform: translateY(24px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Scroll reveal: JS applies the inline hide/show. These rules only make sure
   the elements are composited cheaply and are never left invisible. */
[data-reveal],
[data-reveal-child] {
	will-change: opacity, transform;
}

.no-js [data-reveal],
.no-js [data-reveal-child] {
	opacity: 1 !important;
	transform: none !important;
}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.hw-wrap {
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 0 var(--hw-gutter);
	width: 100%;
}

.hw-section {
	scroll-margin-top: 80px;
}

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.hw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
}

.hw-nav {
	position: relative;
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 12px var(--hw-gutter);
	display: flex;
	align-items: center;
	gap: 18px;
}

/* JS toggles .is-visible on scroll (was: opacity bound to state). */
.hw-nav-bg {
	position: absolute;
	inset: 0;
	background: var(--hw-surface);
	border-bottom: 1px solid var(--hw-border);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .35s ease;
}

.hw-nav-bg.is-visible {
	opacity: 1;
}

.hw-nav-link {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--hw-muted);
	font-family: var(--hw-font-display);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .2s ease;
}

.hw-nav-link:hover,
.hw-nav-link:focus,
.hw-nav-link.is-active {
	color: var(--hw-purple-glow);
}

.hw-logo {
	height: 88px;
	width: auto;
	margin: -28px 0 -28px -14px;
	filter: drop-shadow(0 0 14px rgba(127, 84, 179, .3));
	flex-shrink: 0;
}

.hw-nav-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}

.hw-cart-btn {
	position: relative;
	background: transparent;
	border: 0;
	color: var(--hw-text);
	padding: 9px;
	display: flex;
	transition: color .2s ease;
}

.hw-cart-btn:hover,
.hw-cart-btn:focus {
	color: var(--hw-purple-glow);
}

.hw-cart-badge {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	background: var(--hw-purple);
	color: #fff;
	border-radius: 999px;
	font-family: var(--hw-font-display);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 12px rgba(155, 111, 212, .9);
	pointer-events: none;
}

.hw-hamburger {
	display: none;
	background: transparent;
	border: 0;
	color: var(--hw-text);
	padding: 9px;
	transition: color .2s ease;
}

.hw-hamburger:hover,
.hw-hamburger:focus {
	color: var(--hw-purple-glow);
}

/* Breadcrumb strip */
.hw-breadcrumb {
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 96px var(--hw-gutter) 0;
}

.hw-breadcrumb ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 12px;
	color: var(--hw-muted2);
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
}

.hw-breadcrumb li[aria-hidden="true"] {
	color: var(--hw-faint);
}

.hw-breadcrumb li:last-child {
	color: var(--hw-purple-glow);
}

/* --------------------------------------------------------------------------
   6. Buy box + gallery
   -------------------------------------------------------------------------- */
.hw-buybox {
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 24px var(--hw-gutter) 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
	gap: clamp(24px, 4vw, 56px);
	align-items: start;
}

.hw-buybox > * {
	min-width: 0;
}

/* Desktop: sticky rail. Collapsed to static below 900px (see media queries). */
.hw-gallery-wrap {
	position: sticky;
	top: var(--hw-nav-h);
	min-width: 0;
}

.hw-gallery {
	position: relative;
}

.hw-gallery-glow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 108%;
	height: 108%;
	background: radial-gradient(circle, rgba(127, 84, 179, .35), transparent 68%);
	filter: blur(20px);
	animation: hw-pulse 5s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

.hw-gallery-frame {
	position: relative;
	z-index: 1;
	border: 1px solid var(--hw-border);
	overflow: hidden;
}

/* data-hw-main. Product shot = light plinth, contain, 28px inset.
   Lifestyle = near-black, cover, centred at 40% height. */
.hw-gallery-main {
	position: relative;
	z-index: 1;
	aspect-ratio: 4 / 3;
	width: 100%;
	background-color: var(--hw-shot);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box;
	padding: 28px;
	box-shadow: inset 0 -74px 80px -50px rgba(0, 0, 0, .14);
	transition: background-image .2s ease;
}

.hw-gallery-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hw-gallery-main[data-hw-kind="lifestyle"],
.hw-gallery-main.is-lifestyle {
	background-color: var(--hw-ink);
	background-size: cover;
	background-position: center 40%;
	padding: 0;
	box-shadow: none;
}

.hw-gallery-main[data-hw-kind="lifestyle"] img,
.hw-gallery-main.is-lifestyle img {
	object-fit: cover;
	object-position: center 40%;
}

.hw-gallery-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 10px;
}

/* Selected thumb was an inline border/box-shadow swap -> .is-active. */
.hw-thumb {
	position: relative;
	width: 84px;
	height: 64px;
	padding: 6px;
	border: 1px solid var(--hw-border);
	background-color: var(--hw-shot);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box;
	cursor: pointer;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.hw-thumb[data-hw-kind="lifestyle"],
.hw-thumb.is-lifestyle {
	background-color: var(--hw-ink);
	background-size: cover;
	padding: 0;
}

.hw-thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hw-thumb[data-hw-kind="lifestyle"] img,
.hw-thumb.is-lifestyle img {
	object-fit: cover;
}

.hw-thumb:hover {
	border-color: var(--hw-purple);
}

.hw-thumb.is-active {
	border-color: var(--hw-purple);
	box-shadow: 0 0 16px rgba(127, 84, 179, .4);
}

/* Stock badge over the gallery. Colour comes from the stock modifier. */
.hw-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 7px 10px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hw-sold);
	background: rgba(13, 13, 16, .78);
	border: 1px solid rgba(160, 160, 171, .4);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	pointer-events: none;
}

.hw-badge--in,
.hw-badge[data-stock="instock"] {
	color: var(--hw-in);
	border-color: rgba(63, 185, 80, .4);
}

.hw-badge--low,
.hw-badge[data-stock="lowstock"] {
	color: var(--hw-low);
	border-color: rgba(227, 179, 65, .4);
}

.hw-badge--sold,
.hw-badge[data-stock="outofstock"] {
	color: var(--hw-sold);
	border-color: rgba(160, 160, 171, .4);
}

.hw-fav {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	width: 44px;
	height: 44px;
	background: rgba(13, 13, 16, .6);
	border: 1px solid var(--hw-border);
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: border-color .2s ease, transform .12s ease;
}

.hw-fav:hover,
.hw-fav:focus-visible {
	border-color: var(--hw-purple);
}

.hw-fav:active {
	transform: scale(.9);
}

.hw-fav svg {
	display: block;
	fill: none;
	stroke: var(--hw-purple-glow);
	transition: fill .2s ease;
}

.hw-fav.is-fav {
	border-color: var(--hw-purple);
}

.hw-fav.is-fav svg {
	fill: var(--hw-purple-glow);
}

.hw-trustline {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 14px;
}

.hw-trustline > * {
	display: flex;
	align-items: center;
	gap: 7px;
	color: var(--hw-muted2);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hw-trustline svg {
	flex-shrink: 0;
}

/* Title column bits that carry the hw-rise entrance in the design */
.hw-kicker {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--hw-purple-glow);
	margin-bottom: 14px;
	animation: hw-rise .6s ease-out both;
}

.hw-kicker::before {
	content: "";
	width: 28px;
	height: 1px;
	background: var(--hw-purple-glow);
	box-shadow: 0 0 10px var(--hw-purple-glow);
	flex-shrink: 0;
}

.hw-title {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: clamp(2.6rem, 5.4vw, 4.4rem);
	line-height: .86;
	letter-spacing: -.045em;
	text-transform: uppercase;
	margin: 0 0 14px;
	animation: hw-rise .6s ease-out .06s both;
	overflow-wrap: anywhere;
}

.hw-tagline {
	color: var(--hw-muted);
	font-size: 15.5px;
	line-height: 1.6;
	margin: 0 0 20px;
	max-width: 32rem;
}

/* --------------------------------------------------------------------------
   7. Price block
   -------------------------------------------------------------------------- */
.hw-price-box {
	border: 1px solid var(--hw-border);
	background: var(--hw-surface2);
	padding: 18px 20px;
	margin-bottom: 18px;
}

.hw-price-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.hw-price {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 40px;
	line-height: 1;
	color: var(--hw-text);
}

.hw-price .woocommerce-Price-amount,
.hw-price bdi {
	font: inherit;
	color: inherit;
}

.hw-was {
	text-decoration: line-through;
	color: var(--hw-dim);
	font-size: 18px;
}

.hw-save {
	padding: 4px 9px;
	background: rgba(63, 185, 80, .13);
	color: var(--hw-in);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.hw-finance {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 11px;
	color: var(--hw-dim);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-top: 8px;
}

.hw-finance select {
	width: auto;
	background: var(--hw-surface);
	color: var(--hw-text);
	border: 1px solid var(--hw-border);
	border-radius: 0;
	padding: 5px 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	cursor: pointer;
	transition: border-color .2s ease;
}

.hw-finance select:hover,
.hw-finance select:focus {
	border-color: var(--hw-purple);
}

.hw-stock-dot {
	width: 9px;
	height: 9px;
	border-radius: 999px;
	background: currentColor;
	box-shadow: 0 0 10px currentColor;
	flex-shrink: 0;
	display: inline-block;
	color: var(--hw-sold);
}

.hw-stock-line {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--hw-sold);
}

.hw-stock-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--hw-hairline);
}

.hw-stock-dot--in,
.hw-stock-line--in,
[data-stock="instock"] > .hw-stock-dot,
[data-stock="instock"] > .hw-stock-line {
	color: var(--hw-in);
}

.hw-stock-dot--low,
.hw-stock-line--low,
[data-stock="lowstock"] > .hw-stock-dot,
[data-stock="lowstock"] > .hw-stock-line {
	color: var(--hw-low);
}

.hw-stock-dot--sold,
.hw-stock-line--sold,
[data-stock="outofstock"] > .hw-stock-dot,
[data-stock="outofstock"] > .hw-stock-line {
	color: var(--hw-sold);
}

.hw-sku {
	margin-left: auto;
	font-size: 11px;
	color: var(--hw-dim);
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Spec grid
   -------------------------------------------------------------------------- */
.hw-specgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border: 1px solid var(--hw-border);
	margin-bottom: 20px;
}

.hw-speccell {
	padding: 13px 14px;
	border-top: 1px solid var(--hw-border);
	border-right: 1px solid var(--hw-border);
	min-width: 0;
}

.hw-speccell:nth-child(-n+3) {
	border-top: 0;
}

.hw-speccell:nth-child(3n) {
	border-right: 0;
}

.hw-specval {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 17px;
	line-height: 1.1;
	color: var(--hw-text);
	overflow-wrap: anywhere;
}

/* Live ride-mode readouts render purple in the design. */
.hw-specval[data-hw-speed],
.hw-specval[data-hw-range],
.hw-speccell [data-hw-speed],
.hw-speccell [data-hw-range] {
	color: var(--hw-purple-glow);
}

.hw-speclabel {
	font-size: 9.5px;
	color: var(--hw-muted2);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-top: 3px;
	line-height: 1.3;
}

/* --------------------------------------------------------------------------
   9. Ride modes
   -------------------------------------------------------------------------- */
.hw-modes {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.hw-modes-label {
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--hw-text);
	margin-bottom: 10px;
}

.hw-modes-label span {
	color: var(--hw-dim);
	font-weight: 600;
}

.hw-mode {
	padding: 11px 18px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	background: transparent;
	color: var(--hw-muted);
	border: 1px solid var(--hw-border);
	box-shadow: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.hw-mode:hover {
	color: var(--hw-purple-glow);
	border-color: var(--hw-purple);
}

.hw-mode.is-active {
	background: var(--hw-purple);
	color: #fff;
	border-color: var(--hw-purple);
	box-shadow: 0 0 20px rgba(127, 84, 179, .4);
}

/* --------------------------------------------------------------------------
   10. Quantity + call to action
   -------------------------------------------------------------------------- */
.hw-buyrow {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: stretch;
	margin-bottom: 16px;
}

.hw-qty {
	display: flex;
	align-items: center;
	gap: 2px;
	border: 1px solid var(--hw-border);
	flex-shrink: 0;
}

.hw-qty-btn {
	background: var(--hw-surface);
	border: 0;
	color: var(--hw-text);
	width: 48px;
	height: 56px;
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .2s ease;
}

.hw-qty-btn:hover,
.hw-qty-btn:focus-visible {
	background: var(--hw-hairline);
}

.hw-qty-btn:disabled {
	color: var(--hw-disabled-fg);
	cursor: not-allowed;
}

.hw-qty-val {
	min-width: 48px;
	width: 48px;
	height: 56px;
	text-align: center;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 16px;
	color: var(--hw-text);
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

input.hw-qty-val {
	display: block;
	line-height: 56px;
}

.hw-qty-val::-webkit-outer-spin-button,
.hw-qty-val::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.hw-cta {
	flex: 1;
	min-width: 220px;
	background: var(--hw-purple);
	color: #fff;
	border: 0;
	padding: 16px 26px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.25;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.hw-cta:hover,
.hw-cta:focus-visible {
	background: var(--hw-purple-dark);
	box-shadow: 0 0 34px rgba(127, 84, 179, .6);
	color: #fff;
}

.hw-cta:active {
	transform: scale(.97);
}

.hw-cta--sold,
.hw-cta:disabled,
.hw-cta[disabled] {
	background: var(--hw-disabled-bg);
	color: var(--hw-disabled-fg);
	border: 1px solid var(--hw-border);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

.hw-cta--sold:hover,
.hw-cta:disabled:hover,
.hw-cta[disabled]:hover {
	background: var(--hw-disabled-bg);
	color: var(--hw-disabled-fg);
	box-shadow: none;
}

.hw-cta--sold:active,
.hw-cta:disabled:active {
	transform: none;
}

.hw-assurances {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin-bottom: 20px;
	color: var(--hw-muted2);
	font-size: 12px;
	font-weight: 600;
}

.hw-assurances span span,
.hw-assurances .hw-tick {
	color: var(--hw-in);
}

.hw-pillars {
	border-top: 1px solid var(--hw-border);
	padding-top: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hw-pillars > * {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-size: 13px;
	color: var(--hw-muted);
}

.hw-pillars b,
.hw-pillars .hw-pillar-num {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 12px;
	color: var(--hw-purple-glow);
	flex-shrink: 0;
}

.hw-pillars strong {
	color: var(--hw-text);
}

/* --------------------------------------------------------------------------
   11. Tabs + panels
   -------------------------------------------------------------------------- */
.hw-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	border-bottom: 1px solid var(--hw-border);
	margin-bottom: 28px;
	max-width: 100%;
}

.hw-tab {
	padding: 12px 4px;
	margin-right: 26px;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hw-muted2);
	cursor: pointer;
	transition: color .2s ease, border-color .2s ease;
}

.hw-tab:hover {
	color: var(--hw-purple-glow);
}

.hw-tab.is-active {
	color: var(--hw-text);
	border-bottom-color: var(--hw-purple);
}

.hw-panel {
	display: none;
}

.hw-panel.is-active {
	display: block;
}

.hw-panel--description {
	max-width: 44rem;
	color: var(--hw-body);
	font-size: 16px;
	line-height: 1.7;
}

.hw-panel--description p {
	margin: 0 0 16px;
}

.hw-panel--description p:last-child {
	margin-bottom: 0;
}

.hw-spectable {
	border: 1px solid var(--hw-border);
	overflow: hidden;
	max-width: 44rem;
}

.hw-specrow {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px;
	border-bottom: 1px solid var(--hw-hairline);
}

.hw-specrow:last-child {
	border-bottom: 0;
}

.hw-specrow > :first-child {
	color: var(--hw-muted2);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-weight: 600;
}

.hw-specrow > :last-child {
	font-family: var(--hw-font-display);
	font-weight: 700;
	font-size: 13.5px;
	text-align: right;
	overflow-wrap: anywhere;
}

.hw-shipping {
	max-width: 40rem;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.hw-shipping > * {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	color: var(--hw-body);
	font-size: 15px;
	line-height: 1.5;
}

.hw-shipping svg {
	flex-shrink: 0;
	margin-top: 2px;
}

/* --------------------------------------------------------------------------
   12. FAQ accordion
   -------------------------------------------------------------------------- */
.hw-faqs {
	max-width: 40rem;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.hw-faq {
	border: 1px solid var(--hw-border);
	overflow: hidden;
}

.hw-faq-q {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--hw-surface2);
	border: 0;
	text-align: left;
	color: var(--hw-text);
	font-family: var(--hw-font-body);
	font-weight: 700;
	font-size: 14.5px;
	transition: background .2s ease, color .2s ease;
}

.hw-faq-q:hover {
	background: var(--hw-surface);
}

.hw-faq-icon {
	display: flex;
	flex-shrink: 0;
	transition: transform .25s ease;
}

.hw-faq.is-open .hw-faq-icon {
	transform: rotate(45deg);
}

.hw-faq-a {
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.hw-faq.is-open .hw-faq-a {
	max-height: 260px;
}

.hw-faq-a > * {
	padding: 16px 18px;
	color: var(--hw-muted);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
.hw-reviews {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 14px;
}

.hw-review {
	margin: 0;
	background: var(--hw-surface);
	border: 1px solid var(--hw-border);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 13px;
	min-width: 0;
}

.hw-review .hw-stars,
.hw-review .star-rating {
	color: var(--hw-purple-glow);
	letter-spacing: 3px;
	font-size: 14px;
}

.hw-review h3 {
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	margin: 0;
}

.hw-review blockquote,
.hw-review .description {
	margin: 0;
	color: var(--hw-body2);
	font-size: 14px;
	line-height: 1.6;
	font-style: italic;
	flex: 1;
}

.hw-review figcaption {
	display: flex;
	align-items: center;
	gap: 12px;
	border-top: 1px solid var(--hw-border);
	padding-top: 14px;
}

.hw-review-initial {
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, var(--hw-purple), var(--hw-purple-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--hw-font-display);
	font-weight: 900;
	color: #fff;
	font-size: 13px;
	flex-shrink: 0;
}

.hw-review-tag {
	padding: 3px 9px;
	background: var(--hw-bg);
	border: 1px solid var(--hw-border);
	color: var(--hw-muted2);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14. Related products
   -------------------------------------------------------------------------- */
.hw-related {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 14px;
}

.hw-card {
	position: relative;
	background: var(--hw-surface);
	border: 1px solid var(--hw-border);
	border-radius: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-width: 0;
	transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}

.hw-card:hover,
.hw-card:focus-within {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 34px rgba(127, 84, 179, .28);
	border-color: var(--hw-purple);
}

.hw-card-media {
	position: relative;
	display: block;
	width: 100%;
	border: 0;
	padding: 12px;
	background-color: var(--hw-shot);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-origin: content-box;
	aspect-ratio: 16 / 11;
	cursor: pointer;
	box-shadow: inset 0 -50px 50px -36px rgba(0, 0, 0, .13);
}

.hw-card-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hw-card-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.hw-card-kicker {
	color: var(--hw-purple-glow);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hw-card-name {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: -.02em;
	margin: 0;
	line-height: 1.05;
	overflow-wrap: anywhere;
}

.hw-card-specs {
	font-size: 11.5px;
	color: var(--hw-muted2);
	font-weight: 600;
}

.hw-card-foot {
	margin-top: auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding-top: 6px;
	flex-wrap: wrap;
}

.hw-card-price {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 18px;
	color: var(--hw-text);
}

.hw-card-add {
	background: var(--hw-purple);
	color: #fff;
	border: 0;
	padding: 10px 14px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .2s ease, box-shadow .2s ease, transform .12s ease;
}

.hw-card-add:hover,
.hw-card-add:focus-visible {
	background: var(--hw-purple-dark);
	color: #fff;
	box-shadow: 0 0 26px rgba(127, 84, 179, .5);
}

.hw-card-add:active {
	transform: scale(.97);
}

/* --------------------------------------------------------------------------
   15. Cart drawer
   -------------------------------------------------------------------------- */
.hw-cart-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .62);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	z-index: 200;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease;
	border: 0;
}

.hw-cart-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.hw-cart-drawer {
	position: fixed;
	top: 0;
	right: 0;
	height: 100%;
	width: min(430px, 94vw);
	max-width: 100vw;
	background: var(--hw-bg);
	border-left: 1px solid var(--hw-border);
	z-index: 210;
	display: flex;
	flex-direction: column;
	transform: translateX(105%);
	transition: transform .4s var(--hw-ease);
	box-shadow: -30px 0 70px rgba(0, 0, 0, .6);
	overflow: hidden;
}

.hw-cart-drawer.is-open {
	transform: translateX(0);
}

.hw-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 22px 22px 18px;
	border-bottom: 1px solid var(--hw-border);
	flex-shrink: 0;
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 19px;
	text-transform: uppercase;
	letter-spacing: -.01em;
}

.hw-cart-head span span,
.hw-cart-head .hw-cart-count {
	color: var(--hw-purple-glow);
}

.hw-cart-head button {
	background: transparent;
	border: 0;
	color: var(--hw-muted);
	padding: 6px;
	display: flex;
	transition: color .2s ease;
}

.hw-cart-head button:hover,
.hw-cart-head button:focus-visible {
	color: var(--hw-text);
}

/* Scrolling body of the drawer; woocommerce_mini_cart() renders inside it. */
.hw-cart-line {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 8px 22px;
}

/* If .hw-cart-line is instead used per line item (it carries a thumbnail or a
   remove control), render it as the design's cart row rather than as the body. */
.hw-cart-line:has(> img),
.hw-cart-line:has(> a.remove),
.hw-cart-line:has(> .hw-cart-thumb) {
	display: flex;
	flex: 0 0 auto;
	gap: 14px;
	align-items: flex-start;
	overflow: visible;
	padding: 18px 0;
	border-bottom: 1px solid var(--hw-hairline2);
}

/* Mini-cart total/buttons already sit inside the padded scroll body. */
.hw-cart-line .woocommerce-mini-cart__total,
.hw-cart-line .woocommerce-mini-cart__buttons {
	padding-left: 0;
	padding-right: 0;
}

.hw-cart-foot {
	flex-shrink: 0;
	border-top: 1px solid var(--hw-border);
	padding: 20px 22px;
	background: var(--hw-bg);
}

.hw-cart-foot .hw-cart-note {
	font-size: 12px;
	color: var(--hw-muted2);
	margin: 0 0 16px;
}

.hw-cart-subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 6px;
	font-size: 13px;
	color: var(--hw-muted);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.hw-cart-subtotal > :last-child,
.hw-cart-subtotal .woocommerce-Price-amount,
.hw-cart-subtotal bdi {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 24px;
	color: var(--hw-text);
	letter-spacing: normal;
	text-transform: none;
}

/* --------------------------------------------------------------------------
   16. Sticky buy bar
   -------------------------------------------------------------------------- */
.hw-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	background: var(--hw-surface);
	border-top: 1px solid var(--hw-border);
	box-shadow: 0 -14px 30px rgba(0, 0, 0, .4);
	transform: translateY(110%);
	transition: transform .3s var(--hw-ease);
}

.hw-sticky.is-visible {
	transform: translateY(0);
}

.hw-sticky-inner {
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.hw-sticky-thumb {
	width: 48px;
	height: 38px;
	background-color: var(--hw-shot);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	flex-shrink: 0;
}

.hw-sticky-name {
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hw-sticky-price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 15px;
}

.hw-sticky-price .hw-was {
	font-size: 12px;
	font-family: var(--hw-font-body);
	font-weight: 400;
}

.hw-sticky .hw-cta {
	flex: 0 0 auto;
	min-width: 0;
	padding: 14px 22px;
	font-size: 11.5px;
	letter-spacing: .12em;
}

/* --------------------------------------------------------------------------
   17. Mobile menu
   -------------------------------------------------------------------------- */
.hw-mobile-menu {
	position: fixed;
	inset: 0;
	z-index: 150;
	background: var(--hw-bg);
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .34s var(--hw-ease), visibility .34s linear;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.hw-mobile-menu.is-open {
	transform: translateX(0);
	visibility: visible;
}

.hw-mobile-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 22px;
	border-bottom: 1px solid var(--hw-border);
}

.hw-mobile-menu-head img {
	height: 84px;
	width: auto;
	margin: -26px 0 -26px -10px;
}

.hw-mobile-menu-head button {
	background: transparent;
	border: 0;
	color: var(--hw-text);
	padding: 8px;
	display: flex;
}

.hw-mobile-menu nav {
	display: flex;
	flex-direction: column;
	padding: 12px 0;
}

.hw-mobile-menu nav a {
	border-bottom: 1px solid #1a1a20;
	padding: 20px 26px;
	color: var(--hw-text);
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 26px;
	letter-spacing: -.03em;
	text-transform: uppercase;
}

.hw-mobile-menu nav a:hover,
.hw-mobile-menu nav a:focus {
	color: var(--hw-purple-glow);
}

.hw-mobile-menu-foot {
	margin-top: auto;
	padding: 24px 26px;
}

.hw-mobile-menu-foot .hw-cta {
	width: 100%;
	display: block;
}

/* --------------------------------------------------------------------------
   18. Homepage lineup controls (data-hw-filter / data-hw-sort)
   -------------------------------------------------------------------------- */
[data-hw-filter] {
	padding: 9px 17px;
	border-radius: 999px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	background: transparent;
	color: var(--hw-muted);
	border: 1px solid var(--hw-border);
	box-shadow: none;
	transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

[data-hw-filter]:hover {
	color: var(--hw-purple-glow);
	border-color: var(--hw-purple);
}

[data-hw-filter].is-active {
	background: var(--hw-purple);
	color: #fff;
	border-color: var(--hw-purple);
	box-shadow: 0 0 24px rgba(127, 84, 179, .45);
}

[data-hw-sort] {
	width: auto;
	background: var(--hw-surface);
	color: var(--hw-text);
	border: 1px solid var(--hw-border);
	border-radius: 0;
	padding: 10px 34px 10px 14px;
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: border-color .2s ease;
	max-width: 100%;
}

[data-hw-sort]:hover,
[data-hw-sort]:focus {
	border-color: var(--hw-purple);
}

/* --------------------------------------------------------------------------
   19. WooCommerce shell - notices, buttons, forms
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	list-style: none;
	background: var(--hw-surface2);
	border: 1px solid var(--hw-border);
	border-left: 3px solid var(--hw-purple-glow);
	color: var(--hw-text);
	padding: 14px 18px;
	margin: 0 0 20px;
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	border-radius: 0;
}

.woocommerce-message {
	border-left-color: var(--hw-in);
}

.woocommerce-error {
	border-left-color: var(--hw-danger);
	flex-direction: column;
	align-items: flex-start;
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	display: none;
}

.woocommerce-message a,
.woocommerce-info a {
	color: var(--hw-purple-glow);
	font-weight: 600;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: auto;
}

/* Buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.woocommerce .woocommerce-Button,
.wc-block-components-button,
.wp-element-button,
.hw-button {
	background: var(--hw-purple);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 15px 24px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 12.5px;
	line-height: 1.2;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
	transition: background .2s ease, box-shadow .2s ease, transform .12s ease, color .2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .woocommerce-Button:hover,
.wc-block-components-button:hover,
.wp-element-button:hover,
.hw-button:hover {
	background: var(--hw-purple-dark);
	color: #fff;
	box-shadow: 0 0 30px rgba(127, 84, 179, .55);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active,
.wp-element-button:active,
.hw-button:active {
	transform: scale(.98);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled,
.woocommerce input.button:disabled,
.woocommerce input.button.disabled {
	background: var(--hw-disabled-bg);
	color: var(--hw-disabled-fg);
	border: 1px solid var(--hw-border);
	cursor: not-allowed;
	opacity: 1;
	box-shadow: none;
	transform: none;
}

/* Ghost / secondary button treatment */
.hw-button--ghost,
.woocommerce .button.wc-backward,
.woocommerce a.button.wc-forward:not(.checkout) {
	background: transparent;
	color: var(--hw-text);
	border: 1.5px solid var(--hw-border);
	box-shadow: none;
}

.hw-button--ghost:hover,
.woocommerce .button.wc-backward:hover,
.woocommerce a.button.wc-forward:not(.checkout):hover {
	background: transparent;
	color: var(--hw-text);
	border-color: var(--hw-purple);
	box-shadow: none;
}

.added_to_cart {
	display: inline-block;
	margin-left: 10px;
	color: var(--hw-purple-glow);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Form controls */
.woocommerce form .form-row,
.woocommerce-page form .form-row {
	margin: 0 0 16px;
	padding: 0;
}

.woocommerce form .form-row label,
.woocommerce-page form .form-row label,
.woocommerce label {
	display: block;
	margin-bottom: 6px;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hw-muted2);
	font-family: var(--hw-font-display);
}

.woocommerce .required {
	color: var(--hw-purple-glow);
	border: 0;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection--single {
	width: 100%;
	max-width: 100%;
	background: var(--hw-surface);
	color: var(--hw-text);
	border: 1px solid var(--hw-border);
	border-radius: 0;
	padding: 12px 14px;
	font-family: var(--hw-font-body);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color .2s ease, box-shadow .2s ease;
	appearance: none;
	-webkit-appearance: none;
}

select {
	background-image: linear-gradient(45deg, transparent 50%, var(--hw-muted) 50%), linear-gradient(135deg, var(--hw-muted) 50%, transparent 50%);
	background-position: calc(100% - 18px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 34px;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--hw-purple);
	box-shadow: 0 0 0 1px rgba(127, 84, 179, .5);
	outline: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

/* The buy-box quantity field must beat the generic input rules above. */
.hw-qty input.hw-qty-val,
.hw-qty input[type="number"].hw-qty-val,
.hw-qty .quantity input.qty {
	width: 48px;
	min-width: 48px;
	height: 56px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 16px;
	color: var(--hw-text);
	-moz-appearance: textfield;
	appearance: textfield;
}

.hw-qty input.hw-qty-val:focus {
	box-shadow: none;
	outline-offset: -2px;
}

/* select2 (checkout country/state) */
.select2-container--default .select2-selection--single {
	height: auto;
	background: var(--hw-surface);
	border: 1px solid var(--hw-border);
	border-radius: 0;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--hw-text);
	line-height: 1.4;
	padding: 0;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	transform: translateY(-50%);
	right: 8px;
}

.select2-dropdown,
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--hw-surface);
	color: var(--hw-text);
	border: 1px solid var(--hw-border);
	border-radius: 0;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--hw-purple);
	color: #fff;
}

/* Quantity widget on cart / loop */
.woocommerce .quantity .qty {
	width: 74px;
	height: 46px;
	padding: 0 8px;
	text-align: center;
	background: var(--hw-surface);
	border: 1px solid var(--hw-border);
	color: var(--hw-text);
	font-family: var(--hw-font-display);
	font-weight: 800;
	border-radius: 0;
}

/* Prices, sale flash, ratings */
.woocommerce .price,
.woocommerce-Price-amount {
	color: var(--hw-text);
	font-family: var(--hw-font-display);
	font-weight: 900;
}

.woocommerce .price del,
.woocommerce del .woocommerce-Price-amount {
	color: var(--hw-dim);
	font-weight: 400;
	opacity: 1;
}

.woocommerce .price ins {
	text-decoration: none;
	background: transparent;
	color: var(--hw-text);
}

.woocommerce span.onsale {
	background: var(--hw-purple);
	color: #fff;
	border-radius: 0;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 6px 10px;
	min-height: 0;
	min-width: 0;
	line-height: 1;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
}

.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--hw-purple-glow);
}

/* Shop / archive loops */
.woocommerce ul.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: 14px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
}

.woocommerce ul.products li.product {
	position: relative;
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	background: var(--hw-surface);
	border: 1px solid var(--hw-border);
	padding: 0 0 16px;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out;
}

.woocommerce ul.products li.product:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 0 34px rgba(127, 84, 179, .28);
	border-color: var(--hw-purple);
}

.woocommerce ul.products li.product img {
	background: var(--hw-shot);
	margin: 0 0 12px;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: -.02em;
	padding: 0 16px 6px;
	margin: 0;
	color: var(--hw-text);
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .star-rating {
	padding: 0 16px;
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--hw-text);
}

.woocommerce ul.products li.product .button {
	margin: auto 16px 0;
	align-self: flex-start;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 1px solid var(--hw-border);
	border-right: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border-right: 1px solid var(--hw-border);
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	color: var(--hw-muted);
	background: var(--hw-surface);
	padding: 12px 16px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 12px;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--hw-purple);
	color: #fff;
}

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-breadcrumb {
	color: var(--hw-muted2);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
}

.woocommerce .woocommerce-breadcrumb a {
	color: var(--hw-muted2);
}

.woocommerce .woocommerce-ordering select {
	width: auto;
	display: inline-block;
}

/* Cart / checkout tables */
.woocommerce table.shop_table,
.woocommerce table.shop_table_responsive {
	width: 100%;
	border: 1px solid var(--hw-border);
	border-collapse: collapse;
	border-radius: 0;
	background: var(--hw-surface2);
	color: var(--hw-text);
	margin: 0 0 24px;
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	border: 0;
	border-bottom: 1px solid var(--hw-hairline);
	padding: 14px 16px;
	color: var(--hw-text);
	font-size: 14px;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hw-muted2);
	background: var(--hw-bg);
	text-align: left;
}

.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th {
	background: var(--hw-bg);
	font-weight: 700;
}

.woocommerce table.shop_table td.product-remove a.remove {
	color: var(--hw-dim) !important;
	font-size: 20px;
	line-height: 1;
	background: transparent;
	transition: color .2s ease;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
	color: var(--hw-danger) !important;
	background: transparent;
}

.woocommerce table.shop_table img {
	background: var(--hw-shot);
	width: 64px;
	height: auto;
}

.woocommerce-cart .cart-collaterals,
.woocommerce-cart-form,
.woocommerce-checkout-review-order {
	max-width: 100%;
	overflow-x: auto;
}

.woocommerce-cart .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce .woocommerce-checkout-review-order,
.woocommerce-checkout #customer_details {
	background: transparent;
}

.woocommerce-cart .cart-collaterals .cart_totals > h2,
.woocommerce-checkout h3,
.woocommerce-checkout #order_review_heading,
.woocommerce-account h2 {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: -.02em;
	margin: 0 0 16px;
	color: var(--hw-text);
}

#add_payment_method #payment,
.woocommerce-cart #payment,
.woocommerce-checkout #payment {
	background: var(--hw-surface2);
	border: 1px solid var(--hw-border);
	border-radius: 0;
}

#add_payment_method #payment div.payment_box,
.woocommerce-cart #payment div.payment_box,
.woocommerce-checkout #payment div.payment_box {
	background: var(--hw-surface);
	color: var(--hw-muted);
	border-radius: 0;
	font-size: 13.5px;
}

#add_payment_method #payment div.payment_box::before,
.woocommerce-cart #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--hw-surface);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 1px solid var(--hw-border);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	display: inline;
	font-family: var(--hw-font-body);
	font-size: 14px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--hw-text);
}

.woocommerce-checkout #payment div.form-row {
	padding: 16px;
}

.woocommerce-info.woocommerce-thankyou-order-received,
.woocommerce ul.order_details {
	list-style: none;
}

.woocommerce ul.order_details li {
	border-right: 1px solid var(--hw-border);
	color: var(--hw-muted2);
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.woocommerce ul.order_details li strong {
	font-family: var(--hw-font-display);
	font-size: 15px;
	color: var(--hw-text);
	letter-spacing: normal;
	text-transform: none;
}

/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border: 1px solid var(--hw-border);
}

.woocommerce-account .woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--hw-hairline);
}

.woocommerce-account .woocommerce-MyAccount-navigation li:last-child {
	border-bottom: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 13px 16px;
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--hw-muted);
}

.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
	color: var(--hw-purple-glow);
	background: var(--hw-surface);
}

/* --------------------------------------------------------------------------
   20. WooCommerce mini-cart inside .hw-cart-drawer
   -------------------------------------------------------------------------- */
.hw-cart-drawer .widget_shopping_cart,
.hw-cart-drawer .widget_shopping_cart_content {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.hw-cart-drawer ul.woocommerce-mini-cart,
.hw-cart-drawer ul.cart_list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hw-cart-drawer li.woocommerce-mini-cart-item,
.hw-cart-drawer ul.cart_list li {
	position: relative;
	display: block;
	margin: 0;
	padding: 18px 30px 18px 0;
	border-bottom: 1px solid var(--hw-hairline2);
	min-height: 0;
}

.hw-cart-drawer li.woocommerce-mini-cart-item:last-child {
	border-bottom: 0;
}

.hw-cart-drawer li.woocommerce-mini-cart-item a:not(.remove) {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--hw-text);
	font-family: var(--hw-font-display);
	font-weight: 800;
	font-size: 14px;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: -.01em;
	padding: 0;
	overflow-wrap: anywhere;
}

.hw-cart-drawer li.woocommerce-mini-cart-item a:not(.remove):hover {
	color: var(--hw-purple-glow);
}

.hw-cart-drawer li.woocommerce-mini-cart-item img {
	float: none;
	width: 76px;
	height: 64px;
	margin: 0;
	flex-shrink: 0;
	object-fit: contain;
	background: var(--hw-shot);
	box-shadow: none;
	border-radius: 0;
}

.hw-cart-drawer li.woocommerce-mini-cart-item .quantity {
	display: block;
	margin: 8px 0 0 90px;
	color: var(--hw-purple-glow);
	font-family: var(--hw-font-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}

.hw-cart-drawer li.woocommerce-mini-cart-item .quantity .woocommerce-Price-amount {
	font-family: var(--hw-font-body);
	font-weight: 600;
	color: var(--hw-purple-glow);
}

.hw-cart-drawer li.woocommerce-mini-cart-item .variation {
	margin: 6px 0 0 90px;
	color: var(--hw-muted2);
	font-size: 12px;
}

.hw-cart-drawer li.woocommerce-mini-cart-item a.remove,
.hw-cart-drawer li.woocommerce-mini-cart-item a.remove_from_cart_button {
	position: absolute;
	top: 18px;
	right: 0;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--hw-dim) !important;
	font-size: 18px;
	line-height: 1;
	border-radius: 0;
	transition: color .2s ease;
}

.hw-cart-drawer li.woocommerce-mini-cart-item a.remove:hover,
.hw-cart-drawer li.woocommerce-mini-cart-item a.remove_from_cart_button:hover {
	background: transparent;
	color: var(--hw-danger) !important;
}

.hw-cart-drawer .woocommerce-mini-cart__empty-message {
	margin: 0;
	padding: 70px 20px;
	text-align: center;
	color: var(--hw-muted2);
	font-size: 15px;
}

.hw-cart-drawer .woocommerce-mini-cart__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 18px 22px 6px;
	border-top: 1px solid var(--hw-border);
	background: var(--hw-bg);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--hw-muted);
}

.hw-cart-drawer .woocommerce-mini-cart__total strong {
	font-weight: 600;
}

.hw-cart-drawer .woocommerce-mini-cart__total .woocommerce-Price-amount {
	font-family: var(--hw-font-display);
	font-weight: 900;
	font-size: 24px;
	color: var(--hw-text);
	letter-spacing: normal;
	text-transform: none;
}

.hw-cart-drawer .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 14px 22px 22px;
	background: var(--hw-bg);
}

.hw-cart-drawer .woocommerce-mini-cart__buttons .button {
	width: 100%;
	text-align: center;
	margin: 0;
	padding: 16px;
	font-size: 13px;
	letter-spacing: .14em;
}

/* View cart = ghost, Checkout = purple */
.hw-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout) {
	background: transparent;
	color: var(--hw-text);
	border: 1.5px solid var(--hw-border);
	box-shadow: none;
}

.hw-cart-drawer .woocommerce-mini-cart__buttons .button:not(.checkout):hover {
	border-color: var(--hw-purple);
	background: transparent;
	color: var(--hw-text);
	box-shadow: none;
}

.hw-cart-drawer .woocommerce-mini-cart__buttons .checkout {
	background: var(--hw-purple);
	color: #fff;
	border: 0;
}

.hw-cart-drawer .woocommerce-mini-cart__buttons .checkout:hover {
	background: var(--hw-purple-dark);
	box-shadow: 0 0 30px rgba(127, 84, 179, .55);
}

.hw-cart-drawer .woocommerce-mini-cart__buttons .checkout:active {
	transform: scale(.98);
}

/* Blocks-based mini cart fallback */
.hw-cart-drawer .wc-block-mini-cart__items,
.hw-cart-drawer .wc-block-components-drawer {
	background: transparent;
	color: var(--hw-text);
}

/* --------------------------------------------------------------------------
   21. Footer
   -------------------------------------------------------------------------- */
.hw-footer {
	background: var(--hw-bg);
	border-top: 1px solid var(--hw-border);
}

.hw-footer-inner {
	max-width: var(--hw-max);
	margin: 0 auto;
	padding: 36px var(--hw-gutter) 26px;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	color: var(--hw-muted2);
}

.hw-footer-legal {
	font-size: 12px;
	color: #5a5a63;
	max-width: 34rem;
}

/* --------------------------------------------------------------------------
   22. Responsive - 1440 / 1024 / 900 / 768 / 375
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.hw-logo {
		height: 76px;
		margin: -22px 0 -22px -12px;
	}
}

@media (max-width: 900px) {
	/* Nav collapses to the hamburger + mobile drawer. */
	.hw-nav .hw-nav-link {
		display: none;
	}

	.hw-nav .hw-nav-link--back {
		display: inline-flex;
	}

	.hw-nav .hw-nav-link--back .hw-nav-link__label {
		display: none;
	}

	.hw-hamburger {
		display: flex;
	}

	/* Buy box collapses to a single column and the gallery stops sticking. */
	.hw-buybox {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.hw-gallery-wrap {
		position: static;
		top: auto;
	}

	.hw-breadcrumb {
		padding-top: 88px;
	}
}

@media (max-width: 768px) {
	:root {
		--hw-gutter: 18px;
	}

	.hw-logo {
		height: 68px;
		margin: -18px 0 -18px -10px;
	}

	.hw-price {
		font-size: 34px;
	}

	.hw-speccell {
		padding: 11px 12px;
	}

	.hw-specval {
		font-size: 15.5px;
	}

	.hw-tab {
		margin-right: 18px;
		font-size: 11.5px;
	}

	.hw-review {
		padding: 20px;
	}

	.hw-sticky-inner {
		padding: 10px 16px;
		gap: 10px;
	}

	.hw-mobile-menu nav a {
		font-size: 22px;
		padding: 18px 22px;
	}

	.woocommerce table.shop_table th,
	.woocommerce table.shop_table td {
		padding: 11px 12px;
		font-size: 13px;
	}
}

@media (max-width: 620px) {
	.hw-buyrow {
		gap: 10px;
	}

	.hw-qty {
		flex: 1 1 100%;
		justify-content: space-between;
	}

	.hw-cta {
		flex: 1 1 100%;
		min-width: 0;
		width: 100%;
	}

	.hw-sticky .hw-cta {
		flex: 0 0 auto;
		width: auto;
		padding: 12px 16px;
		font-size: 11px;
		letter-spacing: .1em;
	}

	.hw-thumb {
		width: 72px;
		height: 56px;
	}

	.hw-reviews,
	.hw-related {
		grid-template-columns: 1fr;
	}

	.woocommerce ul.products {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 420px) {
	.hw-specgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Re-derive the hairlines for a 2-column grid. */
	.hw-speccell:nth-child(-n+3) {
		border-top: 1px solid var(--hw-border);
	}

	.hw-speccell:nth-child(-n+2) {
		border-top: 0;
	}

	.hw-speccell:nth-child(3n) {
		border-right: 1px solid var(--hw-border);
	}

	.hw-speccell:nth-child(2n) {
		border-right: 0;
	}

	.hw-price {
		font-size: 30px;
	}

	.hw-was {
		font-size: 16px;
	}

	.hw-sku {
		margin-left: 0;
		width: 100%;
	}

	.hw-stock-row {
		flex-wrap: wrap;
	}

	.hw-cart-line,
	.hw-cart-foot,
	.hw-cart-head {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hw-cart-drawer .woocommerce-mini-cart__total,
	.hw-cart-drawer .woocommerce-mini-cart__buttons {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hw-cart-drawer li.woocommerce-mini-cart-item img {
		width: 62px;
		height: 54px;
	}

	.hw-cart-drawer li.woocommerce-mini-cart-item .quantity,
	.hw-cart-drawer li.woocommerce-mini-cart-item .variation {
		margin-left: 76px;
	}

	.hw-sticky-thumb {
		display: none;
	}

	.hw-trustline {
		gap: 8px 14px;
	}

	.hw-mode {
		padding: 10px 14px;
		font-size: 11px;
		letter-spacing: .1em;
	}
}

/* --------------------------------------------------------------------------
   23. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0ms !important;
		transition-duration: .001ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	.hw-gallery-glow {
		animation: none;
		opacity: .6;
	}

	[data-reveal],
	[data-reveal-child] {
		opacity: 1 !important;
		transform: none !important;
		will-change: auto;
	}

	.hw-cta:active,
	.hw-fav:active,
	.hw-card:hover,
	.hw-card-add:active {
		transform: none;
	}
}