/*
Theme Name: N-sport AOE
Theme URI: https://n-sport.net
Author: N-sport Team
Author URI: https://n-sport.net
Description: Ultra-lightweight, high-performance WordPress theme for showcasing Watch Faces. Pure CSS, zero dependencies, Gutenberg-native.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: n-sport-aoe
Tags: dark, custom-menu, featured-images, wide-blocks, block-styles, editor-style, translation-ready

/* ==========================================================================
   1. CSS Custom Properties
   ========================================================================== */

/* Mockup Switcher Container Fix - Single Product Page */
.mockup-switcher-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    margin: 0 auto;
}

/* Mockup Face Image Fix - Single Product Page */
.mockup-face-img {
    width: 74%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -50%);
    transform-origin: center center;
    z-index: 1;
}

/* Mockup Bezel Image Fix - Single Product Page */
.mockup-bezel-img {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Gallery Mode Override - Single Product Page */
.is-gallery-mode .mockup-face-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transform: none;
    top: 0;
    left: 0;
    position: relative;
}

.is-gallery-mode .mockup-bezel-img {
    display: none;
}

/* Mockup Switcher Container Fix - Single Product Page */
.mockup-switcher-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    margin: 0 auto;
}

/* Mockup Face Image Fix - Single Product Page */
.mockup-face-img {
    width: 74%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -50%);
    transform-origin: center center;
    z-index: 1;
}

/* Mockup Bezel Image Fix - Single Product Page */
.mockup-bezel-img {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Gallery Mode Override - Single Product Page */
.is-gallery-mode .mockup-face-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transform: none;
    top: 0;
    left: 0;
    position: relative;
}

.is-gallery-mode .mockup-bezel-img {
    display: none;
}

/* Mockup Switcher Container Fix */
.mockup-switcher-container {
    width: 100%;
    max-width: 450px;
    position: relative;
    margin: 0 auto;
}

/* Mockup Face Image Fix */
.mockup-face-img {
    width: 74%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 50%;
    object-fit: cover;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-49%, -50%);
    transform-origin: center center;
    z-index: 1;
}

/* Mockup Bezel Image Fix */
.mockup-bezel-img {
    position: relative;
    z-index: 2;
    pointer-events: none;
}

/* Gallery Mode Override */
.is-gallery-mode .mockup-face-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transform: none;
    top: 0;
    left: 0;
    position: relative;
}

.is-gallery-mode .mockup-bezel-img {
    display: none;
}

:root {
	/* Colors */
	--color-bg:          #0a0a0a;
	--color-bg-elevated: #141414;
	--color-bg-card:     #1a1a1a;
	--color-text:        #f0f0f0;
	--color-text-muted:  #888888;
	--color-accent:      #00d4ff;
	--color-accent-glow: rgba(0, 212, 255, 0.15);
	--color-border:      rgba(255, 255, 255, 0.06);
	--color-border-hover:rgba(255, 255, 255, 0.12);

	/* Typography */
	--font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	--font-heading: var(--font-body);

	/* Spacing */
	--space-xs:  0.25rem;
	--space-sm:  0.5rem;
	--space-md:  1rem;
	--space-lg:  2rem;
	--space-xl:  3rem;
	--space-2xl: 5rem;

	/* Layout */
	--container-max: 1200px;
	--header-height: 70px;

	/* Transitions */
	--transition-fast: 200ms ease;
	--transition-base: 300ms ease;

	/* Border Radius */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 18px;
	--radius-full: 9999px;
}

/* ==========================================================================
   2. Reset & Base
   ========================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 16px;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--color-accent);
	text-decoration: none;
	transition: color var(--transition-fast);
}

a:hover {
	color: #33ddff;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-text);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

ul, ol {
	list-style: none;
}

button {
	cursor: pointer;
	font-family: inherit;
	border: none;
	background: none;
	color: inherit;
}

/* ==========================================================================
   3. Layout — Container
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

.container--narrow {
	max-width: 800px;
}

/* ==========================================================================
   4. Site Header
   ========================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(10, 10, 10, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--color-border);
	height: var(--header-height);
	display: flex;
	align-items: center;
}

.site-header .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.site-branding a {
	color: var(--color-text);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.02em;
}

.site-branding a:hover {
	color: var(--color-accent);
}

.site-branding img {
	max-height: 40px;
	width: auto;
}

/* Navigation */
.main-navigation ul {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.main-navigation a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	position: relative;
	padding: var(--space-xs) 0;
}

.main-navigation a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--color-accent);
	transition: width var(--transition-fast);
}

.main-navigation a:hover,
.main-navigation .current-menu-item a {
	color: var(--color-text);
}

.main-navigation a:hover::after,
.main-navigation .current-menu-item a::after {
	width: 100%;
}

/* Mobile Menu Toggle */
.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-sm);
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-text);
	transition: transform var(--transition-fast), opacity var(--transition-fast);
}

.menu-toggle.active span:nth-child(1) {
	transform: rotate(45deg) translate(5px, 5px);
}

.menu-toggle.active span:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
	transform: rotate(-45deg) translate(5px, -5px);
}

/* ==========================================================================
   5. Site Footer
   ========================================================================== */

.site-footer {
	margin-top: var(--space-2xl);
	padding: var(--space-xl) 0;
	border-top: 1px solid var(--color-border);
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.site-footer a {
	color: var(--color-text-muted);
}

.site-footer a:hover {
	color: var(--color-accent);
}

.footer-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

/* ==========================================================================
   6. Hero Section
   ========================================================================== */

.hero-section {
	padding: var(--space-2xl) 0 var(--space-lg);
	text-align: center;
}

.hero-title {
	font-size: clamp(1.75rem, 5vw, 3rem);
	margin-bottom: var(--space-sm);
	background: linear-gradient(135deg, var(--color-text) 0%, var(--color-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.hero-subtitle {
	color: var(--color-text-muted);
	font-size: 1.1rem;
}

/* ==========================================================================
   7. Collection Section — Device Mockup + Tags + Grid
   ========================================================================== */

.section-title {
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: var(--space-xl);
	position: relative;
}

.section-title::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background: var(--color-accent);
	margin: var(--space-md) auto 0;
	border-radius: var(--radius-full);
}

/* Layout: sidebar + grid side by side */
.collection-layout {
	display: flex;
	gap: var(--space-xl);
	align-items: flex-start;
}

/* Sidebar: mockup + tags stacked vertically */
.collection-sidebar {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
	width: 220px;
	position: sticky;
	top: calc(var(--header-height) + var(--space-lg));
}

/* Mockup inside collection */
.collection-mockup {
	position: relative;
	width: 180px;
	height: 180px;
}

.collection-mockup__face {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-49%, -50%);
	width: 140px;
	height: 140px;
	border-radius: 50%;
	overflow: hidden;
	background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
}

.collection-mockup__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.collection-mockup__bezel {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 200ms ease;
}

.collection-mockup__bezel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.collection-mockup__bezel.fade-out {
	opacity: 0;
}

.collection-mockup__bezel.fade-in {
	opacity: 1;
}

/* Device Tags — vertical stack, compact */
.collection-tags {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	width: 100%;
}

.collection-tag {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: 0.45rem 0.7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: all var(--transition-fast);
	letter-spacing: 0.02em;
}

.collection-tag:hover {
	border-color: var(--color-border-hover);
	color: var(--color-text);
	background: var(--color-bg-card);
}

.collection-tag.active {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-accent-glow);
	box-shadow: 0 0 10px var(--color-accent-glow);
}

.collection-tag__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-bg-card);
	font-size: 0.75rem;
	font-weight: 700;
	flex-shrink: 0;
}

.collection-tag.active .collection-tag__icon {
	background: var(--color-accent);
	color: var(--color-bg);
}

.collection-tag__label {
	white-space: nowrap;
}

/* Grid wrapper takes remaining space */
.collection-grid-wrap {
	flex: 1;
	min-width: 0;
}

/* ==========================================================================
   7b. Watch Face Grid
   ========================================================================== */

.section-title {
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: var(--space-xl);
	position: relative;
}

.section-title::after {
	content: '';
	display: block;
	width: 40px;
	height: 3px;
	background: var(--color-accent);
	margin: var(--space-md) auto 0;
	border-radius: var(--radius-full);
}

.watchface-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
	padding-bottom: var(--space-xl);
}

.watchface-card {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg-card);
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	opacity: 0;
	transform: translateY(20px);
}

.watchface-card.visible {
	opacity: 1;
	transform: translateY(0);
}

.watchface-card:hover {
	transform: translateY(-4px) scale(1.02);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--color-accent-glow);
}

.watchface-card__image {
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.watchface-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.watchface-card:hover .watchface-card__image img {
	transform: scale(1.06);
}

.watchface-card__info {
	padding: var(--space-md);
}

.watchface-card__title {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var(--space-xs);
}

.watchface-card__title a {
	color: var(--color-text);
}

.watchface-card__title a:hover {
	color: var(--color-accent);
}

.watchface-card__meta {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* Featured / Large Card Variant */
.watchface-card--featured {
	grid-column: span 2;
}

.watchface-card--featured .watchface-card__image {
	aspect-ratio: 16 / 9;
}

/* ==========================================================================
   8. Single Watch Face
   ========================================================================== */

.single-watchface {
	padding: var(--space-xl) 0;
}

.single-watchface__hero {
	max-width: 600px;
	margin: 0 auto var(--space-xl);
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.single-watchface__hero img {
	width: 100%;
	height: auto;
}

.single-watchface__content {
	max-width: 700px;
	margin: 0 auto;
}

.single-watchface__content p {
	margin-bottom: var(--space-md);
}

.single-watchface__title {
	font-size: 2rem;
	margin-bottom: var(--space-md);
	text-align: center;
}

/* Related Section */
.related-section {
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   9. Blog / Index Grid
   ========================================================================== */

.posts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-lg);
}

/* ==========================================================================
   10. WordPress Core Block Overrides
   ========================================================================== */

/* Alignment */
.alignwide {
	max-width: var(--container-max);
	margin-inline: auto;
}

.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-inline: auto;
	position: relative;
	left: calc(-50vw + 50%);
}

/* Separator */
.wp-block-separator {
	border: none;
	height: 1px;
	background: var(--color-border);
	margin: var(--space-xl) 0;
}

/* Quote */
.wp-block-quote {
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-lg);
	margin: var(--space-lg) 0;
	color: var(--color-text-muted);
	font-style: italic;
}

/* Code */
.wp-block-code {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 0.9rem;
	overflow-x: auto;
}

/* Buttons */
.wp-block-button__link {
	background: var(--color-accent);
	color: var(--color-bg);
	padding: 0.7rem 1.8rem;
	border-radius: var(--radius-full);
	font-weight: 600;
	transition: all var(--transition-fast);
	display: inline-block;
}

.wp-block-button__link:hover {
	background: #33ddff;
	color: var(--color-bg);
	transform: translateY(-1px);
	box-shadow: 0 4px 20px var(--color-accent-glow);
}

/* Table */
.wp-block-table {
	width: 100%;
	border-collapse: collapse;
}

.wp-block-table td,
.wp-block-table th {
	border: 1px solid var(--color-border);
	padding: var(--space-sm) var(--space-md);
}

.wp-block-table th {
	background: var(--color-bg-elevated);
	font-weight: 600;
}

/* Image captions */
.wp-block-image figcaption {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	text-align: center;
	margin-top: var(--space-sm);
}

/* ==========================================================================
   11. Utility Classes
   ========================================================================== */

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

.text-center { text-align: center; }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }

/* ==========================================================================
   12. S4U-Inspired: Teaser / Hero
   ========================================================================== */

.teaser {
	position: relative;
	width: 100%;
	min-height: 100vh;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: var(--color-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.teaser__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	opacity: 0.5;
	mix-blend-mode: screen;
}

.teaser__inner {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-lg);
	text-align: center;
	padding: var(--space-xl) var(--space-lg);
	width: 100%;
	max-width: 900px;
}

/* Logo in teaser */
.teaser__logo img {
	max-height: 50px;
	width: auto;
}

.teaser__logo-text {
	font-size: 1.8rem;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Social icons row */
.teaser__social {
	display: flex;
	gap: var(--space-md);
	align-items: center;
}

.teaser__social a {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	transition: color 200ms ease;
	display: flex;
	align-items: center;
	gap: 4px;
}

.teaser__social a:hover {
	color: #fff;
}

.teaser__social a i,
.teaser__social a .icon {
	font-size: 1rem;
}

/* Watch name headline */
.teaser__watch-name {
	font-size: clamp(1.6rem, 4vw, 3rem);
	color: #fff;
	line-height: 1.15;
}

.teaser__watch-name .w600 {
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.teaser__watch-name .w300 {
	font-weight: 300;
	letter-spacing: 0.04em;
}

/* CTA button */
.teaser__cta {
	margin-top: var(--space-md);
}

.btn--teaser {
	display: inline-flex;
	align-items: center;
	padding: 0.85rem 2.4rem;
	background: rgba(255, 255, 255, 0.10);
	border: 1.5px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--radius-full);
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	transition: background 200ms ease, border-color 200ms ease;
}

.btn--teaser:hover {
	background: rgba(255, 255, 255, 0.18);
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff;
}

/* Tagline */
.teaser__tagline {
	color: rgba(255, 255, 255, 0.6);
	font-size: 0.82rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.8;
}

/* ==========================================================================
   13. S4U-Inspired: Video Strip
   ========================================================================== */

.video-strip {
	padding: var(--space-xl) 0;
	background: var(--color-bg);
}

.video-strip__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.video-strip__item {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.video-strip__item iframe,
.video-strip__placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.video-strip__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--color-bg-card);
}

.video-strip__placeholder img {
	width: 60%;
	opacity: 0.25;
}

/* ==========================================================================
   14. S4U-Inspired: Products Section
   ========================================================================== */

.products-section {
	padding: var(--space-2xl) 0;
	background: var(--color-bg-elevated);
}

.products-section__header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.products-section__title {
	font-size: clamp(1.25rem, 3vw, 1.8rem);
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}

.products-section__subtitle {
	color: var(--color-text-muted);
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: var(--space-lg);
}

.products-section__desc {
	max-width: 780px;
	margin-inline: auto;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.products-empty {
	text-align: center;
	color: var(--color-text-muted);
	padding: var(--space-2xl) 0;
}

/* ==========================================================================
   15. S4U-Inspired: Product Grid & Cards
   ========================================================================== */

.product-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-lg);
}

/* --- Single Product Card --- */
.product-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 500ms ease, transform 500ms ease, box-shadow 300ms ease;
}

.product-card.visible {
	opacity: 1;
	transform: translateY(0);
}

.product-card:hover {
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 212, 255, 0.08);
}

/* --- Device mockup area — taller (4:5) to keep watches sharp --- */
.product-card__device {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--color-bg);
}

/* Dot selector — vertical column, left edge of mockup area */
.product-card__dots {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 8px;
	z-index: 20;
	padding: 8px 5px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: var(--radius-full);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.dot {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.20);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.dot:hover {
	background: rgba(255, 255, 255, 0.40);
}

.dot--active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	box-shadow: 0 0 8px var(--color-accent-glow);
	transform: scale(1.05);
}

/* Device templates — on TOP, covering watch face edges (S4U style) */
.product-card__templates {
	position: absolute;
	inset: 0;
	z-index: 15;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.product-card__template {
	position: absolute;
	max-width: 90%;
	max-height: 90%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 250ms ease;
}

.product-card__template.is-active {
	opacity: 1;
}

/* Watch face — sits BELOW the frame, centered with bezel opening */
.product-card__wf {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	aspect-ratio: 1 / 1;
	z-index: 10;
	border-radius: 50%;
	overflow: hidden;
	/* Hover smooth */
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.product-card__wf img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50%;
	height: 50%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	transform: translate(-49%, -50%);
	transform-origin: center center;
	transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Card hover: face zooms seamlessly */
.product-card:hover .product-card__wf {
	transform: scale(1.08);
}


/* Card background tint */
.product-card__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgba(10, 10, 20, 0.70), rgba(5, 15, 30, 0.50));
}

/* --- Info area below mockup --- */
.product-card__info {
	padding: var(--space-md) var(--space-md) var(--space-lg);
	background: var(--color-bg-card);
	text-align: center;
}

.product-card__name {
	font-size: 1rem;
	font-weight: 500;
	color: var(--color-text);
	margin-bottom: var(--space-xs);
}

.product-card__name .w500 {
	font-weight: 600;
}

.product-card__extras {
	margin-bottom: var(--space-sm);
}

/* ==========================================================================
   16. S4U-Inspired: Labels & Buttons
   ========================================================================== */

/* Labels (badges) */
.label {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: var(--radius-full);
	line-height: 1.5;
}

.label--compat {
	background: var(--color-accent-glow);
	color: var(--color-accent);
	border: 1px solid rgba(0, 212, 255, 0.3);
}

.label--new {
	background: #129539;
	color: #fff;
	margin-left: 6px;
}

.label--premium {
	background: rgba(200, 170, 60, 0.15);
	color: #d4aa3c;
	border: 1px solid rgba(200, 170, 60, 0.3);
}

/* Product button */
.btn--product {
	display: inline-block;
	margin-top: var(--space-sm);
	padding: 0.55rem 1.6rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: transparent;
	transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}

.btn--product:hover {
	border-color: var(--color-border-hover);
	color: var(--color-text);
	background: rgba(255, 255, 255, 0.04);
}

/* ==========================================================================
   17. S4U-Inspired: Footer
   ========================================================================== */

.nsport-footer {
	padding: var(--space-2xl) 0 var(--space-lg);
	background: var(--color-bg);
	border-top: 1px solid var(--color-border);
}

.nsport-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-xl);
	margin-bottom: var(--space-2xl);
}

.nsport-footer__col h4,
.nsport-footer__col h3 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-md);
}

.nsport-footer__col a {
	display: block;
	color: var(--color-text-muted);
	font-size: 0.85rem;
	margin-bottom: var(--space-xs);
	transition: color 200ms ease;
}

.nsport-footer__col a:hover {
	color: var(--color-accent);
}

.nsport-footer__col--slogan {
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.7;
	font-weight: 500;
}

.nsport-footer__social {
	display: flex;
	gap: var(--space-md);
}

.nsport-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-bg-card);
	color: var(--color-text-muted);
	font-size: 0.72rem;
	font-weight: 700;
	transition: background 200ms ease, color 200ms ease;
}

.nsport-footer__social a span {
	pointer-events: none;
}

.nsport-footer__social a:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.nsport-footer__logo {
	text-align: center;
	margin-bottom: var(--space-lg);
}

.nsport-footer__logo img {
	max-height: 36px;
	width: auto;
	margin-inline: auto;
}

.nsport-footer__logo-text {
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--color-text);
	letter-spacing: 0.04em;
}

.nsport-footer__legal {
	text-align: center;
	font-size: 0.78rem;
	color: var(--color-text-muted);
	line-height: 1.8;
}

.nsport-footer__trademark {
	opacity: 0.6;
	font-size: 0.72rem;
	margin-top: var(--space-xs);
}

/* ==========================================================================
   18. Accordion — Installation Guide Steps
   ========================================================================== */

.accordion-section {
	padding: var(--space-2xl) 0;
}

.accordion-section__title {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	text-align: center;
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.accordion-section__subtitle {
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.95rem;
	margin-bottom: var(--space-xl);
}

/* Single accordion item */
.accordion {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	background: var(--color-bg-elevated);
	margin-bottom: var(--space-md);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.accordion:hover {
	border-color: var(--color-border-hover);
}

.accordion.is-open {
	border-color: rgba(0, 212, 255, 0.25);
}

/* Header / trigger button */
.accordion__header {
	width: 100%;
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-md) var(--space-lg);
	background: transparent;
	text-align: left;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	transition: background var(--transition-fast);
	cursor: pointer;
	border: none;
}

.accordion__header:hover {
	background: rgba(255, 255, 255, 0.03);
}

.accordion__header:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -2px;
}

/* Step number badge */
.accordion__step {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent-glow);
	color: var(--color-accent);
	font-size: 0.85rem;
	font-weight: 700;
	border: 1px solid rgba(0, 212, 255, 0.3);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.accordion.is-open .accordion__step {
	background: var(--color-accent);
	color: var(--color-bg);
}

/* Arrow / chevron icon */
.accordion__icon {
	flex-shrink: 0;
	margin-left: auto;
	width: 20px;
	height: 20px;
	position: relative;
	transition: transform var(--transition-base);
}

.accordion.is-open .accordion__icon {
	transform: rotate(180deg);
}

.accordion__icon::before,
.accordion__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 10px;
	height: 2px;
	background: var(--color-text-muted);
	border-radius: 1px;
	transition: background var(--transition-fast);
}

.accordion.is-open .accordion__icon::before,
.accordion.is-open .accordion__icon::after {
	background: var(--color-accent);
}

.accordion__icon::before {
	right: 50%;
	transform: rotate(40deg);
	transform-origin: right center;
}

.accordion__icon::after {
	left: 50%;
	transform: rotate(-40deg);
	transform-origin: left center;
}

/* Title text inside header */
.accordion__title {
	flex: 1;
	min-width: 0;
}

/* Platform / device badge in header */
.accordion__badge {
	display: inline-block;
	padding: 0.15rem 0.55rem;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.06);
	color: var(--color-text-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: var(--space-sm);
	vertical-align: middle;
}

.accordion.is-open .accordion__badge {
	background: var(--color-accent-glow);
	color: var(--color-accent);
}

/* Panel / content area */
.accordion__panel {
	max-height: 0;
	overflow: hidden;
	transition: max-height 380ms cubic-bezier(0.25, 1, 0.5, 1);
}

.accordion.is-open .accordion__panel {
	max-height: 1200px;
}

.accordion__inner {
	padding: 0 var(--space-lg) var(--space-lg);
	padding-left: calc(var(--space-lg) + 36px + var(--space-md));
}

/* Guide text */
.accordion__text {
	color: var(--color-text-muted);
	font-size: 0.92rem;
	line-height: 1.75;
	margin-bottom: var(--space-md);
}

.accordion__text strong {
	color: var(--color-text);
	font-weight: 600;
}

.accordion__text a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Media placeholder — screenshot / video GIF area */
.accordion__media {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-md);
	border: 1px dashed rgba(255, 255, 255, 0.12);
	background: var(--color-bg-card);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	color: var(--color-text-muted);
	font-size: 0.8rem;
	overflow: hidden;
}

.accordion__media-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	background: var(--color-bg-elevated);
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--color-border);
}

/* When media has actual content (image / video) */
.accordion__media img,
.accordion__media video,
.accordion__media iframe {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

/* Checklist inside accordion */
.accordion__checklist {
	list-style: none;
	margin: var(--space-md) 0;
	padding: 0;
}

.accordion__checklist li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: var(--space-sm);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.accordion__checklist li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.45rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	opacity: 0.6;
}

/* ==========================================================================
   19. Privacy / Text-Heavy Pages
   ========================================================================== */

.privacy-page {
	background: #000000;
	color: #cccccc;
	padding: var(--space-2xl) 0;
}

.privacy-page__container {
	max-width: 800px;
	margin-inline: auto;
	padding-inline: var(--space-lg);
}

/* Page title */
.privacy-page__title {
	font-size: clamp(1.8rem, 5vw, 2.5rem);
	font-weight: 700;
	color: #ffffff;
	margin-bottom: var(--space-sm);
	text-align: center;
}

/* Last updated line */
.privacy-page__updated {
	text-align: center;
	color: #888888;
	font-size: 0.85rem;
	margin-bottom: var(--space-2xl);
}

/* All text content */
.privacy-page__content {
	font-size: 1rem;
	line-height: 1.8;
	color: #cccccc;
}

.privacy-page__content p {
	margin-bottom: 1.6em;
}

.privacy-page__content a {
	color: #00d4ff;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(0, 212, 255, 0.4);
	transition: text-decoration-color var(--transition-fast);
}

.privacy-page__content a:hover {
	text-decoration-color: #00d4ff;
}

/* Headings hierarchy */
.privacy-page__content h2 {
	font-size: 1.5rem;
	font-weight: 700;
	color: #ffffff;
	margin-top: var(--space-2xl);
	margin-bottom: var(--space-md);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.privacy-page__content h3 {
	font-size: 1.2rem;
	font-weight: 700;
	color: #ffffff;
	margin-top: var(--space-xl);
	margin-bottom: var(--space-md);
}

.privacy-page__content h4 {
	font-size: 1.05rem;
	font-weight: 600;
	color: #e0e0e0;
	margin-top: var(--space-lg);
	margin-bottom: var(--space-sm);
}

/* Lists */
.privacy-page__content ul,
.privacy-page__content ol {
	margin-bottom: 1.6em;
	padding-left: 1.8em;
}

.privacy-page__content ul {
	list-style: disc;
}

.privacy-page__content ol {
	list-style: decimal;
}

.privacy-page__content li {
	margin-bottom: 0.5em;
	line-height: 1.7;
}

.privacy-page__content li::marker {
	color: var(--color-accent);
}

/* Blockquotes / callout boxes */
.privacy-page__content blockquote {
	border-left: 3px solid var(--color-accent);
	padding: var(--space-md) var(--space-lg);
	margin: var(--space-lg) 0;
	background: rgba(0, 212, 255, 0.04);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: #aaaaaa;
	font-style: italic;
}

/* Tables */
.privacy-page__content table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-lg);
	font-size: 0.9rem;
}

.privacy-page__content th,
.privacy-page__content td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.privacy-page__content th {
	background: var(--color-bg-card);
	color: #ffffff;
	font-weight: 600;
}

.privacy-page__content td {
	background: rgba(255, 255, 255, 0.02);
}

/* Strong / emphasis */
.privacy-page__content strong {
	color: #ffffff;
	font-weight: 600;
}

.privacy-page__content em {
	font-style: italic;
	color: #aaaaaa;
}

/* Code (if any) */
.privacy-page__content code {
	background: var(--color-bg-card);
	padding: 0.15em 0.4em;
	border-radius: 4px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 0.88em;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Table of contents */
.privacy-toc {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	margin-bottom: var(--space-2xl);
}

.privacy-toc__title {
	font-size: 1rem;
	font-weight: 700;
	color: #ffffff;
	margin-bottom: var(--space-md);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.privacy-toc__list {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: toc;
}

.privacy-toc__list li {
	counter-increment: toc;
	margin-bottom: var(--space-xs);
}

.privacy-toc__list li::before {
	content: counter(toc) '.';
	color: var(--color-accent);
	font-weight: 600;
	margin-right: var(--space-sm);
	font-size: 0.85rem;
}

.privacy-toc__list a {
	color: var(--color-text-muted);
	font-size: 0.9rem;
	transition: color var(--transition-fast);
}

.privacy-toc__list a:hover {
	color: var(--color-accent);
}

/* Weight helpers used in template */
.w300 { font-weight: 300; }
.w500 { font-weight: 500; }
.w600 { font-weight: 600; }
.uppercase { text-transform: uppercase; }

/* ==========================================================================
   12. Responsive
   ========================================================================== */

@media (max-width: 768px) {
	:root {
		--header-height: 60px;
	}

	h1 { font-size: 1.8rem; }
	h2 { font-size: 1.5rem; }

	/* Mobile Nav */
	.menu-toggle {
		display: flex;
	}

	.main-navigation {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(10, 10, 10, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		transform: translateX(100%);
		transition: transform var(--transition-base);
		z-index: 99;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.main-navigation.is-open {
		transform: translateX(0);
	}

	.main-navigation ul {
		flex-direction: column;
		gap: var(--space-xl);
		text-align: center;
	}

	.main-navigation a {
		font-size: 1.2rem;
	}

	/* Collection layout stacks vertically on tablet */
	.collection-layout {
		flex-direction: column;
		align-items: center;
	}

	.collection-sidebar {
		position: static;
		width: 100%;
		flex-direction: row;
		justify-content: center;
		gap: var(--space-lg);
	}

	.collection-mockup {
		width: 140px;
		height: 140px;
	}

	.collection-mockup__face {
		width: 110px;
		height: 110px;
	}

	.collection-tags {
		flex-direction: row;
		flex-wrap: wrap;
		width: auto;
		gap: var(--space-xs);
	}

	.collection-tag {
		flex: 0 0 auto;
		padding: 0.35rem 0.6rem;
		font-size: 0.75rem;
	}

	.collection-tag__icon {
		width: 20px;
		height: 20px;
		font-size: 0.7rem;
	}

	/* Grid adjustments */
	.watchface-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	.watchface-card--featured {
		grid-column: span 1;
	}

	.watchface-card--featured .watchface-card__image {
		aspect-ratio: 1 / 1;
	}

	.hero-title {
		font-size: clamp(1.5rem, 6vw, 2.5rem);
	}

	/* Single page */
	.single-watchface__title {
		font-size: 1.5rem;
	}

	/* S4U: Teaser */
	.teaser {
		min-height: 90vh;
	}

	.teaser__inner {
		gap: var(--space-md);
	}

	/* S4U: Video strip */
	.video-strip__grid {
		grid-template-columns: 1fr;
	}

	/* S4U: Product grid */
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-md);
	}

	/* S4U: Footer */
	.nsport-footer__grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-lg);
	}
}

@media (max-width: 480px) {
	.watchface-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	.watchface-card__info {
		padding: var(--space-sm);
	}

	.watchface-card__title {
		font-size: 0.9rem;
	}

	/* Stack sidebar vertically on small phones */
	.collection-sidebar {
		flex-direction: column;
	}

	.collection-tags {
		flex-direction: row;
		justify-content: center;
	}

	.collection-tag {
		padding: 0.3rem 0.5rem;
		font-size: 0.7rem;
	}

	/* S4U: Product grid */
	.product-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-sm);
	}

	.product-card__info {
		padding: var(--space-sm);
	}

	.product-card__name {
		font-size: 0.88rem;
	}

	/* S4U: Footer */
	.nsport-footer__grid {
		grid-template-columns: 1fr;
		text-align: center;
	}

	.nsport-footer__social {
		justify-content: center;
	}

	/* S4U: Teaser */
	.teaser__watch-name {
		font-size: 1.5rem;
	}

	/* Accordion mobile */
	.accordion__header {
		padding: var(--space-md);
	}

	.accordion__step {
		width: 30px;
		height: 30px;
		font-size: 0.78rem;
	}

	.accordion__inner {
		padding: 0 var(--space-md) var(--space-md);
		padding-left: calc(var(--space-md) + 30px + var(--space-md));
	}

	.accordion__badge {
		display: none;
	}

	/* Privacy page mobile */
	.privacy-page__container {
		padding-inline: var(--space-md);
	}

	.privacy-page__content h2 {
		font-size: 1.3rem;
	}

	.privacy-page__content h3 {
		font-size: 1.1rem;
	}

	.privacy-page__content table {
		font-size: 0.82rem;
	}

	.privacy-page__content th,
	.privacy-page__content td {
		padding: var(--space-xs) var(--space-sm);
	}
}

@media (min-width: 1200px) {
	.watchface-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   18. S4U-Inspired: Large-Screen Enhancements
   ========================================================================== */

@media (min-width: 1600px) {
	.product-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-lg);
	}
}

@media (min-width: 2000px) {
	.product-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* Dot sizing — vertical column responsive */
@media (max-width: 1100px) {
	.product-card__dots {
		left: 8px;
		gap: 6px;
		padding: 7px 4px;
	}

	.dot {
		width: 12px;
		height: 12px;
	}
}

@media (max-width: 768px) {
	.product-card__dots {
		left: 6px;
		gap: 5px;
		padding: 6px 4px;
		border-radius: var(--radius-sm);
	}

	.dot {
		width: 10px;
		height: 10px;
	}
}

@media (max-width: 480px) {
	.product-card__dots {
		left: 5px;
		gap: 4px;
		padding: 5px 3px;
	}

	.dot {
		width: 8px;
		height: 8px;
	}
}

/* ==========================================================================
   20. Blog Editorial — Index / Archive Page
   ========================================================================== */

.blog-editorial {
	padding: var(--space-2xl) 0;
}

.blog-editorial__header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.blog-editorial__title {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	color: #fff;
	margin-bottom: var(--space-xs);
	letter-spacing: -0.02em;
}

.blog-editorial__subtitle {
	color: var(--color-text-muted);
	font-size: 1rem;
}

/* --- Featured / Hero Post --- */

.blog-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
	margin-bottom: var(--space-2xl);
}

.blog-hero__thumb {
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: var(--color-bg-card);
}

.blog-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-hero:hover .blog-hero__img {
	transform: scale(1.04);
}

.blog-hero__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--color-bg-elevated);
}

.blog-hero__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.blog-hero__title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 700;
	line-height: 1.25;
	margin: 0;
}

.blog-hero__title a {
	color: #fff;
	transition: color var(--transition-fast);
}

.blog-hero__title a:hover {
	color: var(--color-accent);
}

.blog-hero__excerpt {
	color: var(--color-text-muted);
	font-size: 0.95rem;
	line-height: 1.7;
}

.blog-hero__meta {
	color: var(--color-text-muted);
	font-size: 0.85rem;
}

.blog-meta-sep {
	margin: 0 var(--space-xs);
	opacity: 0.4;
}

/* --- Blog Grid (post cards) --- */

.blog-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-lg);
	margin-bottom: var(--space-xl);
}

.blog-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
	opacity: 0;
	transform: translateY(18px);
}

.blog-card.visible {
	opacity: 1;
	transform: translateY(0);
}

.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 14px 44px rgba(0, 0, 0, 0.45), 0 0 40px rgba(0, 212, 255, 0.07);
}

.blog-card__thumb {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.blog-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.blog-card:hover .blog-card__img {
	transform: scale(1.05);
}

.blog-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: var(--color-bg-elevated);
}

.blog-card__body {
	padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.blog-card__title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.35;
	margin: var(--space-sm) 0 var(--space-sm);
}

.blog-card__title a {
	color: #fff;
	transition: color var(--transition-fast);
}

.blog-card__title a:hover {
	color: var(--color-accent);
}

.blog-card__excerpt {
	color: var(--color-text-muted);
	font-size: 0.88rem;
	line-height: 1.6;
	margin: 0 0 var(--space-md);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__meta {
	font-size: 0.8rem;
	color: var(--color-text-muted);
}

/* --- Category Badge --- */

.blog-cat-badge {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-full);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: var(--color-accent-glow);
	color: var(--color-accent);
	border: 1px solid rgba(0, 212, 255, 0.25);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.blog-cat-badge:hover {
	background: var(--color-accent);
	color: var(--color-bg);
}

.blog-cat-badge--small {
	padding: 0.15rem 0.55rem;
	font-size: 0.68rem;
}

/* --- Pagination --- */

.pagination,
.nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	margin-top: var(--space-xl);
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 var(--space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 500;
	transition: all var(--transition-fast);
}

.page-numbers:hover,
.page-numbers.current {
	background: var(--color-accent);
	color: var(--color-bg);
	border-color: var(--color-accent);
}

/* --- Blog Empty / No Results --- */

.blog-empty {
	text-align: center;
	padding: var(--space-2xl) 0;
	color: var(--color-text-muted);
}

.blog-empty h2 {
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

/* ==========================================================================
   21. Single Post — Editorial Article
   ========================================================================== */

/* --- Post Hero (full-bleed above content) --- */

.post-hero {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto var(--space-xl);
	padding-top: var(--space-lg);
}

.post-hero__inner {
	border-radius: var(--radius-lg);
	overflow: hidden;
	aspect-ratio: 21 / 9;
	max-height: 520px;
	background: var(--color-bg-card);
}

.post-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- Article Container --- */

.post-editorial {
	max-width: 800px;
	margin: 0 auto;
	padding: 0 var(--space-lg) var(--space-2xl);
}

/* --- Article Header --- */

.post-editorial__header {
	margin-bottom: var(--space-2xl);
}

/* Category badges */
.post-editorial__cats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}

.post-editorial__cat-badge {
	display: inline-block;
	padding: 0.2rem 0.75rem;
	border-radius: var(--radius-full);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--badge-color, var(--color-accent));
	background: rgba(0, 0, 0, 0.25);
	border: 1px solid var(--badge-color, rgba(0, 212, 255, 0.3));
	transition: background var(--transition-fast), color var(--transition-fast);
}

.post-editorial__cat-badge:hover {
	background: var(--badge-color, var(--color-accent));
	color: #0a0a0a;
}

/* Title — very large */
.post-editorial__title {
	font-size: clamp(2rem, 6vw, 3.2rem);
	font-weight: 800;
	line-height: 1.15;
	color: #fff;
	margin-bottom: var(--space-md);
	letter-spacing: -0.025em;
}

/* Subtitle / excerpt below title */
.post-editorial__excerpt {
	font-size: 1.15rem;
	line-height: 1.65;
	color: #aaaaaa;
	margin-bottom: var(--space-lg);
}

/* --- Author Bar --- */

.post-editorial__author {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.post-author__avatar {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-bg-card);
}

.post-author__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50% !important;
	border: none !important;
}

.post-author__info {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.post-author__name {
	font-weight: 700;
	font-size: 0.95rem;
}

.post-author__name a {
	color: #fff;
}

.post-author__name a:hover {
	color: var(--color-accent);
}

.post-author__meta {
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

/* --- Article Content — Typography --- */

.post-editorial__content {
	font-size: 1.125rem; /* 18px */
	line-height: 1.8;
	color: #cccccc;
}

.post-editorial__content p {
	margin-bottom: 1.8em;
}

.post-editorial__content h2 {
	font-size: 1.6rem;
	font-weight: 700;
	color: #fff;
	margin-top: 2.8em;
	margin-bottom: 0.8em;
	line-height: 1.3;
}

.post-editorial__content h3 {
	font-size: 1.3rem;
	font-weight: 700;
	color: #fff;
	margin-top: 2.2em;
	margin-bottom: 0.6em;
	line-height: 1.35;
}

.post-editorial__content h4 {
	font-size: 1.08rem;
	font-weight: 700;
	color: #e0e0e0;
	margin-top: 1.8em;
	margin-bottom: 0.5em;
}

/* Links */
.post-editorial__content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(0, 212, 255, 0.4);
	transition: text-decoration-color var(--transition-fast);
}

.post-editorial__content a:hover {
	text-decoration-color: var(--color-accent);
}

/* Strong / Bold */
.post-editorial__content strong {
	color: #fff;
	font-weight: 700;
}

/* Lists */
.post-editorial__content ul,
.post-editorial__content ol {
	margin-bottom: 1.8em;
	padding-left: 1.6em;
}

.post-editorial__content ul { list-style: disc; }
.post-editorial__content ol { list-style: decimal; }

.post-editorial__content li {
	margin-bottom: 0.5em;
	line-height: 1.75;
}

.post-editorial__content li::marker {
	color: var(--color-accent);
}

/* Blockquote */
.post-editorial__content blockquote {
	border-left: 3px solid var(--color-accent);
	padding: var(--space-md) var(--space-lg);
	margin: 2em 0;
	background: rgba(0, 212, 255, 0.03);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: #aaaaaa;
	font-style: italic;
}

.post-editorial__content blockquote p:last-child {
	margin-bottom: 0;
}

/* Images inside article — auto-styled */

.post-editorial__content img {
	border-radius: var(--radius-md);
	border: 1px solid rgba(255, 255, 255, 0.1);
	box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
	margin: 1.5em 0;
	height: auto;
	max-width: 100%;
	display: block;
}

.post-editorial__content figure {
	margin: 2em 0;
}

.post-editorial__content figure img {
	margin: 0;
}

.post-editorial__content figcaption {
	text-align: center;
	font-size: 0.85rem;
	color: var(--color-text-muted);
	margin-top: var(--space-sm);
}

/* Tables */
.post-editorial__content table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 0.92rem;
}

.post-editorial__content th,
.post-editorial__content td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.post-editorial__content th {
	background: var(--color-bg-card);
	color: #fff;
	font-weight: 600;
}

.post-editorial__content td {
	background: rgba(255, 255, 255, 0.01);
}

/* Code */
.post-editorial__content code {
	background: var(--color-bg-card);
	padding: 0.15em 0.45em;
	border-radius: 4px;
	font-family: 'SF Mono', 'Fira Code', monospace;
	font-size: 0.9em;
	border: 1px solid rgba(255, 255, 255, 0.06);
}

.post-editorial__content pre {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-lg);
	overflow-x: auto;
	margin: 2em 0;
	line-height: 1.6;
}

.post-editorial__content pre code {
	background: none;
	border: none;
	padding: 0;
	font-size: 0.88rem;
}

/* Page Links */
.post-editorial__pages {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-muted);
	font-size: 0.9rem;
}

.post-editorial__pages a {
	color: var(--color-accent);
}

/* --- Tags bar --- */

.post-editorial__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-sm);
	padding-top: var(--space-xl);
	margin-top: var(--space-xl);
	border-top: 1px solid var(--color-border);
}

.post-editorial__tags-label {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.post-editorial__tag {
	display: inline-block;
	padding: 0.25rem 0.7rem;
	border-radius: var(--radius-full);
	border: 1px solid var(--color-border);
	background: rgba(255, 255, 255, 0.03);
	color: var(--color-text-muted);
	font-size: 0.8rem;
	transition: all var(--transition-fast);
}

.post-editorial__tag:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-accent-glow);
}

/* --- Author Box --- */

.post-author-box {
	display: flex;
	align-items: flex-start;
	gap: var(--space-lg);
	padding: var(--space-lg);
	margin-top: var(--space-xl);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.post-author-box__avatar {
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--color-bg-card);
}

.post-author-box__avatar .post-author__img {
	width: 72px;
	height: 72px;
}

.post-author-box__label {
	display: block;
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-xs);
}

.post-author-box__name {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 var(--space-sm);
}

.post-author-box__name a {
	color: #fff;
}

.post-author-box__name a:hover {
	color: var(--color-accent);
}

.post-author-box__bio {
	font-size: 0.9rem;
	line-height: 1.7;
	color: var(--color-text-muted);
	margin: 0;
}

/* ==========================================================================
   22. Post Navigation
   ========================================================================== */

.post-nav {
	border-top: 1px solid var(--color-border);
	padding: var(--space-xl) 0;
}

.post-nav__inner {
	display: flex;
	justify-content: space-between;
	gap: var(--space-lg);
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	max-width: 48%;
	transition: opacity var(--transition-fast);
}

.post-nav__link:hover {
	opacity: 0.8;
}

.post-nav__link--next {
	margin-left: auto;
	text-align: right;
}

.post-nav__label {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-muted);
}

.post-nav__title {
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-text);
	line-height: 1.4;
}

/* ==========================================================================
   23. Related Posts Grid
   ========================================================================== */

.related-section {
	margin-top: var(--space-2xl);
	padding-top: var(--space-2xl);
	border-top: 1px solid var(--color-border);
}

.related-section__title {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-text);
	margin-bottom: var(--space-xl);
	text-align: center;
}

.related-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-lg);
}

.related-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.related-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.related-card__thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--color-bg-elevated);
}

.related-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	border: none !important;
	box-shadow: none !important;
}

.related-card:hover .related-card__img {
	transform: scale(1.06);
}

.related-card__placeholder {
	width: 100%;
	height: 100%;
	background: var(--color-bg-elevated);
}

.related-card__body {
	padding: var(--space-md);
}

.related-card__title {
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	margin: var(--space-sm) 0;
}

.related-card__title a {
	color: var(--color-text);
}

.related-card__title a:hover {
	color: var(--color-accent);
}

.related-card__date {
	font-size: 0.78rem;
	color: var(--color-text-muted);
}

/* ==========================================================================
   24. Sticky CTA Button
   ========================================================================== */

.sticky-cta {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 1000;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.4s ease, transform 0.4s ease;
	pointer-events: none;
}

.sticky-cta.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.sticky-cta__btn {
	display: flex;
	align-items: center;
	gap: var(--space-md);
	padding: 0.85rem 1.8rem;
	background: linear-gradient(135deg, var(--color-accent) 0%, #0090b0 100%);
	color: #0a0a0a;
	font-weight: 700;
	font-size: 0.92rem;
	text-decoration: none;
	border-radius: var(--radius-full);
	letter-spacing: 0.03em;
	box-shadow:
		0 4px 18px rgba(0, 212, 255, 0.35),
		0 1px 4px rgba(0, 0, 0, 0.4),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sticky-cta__btn:hover {
	transform: translateY(-2px);
	color: #0a0a0a;
	box-shadow:
		0 8px 30px rgba(0, 212, 255, 0.45),
		0 2px 8px rgba(0, 0, 0, 0.5),
		inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.sticky-cta__btn:active {
	transform: translateY(0);
}

.sticky-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
}

.sticky-cta__icon svg {
	width: 18px;
	height: 18px;
}

.sticky-cta__text {
	line-height: 1.2;
}

.sticky-cta__subtext {
	font-size: 0.6rem;
	font-weight: 500;
	opacity: 0.75;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sticky-cta__close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	color: var(--color-text-muted);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.sticky-cta__close:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--color-text);
}

/* Glow pulse animation on the CTA button */
@keyframes cta-pulse {
	0%, 100% { box-shadow: 0 4px 18px rgba(0, 212, 255, 0.35), 0 1px 4px rgba(0, 0, 0, 0.4); }
	50%      { box-shadow: 0 4px 28px rgba(0, 212, 255, 0.55), 0 1px 4px rgba(0, 0, 0, 0.4); }
}

.sticky-cta.is-visible .sticky-cta__btn {
	animation: cta-pulse 2.8s ease-in-out infinite;
}

/* ==========================================================================
   25. Responsive — Blog & Single Post
   ========================================================================== */

@media (max-width: 1024px) {

	/* Blog hero goes single column */
	.blog-hero {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}

	/* Related grid 2 cols */
	.related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {

	/* Blog grid single column */
	.blog-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.blog-card__body {
		padding: var(--space-md) var(--space-md) var(--space-lg);
	}

	/* Single post adjustments */
	.post-editorial {
		padding: 0 var(--space-md) var(--space-xl);
	}

	.post-editorial__title {
		font-size: clamp(1.6rem, 8vw, 2.2rem);
	}

	.post-editorial__content {
		font-size: 1rem;
	}

	.post-hero__inner {
		aspect-ratio: 16 / 9;
		max-height: 360px;
	}

	/* Author box stacks */
	.post-author-box {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	/* Related grid single col on mobile */
	.related-grid {
		grid-template-columns: 1fr;
	}

	/* Sticky CTA */
	.sticky-cta {
		bottom: 16px;
		right: 16px;
		left: 16px;
		justify-content: center;
	}

	.sticky-cta__btn {
		flex: 1;
		max-width: 360px;
		justify-content: center;
	}
}

@media (max-width: 480px) {

	.post-editorial__title {
		font-size: 1.5rem;
	}

	.post-editorial__excerpt {
		font-size: 1rem;
	}

	.post-editorial__content {
		font-size: 0.97rem;
		line-height: 1.75;
	}

	.post-editorial__content h2 {
		font-size: 1.3rem;
	}

	.post-editorial__content h3 {
		font-size: 1.15rem;
	}

	.post-editorial__author {
		flex-wrap: wrap;
	}

	/* CTA compact */
	.sticky-cta__btn {
		padding: 0.7rem 1.2rem;
		font-size: 0.85rem;
	}

	.sticky-cta__close {
		width: 24px;
		height: 24px;
	}
}

/* ==========================================================================
   26. Store Page — Layout, Sidebar, Grid
   ========================================================================== */

/* --- Store Hero --- */

.store-hero {
	padding: var(--space-2xl) 0 var(--space-lg);
	text-align: center;
}

.store-hero__title {
	font-size: clamp(2rem, 6vw, 3rem);
	font-weight: 800;
	color: #fff;
	margin-bottom: var(--space-xs);
	letter-spacing: -0.02em;
}

.store-hero__subtitle {
	color: var(--color-text-muted);
	font-size: 1rem;
}

/* --- Store Main Layout: flex 25% / 75% with 30px gap --- */

.store {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
	display: flex;
	align-items: flex-start;
	gap: 30px;
	padding-bottom: var(--space-2xl);
}

/* --- Sidebar --- */

.store-sidebar {
	flex-shrink: 0;
	width: 25%;
	position: sticky;
	top: calc( var( --header-height ) + var(--space-lg) );
}

/* Strong override for WooCommerce compatibility - Sidebar */
.woocommerce .store-sidebar,
body.woocommerce .store-sidebar {
	flex: 0 0 25% !important;
	width: 25% !important;
	max-width: 25% !important;
}

.store-sidebar__toggle {
	display: none;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: 0.85rem var(--space-md);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text-muted);
	font-size: 0.9rem;
	font-weight: 600;
	margin-bottom: var(--space-md);
	transition: background var(--transition-fast), color var(--transition-fast);
}

.store-sidebar__toggle:hover {
	background: var(--color-bg-card);
	color: var(--color-text);
}

.store-sidebar__active-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-accent);
	color: var(--color-bg);
	font-size: 0.6rem;
	font-weight: 700;
	margin-left: var(--space-xs);
}

.store-sidebar__panel {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* --- Filter Group --- */

.store-filter-group {
	margin-bottom: 0;
}

.store-filter-group__title {
	font-size: 0.78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-md);
}

.store-filter-group__items {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.store-filter-group__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

/* --- Filter Pill / Block Buttons --- */

.store-pill {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	width: 100%;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-sm);
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.07);
	color: #999999;
	font-size: 0.82rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none !important;
	transition: all var(--transition-fast);
}

.store-pill:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255,255,255,0.15);
	color: var(--color-text);
}

.store-pill--active,
.store-pill--active:hover {
	background: var(--color-accent-glow);
	border-color: var(--color-accent);
	color: var(--color-accent);
	box-shadow: 0 0 14px var(--color-accent-glow);
}

.store-pill--clear {
	font-weight: 700;
	margin-bottom: var(--space-sm);
	border-color: rgba(255, 255, 255, 0.12);
}

.store-pill__count {
	margin-left: auto;
	font-size: 0.65rem;
	font-weight: 600;
	padding: 0.05rem 0.45rem;
	border-radius: var(--radius-full);
	background: rgba(255, 255, 255, 0.06);
}

.store-pill--active .store-pill__count {
	background: rgba(0, 212, 255, 0.2);
}

/* Compatibility badges */

.store-compat-badge {
	display: inline-block;
	padding: 0.35rem 0.7rem;
	border-radius: var(--radius-sm);
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.07);
	font-size: 0.75rem;
	font-weight: 600;
	color: #999999;
}

/* --- Product Grid Wrapper --- */

.store-grid-wrap {
	flex: 1;
	min-width: 0;
	width: 100%;
}
.store-grid {
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   27. Store Grid — 4 Columns + Responsive
   ========================================================================== */

.store-grid {
	display: grid;
	grid-template-columns: repeat( 4, 1fr );
	gap: 20px;
	width: 100%;
	padding: 0;
	margin: 0;
}

/* ==========================================================================
   28. Store Card — Mockup Switcher (z-index layering)
   ==========================================================================
   #store-card__device  (position: relative, aspect-ratio: 4/5)
   │
   ├─ .store-card__bg        z-index: 1   (gradient background)
   ├─ .store-card__wf         z-index: 5   (watch face image — below bezel)
   ├─ .store-card__bezel      z-index: 10  (bezel images — ON TOP, acts as mask)
   └─ .store-card__dots       z-index: 20  (floating dot selector)
   ================================================================ */

.store-card {
	background: var(--color-bg-card);
	border-radius: var(--radius-lg);
	overflow: hidden;
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 500ms ease, transform 500ms ease, box-shadow 300ms ease;
}

/* Ensure initial cards are visible (for server-rendered HTML) */
.store-grid .store-card,
.store-card.visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}


.store-card:hover {
	box-shadow: 0 12px 44px rgba(0,0,0,0.45), 0 0 32px rgba(0,212,255,0.07);
}

/* --- Device mockup area --- */

.store-card {
	overflow: hidden; /* outer card clips everything */
}

.store-card__device {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: visible; /* allow slight face overhang */
	display: block;
	background: var(--color-bg);
}

/* Background gradient: z-index 1 */
.store-card__bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(135deg, rgba(10,10,20,0.70), rgba(5,15,30,0.50));
}

/* Watch Face: z-index 5, centered */

.store-card__wf {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 71.5%; /* Hạ từ 74% xuống 71.5% để lọt khít vỏ S4U */
	aspect-ratio: 1 / 1;
	z-index: 5;
	border-radius: 50%;
	overflow: hidden;
	background: none;
	transform: translate(-50%, -50%); /* KÉO ẢNH ĐANG LỆCH VỀ CHÍNH GIỮA TÂM */
}
.store-card__wf a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

.store-card__wf img, .store-card__face-img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background: none;
	transform: translate(-50%, -50%);
}

/* HOVER: entire mockup area lifts — smooth premium easing */
.store-card__device {
	transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.store-card:hover .store-card__device {
	transform: translateY(-8px);
}

/* Bezel overlays: z-index 10 — sits ON TOP of watch face */

.store-card__bezel {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.store-card__bezel-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 200ms ease;
}

.store-card__bezel-img.is-active {
	opacity: 1;
}

/* --- Dot selector: z-index 20 (floating, left edge) --- */

.store-card__dots {
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY( -50% );
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 20 !important;
	padding: 6px 4px;
	background: rgba(0, 0, 0, 0.35);
	border-radius: var(--radius-full);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	pointer-events: auto !important;
}

.store-dot {
	position: relative;
	z-index: 20 !important;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
	transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
	pointer-events: auto !important;
}

.store-dot:hover {
	background: rgba(255, 255, 255, 0.25);
	border-color: rgba(255, 255, 255, 0.35);
}

.store-dot.active,
.store-dot--active {
	background: rgba(0, 229, 255, 0.9);
	border-color: rgba(0, 229, 255, 0.9);
	box-shadow: 0 0 6px 1px rgba(0, 229, 255, 0.5);
	transform: scale(1.1);
}

/* --- Info area below mockup --- */

.store-card__info {
	padding: var(--space-md) var(--space-md) var(--space-lg);
	background: var(--color-bg-card);
	text-align: center;
}

.store-card__name {
	font-size: 1rem;
	font-weight: 600;
	margin-bottom: var(--space-sm);
}

.store-card__name a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.store-card__name a:hover {
	color: var(--color-accent);
}

.store-card__labels {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: var(--space-xs);
	margin-bottom: var(--space-sm);
}

/* Labels */

.store-label {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	border-radius: var(--radius-full);
	line-height: 1.5;
}

.store-label--os {
	background: var(--color-accent-glow);
	color: var(--color-accent);
	border: 1px solid rgba(0, 212, 255, 0.25);
}

.store-label--cat {
	background: rgba(255, 255, 255, 0.04);
	color: var(--color-text-muted);
	border: 1px solid var(--color-border);
}

.store-label--new {
	background: #129539;
	color: #fff;
	margin-left: 4px;
}

.store-label--sale {
	background: #ff3d71;
	color: #fff;
	margin-left: 4px;
}

/* Price display */

.store-card__price {
	margin-bottom: var(--space-sm);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--color-text);
}

.store-price {
	display: inline;
}

.store-price--regular {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: line-through;
	margin-right: var(--space-xs);
	font-weight: 400;
}

.store-price--sale {
	color: #ff3d71;
}

/* CTA pill button */

.store-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: var(--space-sm);
	padding: 0.55rem 1.5rem;
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-full);
	color: var(--color-text-muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	background: transparent;
	text-decoration: none !important;
	transition: border-color 200ms ease, color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

.store-card__cta:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
	background: var(--color-accent-glow);
	box-shadow: 0 0 16px var(--color-accent-glow);
}

.store-card__cta svg {
	flex-shrink: 0;
	opacity: 0.7;
	transition: opacity var(--transition-fast);
}

.store-card__cta:hover svg {
	opacity: 1;
}

/* ==========================================================================
   29. Store — Load More & Empty State
   ========================================================================== */

.store-load-more {
	text-align: center;
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.store-load-more__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	padding: 0.95rem 2.8rem;
	border-radius: var(--radius-full);
	background: linear-gradient(135deg, var(--color-accent) 0%, #0090b0 100%);
	color: var(--color-bg);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 18px rgba(0,212,255,0.30), 0 1px 4px rgba(0,0,0,0.4);
	transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.3s ease;
}

.store-load-more__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0,212,255,0.45), 0 2px 8px rgba(0,0,0,0.5);
}

.store-load-more__btn:active {
	transform: translateY(0);
}

.store-load-more__btn.is-loading {
	opacity: 0.8;
	cursor: wait;
}

.store-load-more__btn.is-loading .store-load-more__text {
	opacity: 0.4;
}

.store-load-more__btn.is-loading .store-load-more__spinner {
	display: inline-block;
}

.store-load-more__btn.is-done {
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
	cursor: default;
	color: var(--color-text-muted);
}

.store-load-more__btn.is-done:hover {
	transform: none;
	box-shadow: none;
}

.store-load-more__spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2px solid rgba(0,0,0,0.2);
	border-top-color: var(--color-bg);
	border-radius: 50%;
	animation: ls-spinner 0.6s linear infinite;
}

@keyframes ls-spinner {
	to { transform: rotate(360deg); }
}

.store-load-more__count {
	margin-top: var(--space-md);
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

.store-empty {
	text-align: center;
	padding: var(--space-2xl) 0;
	color: var(--color-text-muted);
}

.store-empty h2 {
	margin-bottom: var(--space-md);
	color: var(--color-text);
}

.store-empty__btn {
	display: inline-block;
	margin-top: var(--space-md);
	padding: 0.6rem 1.4rem;
	border-radius: var(--radius-full);
	background: var(--color-accent);
	color: var(--color-bg);
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background var(--transition-fast);
}

.store-empty__btn:hover {
	background: #33ddff;
	color: var(--color-bg);
}

/* ==========================================================================
   30. Store — Responsive Breakpoints
   ========================================================================== */

@media ( max-width: 1200px ) {
	.store-grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( max-width: 1024px ) {
	.store {
		flex-direction: column;
		padding-left: var(--space-md);
		padding-right: var(--space-md);
	}

	.store-sidebar {
		position: static;
		width: 100%;
	}

	.store-sidebar__toggle {
		display: flex;
	}

	.store-sidebar__panel.is-closed {
		display: none;
	}

	.store-grid {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( max-width: 768px ) {
	.store-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap: 16px;
	}

	.store-card__info {
		padding: var(--space-sm);
	}

	.store-card__name {
		font-size: 0.9rem;
	}

	.store-card__cta {
		padding: 0.45rem 1rem;
		font-size: 0.72rem;
	}

	/* Dot sizing */
	.store-card__dots {
		left: 6px;
		gap: 5px;
		padding: 5px 3px;
		border-radius: var(--radius-sm);
	}

	.store-dot {
		width: 8px;
		height: 8px;
		border-width: 1px;
	}

	/* Labels hidden on small */
	.store-card__labels {
		display: none;
	}
}

@media ( max-width: 480px ) {
	.store-grid {
		grid-template-columns: 1fr;
		gap: var(--space-md);
	}

	.store-card__cta {
		padding: 0.4rem 0.8rem;
		font-size: 0.7rem;
	}

	/* Dots smallest */
	.store-card__dots {
		left: 5px;
		gap: 4px;
		padding: 5px 3px;
	}

	.store-dot {
		width: 8px;
		height: 8px;
	}
}

/* ==========================================================================
   31. Single Product Page — Layout, Mockup, CRO-optimized
   ========================================================================== */

/* ==========================================================================
   31. Single Product Page — Layout, Mockup, CRO-optimized
   ========================================================================== */

/* --- Outer page wrapper: push content right under header --- */

.nsport-product-page {
	padding: 0 0 var(--space-2xl) 0;
	margin-top: 0 !important;
}
.nsport-product-page .site-main,
#main-content, .site-main, .main-content,
.page-content, .content-area, .site-content {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* Kill any breadcrumb, notices banner from old plugins */
.nsport-product-page .woocommerce-notices-wrapper,
.nsport-product-page .woocommerce-breadcrumb,
.nsport-product-page .wc-breadcrumb {
	display: none !important;
}

/* --- 2-column Top Section: Grid (Media column auto, Info column flexible) --- */

.nsproduct__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: stretch;
	width: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--space-lg);
	min-height: 1px; /* Prevent collapse */
}

/* Strong override for WooCommerce compatibility */
.woocommerce .nsproduct__top,
body.woocommerce .nsproduct__top {
	display: grid !important;
	grid-template-columns: minmax(0, 400px) minmax(0, 1fr) !important;
	gap: 40px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: var(--container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--space-lg) !important;
	min-height: 1px !important;
}

/* Strong override for WooCommerce compatibility */
.woocommerce .nsproduct__top,
body.woocommerce .nsproduct__top {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	gap: 40px !important;
	align-items: start !important;
	width: 100% !important;
	max-width: var(--container-max) !important;
	margin: 0 auto !important;
	padding: 0 var(--space-lg) !important;
	min-height: 1px !important;
}

/* Strong override for WooCommerce compatibility - Store Grid */
.woocommerce .store-grid-wrap,
body.woocommerce .store-grid-wrap {
	flex: 1 !important;
	min-width: 0 !important;
}
.woocommerce .store-grid,
body.woocommerce .store-grid {
	display: grid !important;
	grid-template-columns: repeat( 4, 1fr ) !important;
	gap: 20px !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
.woocommerce .store,
body.woocommerce .store {
	display: flex !important;
	align-items: flex-start !important;
	gap: 30px !important;
}
/* Ensure sidebar does not grow and maintains 25% width */
.woocommerce .store-sidebar,
body.woocommerce .store-sidebar {
	flex: 0 0 25% !important;
	max-width: 25% !important;
}

/* Ensure proper column sizing - critical for WooCommerce compatibility */
.nsproduct__media,
.nsproduct__info {
	min-width: 0 !important;
	width: auto !important;
	/* Remove width: 100% as it conflicts with grid layout */
}

/* Strong override for WooCommerce compatibility - Single Product Columns */
.woocommerce .nsproduct__media,
body.woocommerce .nsproduct__media {
	min-width: 0 !important;
	width: auto !important;
	/* Remove width: 100% as it conflicts with grid layout */
}
.woocommerce .nsproduct__info,
body.woocommerce .nsproduct__info {
	min-width: 0 !important;
	width: auto !important;
	/* Remove width: 100% as it conflicts with grid layout */
}

/* Ensure media column contains absolutely positioned mockup properly */
/* Media column: flex container for mockup + gallery */
.nsproduct__media {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%; /* Fill grid cell */
	max-width: 550px;
	margin: 0 auto;
	min-height: 200px; /* Prevent collapse */
}

/* Right column: info — sticky for scroll */
.nsproduct__info {
	min-width: 0;
	position: sticky;
	top: calc(var(--header-height) + var(--space-lg));
}

/* --- Mockup Switcher Container (Left) --- */

.nsproduct__mockup {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--color-bg);
	transition: transform 0.3s ease;
}
.nsproduct__mockup:hover {
	transform: translateY(-8px);
}

/* --- Gallery Mode: hide bezel/dots, show photo full-bleed --- */
.nsproduct__mockup.is-gallery-mode .nsproduct__bezel,
.nsproduct__mockup.is-gallery-mode .nsproduct__dots {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	aspect-ratio: auto;
	transform: none;
	border-radius: 0;
	overflow: visible;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face-img {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
	border-radius: 12px;
	transform: none;
}

/* z-index layering:
   __mockup-bg   z-index 1
   __face        z-index 5  (below bezel)
   __bezel       z-index 10 (ON TOP, masks outer ring)
   __dots        z-index 20 (floating selector)
*/

.nsproduct__mockup-bg {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(ellipse at 50% 40%, rgba(0,0,30,0.4) 0%, var(--color-bg) 70%);
}
.nsproduct__mockup.is-gallery-mode .nsproduct__mockup-bg {
	background: var(--color-bg);
}
.nsproduct__mockup.is-gallery-mode .nsproduct__bezel {
	display: none;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face-img {
	position: relative;
	width: 100%;
	height: auto;
	border-radius: 12px;
	transform: none;
	top: 0;
	left: 0;
	object-fit: contain;
}

.nsproduct__face {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 71.5%; /* Hạ từ 74% xuống 71.5% */
	aspect-ratio: 1 / 1;
	z-index: 5;
	border-radius: 50%;
	overflow: hidden;
	background: none;
	transform: translate(-50%, -50%); /* KÉO ẢNH VỀ TÂM TUYỆT ĐỐI */
}
.nsproduct__face-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	background: none;
}
/* QUY TẮC HIỂN THỊ ẢNH CHỤP TAY (BUNG FULL KHUNG CHỮ NHẬT) */
.nsproduct__mockup.is-gallery-mode .nsproduct__face {
	width: 100%;
	height: auto;
	border-radius: 16px; /* Bo góc ảnh tự nhiên */
	transform: none;
	top: 0;
	left: 0;
	position: relative;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face-img {
	object-fit: contain;
	border-radius: 16px;
}
.nsproduct__bezel {
	position: absolute;
	inset: 0;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none !important;
}

/* Ensure bezel frames don't block clicks on dots */
.nsproduct__bezel-frame {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 250ms ease;
	pointer-events: none !important;
}
.nsproduct__bezel-frame {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity 250ms ease;
}
.nsproduct__bezel-frame.is-active {
	opacity: 1;
}

/* Dot selector — vertical column left edge */
.nsproduct__dots {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 9px;
	z-index: 20 !important;
	padding: 10px 6px;
	background: rgba(0,0,0,0.4);
	border-radius: var(--radius-full);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	pointer-events: auto !important;
}
.nsproduct-dot {
	position: relative;
	z-index: 20 !important;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	border: 2px solid transparent;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, transform 180ms ease;
	pointer-events: auto !important;
}
.nsproduct-dot:hover {
	background: rgba(255,255,255,0.35);
}
.nsproduct-dot--active {
	background: var(--color-accent);
	border-color: var(--color-accent);
	box-shadow: 0 0 8px var(--color-accent-glow);
	transform: scale(1.08);
}

/* Ensure dots are always clickable even in gallery mode */
.nsproduct__mockup.is-gallery-mode .nsproduct__dots {
	pointer-events: auto !important;
	opacity: 1 !important;
}

/* --- Gallery Thumbnails row --- */

.nsproduct__gallery-thumbs {
	display: flex;
	display: flex;
	gap: 10px;
	align-items: center;
	padding: 10px 0;
	margin-top: 20px;
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.nsproduct__gallery-thumbs::-webkit-scrollbar {
	height: 4px;
	background: transparent;
}
.nsproduct__gallery-thumbs::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.12);
	border-radius: 2px;
}

.nsproduct__gallery-thumb {
	flex-shrink: 0;
	width: 75px;
	min-width: 75px;
	height: 75px;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.2);
	background: var(--color-bg);
	cursor: pointer;
	transition: border-color 0.25s ease, opacity 0.25s ease;
	padding: 0;
	opacity: 0.55;
	outline: none !important;
	box-shadow: none !important;
}
.nsproduct__gallery-thumb:focus {
	outline: none !important;
	box-shadow: none !important;
}
.nsproduct__gallery-thumb.is-active,
.nsproduct__gallery-thumb:hover {
	opacity: 1;
	border-color: #00e5ff;
}
.nsproduct__gallery-thumb-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* ==========================================================================
   32. Single Product — Right Column (Info & CRO)
   ========================================================================== */

/* Title H1 — hardcoded, no WC hook duplication */
h1.nsproduct-title {
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	font-weight: 800;
	color: #ffffff;
	line-height: 1.2;
	margin-bottom: var(--space-md);
	letter-spacing: -0.015em;
}
/* Suppress any WC title output from hooks */
.nsproduct__info h1.product_title,
.nsproduct__info h2.product_title {
	display: none !important;
}

/* Rating */
.nsproduct__rating {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-md);
}
.nsproduct__stars .star-rating {
	font-size: 16px !important;
	color: #ffc107;
}
.nsproduct__rating .star-rating,
.nsproduct__rating .woocommerce-review-link {
	font-size: 0.82rem;
	color: var(--color-text-muted);
}
.nsproduct__rating-count {
	font-size: 0.82rem;
	color: var(--color-text-muted);
}

/* Price */
.nsproduct__price {
	display: flex;
	align-items: baseline;
	gap: var(--space-sm);
	margin-bottom: var(--space-lg);
	font-size: 1.6rem;
	font-weight: 800;
}
.nsproduct__price-current {
	color: var(--color-accent);
}
.nsproduct__price-current--sale {
	color: var(--color-accent);
}
.nsproduct__price-regular {
	font-size: 1.1rem;
	font-weight: 500;
	color: var(--color-text-muted);
	text-decoration: line-through;
}
.nsproduct__sale-badge {
	display: inline-block;
	padding: 0.2rem 0.65rem;
	background: #ff3d71;
	color: #fff;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border-radius: var(--radius-full);
}

/* Short description */
.nsproduct__short-desc {
	color: #aaaaaa;
	font-size: 0.95rem;
	line-height: 1.65;
	margin-bottom: var(--space-lg);
}

/* --- CTA Button — Full width, gradient, glow, BLACK TEXT (high contrast) --- */

.nsproduct__cta {
	margin-bottom: var(--space-lg);
}
.nsproduct__cta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-md);
	width: 100%;
	padding: 1.1rem 2rem;
	background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 40%, #80deea 100%);
	color: #000000 !important;
	text-shadow: none !important;
	border-radius: var(--radius-md);
	font-size: 1.05rem;
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none !important;
	border: none;
	box-shadow:
		0 6px 24px rgba(0, 212, 255, 0.30),
		0 2px 6px rgba(0,0,0,0.35);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.nsproduct__cta-btn,
.nsproduct__cta-btn span,
.nsproduct__cta-btn .nsproduct__cta-text,
.nsproduct__cta-btn .nsproduct__cta-sub {
	color: #000000 !important;
	text-shadow: none !important;
}
.nsproduct__cta-btn:hover {
	transform: translateY(-3px);
	background: linear-gradient(135deg, #ffffff 0%, #b2ebf2 40%, #4dd0e1 100%);
	box-shadow:
		0 10px 36px rgba(0, 212, 255, 0.50),
		0 3px 10px rgba(0,0,0,0.4);
}
.nsproduct__cta-btn:active {
	transform: translateY(0);
}
.nsproduct__cta-icon {
	display: flex;
	align-items: center;
}
.nsproduct__cta-icon svg {
	fill: #000000 !important;
}
.nsproduct__cta-text {
	line-height: 1.3;
}
.nsproduct__cta-sub {
	font-size: 0.62rem;
	font-weight: 600;
	opacity: 0.7;
	letter-spacing: 0.08em;
}

/* WC add-to-cart fallback (hidden — our CTA takes priority) */
.nsproduct__add-to-cart-fallback {
	display: none;
}

/* CTA pulse glow */
@keyframes nsproduct-cta-glow {
	0%, 100% { box-shadow: 0 6px 24px rgba(0,212,255,0.30), 0 2px 6px rgba(0,0,0,0.35); }
	50%      { box-shadow: 0 6px 32px rgba(0,212,255,0.50), 0 2px 6px rgba(0,0,0,0.35); }
}
.nsproduct__cta-btn {
	animation: nsproduct-cta-glow 3s ease-in-out infinite;
}

/* --- Badges (Categories & Tags) --- */

.nsproduct__meta-badges {
	border-top: 1px solid var(--color-border);
	padding-top: var(--space-lg);
}
.nsproduct__badge-group {
	margin-bottom: var(--space-md);
}
.nsproduct__badge-label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
	margin-bottom: var(--space-sm);
}
.nsproduct__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.nsproduct__badge {
	display: inline-block;
	padding: 0.3rem 0.75rem;
	background: #1a1a1a;
	border: 1px solid rgba(255,255,255,0.07);
	border-radius: var(--radius-full);
	color: #999;
	font-size: 0.78rem;
	font-weight: 500;
	text-decoration: none !important;
	transition: all var(--transition-fast);
}
.nsproduct__badge:hover {
	border-color: var(--color-border-hover);
	color: var(--color-text);
	background: rgba(255,255,255,0.06);
}
.nsproduct__badge--tag {
	font-size: 0.72rem;
}

/* ==========================================================================
   33. Single Product — Bottom (Description)
   ========================================================================== */

.nsproduct__bottom {
	max-width: 800px;
	margin: var(--space-2xl) auto 0;
	padding: 0 var(--space-lg);
}

.nsproduct__desc-title {
	font-size: 1.4rem;
	font-weight: 700;
	color: #fff;
	margin-bottom: var(--space-lg);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* ===== KEY FIX: Description Typography ===== */

.nsproduct__desc-content {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	font-size: 16px;
	line-height: 1.8;
	color: #cccccc;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Nuclear reset: force all inner elements to inhatever inherited values */
.nsproduct__desc-content *,
.nsproduct__desc-content p,
.nsproduct__desc-content li,
.nsproduct__desc-content span,
.nsproduct__desc-content div,
.nsproduct__desc-content td,
.nsproduct__desc-content th {
	font-family: inherit !important;
	font-size: inherit !important;
	line-height: inherit !important;
	color: inherit !important;
	white-space: normal !important;
	background: transparent !important;
	border: none !important;
	text-align: left !important;
}

.nsproduct__desc-content p {
	margin-bottom: 24px;
	line-height: 1.8;
	color: #cccccc;
}

.nsproduct__desc-content h2 {
	font-size: 1.4rem;
	font-weight: 700;
	font-style: normal;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 40px;
	margin-bottom: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.nsproduct__desc-content h3 {
	font-size: 1.15rem;
	font-weight: 700;
	font-style: normal;
	color: #ffffff;
	text-transform: uppercase;
	margin-top: 40px;
	margin-bottom: 16px;
}
.nsproduct__desc-content h4 {
	font-size: 1rem;
	font-weight: 700;
	font-style: normal;
	color: #e0e0e0;
	text-transform: uppercase;
	margin-top: 40px;
	margin-bottom: 16px;
}

.nsproduct__desc-content strong {
	color: #ffffff;
	font-weight: 700;
}

.nsproduct__desc-content a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: rgba(0,212,255,0.4);
}
.nsproduct__desc-content a:hover {
	text-decoration-color: var(--color-accent);
}

.nsproduct__desc-content ul,
.nsproduct__desc-content ol {
	margin-bottom: 24px;
	padding-left: 20px;
}
.nsproduct__desc-content ul { list-style: disc; }
.nsproduct__desc-content ol { list-style: decimal; }
.nsproduct__desc-content li {
	margin-bottom: 12px;
	padding-left: 0;
	line-height: 1.7;
}
.nsproduct__desc-content li::marker {
	color: var(--color-accent);
}

.nsproduct__desc-content blockquote {
	border-left: 3px solid var(--color-accent);
	padding: var(--space-md) var(--space-lg);
	margin: 2em 0;
	background: rgba(0,212,255,0.03);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	color: #aaaaaa;
	font-style: italic;
}

.nsproduct__desc-content img {
	border-radius: var(--radius-md);
	border: 1px solid rgba(255,255,255,0.1);
	box-shadow: 0 6px 30px rgba(0,0,0,0.3);
	margin: 1.5em 0;
	height: auto;
	max-width: 100%;
}

/* Attributes table */
.nsproduct__attr-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--space-lg);
	font-size: 0.9rem;
}
.nsproduct__attr-table th,
.nsproduct__attr-table td {
	padding: var(--space-sm) var(--space-md);
	border: 1px solid rgba(255,255,255,0.08);
	text-align: left;
}
.nsproduct__attr-table th {
	background: var(--color-bg-card);
	color: #fff;
	font-weight: 600;
	width: 30%;
}
.nsproduct__attr-table td {
	background: rgba(255,255,255,0.01);
	color: #cccccc;
}

/* Hide WC default breadcrumbs, tabs, notices that break layout */
.nsport-product-page .woocommerce-breadcrumb,
.nsport-product-page .woocommerce-tabs,
.nsport-product-page .related.products {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	padding-left: var(--space-lg);
	padding-right: var(--space-lg);
}
.nsport-product-page .woocommerce-breadcrumb {
	font-size: 0.82rem;
	color: var(--color-text-muted);
	margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Responsive — Single Product Page
   ========================================================================== */

@media (max-width: 1200px) {
	.nsproduct__media {
		max-width: 100%;
	}
}

@media (max-width: 1024px) {
	.nsproduct__top {
		grid-template-columns: 1fr;
		gap: var(--space-lg);
	}
	.nsproduct__media {
		max-width: 100%;
	}
	.nsproduct__info {
		position: static;
	}
	.nsproduct__mockup {
		max-width: 420px;
		margin: 0 auto;
	}
}

@media (max-width: 768px) {
	.nsproduct__top {
		padding: 0 var(--space-md);
		gap: var(--space-md);
	}
	.nsproduct__mockup {
		max-width: 320px;
	}
	.nsproduct__cta-btn {
		padding: 0.95rem 1.5rem;
		font-size: 0.92rem;
	}
	.nsproduct__bottom {
		padding: 0 var(--space-md);
	}
	.nsproduct__dots {
		left: 8px;
		gap: 6px;
		padding: 7px 4px;
	}
	.nsproduct-dot {
		width: 12px;
		height: 12px;
	}
	.nsproduct__gallery-thumb {
		width: 60px;
		height: 60px;
	}
}

@media (max-width: 480px) {
	.nsproduct__mockup {
		max-width: 260px;
	}
	h1.nsproduct-title {
		font-size: 1.5rem;
	}
	.nsproduct__price {
		font-size: 1.3rem;
	}
	.nsproduct__cta-btn {
		padding: 0.85rem 1.2rem;
		font-size: 0.85rem;
		letter-spacing: 0.04em;
	}
	.nsproduct__dots {
		left: 6px;
		gap: 5px;
		padding: 6px 3px;
	}
	.nsproduct-dot {
		width: 10px;
		height: 10px;
	}
}


/* ========================================================
   CĂN TÂM TUYỆT ĐỐI & CHỐNG TRÀN VỎ (ALL PAGES)
   ======================================================== */
.nsproduct__face, .store-card__wf, .product-card__face, .blog-hero__face {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Lệnh này kéo ảnh đang lệch góc phải về đúng chính giữa tâm */
    width: 71.5% !important; /* Hạ từ 74% xuống 71.5% để lọt khít rịt vỏ S4U */
    height: 71.5% !important;
    border-radius: 50% !important;
    z-index: 5 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.nsproduct__face img, .store-card__face-img, .product-card__face-img, .blog-hero__face img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* ĐỊNH VỊ VỎ MOCKUP (BEZEL) - NẰM TRÊN CÙNG */
.nsproduct__bezel-frame, .store-card__bezel, .product-card__template, .blog-hero__bezel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: none !important;
    opacity: 0 !important; /* Ẩn đi chờ active */
    transition: opacity 0.3s ease !important;
}
.nsproduct__bezel-frame img, .store-card__bezel img, .product-card__template img, .blog-hero__bezel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}
.nsproduct__bezel-frame.is-active, .store-card__bezel.is-active, .product-card__template.is-active {
    opacity: 1 !important; /* Chỉ vỏ nào được click mới hiện */
}

/* CHẾ ĐỘ XEM ẢNH THỰC TẾ TRANG SINGLE (GALLERY MODE) */
.nsproduct__mockup.is-gallery-mode .nsproduct__mockup-bg,
.nsproduct__mockup.is-gallery-mode .nsproduct__bezel-frame {
    display: none !important; /* Dấu nhẹm vỏ và nền tròn xám đi */
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face {
    position: relative !important;
    top: 0 !important; left: 0 !important;
    transform: none !important;
    width: 100% !important; /* Bung full kích thước khung */
    height: auto !important;
    border-radius: 16px !important; /* Trả về chữ nhật bo góc tự nhiên */
    aspect-ratio: auto !important;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face img {
    object-fit: contain !important;
    border-radius: 16px !important;
}

/* ========================================================
   1. CỨU SỐNG TRANG CHỦ (CHỐNG BLACKOUT)
   ======================================================== */
.product-card, .store-card, .blog-card {
    opacity: 1 !important;
    transform: none !important;
}



/* ========================================================
//* ========================================================
/* ========================================================
   CĂN TÂM TUYỆT ĐỐI BẰNG FLEXBOX (CHỐNG LỆCH 100%) TRANG CHU
   ======================================================== */
/* 1. Khung ngoài: Phủ kín 100% vỏ thiết bị */
.product-card__wf {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
}

/* 2. Thẻ Link: Bật Flexbox để tạo "Lực hút từ tính" vào giữa tâm */
.product-card__wf a {
    display: flex !important;
    align-items: center !important; /* Hút vào giữa theo chiều dọc */
    justify-content: center !important; /* Hút vào giữa theo chiều ngang */
    width: 100% !important;
    height: 100% !important;
}

/* 3. Ảnh lõi: Nằm im ở rốn, chỉ việc thay đổi độ to nhỏ */
.product-card__wf img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important; /* Bỏ transform gây lỗi đi */
    width: 41% !important; /* SẾP CHỈNH TĂNG/GIẢM % Ở ĐÂY CHO KHÍT */
    height: auto !important;
    aspect-ratio: 1/1 !important; /* Giữ tròn xoe */
    object-fit: cover !important;
    border-radius: 50% !important;
    margin: 0 !important;
	margin-top: -12% !important;
	margin-left: -9% !important;
}




/* ========================================================
   FIX MOCKUP TRANG SINGLE (PRODUCT PAGE)
   ======================================================== */
/* 1. Khung bọc ngoài */
.nsproduct__mockup {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important; /* Size hiển thị to rõ */
    margin: 0 auto !important;
    aspect-ratio: 1/1 !important;
    background: #242424 !important; /* Nền xám S4U */
    border-radius: 40px !important;
}

/* 2. Vỏ Bezel kim loại */
.nsproduct__bezel {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    z-index: 10 !important;
    pointer-events: none !important;
}
.nsproduct__bezel-frame {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    object-fit: contain !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}
.nsproduct__bezel-frame.is-active { opacity: 1 !important; }

/* 3. Ảnh lõi: Căn giữa tuyệt đối và Ép tròn */
.nsproduct__face {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important; /* Khóa rốn ảnh vào giữa */
    width: 38% !important; /* SẾP CÓ THỂ ĐIỀU CHỈNH % NÀY CHO KHÍT VỎ */
    height: auto !important;
    aspect-ratio: 1/1 !important; /* Tròn xoe */
    z-index: 5 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
}
.nsproduct__face-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

/* 4. CHẾ ĐỘ XEM ẢNH THỰC TẾ (KHI BẤM THUMBNAIL) */
.nsproduct__mockup.is-gallery-mode { background: transparent !important; }
.nsproduct__mockup.is-gallery-mode .nsproduct__bezel { display: none !important; }
.nsproduct__mockup.is-gallery-mode .nsproduct__face {
    width: 100% !important;
    height: 100% !important;
    border-radius: 20px !important;
}
.nsproduct__mockup.is-gallery-mode .nsproduct__face-img {
    object-fit: contain !important; /* Hiện full ảnh chữ nhật */
    border-radius: 20px !important;
}



/* ========================================================
   ẨN DOTS KHI XEM ẢNH THỰC TẾ & STYLE NÚT NEXT/PREV
   ======================================================== */
/* Ẩn triệt để hàng Dots khi vào Gallery Mode */
.nsproduct__mockup.is-gallery-mode .nsproduct__dots,
.nsproduct__mockup.is-gallery-mode .nsproduct-dot {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Giao diện nút bấm Next/Prev (Trôi nổi ở 2 bên) */
.nsproduct__nav {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: rgba(36, 36, 36, 0.7) !important; /* Xám mờ hợp tone S4U */
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer !important;
    z-index: 50 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    opacity: 0; /* Mặc định tàng hình */
}
/* Chỉ khi chuột lia vào khung ảnh mới hiện nút */
.nsproduct__mockup:hover .nsproduct__nav { opacity: 1; }
.nsproduct__nav:hover { background: #00E5FF !important; color: #000 !important; transform: translateY(-50%) scale(1.1) !important;}
.nsproduct__nav--prev { left: 75px !important; } /* Đẩy sâu vào trong né hàng Dots */
.nsproduct__nav--next { right: 25px !important; }



/* ========================================================
   CHUỐT DÁNG SINGLE PRODUCT (LAYOUT, TYPOGRAPHY, BUTTON)
   ======================================================== */

/* 6. HIỆU ỨNG NÚT GOOGLE PLAY ÊM ÁI */
@keyframes nsportPureGlow {
    0%   { box-shadow: 0 0 5px rgba(0, 229, 255, 0.1); }
    50%  { box-shadow: 0 0 35px rgba(0, 229, 255, 0.8), 0 0 10px rgba(0, 229, 255, 0.4) inset; }
    100% { box-shadow: 0 0 5px rgba(0, 229, 255, 0.1); }
}
.single_add_to_cart_button {
    animation: nsportPureGlow 3s infinite ease-in-out !important;
    transition: background-color 0.3s ease, color 0.3s ease !important; 
    transform: none !important; 
    border-radius: 8px !important;
}
/* ========================================================
   HOÀN THIỆN STYLE: KHUNG GIÁ S4U & CĂN CHỮ
   ======================================================== */
/* ========================================================
   GỌT GIŨA BẢN CUỐI: CÂN ĐỈNH CỘT, ÉP TIÊU ĐỀ & BO KHUNG GIÁ
   ======================================================== */

/* 1. ÉP CỘT ẢNH LÊN BẰNG ĐỈNH VỚI CỘT CHỮ (Chống tụt giữa) */
.nsport-product-page .nsproduct__top {
    align-items: flex-start !important; 
}
.nsport-product-page .nsproduct__mockup {
    justify-content: flex-start !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}

/* 2. ÉP TIÊU ĐỀ CĂN TRÁI (Chống kéo giãn lởm chởm) */
.nsport-product-page h1.nsproduct-title {
    text-align: left !important;
    text-align-last: left !important;
    word-spacing: normal !important;
    letter-spacing: normal !important;
}

/* 3. TẠO KHUNG GIÁ BO GỌN GÀNG (Màu Cyan Luxury) */
.nsport-product-page .nsproduct__price {
    display: inline-block !important;
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    padding: 8px 25px !important;
    border-radius: 12px !important;
    width: fit-content !important;
    width: -moz-fit-content !important; /* Hỗ trợ Firefox */
    margin-bottom: 25px !important;
}

/* Làm nổi bật số tiền bên trong khung */
.nsport-product-page .nsproduct__price * {
    color: #00E5FF !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
}



/* ========================================================
   CỨU LỖI ẢNH GALLERY CHỮ NHẬT BỊ TRÀN ĐÈ LÊN THUMBNAILS
   ======================================================== */

/* 1. Xóa bỏ ép khung vuông khi xem ảnh thật */
.nsproduct__media .nsproduct__mockup.is-gallery-mode {
    aspect-ratio: auto !important; 
    height: auto !important;
    padding-bottom: 0 !important;
}

/* 2. Ép ảnh thật trở lại bình thường (đẩy Thumbnails xuống dưới) */
.nsproduct__media .nsproduct__mockup.is-gallery-mode img:not([src*="template"]) {
    position: relative !important; /* Xóa absolute để ảnh chiếm lại không gian thật */
    inset: auto !important;        /* Hủy lệnh inset của Claude cho ảnh này */
    width: 100% !important; 
    height: auto !important; 
    max-width: 100% !important; 
    max-height: none !important;   /* Xóa giới hạn 74% của Claude */
    margin: 0 auto !important; 
    border-radius: 12px !important; 
    object-fit: contain !important; 
    display: block !important;
}

/* 3. Đảm bảo Thumbnails không bị đè */
.nsproduct__media .nsproduct__gallery-thumbs {
    position: relative !important;
    z-index: 10 !important;
}






/* ====================================================================
/* ====================================================================
   🔥 BẢN FIX KHÓA TÂM TRANG CHỦ THEO KÍCH THƯỚC MOCKUP MỚI (UPDATE 2)
   (Thu nhỏ Dots & Dịch chuyển trọng tâm sang phải để cân bằng thị giác)
   ==================================================================== */

/* 1. Khung chứa Mockup */
.product-card__templates {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important; 
}

/* 2. Viền Mockup (Bezel) - Dịch sang phải 12px để nhường chỗ cho Dots */
.product-card__template {
    position: absolute !important;
    top: 0 !important;
    left: 12px !important; /* ⬅️ Đẩy toàn bộ vỏ sang phải 12px */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 !important;
}

/* 3. Cố định vùng chứa mặt kính đồng hồ */
.product-card__wf {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important; 
}

.product-card__wf a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
}

/* 4. Ảnh lõi: Khóa 54% + Tọa độ F12 + Dịch 12px đuổi theo Vỏ Bezel */
.product-card__wf img {
    position: absolute !important;
    width: 51% !important; 
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    
    top: 50% !important;  
    /* Giữ nguyên cữ 52% của Sếp, cộng thêm 12px dịch phải để lọt khít viền */
    left: calc(48% + 12px) !important; 
    transform: translate(-50%, -50%) !important;
    
    margin: 0 !important;
    padding: 0 !important;
}

/* ====================================================================
   5. THU GỌN HỆ THỐNG DOTS (DẤU CHẤM)
   ==================================================================== */
.product-card__dots {
    left: 8px !important; /* Ép sát lề trái hơn để nhường không gian */
    padding: 6px 4px !important; /* Bóp nhỏ nền mờ bao quanh */
    gap: 6px !important; /* Rút ngắn khoảng cách giữa các chấm */
    z-index: 20 !important;
}

/* Ép size các chấm tròn nhỏ nhắn, sang trọng hơn */
.product-card__dots .dot {
    width: 10px !important;  /* Đường kính cũ 14px -> Giảm còn 10px */
    height: 10px !important;
    border-width: 1.5px !important; /* Bo viền mỏng gọn gàng */
}







/* ====================================================================
/* ====================================================================
   12. FIX ĐỒNG BỘ TRANG STORE (GIẢI BÙA CHÚ BAY GÓC TRÁI & GỌI HỒN BEZEL)
   ==================================================================== */

/* --- A. ĐỒNG BỘ MOCKUP GIỐNG TRANG CHỦ & FIX LỖI --- */

/* 1. Khóa cứng khung bọc ngoài cùng */
.store-card__device {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1/1 !important; 
    display: block !important;
}

/* 2. Vỏ kim loại Bezel (🔥 GỌI HỒN KHUNG VỎ BỊ TÀNG HÌNH) */
.store-card__bezel {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important;
    pointer-events: none !important; 
    
    /* Chìa khóa phá vỡ bùa chú opacity: 0 cũ ở dòng 1281 */
    opacity: 1 !important; 
    display: block !important;
}

.store-card__bezel-img {
    position: absolute !important;
    top: 0 !important;
    left: 12px !important; /* Dịch phải 12px nhường chỗ cho Dots */
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transform: none !important;
    margin: 0 !important;
    pointer-events: none !important; 
    
    /* Ẩn tất cả vỏ đi, chỉ vỏ nào được click mới hiện lên */
    opacity: 0 !important; 
    transition: opacity 0.3s ease !important;
}

/* 🎯 Cứu cánh: Chỉ vỏ nào đang active mới được hiện ra */
.store-card__bezel-img.is-active,
.store-card__bezel-img.active {
    opacity: 1 !important;
}

/* 3. Vùng chứa ảnh lõi (🔥 GIẢI BÙA CHÚ BỊ BAY LÊN GÓC TRÁI) */
.store-card__wf {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 5 !important;
    transform: none !important; /* Cắt đứt lệnh translate âm 50% cũ */
    border-radius: 0 !important; 
    overflow: visible !important;
}

/* Tước quyền thẻ A để ảnh bên trong nhận đúng kích thước toàn khung */
.store-card__wf a {
    display: block !important;
    position: static !important; 
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 4. Bóp nhỏ ảnh lõi cho lọt khít lòng Bezel trang Store */
.store-card__wf img, 
.store-card__face-img {
    position: absolute !important;
    width: 40.5% !important; /* 🔥 Hạ từ 54% xuống 51.5% */
    height: auto !important;
    aspect-ratio: 1/1 !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    
    top: 50% !important;  
    left: calc(48% + 12px) !important; /* Đẩy bù trừ theo khung */
    transform: translate(-50%, -50%) !important; 
    
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. Cứu thanh Dots: Nổi lên Z-index 9999, đâm thủng mọi lớp kính */
.store-card__dots {
    position: absolute !important;
    top: 50% !important;
    left: 8px !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 6px 4px !important;
    gap: 6px !important;
    z-index: 9999 !important; /* Tăng kịch kim */
    pointer-events: auto !important;
}
.store-dot {
    width: 10px !important;
    height: 10px !important;
    border-width: 1.5px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 10000 !important;
}

/* --- B. ÉP CÁC NÚT "VIEW DETAILS" CÂN BẰNG TĂM TẮP DƯỚI ĐÁY --- */
.store-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    justify-content: space-between !important;
}

.store-card__info {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important; 
    padding-bottom: 25px !important;
}

.store-card__cta {
    margin-top: auto !important; 
    width: fit-content !important;
    align-self: center !important; 
}



/* ====================================================================
/* ====================================================================
/* ====================================================================
   13. FIX TRANG CHỦ: TIÊU ĐỀ NEO ĐỈNH, NHÃN & NÚT NEO ĐÁY (CHỐT KHOẢNG CÁCH)
   ==================================================================== */

.product-card {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; 
}

/* 1. Cột thông tin: Bắt đầu từ trên xuống */
.product-card__info {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    justify-content: flex-start !important;
    padding: 15px 15px 20px 15px !important; 
    flex-grow: 1 !important; 
}

/* 2. Tiêu đề: Luôn nằm sát đỉnh, bằng nhau tăm tắp */
.product-card__name {
    text-align: center !important;
    margin: 0 0 15px 0 !important; 
    width: 100% !important;
}

/* 3. Nhãn Wear OS: Dùng lò xo đẩy tụt xuống đáy */
.product-card__extras {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    margin-top: auto !important; 
    margin-bottom: 15px !important; /* 🔥 Đã nới rộng khoảng cách (cũ là 10px) */
}

/* 4. Đồng bộ Form dáng Nhãn và Nút */
.product-card__extras .label--compat,
.product-card__info .btn--product {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important; 
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important; 
}

.product-card__extras .label--compat {
    font-size: 0.75rem !important;
    padding: 0 15px !important;
    border-radius: 20px !important; 
}

/* 5. Nút Details (Đáy cùng) - Bản độ viền siêu sáng */
.product-card__info .btn--product {
    margin: 0 !important;
    font-size: 0.85rem !important;
    padding: 0 24px !important;
    border-radius: 20px !important;
    
    /* 🔥 TĂNG ĐỘ SÁNG VIỀN NÚT LÊN 60% (Trắng rõ nét) */
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important; 
    color: #ffffff !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
}

/* Hiệu ứng tỏa sáng Neon Cyan khi lia chuột (Hover) */
.product-card__info .btn--product:hover {
    border-color: #00E5FF !important; /* Viền chuyển xanh */
    color: #00E5FF !important; /* Chữ chuyển xanh */
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.4) !important; /* Tỏa hào quang */
}

/* Xử lý nhãn "new" nằm trong nút */
.product-card__info .btn--product .label--new {
    height: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 3px 6px !important;
    margin-left: 6px !important;
    margin-top: 0 !important;
}


/* ====================================================================
   14. GIAO DIỆN TRANG instruction ( Mở - thu gọn nội dung)
.accordion__panel {
    padding: 0 25px 25px 80px !important; 
    color: #cccccc !important;
    display: none !important; /* Tắt chế độ mở mặc định */
}
.accordion.is-open .accordion__panel {
    display: block !important; /* Lệnh này giúp thẻ hiện ra khi có Javascript châm ngòi */
}



/* ====================================================================
   15. GIAO DIỆN TRANG BUY 1 GET 1 (BOGO TEMPLATE)
   ==================================================================== */
.bogo-page {
    padding: 120px 20px 80px 20px !important; /* Né cái Header */
    background-color: var(--color-bg) !important;
    min-height: 80vh !important;
}
.bogo-container {
    max-width: 1100px !important;
    margin: 0 auto !important;
}
.bogo-header {
    text-align: center !important;
    margin-bottom: 50px !important;
}
.bogo-title {
    font-size: 3rem !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}
.bogo-title span {
    color: #00E5FF !important; /* Điểm nhấn Neon */
}
.bogo-subtitle {
    color: #cccccc !important;
    font-size: 1.1rem !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* Lưới chia 2 cột: Trái Steps, Phải Form */
.bogo-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 40px !important;
    align-items: flex-start !important;
}

/* Cột trái: Các bước hướng dẫn */
.bogo-steps {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 40px !important;
    border-radius: 20px !important;
}
.bogo-step {
    display: flex !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
}
.bogo-step:last-child { margin-bottom: 20px !important; }

/* Cục số thứ tự phát sáng */
.bogo-step__number {
    background: #00E5FF !important;
    color: #000000 !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    margin-right: 20px !important;
    flex-shrink: 0 !important;
    box-shadow: 0 0 15px rgba(0, 229, 255, 0.3) !important;
}
.bogo-step__content h3 {
    color: #ffffff !important;
    font-size: 1.3rem !important;
    margin: 0 0 8px 0 !important;
}
.bogo-step__content p {
    color: #aaaaaa !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

/* Ghi chú màu hồng gắt */
.bogo-note {
    margin-top: 30px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    color: #ff3d71 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

/* Cột phải: Khung Form */
.bogo-form-inner h2 {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    margin-bottom: -15px !important; /* Kéo form lên sát tiêu đề */
    text-align: center !important;
}

/* Ép Mobile co thành 1 cột dọc */
@media (max-width: 992px) {
    .bogo-grid {
        grid-template-columns: 1fr !important;
    }
    .bogo-title {
        font-size: 2.2rem !important;
    }
}
/* ====================================================================
   17. CĂN GIỮA TRỤC DỌC 2 CỘT TRANG BUY 1 GET 1 (CHỐT HẠ)
   ==================================================================== */

/* 1. Hủy ép chiều cao bằng nhau, đổi sang treo lơ lửng ở giữa trục dọc */
.bogo-grid {
    align-items: center !important; /* 🔥 Chìa khóa căn giữa 2 khối lệch chiều cao */
}

/* 2. Dùng chung 1 khuôn đúc nhưng để chiều cao tự nhiên ôm sát chữ */
.bogo-steps,
.bogo-form-wrapper {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 40px !important;
    border-radius: 20px !important;
    
    display: flex !important;
    flex-direction: column !important;
    height: auto !important; /* Trả về chiều cao tự nhiên */
    box-sizing: border-box !important;
}

/* 3. Chỉnh lại tiêu đề cột phải cho ngay ngắn */
.bogo-form-inner h2 {
    color: #ffffff !important;
    font-size: 1.8rem !important;
    margin: 0 0 25px 0 !important; 
    text-align: center !important;
}

/* 4. Lột bỏ lớp vỏ thừa của Contact Form 7 (Vì cột phải đã mặc vỏ ngoài cùng rồi) */
.wpcf7 {
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ====================================================================
/* ====================================================================
/* ====================================================================
   OPTIMIZED CONTACT FORM 7 (BẢN CHUẨN XÁC - KHẮC PHỤC MỌI LỖI)
   ==================================================================== */

/* KHUNG CHÍNH */
.wpcf7 {
    background: rgba(255, 255, 255, 0.03) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    max-width: 700px !important;
    margin: 40px auto !important;
    padding: 30px !important; 
}

/* ĐỒNG BỘ KHOẢNG CÁCH GIỮA CÁC HÀNG */
.wpcf7-form p {
    margin: 0 0 25px 0 !important; /* Mọi khối cách đều nhau đúng 35px */
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

/* ====================================================================
   1 & 4. LABEL: DÀI 100% VÀ GIÃN CÁCH XA INPUT
   ==================================================================== */
.wpcf7-form label {
    display: block !important;
    width: 100% !important; /* 🔥 Bắt buộc Label dài bằng Input */
    font-size: 1.05rem !important; 
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

/* 🔥 ĐÂY LÀ CHÌA KHÓA TÁCH RỜI LABEL VÀ INPUT: Đẩy khung bọc Input xuống */
.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important; /* 🔥 Ép khung này cũng phải dài 100% */
    margin-top: 15px !important; /* Ép khoảng cách cách xa Label ra 15px */
}

/* CÁC KHUNG NHẬP LIỆU (Giữ độ dài 100%) */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"] {
    width: 100% !important; /* Dài tuyệt đối 100% */
    padding: 16px 20px !important;
    background: rgba(0,0,0,0.3) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 8px !important; 
    color: #ffffff !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
}

/* NÚT CHỌN FILE */
.wpcf7-form input[type="file"] {
    width: 100% !important;
    padding: 10px 20px !important; 
    background: rgba(0, 229, 255, 0.05) !important;
    border: 1.5px dashed rgba(0, 229, 255, 0.4) !important; 
    border-radius: 8px !important; 
    color: #aaaaaa !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important; /* 🔥 Thêm transition mượt mà */
}

/* 🔥 Hiệu ứng Hover toàn bộ khung */
.wpcf7-form input[type="file"]:hover {
    background: rgba(0, 229, 255, 0.1) !important;
    border-color: #00E5FF !important;
    color: #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2) !important;
}

/* 🔥 Hiệu ứng nút bấm Chọn tệp bên trong (nếu hiển thị) */
.wpcf7-form input[type="file"]::file-selector-button {
    background: #00E5FF !important;
    color: #000000 !important;
    border: none !important;
    padding: 8px 18px !important;
    border-radius: 6px !important;
    margin-right: 15px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.3s ease-in-out !important;
}

.wpcf7-form input[type="file"]::file-selector-button:hover {
    background: #ffffff !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5) !important;
    transform: scale(1.02) !important;
}

/* ====================================================================
   3. CHECKBOX: MÉP TRÁI BẰNG INPUT, LABEL SÁT VÀ CĂN GIỮA
   ==================================================================== */
.wpcf7-form .wpcf7-list-item {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
}
.wpcf7-form .wpcf7-list-item label {
    display: flex !important;
    align-items: center !important; /* 🔥 Căn giữa chiều dọc giữa Ô tích và Chữ */
    justify-content: flex-start !important; /* Ép sát lề trái */
    gap: 12px !important; /* 🔥 Khoảng cách sát lại giữa ô và chữ */
    margin: 0 !important;
    width: 100% !important;
}
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important; /* Giữ ô vuông không bị bóp méo */
    margin: 0 !important;
}
.wpcf7-form .wpcf7-list-item-label {
    font-size: 0.9rem !important; 
    color: #cccccc !important;
    line-height: 1.4 !important;
    text-align: left !important;
}

/* ====================================================================
   NÚT SEND TO GET COUPON
   ==================================================================== */
.wpcf7-form input[type="submit"] {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important; 
    padding: 15px 20px !important; 
    margin: 20px auto !important; /* Căn giữa */
    background: #00E5FF !important;
    color: #000 !important;
    border-radius: 25px !important; 
    font-weight: bold !important;
    font-size: 1.05rem !important;
    text-transform: uppercase !important;
    border: none !important;
}

/* ====================================================================
   2. CLOUDFLARE: CĂN GIỮA, THU NHỎ, HẠ CHIỀU CAO
   ==================================================================== */
.wpcf7-form .wpcf7-cf_turnstile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; 
    margin: 25px auto !important; 
    height: 30px !important; /* 🔥 BẮT BUỘC 2: Ép chiều cao Cloudflare khoảng 50px (tương đương input) */
    overflow: hidden !important; /* Cắt bỏ phần thừa (nếu có) khi ép chiều cao */
}
.wpcf7-form .wpcf7-cf_turnstile > iframe,
.wpcf7-form .wpcf7-cf_turnstile > div {
    transform: scale(0.6) !important; 
    transform-origin: center center !important; 
    margin: 0 auto !important; 
    display: inline-block !important; 
}
/* ====================================================================
   TỐI ƯU HÓA CHO THIẾT BỊ DI ĐỘNG (MOBILE RESPONSIVE)
/* ====================================================================
   TRỊ TẬN GỐC LỖI TRÀN LỀ (OVERFLOW) TRÊN TOÀN TRANG (CHỐT HẠ CHO THEME CUSTOM)
   ==================================================================== */
html, body {
    width: 100% !important; 
    max-width: 100% !important;
    overflow-x: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
}

/* KHÓA CHẶT MỌI THẺ DIV, SECTION TRÊN TOÀN TRANG */
div, section, main, article {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ====================================================================
   TỐI ƯU HÓA MOBILE CHO TRANG BUY 1 GET 1 VÀ CONTACT FORM 7
   ==================================================================== */
@media (max-width: 768px) {
    
    /* 1. SỬA LỖI KHUNG BƯỚC HƯỚNG DẪN BỊ TRÀN (KHUNG 1) */
    .bogo-page {
        padding: 80px 15px 40px 15px !important; /* Giảm padding 2 bên của cả trang xuống 15px */
    }
    
    .bogo-grid {
        gap: 30px !important; /* Thu hẹp khoảng cách giữa Khung 1 và Form */
    }

    .bogo-steps,
    .bogo-form-wrapper {
        padding: 25px 20px !important; /* 🔥 Chìa khóa đây: Giảm padding từ 40px xuống 20px cho Mobile */
        width: 100% !important;
        box-sizing: border-box !important; /* Bắt buộc padding không làm phình khung */
        margin: 0 !important;
    }

    .bogo-title {
        font-size: 2rem !important; /* Cho chữ tiêu đề nhỏ lại xíu */
    }

    /* Đẩy chữ ghi chú hẹp lại */
    .bogo-step__content h3, 
    .bogo-step__content p {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ====================================================================
     /* ====================================================================
       2. TỐI ƯU LẠI CONTACT FORM 7 (KHUNG 2 - BẢN THU GỌN & CHỐNG CẮT GÓC)
       ==================================================================== */
    .wpcf7 {
        margin: 0 !important; 
        padding: 30px 20px 20px 20px !important; /* 🔥 TRẢ LẠI PADDING: Đẩy nội dung thụt sâu vào trong, cách xa cả 4 viền */
        width: 100% !important; 
        max-width: 100% !important; 
        box-sizing: border-box !important;
        overflow: visible !important; /* 🔥 BỎ HIDDEN: Chống hiện tượng dùng kéo cắt mất góc chữ H */
    }

    .wpcf7-form {
        margin-top: 5px !important; /* 🔥 Đẩy form nhích xuống thêm một chút so với viền trên */
    }

    .wpcf7-form, 
    .wpcf7-form p, 
    .wpcf7-form label,
    .wpcf7-form-control-wrap,
    .wpcf7-form input,
    .wpcf7-form select,
    .wpcf7-form textarea,
    .wpcf7-form .wpcf7-list-item {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Thu hẹp khoảng cách giữa các hàng */
    .wpcf7-form p { margin-bottom: 20px !important; }
    
    /* Thu nhỏ chữ Label và kéo lại gần Input hơn */
    .wpcf7-form label { font-size: 0.88rem !important; margin-bottom: 8px !important; }
    
    /* Thu nhỏ độ dày khung Input và chữ bên trong */
    .wpcf7-form input[type="text"], 
    .wpcf7-form input[type="email"] { 
        padding: 10px 14px !important; 
        font-size: 0.9rem !important; 
    }
    
    /* Gọt gọn nút chọn file */
    .wpcf7-form input[type="file"] { padding: 6px 12px !important; font-size: 0.8rem !important; border-width: 1px !important; }
    .wpcf7-form input[type="file"]::file-selector-button { padding: 5px 10px !important; margin-right: 8px !important; font-size: 0.8rem !important; }

    /* Thu nhỏ Checkbox và chữ Điều khoản */
    .wpcf7-form .wpcf7-list-item label { align-items: flex-start !important; gap: 8px !important; }
    .wpcf7-form .wpcf7-list-item input[type="checkbox"] { margin-top: 2px !important; width: 14px !important; height: 14px !important; flex-shrink: 0 !important; }
    .wpcf7-form .wpcf7-list-item-label { font-size: 0.8rem !important; line-height: 1.4 !important; flex: 1 !important; }

    /* Bóp nhẹ Nút Send cho cân đối với form mới */
    .wpcf7-form input[type="submit"] { 
        padding: 12px 20px !important; 
        font-size: 0.95rem !important; 
        margin-top: 10px !important; 
        max-width: 260px !important; 
    }
    
    /* Tinh chỉnh Cloudflare nhỏ thêm 1 xíu nữa */
    .wpcf7-form .wpcf7-cf_turnstile {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
        height: 55px !important; /* Hạ chiều cao xuống */
        overflow: hidden !important; 
    }
    .wpcf7-form .wpcf7-cf_turnstile iframe,
    .wpcf7-form .wpcf7-cf_turnstile div {
        transform: scale(0.6) !important; /* Thu nhỏ từ 0.65 xuống 0.6 */
        transform-origin: center center !important;
        margin: 0 auto !important;
    }

/* ====================================================================
/* ====================================================================
   FIX TRÀN LỀ: ĐẶC TRỊ LỖI IOS SAFARI & CLOUDFLARE
   ==================================================================== */
@media (max-width: 768px) {
    /* 1. KHÓA CỔNG CHÍNH: Khóa ngay tại thẻ bọc trang, Safari bắt buộc phải nghe */
    .bogo-page {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important; /* 🔥 Chém đứt mọi thứ tràn ra từ đây */
        padding-left: 15px !important;
        padding-right: 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. Dàn lại 2 cột cho gọn */
    .bogo-grid {
        display: block !important;
        width: 100% !important;
    }
    .bogo-steps, .bogo-form-wrapper {
        width: 100% !important;
        padding: 15px !important;
        margin-bottom: 20px !important;
        box-sizing: border-box !important;
    }

    /* 3. ĐẶC TRỊ CLOUDFLARE BẰNG ZOOM (Không dùng Transform nữa) */
    .wpcf7-cf_turnstile {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important; /* Khóa khung ngoài */
        text-align: center !important;
    }
    
    .wpcf7-cf_turnstile iframe, 
    .wpcf7-cf_turnstile > div {
        max-width: 100% !important;
        zoom: 0.75 !important; /* 🔥 Vũ khí Webkit: Thu nhỏ vật lý toàn bộ cấu trúc iframe thay vì chỉ thu nhỏ hình ảnh */
        margin: 0 auto !important;
        display: inline-block !important;
    }

    /* 4. Khóa mọi thẻ con */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}






/* ==========================================================================
   CỨU NGUY HEADER BỊ NUỐT KHÚC & SỬA LỖI ĐẸP THANH ADMIN BAR WP
   ========================================================================== */

/* 1. ĐẨY HEADER XUỐNG KHI ĐANG ĐĂNG NHẬP ADMIN (CHỐNG BỊ NUỐT KHÚC) */
body.logged-in header,
body.logged-in .site-header,
body.logged-in [class*="header"] {
    top: 32px !important; /* Đẩy lùi đúng bằng chiều cao Admin Bar trên Desktop */
}

/* Trên thiết bị di động/màn hình nhỏ, thanh Admin Bar của WP tự phình to thành 46px */
@media (max-width: 782px) {
    body.logged-in header,
    body.logged-in .site-header,
    body.logged-in [class*="header"] {
        top: 46px !important; 
    }
}

/* 2. CÁCH LY & BẢO VỆ THANH ADMIN BAR KHÔNG BỊ NHIỄM ĐỘC CSS THEME */
#wpadminbar, 
#wpadminbar * {
    box-sizing: content-box !important; /* Trả về chuẩn hiển thị của WordPress Core */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; /* Chống vỡ font admin */
}

/* Khôi phục lại khoảng đệm và khoảng cách hiển thị chuẩn cho các menu dropdown trong Admin Bar */
#wpadminbar .menupop .ab-sub-wrapper {
    background: #23282d !important;
    padding: 5px 0 !important;
}

#wpadminbar a.ab-item, 
#wpadminbar .ab-sub-item {
    padding: 0 15px !important;
    line-height: 32px !important;
    height: 32px !important;
}



/* ====================================================================
/* ====================================================================
   FIX MOBILE: CHỈ TẮT ZOOM KHI CHẠM (GIỮ NGUYÊN TỌA ĐỘ TÂM ẢNH)
   ==================================================================== */
@media (max-width: 1024px) {
    /* 1. Tắt nẩy toàn bộ thẻ sản phẩm khi vuốt/chạm */
    .product-card:hover, 
    .store-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* 2. Tắt hiệu ứng zoom phóng to của khung */
    .product-card:hover .product-card__wf,
    .store-card:hover .store-card__wf {
        transform: none !important;
    }

    /* 🔥 3. SỬA LỖI LỆCH ẢNH: Khóa chặt tọa độ gốc, không cho văng ra ngoài */
    .product-card:hover .product-card__wf img,
    .store-card:hover .store-card__wf img {
        transform: translate(-50%, -50%) !important;
    }
}