/*
Theme Name: FLEX GEAR
Theme URI: https://flexgear.me
Author: FLEX GEAR
Description: Custom WooCommerce theme built from the FLEX GEAR Figma website mockup (glass / blue-to-black design). Pages: Home, Shop/Category, Product, Cart, Checkout, About, Contact.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: flexgear
Tags: e-commerce, woocommerce, dark, custom-logo, custom-menu
*/

/* ==========================================================================
   1. Tokens (from Figma variables)
   ========================================================================== */
:root {
	--white: #ffffff;
	--blue: #1289f6;
	--blue-deep: #0b6fd0;
	--blue-tint: #e7f3fe;
	--soft: rgba(255, 255, 255, .8);
	--muted: rgba(255, 255, 255, .6);
	--line: rgba(255, 255, 255, .15);
	--line-strong: rgba(255, 255, 255, .2);

	--grad-primary: linear-gradient(90deg, #0b6fd0 0%, #000 100%);
	--glass-bg: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05));
	/* Page background. Tweak the angle/stops here if you want it closer to your Figma frame. */
	--page-gradient: linear-gradient(165deg, #0b6fd0 0%, #08305a 28%, #000 62%, #000 100%);

	--r-xl: 24px;
	--r-lg: 20px;
	--r-md: 12px;
	--r-pill: 100px;
	--shadow-card: 0 10px 24px rgba(0, 0, 0, .15);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: #000;
	color: var(--white);
	font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
	font-size: 16px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
}
.site { background: var(--page-gradient); min-height: 100vh; overflow-x: clip; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
button { font-family: inherit; }
.cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(18, 137, 246, .35), rgba(0, 0, 0, .55)); }
.soft { color: var(--soft); }
.tint { color: var(--blue-tint); }
.blue { color: var(--blue); }
.hp { position: absolute; left: -9999px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip: auto; background: #000; color: #fff; padding: 10px 16px; z-index: 999; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Type scale (Figma text styles) */
.t-display { font-size: 64px; line-height: 68px; font-weight: 800; letter-spacing: -.02em; }
.t-h1 { font-size: 44px; line-height: 50px; font-weight: 700; letter-spacing: -.01em; }
.t-h2 { font-size: 32px; line-height: 40px; font-weight: 700; letter-spacing: -.005em; }
.t-h3 { font-size: 22px; line-height: 30px; font-weight: 700; }
.t-title { font-size: 18px; line-height: 26px; font-weight: 600; }
.t-body { font-size: 16px; line-height: 26px; }
.t-body-s { font-size: 14px; line-height: 22px; }
.t-label { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }

/* Layout helpers */
.container { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 64px; }
.band { width: 100%; max-width: 1440px; margin-inline: auto; border-radius: var(--r-xl); }
.section-pad { padding: 96px 64px; }
.stack-40 { display: flex; flex-direction: column; gap: 40px; }
.section-heading { display: flex; flex-direction: column; gap: 12px; }
.section-block { padding-top: 64px; padding-bottom: 64px; }

/* Glass surface */
.glass {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border: 1px solid var(--line);
	border-radius: var(--r-xl);
	box-shadow: var(--shadow-card);
}
.glass-soft { background: var(--glass-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--line); box-shadow: var(--shadow-card); }

/* ==========================================================================
   3. Buttons & fields
   ========================================================================== */
.btn, .button, button.button, a.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 14px 28px; border-radius: var(--r-pill);
	border: 1px solid var(--line);
	font: 600 15px/20px 'Inter', system-ui, sans-serif; color: #fff; cursor: pointer;
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
	transition: filter .2s ease, transform .2s ease;
}
.btn:hover, .button:hover { filter: brightness(1.15); transform: translateY(-1px); }
.btn-primary, .button.alt, .single_add_to_cart_button, #place_order {
	background: var(--grad-primary); box-shadow: 0 8px 12px rgba(0, 0, 0, .25);
}
.btn-glass { background: rgba(255, 255, 255, .1); border-color: var(--line-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.btn-dark, .btn-outline { background: var(--glass-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .2); }
.btn-block { width: 100%; }
.btn[disabled], .button.disabled, .button:disabled { opacity: .5; cursor: not-allowed; }

.field, input[type=text], input[type=email], input[type=tel], input[type=password], input[type=number], input[type=search], textarea, select {
	width: 100%; font: 400 16px/26px 'Inter', system-ui, sans-serif; color: #fff;
	background: var(--glass-bg); border: 1px solid var(--line); border-radius: var(--r-md);
	padding: 13px 16px; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); appearance: none; -webkit-appearance: none;
}
::placeholder { color: var(--soft); opacity: 1; }
select option { color: #000; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--blue); outline-offset: 0; }

/* ==========================================================================
   4. Header (123px: 44 announcement + 79 main bar)
   ========================================================================== */
.site-header {
	position: relative; z-index: 50; max-width: 1440px; margin-inline: auto;
	background: rgba(255, 255, 255, .1); border: 1px solid var(--line-strong); border-radius: var(--r-xl);
	-webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 32px rgba(0, 0, 0, .25);
	overflow: visible;
}
.header-inner { background: rgba(0, 0, 0, .55); border-radius: var(--r-xl); overflow: hidden; }
.announcement { background: rgba(0, 0, 0, .5); padding: 11px 64px; text-align: center; font-size: 14px; line-height: 22px; white-space: pre-wrap; }
.mainbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 64px; background: rgba(255, 255, 255, .1); border-bottom: 1px solid var(--line-strong); }
.logo { display: inline-flex; align-items: center; gap: 10px; }
.logo-mark { position: relative; width: 38px; height: 38px; border-radius: 8px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.logo-mark--default { background: var(--grad-primary); border: 1px solid var(--line-strong); font-weight: 800; font-size: 20px; }
.logo-text { font-size: 22px; line-height: 30px; font-weight: 700; white-space: nowrap; }
.primary-nav .menu { display: flex; align-items: center; gap: 26px; list-style: none; padding: 0; margin: 0; }
.primary-nav a { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; color: #fff; }
.primary-nav .current-menu-item > a, .primary-nav .current_page_item > a, .primary-nav a:hover { color: var(--blue-tint); }
.header-actions { display: flex; align-items: center; gap: 20px; }
.header-actions a { display: inline-flex; color: #fff; }
.cart-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; background: #0b6fd0; border-radius: 999px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .08em; }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; cursor: pointer; position: relative; }
.nav-toggle span, .nav-toggle::before, .nav-toggle::after { content: ''; position: absolute; left: 9px; right: 9px; height: 2px; background: #fff; border-radius: 2px; }
.nav-toggle span { top: 19px; } .nav-toggle::before { top: 12px; } .nav-toggle::after { top: 26px; }
.header-search { display: flex; gap: 12px; padding: 16px 64px; background: rgba(0, 0, 0, .7); border-radius: 0 0 var(--r-xl) var(--r-xl); }
.header-search[hidden] { display: none; }

/* ==========================================================================
   5. Home
   ========================================================================== */
.hero { display: flex; align-items: stretch; max-width: 1440px; margin-inline: auto; background: var(--grad-primary); }
.hero-content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; padding: 0 48px 0 64px; background: linear-gradient(90deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .05)); box-shadow: 0 12px 32px rgba(0, 0, 0, .25); }
.hero-content .t-display { max-width: 686px; }
.hero-content .t-body { max-width: 686px; }
.hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding-top: 8px; }
.hero-image { position: relative; flex: none; width: 640px; height: 680px; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25); }

.trust-strip { display: flex; gap: 24px; padding: 28px 64px; }
.trust-strip > div { flex: 1 1 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.card-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.category-card { display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .15); transition: transform .25s ease; }
.category-card:hover { transform: translateY(-3px); }
.cc-image { position: relative; display: block; height: 260px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cc-body { display: flex; flex-direction: column; gap: 10px; padding: 28px; }
.cc-body .t-h2 { letter-spacing: -.005em; }
.cc-link { padding-top: 8px; display: flex; gap: 8px; }

.journey { display: flex; flex-direction: column; gap: 31px; background: var(--grad-primary); border: 1px solid var(--line); box-shadow: 0 12px 16px rgba(0, 0, 0, .25); }
.featured { display: flex; flex-direction: column; gap: 40px; padding: 0 64px 96px; }
.heading-row { display: flex; align-items: flex-end; justify-content: space-between; min-height: 90px; }
.view-all { color: var(--blue); display: inline-flex; gap: 8px; }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.step { display: flex; flex-direction: column; min-height: 163px; padding: 24px 24px 0; border-radius: var(--r-lg); border-width: 1px 0 0 0; }

.promos { display: flex; gap: 24px; }
.promo { flex: 1 1 0; min-width: 0; min-height: 360px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 20px; padding: 48px; border: 1px solid var(--line); border-radius: var(--r-xl); }
.promo-strong { background: var(--grad-primary); box-shadow: 0 12px 16px rgba(0, 0, 0, .25); }

.why { display: flex; gap: 0; padding: 44px 64px 68px; }
.why-heading { width: 380px; flex: none; }
.reasons { flex: 1 1 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.reason { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.icon-tile { width: 52px; height: 52px; border-radius: var(--r-md); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); flex: none; }
.icon-tile--lg { width: 48px; height: 48px; }

.articles-band { padding: 18px 64px 96px; display: flex; flex-direction: column; gap: 13px; }
.articles-band > .t-h1 { min-height: 60px; }
.article { display: flex; flex-direction: column; gap: 14px; }
.art-image { position: relative; display: block; height: 240px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .15); }

.newsletter { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; padding: 72px 64px; background: var(--grad-primary); border: 1px solid var(--line); box-shadow: 0 12px 16px rgba(0, 0, 0, .25); }
.newsletter > div:first-child { display: flex; flex-direction: column; gap: 10px; }
.signup { display: flex; align-items: center; gap: 12px; }
.signup .field { width: 380px; padding: 15px 20px; }
.form-note { width: 100%; font-size: 14px; line-height: 22px; }
.form-note.ok { color: #7ee2a8; } .form-note.err { color: #ff9a9a; }

/* ==========================================================================
   6. Product card
   ========================================================================== */
.product-grid { display: grid; gap: 24px; }
.product-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.product-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
.product-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pc-image { position: relative; display: block; height: 320px; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .15); background: rgba(255, 255, 255, .04); }
.badge { position: absolute; top: 11px; left: 11px; background: #fff; color: var(--blue); padding: 5px 10px; border-radius: 999px; z-index: 2; }
.pc-title a:hover { color: var(--blue-tint); }
.pc-price { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 30px; font-weight: 700; }
.pc-price .price-now { font-size: 22px; font-weight: 700; }
.price-old, .price-old .amount { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--muted); text-decoration: line-through; }
.price-now del, .price-big del { font-size: 14px; font-weight: 400; color: var(--muted); margin-right: 8px; }
.price-now ins, .price-big ins { text-decoration: none; }
.product-card .btn { margin-top: auto; }
.added_to_cart { display: none; }
.product-card .button.loading { opacity: .6; }
.product-card .button.added::after { content: ' ✓'; }

/* ==========================================================================
   7. Footer
   ========================================================================== */
.site-footer { max-width: 1440px; margin-inline: auto; background: rgba(0, 0, 0, .55); }
.footer-inner { display: flex; flex-direction: column; gap: 56px; padding: 80px 64px 40px; }
.footer-brand { width: 340px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px; }
.footer-col { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer-col a { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: var(--blue-tint); }
.footer-col a:hover { color: #fff; }
.footer-divider { border: 0; height: 1px; background: var(--line); margin: 0; width: 100%; }
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; }

/* ==========================================================================
   8. Generic pages / blog
   ========================================================================== */
.page-title { padding-top: 24px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 12px; }
.page-title > .t-body { max-width: 780px; }
.page-content { padding-bottom: 96px; }
.prose { padding: 40px; max-width: 900px; }
.prose p, .prose ul, .prose ol { margin-bottom: 1em; }
.prose a { color: var(--blue); }
.prose h2, .prose h3 { margin: 1.4em 0 .5em; }
.single-post { padding-top: 32px; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.single-thumb { position: relative; height: 420px; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); }
.pagination { display: flex; justify-content: center; padding-top: 40px; }
.pagination ul, .pagination .nav-links { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; align-items: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; font-size: 14px; color: var(--soft); }
.pagination .page-numbers.current { background: var(--glass-bg); border: 1px solid var(--line); color: #fff; }
.pagination a.page-numbers:hover { color: #fff; }

.breadcrumbs { padding-top: 20px; padding-bottom: 20px; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 22px; color: var(--soft); flex-wrap: wrap; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .current { color: #fff; }

/* ==========================================================================
   9. Shop / category listing
   ========================================================================== */
.listing { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 96px; }
.filters { padding: 20px; display: flex; flex-direction: column; gap: 20px; border-radius: var(--r-xl); }
.filter-head { display: flex; align-items: center; justify-content: space-between; }
.clear-all { color: var(--blue); }
.filter-group { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.range { -webkit-appearance: none; appearance: none; padding: 0; height: 4px; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .3); box-shadow: none; }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 0; cursor: pointer; }
.range-labels { display: flex; justify-content: space-between; }
.size-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.size-chip input, .check input { position: absolute; opacity: 0; width: 0; height: 0; padding: 0; }
.size-chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 42px; padding: 0 14px; border-radius: var(--r-md); background: var(--glass-bg); border: 1px solid var(--line); font-size: 14px; cursor: pointer; transition: background .2s, border-color .2s; }
.size-chip input:checked + span { background: rgba(255, 255, 255, .22); border-color: #fff; }
.size-chip input:focus-visible + span, .check input:focus-visible + .box { outline: 2px solid var(--blue); outline-offset: 2px; }
.check { display: flex; align-items: center; gap: 10px; cursor: pointer; position: relative; }
.check .box { width: 20px; height: 20px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .4); display: inline-flex; align-items: center; justify-content: center; flex: none; background: transparent; }
.check .box .icon { opacity: 0; width: 14px; height: 14px; }
.check input:checked + .box { background: var(--blue-deep); border-color: var(--blue-deep); }
.check input:checked + .box .icon { opacity: 1; }

.toolbar { display: flex; align-items: center; justify-content: space-between; min-height: 46px; margin-bottom: 32px; gap: 16px; flex-wrap: wrap; }
.woocommerce-result-count { font-size: 14px; line-height: 22px; color: var(--soft); }
.woocommerce-ordering select { width: auto; min-width: 183px; height: 46px; padding: 0 40px 0 16px; font-size: 14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"), var(--glass-bg); background-repeat: no-repeat; background-position: right 16px center, 0 0; }

/* ==========================================================================
   10. Single product
   ========================================================================== */
.product-top { display: grid; grid-template-columns: 640px minmax(0, 546px); gap: 64px; align-items: start; padding-bottom: 64px; justify-content: start; }
.gallery { display: flex; flex-direction: column; gap: 16px; }
.gallery-main { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-lg); }
.gallery-thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.thumb { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 16px; cursor: pointer; }
.thumb.is-active { border-color: #fff; }
.product-info { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.product-title { max-width: 440px; }
.rating-line { display: flex; align-items: center; gap: 10px; }
.stars { color: var(--blue); letter-spacing: 2px; }
.price-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.price-big, .price-big .amount { font-size: 32px; line-height: 40px; font-weight: 700; }
.discount { background: var(--blue); padding: 5px 10px; border-radius: 999px; }
.short-desc p { color: var(--soft); }
.stock { display: flex; align-items: center; gap: 8px; }
.stock .dot { width: 10px; height: 10px; border-radius: 50%; background: #3ddc84; }
.stock.out .dot { background: #ff6b6b; }
.ship-box { padding: 12px 21px 14px; border-radius: 16px; }
.accordion { margin-top: 4px; }
.accordion details, .faq-item { border-bottom: 1px solid var(--line); }
.accordion summary, .faq-item summary { display: flex; align-items: center; justify-content: space-between; padding: 19px 0; cursor: pointer; list-style: none; }
.accordion summary::-webkit-details-marker, .faq-item summary::-webkit-details-marker { display: none; }
.accordion summary::after, .faq-item summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.accordion details[open] summary::after, .faq-item[open] summary::after { content: '−'; }
.acc-body, .faq-item > p { padding-bottom: 20px; }
.acc-body table { width: 100%; border-collapse: collapse; }
.acc-body th, .acc-body td { text-align: left; padding: 6px 0; font-weight: 400; border-bottom: 1px solid var(--line); }
.acc-body p { margin: 0 0 .8em; }

/* add-to-cart form */
.variations { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.variations tr { display: block; margin-bottom: 14px; }
.variations th, .variations td { display: block; padding: 0; text-align: left; }
.variations label { font-size: 18px; line-height: 26px; font-weight: 600; display: block; margin-bottom: 8px; }
.is-hidden { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { min-width: 64px; height: 44px; padding: 0 16px; border-radius: var(--r-md); background: var(--glass-bg); border: 1px solid var(--line); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s, background .2s; }
.chip.is-active { border-color: #fff; background: rgba(255, 255, 255, .22); }
.chip.is-disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; }
.chips-colour .chip { width: 36px; min-width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .35); }
.chips-colour .chip.is-active { border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }
.reset_variations { font-size: 14px; color: var(--blue); display: inline-block; margin-top: 6px; }
.single_variation_wrap .woocommerce-variation-price { margin-bottom: 8px; }
.woocommerce-variation-add-to-cart, form.cart:not(.variations_form) { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
form.cart .quantity, .ci-qty .quantity { display: inline-flex; align-items: center; height: 40px; background: var(--glass-bg); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.quantity input.qty { width: 48px; height: 100%; padding: 0; text-align: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; -moz-appearance: textfield; font-weight: 600; }
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-btn { width: 30px; height: 100%; background: transparent; border: 0; color: #fff; font-size: 18px; cursor: pointer; }
.qty-btn:hover { background: rgba(255, 255, 255, .1); }
form.cart .btn, form.cart .single_add_to_cart_button, form.cart button.buy-now { height: 40px; padding: 0 22px; }
.woocommerce-variation-description p { margin: 0 0 8px; }

.fbt { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 49px 64px; margin-bottom: 0; }
.fbt > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.bundle { display: flex; align-items: center; gap: 20px; }
.bundle-item { position: relative; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; flex: none; }
.bundle .plus { font-size: 22px; font-weight: 700; }
.bundle-price { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; }

/* ==========================================================================
   11. Cart
   ========================================================================== */
.cart-title { padding-top: 24px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 8px; }
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 436px; gap: 32px; align-items: start; padding-bottom: 32px; }
.cart-items { padding: 20px; }
.cart-head { display: grid; grid-template-columns: minmax(0, 1fr) 140px 120px; gap: 24px; padding: 8px 0 14px; border-bottom: 1px solid var(--line); }
.cart-head span:nth-child(3), .ci-total { text-align: right; }
.cart-item { display: grid; grid-template-columns: minmax(0, 1fr) 140px 120px; gap: 24px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--line); }
.ci-product { display: flex; gap: 24px; align-items: center; }
.ci-thumb { position: relative; width: 96px; height: 96px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.ci-thumb a { display: block; position: absolute; inset: 0; }
.ci-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ci-info .remove { color: var(--blue); }
.ci-qty .quantity { height: 48px; }
.cart-actions { padding-top: 16px; }
.coupon { display: flex; gap: 12px; align-items: center; max-width: 440px; }
.coupon .field { width: 320px; height: 58px; padding: 15px 20px; }
.continue { display: inline-flex; padding-top: 16px; }
.cart-collaterals { padding: 20px; }
.cart_totals h2 { font-size: 22px; line-height: 30px; font-weight: 700; margin-bottom: 16px; }
.cart_totals table, .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td { padding: 10px 0; text-align: left; font-weight: 400; vertical-align: top; }
.cart_totals td { text-align: right; }
.cart_totals tr.order-total th, .cart_totals tr.order-total td { font-weight: 700; font-size: 22px; line-height: 30px; padding-top: 16px; border-top: 1px solid var(--line); }
.cart_totals .wc-proceed-to-checkout { padding-top: 16px; }
.wc-proceed-to-checkout .checkout-button { width: 100%; height: 56px; background: var(--grad-primary); }
.cart-note { padding-top: 16px; }
.woocommerce-shipping-methods { list-style: none; padding: 0; margin: 0; }
.shipping-calculator-button { color: var(--blue); }

/* ==========================================================================
   12. Checkout
   ========================================================================== */
.checkout-intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 12px; padding-bottom: 32px; }
.checkout-intro > div { display: flex; flex-direction: column; gap: 8px; }
.assurance { display: inline-flex; align-items: center; gap: 8px; }
.checkout-layout { display: grid; grid-template-columns: minmax(0, 1fr) 480px; gap: 32px; align-items: start; padding-bottom: 96px; }
.checkout-main { display: flex; flex-direction: column; gap: 24px; }
.checkout-side { display: flex; flex-direction: column; gap: 16px; }
.checkout-panel { padding: 28px; }
#customer_details .col-1, #customer_details .col-2 { width: 100%; float: none; }
#customer_details h3 { font-size: 22px; line-height: 30px; font-weight: 700; margin-bottom: 20px; }
.woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper, .woocommerce-additional-fields__field-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; margin-bottom: 20px; }
.form-row { margin: 0; display: flex; flex-direction: column; gap: 8px; grid-column: 1 / -1; }
.form-row-first, .form-row-last { grid-column: auto; }
.form-row label { font-size: 14px; line-height: 22px; font-weight: 600; }
.form-row .required { color: var(--blue); text-decoration: none; }
.form-row .optional { color: var(--muted); font-weight: 400; }
.woocommerce-input-wrapper { display: block; }
.woocommerce-invalid input, .woocommerce-invalid select { border-color: #ff6b6b; }
#ship-to-different-address { margin: 8px 0 16px; }
#ship-to-different-address label { display: flex; align-items: center; gap: 10px; font-size: 16px; }
input[type=checkbox]:not([data-group]), input[type=radio] { appearance: auto; -webkit-appearance: auto; width: 18px; height: 18px; padding: 0; box-shadow: none; accent-color: var(--blue); }
/* select2 country/state */
.select2-container--default .select2-selection--single { height: 52px; background: var(--glass-bg); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: #fff; line-height: 26px; padding: 0 16px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; right: 10px; }
.select2-dropdown { background: #0a1b33; border: 1px solid var(--line); color: #fff; border-radius: var(--r-md); }
.select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--blue-deep); }
.select2-search--dropdown .select2-search__field { background: rgba(255, 255, 255, .08); color: #fff; }
.select2-container--default .select2-results__option[aria-selected=true] { background: rgba(255, 255, 255, .12); }

#order_review_heading { padding-left: 4px; }
.woocommerce-checkout-review-order-table th, .woocommerce-checkout-review-order-table td { padding: 12px 0; text-align: left; font-weight: 400; border-bottom: 1px solid var(--line); vertical-align: middle; }
.woocommerce-checkout-review-order-table td:last-child, .woocommerce-checkout-review-order-table tfoot td { text-align: right; }
.woocommerce-checkout-review-order-table .product-name { display: flex; align-items: center; gap: 16px; }
.rv-thumb { position: relative; width: 76px; height: 76px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); flex: none; }
.rv-name { font-weight: 600; font-size: 14px; line-height: 20px; }
.product-quantity { color: var(--soft); }
.woocommerce-checkout-review-order-table .order-total th, .woocommerce-checkout-review-order-table .order-total td { font-size: 22px; line-height: 30px; font-weight: 700; border-bottom: 0; }
#payment { padding-top: 20px; }
#payment ul.payment_methods { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
#payment ul.payment_methods > li { padding: 16px 20px; background: var(--glass-bg); border: 1px solid var(--line); border-radius: var(--r-md); }
#payment ul.payment_methods > li > label { font-weight: 600; margin-left: 10px; }
#payment .payment_box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--soft); }
#payment .payment_box p { margin-bottom: 10px; }
#payment .payment_box fieldset { border: 0; padding: 0; margin: 0; }
#place_order { width: 100%; height: 56px; }
.woocommerce-terms-and-conditions-wrapper { font-size: 14px; line-height: 22px; color: var(--soft); margin-bottom: 16px; }
.woocommerce-terms-and-conditions-wrapper a, .woocommerce-privacy-policy-text a { color: var(--blue); }
.checkout-support { display: flex; gap: 12px; align-items: center; padding: 14px 20px; border-radius: var(--r-md); }
.return-cart { display: inline-flex; color: var(--blue); }
.woocommerce-form-coupon-toggle, .woocommerce-form-login-toggle { max-width: 1440px; margin: 0 auto; padding: 0 64px 16px; }
.woocommerce-form-coupon, .woocommerce-form-login { max-width: 1312px; margin: 0 auto 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Notices */
.woocommerce-notices-wrapper, .woocommerce-message, .woocommerce-error, .woocommerce-info { max-width: 1440px; margin-inline: auto; }
.woocommerce-message, .woocommerce-error, .woocommerce-info { list-style: none; padding: 16px 64px; margin-bottom: 16px; background: var(--glass-bg); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; padding: 8px 18px; font-size: 14px; }
.woocommerce-error { border-color: #ff6b6b; }
.woocommerce-info a, .woocommerce-message a:not(.button), .woocommerce-error a { color: var(--blue); }
.is-shop-flow .woocommerce { display: block; }

/* ==========================================================================
   13. About
   ========================================================================== */
.about-hero { display: flex; align-items: center; justify-content: space-between; gap: 96px; max-width: 1440px; margin: 0 auto; padding: 80px 64px; }
.about-hero-card { width: 608px; max-width: 100%; padding: 48px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.about-hero-image, .about-story-image { position: relative; border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .25); }
.about-hero-image { width: 640px; height: 520px; flex: none; }
.about-story { display: flex; align-items: center; gap: 64px; max-width: 1440px; margin: 0 auto; padding: 96px 64px; }
.about-story-image { width: 620px; height: 480px; flex: none; }
.about-story-card { flex: 1 1 0; padding: 48px; display: flex; flex-direction: column; gap: 18px; }
.mission-vision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; padding-bottom: 96px; }
.mv-card { padding: 48px; display: flex; flex-direction: column; gap: 16px; }
.about-offer { padding-bottom: 96px; }
.about-serve { padding-bottom: 80px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip-pill { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 999px; font-size: 14px; line-height: 22px; box-shadow: none; }
a.chip-pill:hover { border-color: #fff; }
.values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; padding-bottom: 96px; }
.value-card { padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 64px; background: var(--grad-primary); border: 1px solid var(--line); box-shadow: 0 12px 16px rgba(0, 0, 0, .25); margin-bottom: 0; }

/* ==========================================================================
   14. Contact
   ========================================================================== */
.contact-body { display: grid; grid-template-columns: minmax(0, 836px) minmax(0, 460px); gap: 16px; align-items: start; padding-bottom: 64px; justify-content: space-between; }
.contact-form { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-group { display: flex; flex-direction: column; gap: 8px; position: relative; }
.field-group label { font-size: 16px; line-height: 26px; font-weight: 600; }
.field-group .field { height: 56px; padding: 15px 17px; }
.field-group textarea.field { height: 150px; }
.select-wrap select { padding-right: 44px; }
.select-chevron { position: absolute; right: 17px; bottom: 19px; pointer-events: none; }
.contact-info { display: flex; flex-direction: column; gap: 20px; }
.info-list { padding: 21px; display: flex; flex-direction: column; gap: 16px; }
.info-item { display: flex; align-items: center; gap: 16px; }
.social-card { padding: 21px; display: flex; flex-direction: column; gap: 10px; }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 12px; height: auto; }
.social-links .chip-pill { height: 44px; }
.map-section { padding-bottom: 32px; }
.map-box { position: relative; height: 320px; overflow: hidden; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.3) contrast(1.05); }
.faq { padding-top: 64px; padding-bottom: 96px; }
.faq-list { display: flex; flex-direction: column; padding-inline: 33px; }
.faq-item summary { padding: 22px 0; }

/* ==========================================================================
   15. Responsive
   ========================================================================== */
@media (max-width: 1280px) {
	.primary-nav .menu { gap: 18px; }
	.t-display { font-size: 52px; line-height: 56px; }
	.hero-image { width: 480px; }
	.about-hero-image { width: 480px; }
	.about-story-image { width: 480px; }
	.product-top { grid-template-columns: minmax(0, 1fr) minmax(0, 546px); gap: 40px; }
}
@media (max-width: 1100px) {
	.container, .announcement, .mainbar, .section-pad, .trust-strip, .newsletter, .articles-band, .footer-inner, .about-hero, .about-story, .fbt, .cta-band, .why, .featured, .header-search { padding-left: 32px; padding-right: 32px; }
	.nav-toggle { display: block; }
	.primary-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; background: rgba(0, 0, 0, .92); border-radius: 0 0 var(--r-xl) var(--r-xl); padding: 16px 32px 24px; z-index: 60; }
	.primary-nav.is-open { display: block; }
	.primary-nav .menu { flex-direction: column; align-items: flex-start; gap: 18px; }
	.mainbar { flex-wrap: wrap; }
	.header-actions { margin-left: auto; }
	.hero { flex-direction: column; }
	.hero-content { padding: 64px 32px; }
	.hero-image { width: 100%; height: 420px; }
	.trust-strip { flex-wrap: wrap; } .trust-strip > div { flex: 1 1 40%; }
	.card-grid-3, .values { grid-template-columns: 1fr 1fr; }
	.product-grid.cols-4, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.product-grid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.promos, .why, .about-hero, .about-story, .fbt, .cta-band { flex-direction: column; align-items: stretch; }
	.why-heading { width: 100%; margin-bottom: 32px; }
	.reasons { grid-template-columns: 1fr; }
	.footer-cols { grid-template-columns: 1fr 1fr; }
	.listing { grid-template-columns: 1fr; }
	.product-top, .cart-layout, .checkout-layout, .contact-body, .mission-vision { grid-template-columns: 1fr; }
	.about-hero-image, .about-story-image { width: 100%; height: 360px; }
	.featured { padding-bottom: 48px; }
	.signup .field { width: 100%; }
	.signup { width: 100%; }
	.bundle { flex-wrap: wrap; }
}
@media (max-width: 680px) {
	.container, .announcement, .mainbar, .section-pad, .trust-strip, .newsletter, .articles-band, .footer-inner, .about-hero, .about-story, .fbt, .cta-band, .why, .featured, .header-search { padding-left: 20px; padding-right: 20px; }
	.t-display { font-size: 40px; line-height: 44px; }
	.t-h1 { font-size: 32px; line-height: 38px; }
	.section-pad { padding-top: 64px; padding-bottom: 64px; }
	.card-grid-3, .values, .product-grid.cols-4, .product-grid.cols-3, .steps, .footer-cols, .form-row-2, .woocommerce-billing-fields__field-wrapper, .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; }
	.heading-row, .newsletter, .signup, .checkout-intro { flex-direction: column; align-items: flex-start; }
	.cart-head { display: none; }
	.cart-item { grid-template-columns: 1fr; gap: 12px; }
	.ci-total { text-align: left; }
	.coupon { flex-wrap: wrap; } .coupon .field { width: 100%; }
	.footer-bottom { flex-direction: column; }
	.pc-image { height: 280px; }
	.about-hero-card, .about-story-card, .mv-card, .promo { padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}