/*
Theme Name: NetPlay Arena
Theme URI: https://netplayarena.com
Author: NetPlay Arena
Author URI: https://netplayarena.com
Description: A modern, Awwwards-inspired sports equipment e-commerce theme with stunning animations, micro-interactions, and WooCommerce integration.
Version: 2.0.2
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: netplay-arena
Tags: full-site-editing, block-patterns, woocommerce, e-commerce, sports, custom-colors, custom-fonts

NetPlay Arena WordPress Theme - Modern Awwwards-Inspired Design
*/

/* ============================================
   CSS CUSTOM PROPERTIES
   ============================================ */

:root {
    --color-black: #111111;
    --color-primary: #111111;
    --color-primary-dark: #000000;
    --color-secondary: #4F98CA;
    --color-secondary-dark: #4080a8;
    --color-contrast: #111111;
    --color-base: #ffffff;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #ebebeb;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #999999;
    --color-gray-500: #666666;

    --font-body: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-elastic: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --transition-fast: 0.2s var(--ease-out-quart);
    --transition-base: 0.4s var(--ease-out-expo);
    --transition-slow: 0.6s var(--ease-out-expo);
    --transition-slower: 0.8s var(--ease-out-expo);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 60px rgba(0, 0, 0, 0.16);

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 30px;
}

/* ============================================
   GLOBAL RESETS & BASE
   ============================================ */

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

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    line-height: 1.5;
    color: var(--color-contrast);
    background: var(--color-base);
    overflow-x: clip;
    padding-top: 0;
}

main {
    margin: 0 !important;
    margin-top: 0 !important;
}

body.menu-open {
    overflow: hidden;
}

/* Selection */
::selection {
    background: var(--color-primary);
    color: var(--color-base);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

/* Color inheritance for dark sections */
.has-base-color h1,
.has-base-color h2,
.has-base-color h3,
.has-base-color h4,
.has-base-color h5,
.has-base-color h6,
.has-base-color p,
.has-base-color li,
.has-base-color a:not(.wp-block-button__link),
.has-base-color .wp-block-heading {
    color: inherit;
}

/* Modern display heading - Nike-style oversized */
.display-heading {
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: uppercase;
}

/* ============================================
   ANNOUNCEMENT BAR - MODERN MARQUEE
   ============================================ */

/* Fixed Header Wrapper */
.site-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

.announcement-bar {
    background: var(--color-contrast);
    color: var(--color-base);
    height: 36px;
    overflow: hidden;
}

.announcement-bar-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
}

.announcement-bar-track.marquee-active {
    animation: announcement-scroll var(--marquee-duration, 20s) linear infinite;
}

.announcement-bar-content {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
    padding-right: 24px;
}

.announcement-bar-content span {
    padding: 0 12px;
    flex-shrink: 0;
}

.announcement-bar-content .separator {
    color: var(--color-primary);
    padding: 0 8px;
}

.announcement-bar:hover .announcement-bar-track {
    animation-play-state: paused;
}

@keyframes announcement-scroll {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(calc(-1 * var(--marquee-offset, 50%)), 0, 0);
    }
}

/* ============================================
   HEADER STYLES - MODERN
   ============================================ */

.site-header {
    background: var(--color-base);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
    transition: box-shadow var(--transition-base);
}

.header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 80px;
    padding: 0 clamp(1rem, 4vw, 3rem);
    max-width: 1440px;
    margin: 0 auto;
    gap: 2rem;
}

.header-logo {
    justify-self: start;
}

.header-logo .site-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-contrast);
    text-decoration: none;
    letter-spacing: -0.02em;
    transition: opacity var(--transition-fast);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.header-logo .site-logo-mark {
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url('assets/images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.header-logo .site-title:hover {
    opacity: 0.7;
}

.desktop-nav {
    display: flex;
    align-items: center;
    justify-self: center;
    gap: 2rem;
}

.desktop-nav a {
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-contrast);
    text-decoration: none;
    position: relative;
    transition: color var(--transition-fast);
}

.desktop-nav a::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
}

.desktop-nav a:hover {
    color: var(--color-primary);
}

.desktop-nav a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-actions {
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 0.5rem;
}

.header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--color-contrast);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.header-icon:hover {
    color: var(--color-primary);
}

.header-icon svg {
    transition: stroke var(--transition-fast);
}

.header-icon:hover svg {
    stroke: var(--color-primary);
}

/* Header text/links - always dark on white background */
.site-header .wp-block-site-title a,
.site-header .desktop-nav .wp-block-navigation-item__content,
.site-header .header-icon {
    color: var(--color-contrast);
}

.site-header .header-icon svg {
    stroke: var(--color-contrast);
}

/* Scrolled state - add shadow */
.site-header-wrapper.is-scrolled {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.site-header.is-scrolled {
    box-shadow: none;
}

.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Logo animation */
.site-header .wp-block-site-title a {
    display: inline-block;
    position: relative;
    transition: transform var(--transition-fast);
}

.site-header .wp-block-site-title a:hover {
    transform: scale(1.02);
}

/* Navigation Links - Modern underline */
.desktop-nav .wp-block-navigation-item__content {
    position: relative;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0.1em;
    color: var(--color-contrast);
    transition: color var(--transition-fast);
}

.desktop-nav .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition-base);
}

.desktop-nav .wp-block-navigation-item__content:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Header Icons - Modern */
.header-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    color: var(--color-contrast);
    transition: all var(--transition-base);
}

.header-icon::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-gray-200);
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-base);
}

.header-icon:hover::before {
    opacity: 1;
    transform: scale(1);
}

.header-icon svg {
    position: relative;
    z-index: 1;
    transition: transform var(--transition-fast);
}

.header-icon:hover svg {
    transform: scale(1.1);
}

/* Mini Cart Badge */
.mini-cart-count {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: var(--color-base);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    animation: badgePop 0.3s var(--ease-elastic);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    100% { transform: scale(1); }
}

/* WooCommerce Header Blocks Styling */
.header-actions {
    gap: 4px;
}

.header-actions .wc-block-customer-account,
.header-actions .wc-block-mini-cart {
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-actions .wc-block-customer-account__account-icon,
.header-actions .wc-block-mini-cart__button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    color: var(--color-contrast);
    background: transparent;
    border: none;
    position: relative;
    transition: all var(--transition-base);
}

.header-actions .wc-block-customer-account__account-icon::before,
.header-actions .wc-block-mini-cart__button::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-gray-200);
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-base);
}

.header-actions .wc-block-customer-account__account-icon:hover::before,
.header-actions .wc-block-mini-cart__button:hover::before {
    opacity: 1;
    transform: scale(1);
}

.header-actions .wc-block-customer-account__account-icon svg,
.header-actions .wc-block-mini-cart__button svg {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.header-actions .wc-block-customer-account__account-icon:hover svg,
.header-actions .wc-block-mini-cart__button:hover svg {
    transform: scale(1.1);
}

/* Mini cart quantity badge */
.header-actions .wc-block-mini-cart__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--color-primary);
    color: var(--color-base);
    font-size: 10px;
    font-weight: 600;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Hide price in mini cart button */
.header-actions .wc-block-mini-cart__amount {
    display: none;
}

/* ============================================
   MOBILE MENU - MODERN
   ============================================ */

.mobile-menu-toggle {
    display: none;
    position: relative;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1002;
}

/* Keep header above mobile nav */
.site-header-wrapper {
    position: relative;
    z-index: 1001;
}

.site-header {
    position: relative;
    z-index: 1001;
}

.hamburger {
    position: relative;
    width: 24px;
    height: 2px;
    background: var(--color-contrast);
    transition: background var(--transition-fast);
}

.hamburger::before,
.hamburger::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: inherit;
    transition: transform var(--transition-base);
}

.hamburger::before { top: -8px; }
.hamburger::after { bottom: -8px; }

.menu-open .hamburger {
    background: transparent;
}

.menu-open .hamburger::before {
    transform: translateY(8px) rotate(45deg);
    background: var(--color-contrast);
}

.menu-open .hamburger::after {
    transform: translateY(-8px) rotate(-45deg);
    background: var(--color-contrast);
}

@media (max-width: 1024px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .desktop-nav {
        display: none !important;
    }

    /* Mobile header layout - logo left, actions right */
    .header-inner {
        grid-template-columns: 1fr auto;
        gap: 1rem;
    }

    .header-actions {
        justify-self: end;
        margin-left: auto;
    }
}

.mobile-nav {
    position: fixed;
    inset: 0;
    background: var(--color-base);
    z-index: 1003;
    display: flex;
    flex-direction: column;
    padding: 100px 40px 40px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all var(--transition-slow);
}

.mobile-nav.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mobile-menu-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-contrast);
    transition: color var(--transition-fast);
    z-index: 10;
    pointer-events: auto;
}

.mobile-menu-close:hover {
    color: var(--color-primary);
}

.mobile-nav-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mobile-nav-footer {
    display: flex;
    gap: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-gray-300);
}

.mobile-nav-footer .mobile-nav-link {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.mobile-nav-footer .mobile-nav-link:hover {
    color: var(--color-primary);
}

.mobile-nav-item {
    font-size: clamp(2rem, 6vw, 4rem);
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(40px);
    transition: all var(--transition-slow);
}

.mobile-nav.is-active .mobile-nav-item {
    opacity: 1;
    transform: translateY(0);
}

.mobile-nav-item a {
    color: var(--color-contrast);
    text-decoration: none;
    position: relative;
    display: inline-block;
}

.mobile-nav-item a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.mobile-nav-item a:hover::after {
    width: 100%;
}

/* ============================================
   SEARCH BAR DROPDOWN
   ============================================ */

.search-dropdown {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: var(--color-base);
    border-bottom: 1px solid var(--color-gray-200);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 999;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
    padding: 0;
}

.search-dropdown.is-active {
    transform: translateY(0);
    opacity: 1;
    padding: 16px 0;
}

.search-dropdown__inner {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* FiboSearch overrides inside dropdown */
.search-dropdown .dgwt-wcas-search-wrapp {
    max-width: 100% !important;
    flex: 1;
}

.search-dropdown .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
    background: var(--color-gray-100) !important;
    border: 1px solid var(--color-gray-200) !important;
    border-radius: 30px !important;
    color: var(--color-contrast) !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    padding: 10px 20px !important;
    height: 44px !important;
    box-shadow: none !important;
    transition: border-color var(--transition-fast) !important;
}

.search-dropdown .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input:focus {
    border-color: var(--color-contrast) !important;
    outline: none !important;
    background: var(--color-base) !important;
}

.search-dropdown .dgwt-wcas-search-wrapp .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input::placeholder {
    color: var(--color-gray-500) !important;
}

.search-dropdown .dgwt-wcas-search-submit,
.dgwt-wcas-search-wrapp .dgwt-wcas-search-submit {
    display: none !important;
}

.search-dropdown__close {
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    border-radius: var(--radius-full);
    transition: background var(--transition-fast), color var(--transition-fast);
    flex-shrink: 0;
}

.search-dropdown__close:hover {
    background: var(--color-gray-200);
    color: var(--color-contrast);
}

/* Active state for search toggle icon */
.search-toggle.is-active svg {
    stroke: var(--color-primary);
}

/* ============================================
   BUTTONS - AWWWARDS STYLE
   ============================================ */

.wp-block-button__link,
.btn,
button[type="submit"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-base);
}

/* Primary Button */
.wp-block-button.is-style-primary .wp-block-button__link,
.btn-primary {
    background: var(--color-primary);
    color: var(--color-base) !important;
}

.wp-block-button.is-style-primary .wp-block-button__link::before,
.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary-dark);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.wp-block-button.is-style-primary .wp-block-button__link:hover::before,
.btn-primary:hover::before {
    transform: translateY(0);
}

.wp-block-button__link span,
.btn span {
    position: relative;
    z-index: 1;
}

/* Secondary Button */
.wp-block-button.is-style-secondary .wp-block-button__link,
.btn-secondary {
    background: var(--color-secondary);
    color: var(--color-base) !important;
}

.wp-block-button.is-style-secondary .wp-block-button__link::before,
.btn-secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-secondary-dark);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.wp-block-button.is-style-secondary .wp-block-button__link:hover::before,
.btn-secondary:hover::before {
    transform: translateY(0);
}

/* Outline Button */
.wp-block-button.is-style-outline .wp-block-button__link,
.btn-outline {
    background: transparent;
    color: var(--color-contrast) !important;
    border: 2px solid var(--color-contrast);
}

.wp-block-button.is-style-outline .wp-block-button__link::before,
.btn-outline::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-contrast);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.btn-outline:hover {
    color: var(--color-base) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
.btn-outline:hover::before {
    transform: translateY(0);
}

/* Icon in button */
.btn-icon {
    width: 20px;
    height: 20px;
    transition: transform var(--transition-fast);
}

.wp-block-button__link:hover .btn-icon,
.btn:hover .btn-icon {
    transform: translateX(4px);
}

/* Ripple effect */
.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: ripple 0.6s linear;
    pointer-events: none;
}

@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================
   NIKE-STYLE BUTTONS
   ============================================ */

.btn-nike {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: #111;
    color: #fff;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 600;
    border: none;
    border-radius: 30px;
    text-transform: none;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.btn-nike:hover {
    background: #333;
    transform: scale(1.02);
}

.btn-nike--outline {
    background: transparent;
    border: 1.5px solid #111;
    color: #111;
}

.btn-nike--outline:hover {
    background: #111;
    color: #fff;
}

.btn-nike--white {
    background: #fff;
    color: #111;
}

.btn-nike--white:hover {
    background: #f5f5f5;
}

.btn-nike--text {
    background: transparent;
    color: #111;
    padding: 8px 0;
    border-radius: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.btn-nike--text:hover {
    background: transparent;
    color: #666;
}

.btn-nike--small {
    padding: 10px 24px;
    font-size: 13px;
}

/* ============================================
   CLIP REVEAL & SLIDE ANIMATIONS
   ============================================ */

.clip-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1s var(--ease-out-expo);
}

.clip-reveal.is-visible {
    clip-path: inset(0 0 0 0);
}

.slide-in-left {
    transform: translateX(-60px);
    opacity: 0;
    transition: all 0.8s var(--ease-out-expo);
}

.slide-in-left.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.slide-in-right {
    transform: translateX(60px);
    opacity: 0;
    transition: all 0.8s var(--ease-out-expo);
}

.slide-in-right.is-visible {
    transform: translateX(0);
    opacity: 1;
}

/* Scroll progress bar for horizontal sections */
.scroll-progress {
    width: 100%;
    height: 2px;
    background: var(--color-gray-300);
    position: relative;
    margin-top: 24px;
}

.scroll-progress__bar {
    height: 100%;
    background: var(--color-contrast);
    width: 0%;
    transition: width 0.1s linear;
}

/* ============================================
   STICKY HEADER - shadow on scroll
   ============================================ */

.site-header.is-scrolled {
    box-shadow: 0 1px 0 rgba(0,0,0,0.08);
}

/* ============================================
   HERO VIDEO SECTION
   ============================================ */

.hero-video {
    position: relative;
    width: 100%;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.hero-video__media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video__media video,
.hero-video__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-video__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-video__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.5) 0%, transparent 60%);
    z-index: 1;
}

.hero-video__content {
    position: relative;
    z-index: 2;
    padding: 160px clamp(2rem, 6vw, 6rem) 80px;
    max-width: 700px;
}

.hero-video__eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.8);
    margin-bottom: 1.5rem;
}

.hero-video__title {
    font-family: var(--font-heading);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: -0.06em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 2rem;
}

.hero-video__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.hero-video__title-line {
    display: block;
}

.hero-video__scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    color: #fff;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    animation: fadeIn 0.8s var(--ease-out-expo) 1s forwards;
}

.hero-video__scroll-indicator::after {
    content: '';
    width: 1px;
    height: 60px;
    background: #fff;
    animation: scrollLine 1.5s ease-in-out infinite;
}

/* ============================================
   EDITORIAL SPLIT SECTION
   ============================================ */

.editorial-split__wrapper {
    display: grid;
    grid-template-columns: 3fr 2fr;
    min-height: 80vh;
}

.editorial-split__image {
    position: relative;
    overflow: hidden;
}

.editorial-split__image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editorial-split__eyebrow {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 1.5rem;
    display: block;
}

.editorial-split__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(3rem, 6vw, 6rem);
    background: #111;
    color: #fff;
}

.editorial-split__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    margin: 0 0 1.5rem;
}

.editorial-split__text {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.7);
    margin-bottom: 2rem;
    max-width: 400px;
}

@media (max-width: 768px) {
    .editorial-split__wrapper {
        grid-template-columns: 1fr;
    }
    .editorial-split__image {
        min-height: 50vh;
    }
}

/* ============================================
   COLLECTION STRIP (Horizontal Scroll)
   ============================================ */

.collection-strip {
    padding: clamp(3rem, 6vw, 6rem) 0;
}

.collection-strip__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 clamp(1rem, 4vw, 3rem);
    margin-bottom: 2rem;
}

.collection-strip__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    margin: 0;
}

.collection-strip__nav {
    display: flex;
    gap: 8px;
}

.collection-strip__nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid var(--color-contrast);
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.collection-strip__nav-btn:hover {
    background: var(--color-contrast);
    color: #fff;
}

.collection-strip__nav-btn:hover svg {
    stroke: #fff;
}

.collection-strip__nav-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.collection-strip__track {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

.collection-strip__track::-webkit-scrollbar {
    display: none;
}

.collection-strip__card {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    border-radius: 0;
    scroll-snap-align: start;
    cursor: pointer;
}

.collection-strip__card--large { width: 50vw; }
.collection-strip__card--medium { width: 35vw; }
.collection-strip__card--small { width: 25vw; }

.collection-strip__card img {
    width: 100%;
    height: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.collection-strip__card:hover img {
    transform: scale(1.05);
}

.collection-strip__card-label {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    color: #fff;
    font-family: var(--font-heading);
    font-size: clamp(1.25rem, 2vw, 2rem);
    font-weight: 800;
    text-transform: uppercase;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

@media (max-width: 768px) {
    .collection-strip__card--large { width: 80vw; }
    .collection-strip__card--medium { width: 70vw; }
    .collection-strip__card--small { width: 60vw; }
}

/* ============================================
   ATHLETE STORY SECTION
   ============================================ */

.athlete-story {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.athlete-story__wrapper {
    position: relative;
    width: 100%;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.athlete-story__background {
    position: absolute;
    inset: 0;
}

.athlete-story__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.athlete-story__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 30%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

.athlete-story__content {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: 50%;
    max-width: 600px;
    margin-right: clamp(2rem, 6vw, 6rem);
    padding: clamp(2.5rem, 4vw, 4rem);
    background: rgba(17, 17, 17, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
}

.athlete-story__quote {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 2rem;
    font-style: italic;
}

.athlete-story__meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 2rem;
}

.athlete-story__name {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.athlete-story__title {
    font-size: 13px;
    color: rgba(255,255,255,0.6);
}

@media (max-width: 768px) {
    .athlete-story__content {
        width: 90%;
        margin: 0 auto;
    }

    .athlete-story__wrapper {
        min-height: 60vh;
    }
}

/* ============================================
   MEMBERSHIP CTA (White BG)
   ============================================ */

.membership-cta {
    text-align: center;
    padding: clamp(4rem, 8vw, 8rem) clamp(1rem, 4vw, 3rem);
    background: #fff;
}

.membership-cta__title {
    font-family: var(--font-heading);
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.04em;
    color: #111;
    margin: 0 0 1.5rem;
}

.membership-cta__text {
    font-size: 1rem;
    color: var(--color-gray-500);
    max-width: 500px;
    margin: 0 auto 2rem;
}

.membership-cta__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ============================================
   HERO SECTION - MODERN
   ============================================ */

.hero-section {
    position: relative;
    min-height: calc(100vh - 116px); /* Full viewport minus announcement + header */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    z-index: 1;
}

/* Ensure hero section is truly full width */
.hero-section.alignfull {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
}

/* Hero Cover - ensure proper containment */
.hero-cover {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Explicit z-index for layer order */
    width: 100vw !important;
    max-width: 100vw !important;
}

.hero-cover.alignfull {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Dark overlay for hero cover */
.hero-cover > .wp-block-cover__background,
.hero-cover::before {
    background-color: rgba(0, 0, 0, 0.5) !important;
}

/* Hero background image styling */
.hero-cover .wp-block-cover__image-background {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* Make inner container full height for proper scroll indicator positioning */
.hero-cover .wp-block-cover__inner-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2; /* Content above overlay */
    padding-top: 116px; /* Space for fixed header */
    padding-bottom: 100px; /* Space for scroll indicator */
    box-sizing: border-box;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    padding: 0 20px;
}

/* Hero Title Animation */
.hero-title {
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.04em;
    color: var(--color-base);
    margin-bottom: 1.5rem;
}

.hero-title .line {
    display: block;
    overflow: hidden;
}

.hero-title .line-inner {
    display: block;
    transform: translateY(100%);
    animation: lineReveal 1s var(--ease-out-expo) forwards;
}

.hero-title .line:nth-child(2) .line-inner {
    animation-delay: 0.1s;
}

@keyframes lineReveal {
    to { transform: translateY(0); }
}

/* Hero subtitle */
.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 2.5rem;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s var(--ease-out-expo) 0.4s forwards;
}

/* Hero buttons */
.hero-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 0.8s var(--ease-out-expo) 0.6s forwards;
}

.hero-buttons .wp-block-button__link {
    min-width: 180px;
}

/* Hero outline button - white on dark background */
.hero-section .wp-block-button.is-style-outline .wp-block-button__link {
    color: var(--color-base) !important;
    border-color: var(--color-base);
    background: transparent;
}

.hero-section .wp-block-button.is-style-outline .wp-block-button__link::before {
    background: var(--color-base);
}

.hero-section .wp-block-button.is-style-outline .wp-block-button__link:hover {
    color: var(--color-contrast) !important;
}

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10; /* Increased from 2 for proper layering */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--color-base);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    opacity: 0;
    animation: fadeIn 0.8s var(--ease-out-expo) 1s forwards;
}

.scroll-indicator::after {
    content: '';
    width: 1px;
    height: 60px;
    background: var(--color-base);
    animation: scrollLine 1.5s ease-in-out infinite;
}

@keyframes scrollLine {
    0%, 100% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

@keyframes fadeIn {
    to { opacity: 1; }
}

/* ============================================
   PRODUCT CARDS - MODERN
   ============================================ */

.wc-block-grid__product,
.product-card {
    position: relative;
    background: var(--color-base);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all var(--transition-base);
    transform-style: preserve-3d;
}

/* Clean Nike-style cards - no border, no shadow */
.wc-block-grid__product,
.product-card {
    box-shadow: none;
    border: none;
}

.wc-block-grid__product:hover,
.product-card:hover {
    box-shadow: none;
}

/* Product Image Container - 3:4 ratio, gray bg */
.wc-block-grid__product-image,
.product-card-image {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: #f5f5f5;
}

.wc-block-grid__product-image img,
.product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.wc-block-grid__product:hover .wc-block-grid__product-image img.primary-image,
.product-card:hover .product-card-image img.primary-image {
    transform: scale(1.05);
}

/* ============================================
   SECONDARY IMAGE HOVER SWAP
   ============================================ */

.wc-block-grid__product-image,
.product-card-image {
    position: relative;
}

.wc-block-grid__product-image img.secondary-image,
.product-card-image img.secondary-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity var(--transition-base);
    z-index: 1;
}

.wc-block-grid__product:hover .wc-block-grid__product-image img.secondary-image,
.product-card:hover .product-card-image img.secondary-image {
    opacity: 1;
}

/* Quick View Button */
.quick-view-btn {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    background: var(--color-base);
    color: var(--color-contrast);
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
    white-space: nowrap;
}

.wc-block-grid__product:hover .quick-view-btn,
.product-card:hover .quick-view-btn {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.quick-view-btn:hover {
    background: var(--color-contrast);
    color: var(--color-base);
}

/* ============================================
   ENHANCED BADGE SYSTEM
   ============================================ */

/* Ensure product card is positioning context for badges */
.product-card,
.wc-block-product-template .product-card,
.wc-block-grid__product {
    position: relative;
}

/* Badge Container - positioned over product image */
.product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
}

/* Product Collection specific - badges inside product card */
.wc-block-product-template .product-card .product-badges {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
}

/* Base Badge Style */
.product-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    line-height: 1;
}

/* Sale Badge - Modern */
.wc-block-grid__product-onsale,
.onsale,
.product-badge--sale {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--color-contrast) !important;
    color: var(--color-base) !important;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    z-index: 5;
}

/* When inside badge container, reset positioning */
.product-badges .product-badge--sale,
.product-badges .wc-block-grid__product-onsale,
.product-badges .onsale {
    position: static;
}

/* New Badge - Green */
.product-badge--new {
    background: var(--color-primary);
    color: var(--color-base);
}

/* Online Exclusive Badge - Blue */
.product-badge--exclusive {
    background: var(--color-secondary);
    color: var(--color-base);
}

/* Product Type Label - positioned top right of image */
.product-type-label {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.95);
    color: var(--color-gray-500);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 5px 10px;
    border-radius: var(--radius-full);
    z-index: 10;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* Product Collection specific - type label */
.wc-block-product-template .product-card .product-type-label {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

/* Product Info */
.product-card-info {
    padding: 1.5rem;
}

.wc-block-grid__product-title,
.product-card-title {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--color-contrast);
    margin: 1rem 0 0.25rem;
    line-height: 1.3;
}

.wc-block-grid__product-title a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.wc-block-grid__product-title a:hover {
    color: var(--color-primary);
}

/* Product Price */
.wc-block-grid__product-price,
.product-card-price {
    font-size: 15px;
    font-weight: 600;
    color: #111;
    margin: 0 0 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.wc-block-grid__product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 14px;
}

.wc-block-grid__product-price ins {
    color: var(--color-primary);
    text-decoration: none;
}

/* ============================================
   PRODUCT COLOR SWATCHES
   ============================================ */

.product-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    order: 2; /* Place after title in flex container */
}

/* Product Collection specific swatches positioning */
.wc-block-product-template .product-swatches {
    margin: 8px 0;
}

.product-swatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.product-swatch:hover {
    transform: scale(1.15);
}

.product-swatch.is-active {
    border-color: var(--color-contrast);
}

.product-swatch::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid var(--color-contrast);
    opacity: 0;
    transition: opacity var(--transition-fast);
}

.product-swatch.is-active::after {
    opacity: 1;
}

/* Common swatch colors */
.product-swatch[data-color="black"] { background-color: #1a1a1a; }
.product-swatch[data-color="white"] { background-color: #ffffff; }
.product-swatch[data-color="red"] { background-color: #e53935; }
.product-swatch[data-color="blue"] { background-color: #1e88e5; }
.product-swatch[data-color="green"] { background-color: #43a047; }
.product-swatch[data-color="yellow"] { background-color: #fdd835; }
.product-swatch[data-color="orange"] { background-color: #fb8c00; }
.product-swatch[data-color="purple"] { background-color: #8e24aa; }
.product-swatch[data-color="pink"] { background-color: #ec407a; }
.product-swatch[data-color="gray"],
.product-swatch[data-color="grey"] { background-color: #757575; }
.product-swatch[data-color="navy"] { background-color: #1a237e; }
.product-swatch[data-color="teal"] { background-color: #00897b; }

/* Extended swatch colors for badminton products */
.product-swatch[data-color="gold"] { background-color: #d4a017; }
.product-swatch[data-color="golden"] { background-color: #d4a017; }
.product-swatch[data-color="silver"] { background-color: #b0b0b0; }
.product-swatch[data-color="copper"] { background-color: #b87333; }
.product-swatch[data-color="lime"] { background-color: #84cc16; }
.product-swatch[data-color="cyan"] { background-color: #06b6d4; }
.product-swatch[data-color="turquoise"] { background-color: #40e0d0; }
.product-swatch[data-color="coral"] { background-color: #ff6f61; }
.product-swatch[data-color="maroon"] { background-color: #800000; }
.product-swatch[data-color="brown"] { background-color: #8b5e3c; }
.product-swatch[data-color="beige"] { background-color: #d4c5a9; }
.product-swatch[data-color="cream"] { background-color: #fffdd0; }
.product-swatch[data-color="charcoal"] { background-color: #36454f; }
.product-swatch[data-color="olive"] { background-color: #6b8e23; }
.product-swatch[data-color="dark-red"] { background-color: #8b0000; }
.product-swatch[data-color="dark-blue"] { background-color: #003366; }
.product-swatch[data-color="dark-green"] { background-color: #1b5e20; }
.product-swatch[data-color="light-blue"] { background-color: #87ceeb; }
.product-swatch[data-color="light-green"] { background-color: #81c784; }
.product-swatch[data-color="light-grey"],
.product-swatch[data-color="lt-grey"] { background-color: #b0b0b0; }
.product-swatch[data-color="light-pink"] { background-color: #f8bbd0; }
.product-swatch[data-color="pearl-white"] { background-color: #f5f5f0; border: 1px solid #ddd; }
.product-swatch[data-color="neon-green"] { background-color: #39ff14; }
.product-swatch[data-color="neon-yellow"] { background-color: #dfff00; }
.product-swatch[data-color="neon-orange"] { background-color: #ff6700; }
.product-swatch[data-color="neon-pink"] { background-color: #ff1493; }
.product-swatch[data-color="royal-blue"] { background-color: #4169e1; }
.product-swatch[data-color="lavender"] { background-color: #b57edc; }
.product-swatch[data-color="mint-green"] { background-color: #98ff98; }
.product-swatch[data-color="emerald-green"] { background-color: #046307; }

/* Swatch tooltip */
.product-swatch[data-tooltip] {
    position: relative;
}

.product-swatch[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--color-contrast);
    color: var(--color-base);
    font-size: 10px;
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
}

.product-swatch[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Add to Cart Button - hidden on grid (Nike style) */
.wc-block-grid__product .wp-block-button__link,
.add_to_cart_button {
    display: none;
}

.wc-block-grid__product .wp-block-button__link::before,
.add_to_cart_button::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: translateX(-100%);
    transition: transform var(--transition-base);
}

.wc-block-grid__product .wp-block-button__link:hover::before,
.add_to_cart_button:hover::before {
    transform: translateX(0);
}

.wc-block-grid__product .wp-block-button__link span,
.add_to_cart_button span {
    position: relative;
    z-index: 1;
}

/* ============================================
   WOOCOMMERCE PRODUCT COLLECTION - SIMPLE FIX
   ============================================ */

/* Let WooCommerce handle the grid, just ensure proper alignment */
.wp-block-woocommerce-product-collection {
    width: 100%;
}

/* ============================================
   MODERN MINIMAL PRODUCT CARDS
   Clean, Apple-inspired design
   ============================================ */

/* Product card styling - Nike Minimal */
.wc-block-product-template .product-card {
    position: relative;
    background: var(--color-base);
    border-radius: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    border: none;
    box-shadow: none;
}

.wc-block-product-template .product-card:hover {
    transform: none;
    box-shadow: none;
}

/* Product image container - 3:4 ratio, light gray bg */
.wc-block-product-template .wp-block-woocommerce-product-image {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #f5f5f5;
    border-radius: 0;
    margin: 0;
}

/* Primary image (first image) */
.wc-block-product-template .wp-block-woocommerce-product-image img:first-of-type {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Secondary image (second image) - hidden by default, shown on hover */
.wc-block-product-template .wp-block-woocommerce-product-image img:nth-of-type(2) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

.wc-block-product-template .product-card:hover .wp-block-woocommerce-product-image img:nth-of-type(2) {
    opacity: 1;
}

/* Subtle zoom effect on primary image */
.wc-block-product-template .product-card:hover .wp-block-woocommerce-product-image img:first-of-type {
    transform: scale(1.05);
}

/* Product info wrapper */
.wc-block-product-template .product-card > .wp-block-group:last-child {
    padding: 4px 16px 20px !important;
}

/* Product title - Nike Minimal */
.wc-block-product-template .wp-block-post-title {
    font-family: var(--font-body);
    font-size: 15px !important;
    font-weight: 500;
    line-height: 1.4;
    color: var(--color-contrast);
    letter-spacing: 0;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

.wc-block-product-template .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.wc-block-product-template .wp-block-post-title a:hover {
    color: var(--color-primary);
}

/* Product price - Nike Minimal */
.wc-block-product-template .wp-block-woocommerce-product-price {
    font-size: 15px !important;
    font-weight: 600;
    color: #111;
    margin-top: 4px !important;
    margin-bottom: 12px !important;
}

.wc-block-product-template .wp-block-woocommerce-product-price del {
    color: var(--color-gray-400);
    font-weight: 400;
    font-size: 13px;
    margin-right: 8px;
}

.wc-block-product-template .wp-block-woocommerce-product-price ins {
    text-decoration: none;
    color: #e53935;
    background: none;
}

/* Add to cart button - Hidden on grid (Nike style, click card for product page) */
.wc-block-product-template .wp-block-button__link {
    display: none;
}

.wc-block-product-template .wp-block-button__link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wc-block-product-template .wp-block-button__link span,
.wc-block-product-template .wp-block-button__link {
    position: relative;
    z-index: 1;
}

.wc-block-product-template .wp-block-button__link:hover {
    background: var(--color-contrast) !important;
    transform: translateY(-2px);
}

.wc-block-product-template .wp-block-button__link:hover::before {
    transform: translateY(0);
}

/* Badges positioning */
.wc-block-product-template .product-card .product-badges {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
}

.wc-block-product-template .product-card .product-type-label {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 10;
}

/* Swatches */
.wc-block-product-template .product-card .product-swatches {
    margin: 8px 0 12px 0;
}

/* Sale badge on product card */
.wc-block-product-template .product-card .wc-block-components-product-sale-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    background: #e53935;
    color: white;
    font-size: 11px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================
   PRODUCT GRID - RESPONSIVE (Legacy)
   ============================================ */

.products-grid-4col,
.wc-block-grid.has-4-columns .wc-block-grid__products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

@media (max-width: 1200px) {
    .products-grid-4col,
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
    }
}

@media (max-width: 768px) {
    .products-grid-4col,
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 480px) {
    .products-grid-4col,
    .wc-block-grid.has-4-columns .wc-block-grid__products {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* ============================================
   CATEGORY CARDS - MODERN
   ============================================ */

.category-card {
    display: block;
    width: 100%;
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    cursor: pointer;
    isolation: isolate;
    background: var(--color-gray-300); /* Fallback background when no image */
}

/* Ensure category cards fill their column containers */
.wp-block-column .category-card {
    height: 100%;
}

/* Solid dark overlay - modern flat design */
.category-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
    transition: background var(--transition-base);
}

.category-card:hover::before {
    background: rgba(0, 0, 0, 0.6);
}

.category-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
    z-index: 0;
}

.category-card:hover img {
    transform: scale(1.1);
}

.category-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    z-index: 2;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.2) 50%, transparent 100%);
    transform: translateY(0);
    transition: transform var(--transition-base);
}

.category-card:hover .category-card-content {
    transform: translateY(-10px);
}

/* Category card description (optional) */
.category-card-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    margin: 0.5rem 0 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all var(--transition-base);
}

.category-card:hover .category-card-description {
    max-height: 60px;
    opacity: 1;
}

.category-card-title {
    color: var(--color-base);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.category-card-count {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.category-card-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 1rem;
    opacity: 1;
    transform: translateY(0);
    transition: all var(--transition-base);
}

.category-card:hover .category-card-link {
    opacity: 1;
    transform: translateY(-5px);
}

.category-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-base);
}

.category-card:hover .category-card-link svg {
    transform: translateX(6px);
}

/* ============================================
   CTA BANNER - MODERN
   ============================================ */

.cta-banner {
    position: relative;
    padding: 100px 40px;
    text-align: center;
    border-radius: var(--radius-xl);
    overflow: hidden;
    background: var(--color-contrast);
}

/* Clean flat background - no animated gradients */

.cta-banner-content {
    position: relative;
    z-index: 1;
    max-width: 600px;
    margin: 0 auto;
}

.cta-banner-tag {
    display: inline-block;
    background: rgba(0, 168, 79, 0.2);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    margin-bottom: 1.5rem;
}

.cta-banner-title {
    color: var(--color-base);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 1rem;
}

.cta-banner-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    margin-bottom: 2rem;
}

/* ============================================
   FOOTER - AWWWARDS MODERN STYLE
   ============================================ */

.site-footer.awwwards-footer {
    background: var(--color-contrast);
    color: var(--color-base);
    position: relative;
    overflow: hidden;
}

/* Footer CTA Section */
.footer-cta {
    text-align: center;
    position: relative;
}

.footer-cta::before {
    display: none;
}

.footer-cta-heading {
    position: relative;
    z-index: 1;
}

.footer-cta-text {
    color: rgba(255, 255, 255, 0.6);
    position: relative;
    z-index: 1;
}

/* Footer Main Section */
.footer-main {
    position: relative;
}

/* Footer Brand */
.footer-brand-col {
    padding-right: 40px;
}

.footer-logo a {
    color: var(--color-base) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.footer-logo a::before {
    content: '';
    display: inline-block;
    width: 44px;
    height: 44px;
    background-image: url('assets/images/logo.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

.footer-description {
    color: rgba(255, 255, 255, 0.5);
}

/* Footer Navigation */
.footer-nav-title {
    color: var(--color-base);
    margin-bottom: 0;
    opacity: 0.5;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin: 0;
}

.footer-nav-list a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    position: relative;
    display: inline-block;
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.footer-nav-list a::before {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.footer-nav-list a:hover {
    color: var(--color-base);
    transform: translateX(4px);
}

.footer-nav-list a:hover::before {
    width: 100%;
}

/* Social Links - Modern Minimal */
.footer-social {
    margin-top: 0;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-full);
    color: rgba(255, 255, 255, 0.6);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.social-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    border-radius: inherit;
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.social-link:hover {
    color: var(--color-base);
}

.social-link:hover::before {
    transform: translateY(0);
}

.social-link svg {
    position: relative;
    z-index: 1;
    transition: transform var(--transition-fast);
}

.social-link:hover svg {
    transform: scale(1.1);
}

/* Newsletter Form - Awwwards Style */
.footer-newsletter-text {
    color: rgba(255, 255, 255, 0.5);
}

.footer-newsletter-form {
    width: 100%;
}

.newsletter-input-wrapper {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-full);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.newsletter-input-wrapper:focus-within {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 79, 0.1);
}

.newsletter-input-wrapper input[type="email"] {
    flex: 1;
    padding: 16px 24px;
    background: transparent;
    border: none;
    color: var(--color-base);
    font-size: 14px;
    min-width: 0;
}

.newsletter-input-wrapper input[type="email"]::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.newsletter-input-wrapper input[type="email"]:focus {
    outline: none;
    box-shadow: none;
}

.newsletter-input-wrapper button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    min-width: 52px;
    background: var(--color-primary);
    color: var(--color-base);
    border: none;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.newsletter-input-wrapper button:hover {
    background: var(--color-primary-dark);
}

.newsletter-input-wrapper button svg {
    transition: transform var(--transition-fast);
}

.newsletter-input-wrapper button:hover svg {
    transform: translateX(3px);
}

/* Footer Bottom Bar */
.footer-bottom-bar {
    position: relative;
}

.footer-copyright {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
    margin: 0;
}

.footer-legal-links {
    display: flex;
    gap: 32px;
}

.footer-legal-links p {
    margin: 0;
}

.footer-legal-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

.footer-legal-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--color-base);
    transition: width var(--transition-base);
}

.footer-legal-links a:hover {
    color: var(--color-base);
}

.footer-legal-links a:hover::after {
    width: 100%;
}

/* Footer Responsive */
@media (max-width: 1024px) {
    .footer-cta {
        padding: 80px 20px !important;
    }

    .footer-main {
        padding: 60px 20px 40px !important;
    }

    .footer-brand-col {
        padding-right: 0;
        flex-basis: 100% !important;
        margin-bottom: 40px;
    }

    .footer-cta-heading {
        font-size: clamp(2rem, 5vw, 3rem) !important;
    }
}

@media (max-width: 768px) {
    .footer-cta {
        padding: 60px 20px !important;
    }

    .footer-main .wp-block-columns {
        flex-direction: column;
        gap: 32px !important;
    }

    .footer-main .wp-block-column {
        flex-basis: 100% !important;
    }

    .footer-newsletter-col {
        max-width: 400px;
    }

    .footer-bottom-bar .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 16px !important;
        text-align: center;
    }

    .footer-bottom-center {
        justify-content: center;
    }

    .footer-legal-links {
        justify-content: center;
        flex-wrap: wrap;
        gap: 16px 24px;
    }
}

@media (max-width: 480px) {
    .footer-cta {
        padding: 48px 16px !important;
    }

    .footer-main {
        padding: 40px 16px 32px !important;
    }

    .footer-bottom-bar {
        padding: 20px 16px !important;
    }

    .footer-social {
        justify-content: flex-start;
    }

    .social-link {
        width: 40px;
        height: 40px;
    }

    .newsletter-input-wrapper input[type="email"] {
        padding: 14px 16px;
        font-size: 13px;
    }

    .newsletter-input-wrapper button {
        width: 46px;
        min-width: 46px;
    }
}

/* ============================================
   SCROLL ANIMATIONS
   ============================================ */

.animate-on-scroll,
.fade-up,
.fade-in,
.slide-in-left,
.slide-in-right,
.scale-in {
    opacity: 0;
    transition: all var(--transition-slow);
}

.fade-up {
    transform: translateY(40px);
}

.slide-in-left {
    transform: translateX(-40px);
}

.slide-in-right {
    transform: translateX(40px);
}

.scale-in {
    transform: scale(0.9);
}

.animate-on-scroll.is-visible,
.fade-up.is-visible,
.fade-in.is-visible,
.slide-in-left.is-visible,
.slide-in-right.is-visible,
.scale-in.is-visible {
    opacity: 1;
    transform: none;
}

/* Stagger delay classes */
[data-stagger]:nth-child(1) { transition-delay: 0.1s; }
[data-stagger]:nth-child(2) { transition-delay: 0.2s; }
[data-stagger]:nth-child(3) { transition-delay: 0.3s; }
[data-stagger]:nth-child(4) { transition-delay: 0.4s; }
[data-stagger]:nth-child(5) { transition-delay: 0.5s; }
[data-stagger]:nth-child(6) { transition-delay: 0.6s; }

/* ============================================
   TEXT REVEAL ANIMATION
   ============================================ */

.text-reveal-wrapper {
    display: inline;
}

.text-reveal-word {
    display: inline-block;
    overflow: hidden;
}

.text-reveal-char {
    display: inline-block;
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.is-visible .text-reveal-char {
    transform: translateY(0);
}

/* ============================================
   IMAGE REVEAL ANIMATION
   ============================================ */

.image-reveal-wrapper {
    position: relative;
    overflow: hidden;
}

.image-reveal-overlay {
    position: absolute;
    inset: 0;
    background: var(--color-primary);
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s var(--ease-in-out-quart);
    z-index: 1;
}

.is-visible .image-reveal-overlay {
    transform: scaleX(0);
}

/* ============================================
   MARQUEE ANIMATION
   ============================================ */

.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-flex;
    animation: marquee 30s linear infinite;
}

.marquee-content span {
    padding: 0 2rem;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    opacity: 0.1;
}

@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================
   WOOCOMMERCE OVERRIDES
   ============================================ */

/* Single Product - Modern */
.product-gallery-sticky {
    position: sticky;
    top: 120px;
    align-self: flex-start;
}

@media (max-width: 781px) {
    /* On mobile the columns stack naturally — disable sticky so the
       gallery scrolls with the page like any normal stacked layout. */
    .product-gallery-sticky {
        position: static;
        top: auto;
    }
}

.single-product .product-gallery {
    border-radius: 0;
    overflow: hidden;
}

.single-product .product_title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-contrast);
    margin-bottom: 1rem;
}

.single-product .price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin-bottom: 1.5rem;
}

.single-product .price del {
    color: var(--color-gray-400);
    font-size: 1.25rem;
}

.single-product .price ins {
    color: var(--color-primary);
    text-decoration: none;
}

.single-product .single_add_to_cart_button {
    padding: 18px 36px !important;
    font-size: 14px;
    background: #111 !important;
    color: #fff !important;
    width: 100%;
    height: 56px;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
}

.single-product .single_add_to_cart_button:hover {
    background: #333 !important;
}

/* Product Tabs - Modern (Complete Reset & Restyle) */
/* ── Product Tabs ── */
.woocommerce-tabs.wc-tabs-wrapper {
    margin-top: 80px !important;
    background: transparent !important;
    padding: 0 !important;
    border-top: 1px solid var(--color-gray-200);
}

/* Tab list - minimal underline style */
.woocommerce div.product .woocommerce-tabs ul.tabs,
.woocommerce-tabs ul.tabs.wc-tabs {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 0 !important;
    border-bottom: 1px solid var(--color-gray-200) !important;
    background: transparent !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Tab list items */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce-tabs ul.tabs.wc-tabs li {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: block !important;
    position: relative !important;
    flex-shrink: 0;
}

/* Remove WooCommerce pseudo-elements */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after,
.woocommerce-tabs ul.tabs.wc-tabs li::before,
.woocommerce-tabs ul.tabs.wc-tabs li::after {
    display: none !important;
    content: none !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* Tab links */
.woocommerce div.product .woocommerce-tabs ul.tabs li a,
.woocommerce-tabs ul.tabs.wc-tabs li a {
    display: block !important;
    padding: 20px 32px !important;
    color: var(--color-gray-400) !important;
    text-decoration: none !important;
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    position: relative !important;
    transition: color 0.2s ease !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    white-space: nowrap;
}

/* Remove link pseudo-elements */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::before,
.woocommerce-tabs ul.tabs.wc-tabs li a::before {
    display: none !important;
    content: none !important;
}

/* Active indicator underline */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after,
.woocommerce-tabs ul.tabs.wc-tabs li a::after {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 32px !important;
    right: 32px !important;
    height: 2px !important;
    background: transparent !important;
    transition: background 0.2s ease !important;
}

/* Tab hover */
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce-tabs ul.tabs.wc-tabs li a:hover {
    color: var(--color-contrast) !important;
    background: transparent !important;
}

/* Active tab */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce-tabs ul.tabs.wc-tabs li.active {
    background: transparent !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce-tabs ul.tabs.wc-tabs li.active a {
    color: var(--color-contrast) !important;
    background: transparent !important;
    font-weight: 600 !important;
    border: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after,
.woocommerce-tabs ul.tabs.wc-tabs li.active a::after {
    background: var(--color-contrast) !important;
}

/* Tab Panels */
.woocommerce-tabs .wc-tab,
.woocommerce-tabs .woocommerce-Tabs-panel {
    background: transparent;
    padding: 48px 0;
    border: none;
    box-shadow: none;
}

.woocommerce-tabs .wc-tab h2,
.woocommerce-tabs .woocommerce-Tabs-panel h2 {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-contrast);
    margin: 0 0 24px;
    padding: 0;
    border: none;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.woocommerce-tabs .wc-tab p,
.woocommerce-tabs .woocommerce-Tabs-panel p {
    color: var(--color-gray-500);
    line-height: 1.8;
    font-size: 15px;
    margin-bottom: 16px;
    max-width: 680px;
}

.woocommerce-tabs .wc-tab p:last-child {
    margin-bottom: 0;
}

/* Additional Information Table */
.woocommerce-product-attributes.shop_attributes {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    margin: 0;
}

.woocommerce-product-attributes.shop_attributes tr {
    border-bottom: 1px solid var(--color-gray-200);
}

.woocommerce-product-attributes.shop_attributes tr:last-child {
    border-bottom: none;
}

.woocommerce-product-attributes.shop_attributes th,
.woocommerce-product-attributes.shop_attributes td {
    padding: 18px 0;
    text-align: left;
    vertical-align: middle;
}

.woocommerce-product-attributes.shop_attributes th {
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-gray-400);
    width: 160px;
    padding-right: 40px;
}

.woocommerce-product-attributes.shop_attributes td {
    color: var(--color-contrast);
    font-size: 14px;
    font-weight: 500;
}

.woocommerce-product-attributes.shop_attributes td p {
    margin: 0;
}

/* ── Reviews Section ── */
.woocommerce-Reviews {
    margin-top: 0;
}

.woocommerce-Reviews .woocommerce-Reviews-title {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-contrast);
    margin: 0 0 32px;
    padding: 0;
    border: none;
    text-transform: uppercase;
    letter-spacing: -0.01em;
}

.woocommerce-Reviews .woocommerce-noreviews {
    background: transparent;
    padding: 40px 0;
    text-align: left;
    color: var(--color-gray-400);
    font-size: 15px;
    margin-bottom: 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
}

/* Review Form */
#review_form_wrapper {
    margin-top: 40px;
    padding-top: 0;
    border-top: none;
}

#review_form .comment-reply-title {
    display: block;
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-contrast);
    margin-bottom: 32px;
}

#review_form .comment-reply-title small {
    display: inline;
    margin-left: 12px;
}

#review_form .comment-reply-title small a {
    font-size: 13px;
    font-weight: 400;
    color: var(--color-gray-400);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--transition-fast);
}

#review_form .comment-reply-title small a:hover {
    color: var(--color-contrast);
}

/* Star Rating Input */
.comment-form-rating {
    margin-bottom: 32px;
}

.comment-form-rating label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-400);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-form-rating .stars {
    display: inline-flex;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.comment-form-rating .stars span {
    display: inline-flex;
    gap: 6px;
}

.comment-form-rating .stars a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-gray-100);
    color: transparent;
    font-size: 0;
    text-decoration: none;
    position: relative;
    transition: all 0.2s ease;
    border-radius: 50%;
}

.comment-form-rating .stars a::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.comment-form-rating .stars a:hover,
.comment-form-rating .stars a.active {
    background: var(--color-contrast);
}

.comment-form-rating .stars a:hover::before,
.comment-form-rating .stars a.active::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
}

.comment-form-rating .stars[aria-checked="true"] a,
.comment-form-rating .stars.selected a {
    background: var(--color-contrast);
}

.comment-form-rating .stars.selected a::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
}

/* Comment Form Fields */
.comment-form .comment-form-comment {
    margin-bottom: 24px;
}

.comment-form .comment-form-comment label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-gray-400);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comment-form .comment-form-comment label .required {
    color: var(--color-contrast);
}

.comment-form textarea {
    width: 100%;
    min-height: 140px;
    padding: 18px 20px;
    border: 1px solid var(--color-gray-200);
    border-radius: 0;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--color-contrast);
    background: var(--color-gray-100);
    resize: vertical;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.comment-form textarea:focus {
    outline: none;
    border-color: var(--color-contrast);
    background: var(--color-base);
    box-shadow: none;
}

/* Submit Button - Nike style */
.comment-form .form-submit {
    margin: 0;
    padding: 0;
}

.comment-form .form-submit .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: var(--color-contrast);
    color: var(--color-base);
    border: none;
    border-radius: 30px;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.comment-form .form-submit .submit:hover {
    opacity: 0.75;
    transform: none;
    box-shadow: none;
}

/* Existing Reviews List */
.woocommerce-Reviews #comments ol.commentlist {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.woocommerce-Reviews #comments ol.commentlist li.review {
    padding: 28px 0;
    border-bottom: 1px solid var(--color-gray-200);
    margin: 0;
}

.woocommerce-Reviews #comments ol.commentlist li.review:first-child {
    border-top: 1px solid var(--color-gray-200);
}

.woocommerce-Reviews #comments ol.commentlist li.review:last-child {
    border-bottom: none;
}

.woocommerce-Reviews .comment_container {
    display: grid;
    grid-template-columns: 48px 1fr;
    gap: 16px;
    align-items: start;
}

.woocommerce-Reviews .comment_container img.avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.woocommerce-Reviews .comment-text {
    padding: 0;
    border: none;
}

.woocommerce-Reviews .comment-text .star-rating {
    float: none;
    margin-bottom: 8px;
}

.woocommerce-Reviews .comment-text .meta {
    margin-bottom: 12px;
}

.woocommerce-Reviews .comment-text .woocommerce-review__author {
    font-weight: 600;
    color: var(--color-contrast);
    font-size: 14px;
}

.woocommerce-Reviews .comment-text .woocommerce-review__dash {
    display: none;
}

.woocommerce-Reviews .comment-text .woocommerce-review__published-date {
    display: block;
    font-size: 13px;
    color: var(--color-gray-400);
    margin-top: 4px;
}

.woocommerce-Reviews .comment-text .description p {
    margin: 0;
    color: var(--color-gray-500);
    line-height: 1.7;
    font-size: 14px;
}

/* Star Rating Display */
.star-rating {
    display: inline-flex;
    gap: 2px;
    font-size: 14px;
    line-height: 1;
    overflow: hidden;
    position: relative;
    width: 80px;
    height: 16px;
}

.star-rating::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e0e0e0' stroke='none'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: repeat-x;
}

.star-rating span {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

.star-rating span::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23111111' stroke='none'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E");
    background-size: 16px 16px;
    background-repeat: repeat-x;
}

/* Responsive Tabs */
@media (max-width: 768px) {
    .woocommerce-tabs.wc-tabs-wrapper {
        margin-top: 48px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a,
    .woocommerce-tabs ul.tabs.wc-tabs li a {
        padding: 16px 20px !important;
        font-size: 13px !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a::after,
    .woocommerce-tabs ul.tabs.wc-tabs li a::after {
        left: 20px !important;
        right: 20px !important;
    }

    .woocommerce-tabs .wc-tab,
    .woocommerce-tabs .woocommerce-Tabs-panel {
        padding: 32px 0 !important;
    }

    .woocommerce-product-attributes.shop_attributes th,
    .woocommerce-product-attributes.shop_attributes td {
        display: block !important;
        width: 100% !important;
        padding: 6px 0 !important;
    }

    .woocommerce-product-attributes.shop_attributes th {
        padding-bottom: 2px !important;
    }

    .woocommerce-product-attributes.shop_attributes tr {
        padding: 12px 0 !important;
        display: block !important;
    }

    .woocommerce-Reviews .comment_container {
        grid-template-columns: 40px 1fr;
        gap: 12px;
    }

    .woocommerce-Reviews .comment_container img.avatar {
        width: 40px;
        height: 40px;
    }

    .comment-form-rating .stars a {
        width: 36px;
        height: 36px;
    }

    .comment-form-rating .stars a::before {
        width: 18px;
        height: 18px;
    }

    .comment-form .form-submit .submit {
        width: 100%;
    }
}

/* Form Inputs - Modern */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
    width: 100%;
    padding: 14px 18px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 15px;
    font-family: var(--font-body);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 79, 0.1);
    outline: none;
}

/* ============================================
   SHOP BY SPORT SECTION
   ============================================ */

.shop-by-sport {
    display: grid;
    grid-template-columns: 2fr 3fr;
    gap: 0;
    min-height: 600px;
    background: #111;
    overflow: hidden;
}

.shop-by-sport__nav {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px;
    background: #111;
}

.shop-by-sport__header {
    margin-bottom: 40px;
}

.shop-by-sport__label {
    display: none;
}

.shop-by-sport__title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    color: #fff;
    margin: 0;
    letter-spacing: -0.04em;
    text-transform: uppercase;
}

.shop-by-sport__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shop-by-sport__item {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    cursor: pointer;
    transition: all var(--transition-base);
}

.shop-by-sport__item:first-child {
    border-top: 1px solid rgba(255,255,255,0.1);
}

.shop-by-sport__item-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.shop-by-sport__item-name {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    color: rgba(255,255,255,0.4);
    transition: color var(--transition-fast);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: -0.02em;
}

.shop-by-sport__item-count {
    display: none;
}

.shop-by-sport__item-arrow {
    width: 24px;
    height: 24px;
    color: rgba(255,255,255,0.3);
    transform: translateX(-8px);
    opacity: 0;
    transition: all var(--transition-base);
}

.shop-by-sport__item:hover .shop-by-sport__item-name,
.shop-by-sport__item.is-active .shop-by-sport__item-name {
    color: #fff;
}

.shop-by-sport__item:hover .shop-by-sport__item-arrow,
.shop-by-sport__item.is-active .shop-by-sport__item-arrow {
    transform: translateX(0);
    opacity: 1;
    color: #fff;
}

/* Image Container */
.shop-by-sport__images {
    position: relative;
    overflow: hidden;
    background: #222;
}

.shop-by-sport__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition-slow), transform var(--transition-slow);
    transform: scale(1.05);
}

.shop-by-sport__image.is-active {
    opacity: 1;
    transform: scale(1);
}

.shop-by-sport__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Shop by Sport CTA overlay */
.shop-by-sport__cta {
    position: absolute;
    bottom: 40px;
    left: 40px;
    right: 40px;
    z-index: 2;
}

.shop-by-sport__cta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-base);
    color: var(--color-contrast);
    padding: 14px 24px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-base);
}

.shop-by-sport__cta-link:hover {
    background: var(--color-primary);
    color: var(--color-base);
}

.shop-by-sport__cta-link svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.shop-by-sport__cta-link:hover svg {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 1024px) {
    .shop-by-sport__nav {
        padding: 40px;
    }
    .shop-by-sport__item-name {
        font-size: clamp(1.5rem, 3vw, 2.5rem);
    }
}

@media (max-width: 768px) {
    .shop-by-sport {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .shop-by-sport__images {
        order: -1;
        aspect-ratio: 16/9;
        position: relative;
    }

    .shop-by-sport__nav {
        padding: 40px 20px;
    }

    .shop-by-sport__header {
        margin-bottom: 24px;
    }

    .shop-by-sport__item {
        padding: 12px 0;
    }

    .shop-by-sport__item-name {
        font-size: 1.5rem;
    }

    .shop-by-sport__cta {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }
}

/* ============================================
   LOADING STATES
   ============================================ */

.loading {
    position: relative;
    pointer-events: none;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.font-heading { font-family: var(--font-heading); }
.font-body { font-family: var(--font-body); }

.weight-400 { font-weight: 400; }
.weight-500 { font-weight: 500; }
.weight-600 { font-weight: 600; }
.weight-700 { font-weight: 700; }

.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

.relative { position: relative; }
.overflow-hidden { overflow: hidden; }

/* Hide elements visually but keep for screen readers */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================
   WORDPRESS BLOCK LAYOUT INTEGRATION
   ============================================ */

/* Let WordPress handle default flex behavior */
/* Only override specific components that need it */

/* Ensure wide containers respect bounds */
.alignwide {
    width: 100%;
    max-width: var(--wp--style--global--wide-size, 1400px);
}

/* Header-specific flex layout */
.site-header .wp-block-group[class*="is-layout-flex"] {
    align-items: center;
    gap: var(--wp--preset--spacing--30, 1.5rem);
}

/* Header main container */
.site-header .wp-block-group.alignwide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 80px;
    width: 100%;
}

/* Header actions - push to right */
.header-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-shrink: 0; /* Only prevent shrinking for header actions */
}

/* Product grid containers need explicit width */
.products-grid-4col {
    width: 100%;
}

/* ============================================
   STACKING CONTEXT ISOLATION
   ============================================ */

/* Isolate stacking contexts for predictable layering */
.product-card,
.wc-block-grid__product {
    isolation: isolate;
}

.cta-banner {
    isolation: isolate;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 768px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 769px) {
    .hide-desktop { display: none !important; }
}

/* Section Spacing */
.section-padding {
    padding: 100px 0;
}

/* ============================================
   ENHANCED RESPONSIVE DESIGN
   ============================================ */

/* Large Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .section-padding {
        padding: 80px 0;
    }

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

    .display-heading {
        font-size: clamp(2.5rem, 7vw, 5rem);
    }

    .cta-banner {
        padding: 80px 30px;
    }

    .cta-banner-title {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
    }
}

/* Tablet (max-width: 768px) */
@media (max-width: 768px) {
    body {
        padding-top: 0;
    }

    .section-padding {
        padding: 60px 0;
    }

    /* Announcement bar - smaller on tablet */
    .announcement-bar {
        height: 32px;
    }

    .announcement-bar-content {
        font-size: 11px;
    }

    /* Header adjustments */
    .header-inner {
        height: 70px;
    }

    /* Hero adjustments for tablet */
    .hero-section {
        min-height: calc(100vh - 102px);
    }

    /* Typography refinements */
    .hero-title {
        font-size: clamp(2rem, 7vw, 3rem);
        letter-spacing: -0.02em;
    }

    .hero-subtitle {
        font-size: 1rem;
    }

    /* Category cards */
    .category-card-title {
        font-size: 1.25rem;
    }

    .category-card-content {
        padding: 1.5rem;
    }

    /* CTA banner */
    .cta-banner {
        padding: 60px 20px;
        border-radius: var(--radius-lg);
    }

    /* Footer spacing */
    .footer-top {
        padding: 60px 0 40px;
    }

    .hide-mobile {
        display: none !important;
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    body {
        padding-top: 0;
    }

    .section-padding {
        padding: 40px 0;
    }

    /* Announcement bar - compact on mobile */
    .announcement-bar {
        height: 28px;
    }

    .announcement-bar-content {
        font-size: 10px;
        letter-spacing: 0.05em;
    }

    .announcement-bar-content span {
        padding: 0 8px;
    }

    /* Header adjustments for mobile */
    .header-inner {
        height: 60px;
    }

    /* Hero adjustments for mobile */
    .hero-section {
        min-height: calc(100vh - 88px);
    }

    /* Hero buttons stack vertically */
    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .hero-buttons .wp-block-button {
        width: 100%;
        max-width: 280px;
    }

    .hero-buttons .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }

    /* Typography refinements for small screens */
    .hero-title {
        font-size: clamp(1.75rem, 8vw, 2.5rem);
        letter-spacing: -0.01em;
        line-height: 1.1;
    }

    .display-heading {
        font-size: clamp(2rem, 10vw, 3rem);
        letter-spacing: -0.02em;
    }

    /* Buttons - slightly smaller on mobile */
    .wp-block-button__link,
    .btn {
        padding: 14px 24px;
        font-size: 12px;
    }

    /* Product cards */
    .wc-block-grid__product-title,
    .product-card-title {
        font-size: 14px;
        margin: 0.75rem 1rem 0.5rem;
    }

    .wc-block-grid__product-price,
    .product-card-price {
        font-size: 16px;
        margin: 0 1rem 1rem;
    }

    .wc-block-grid__product .wp-block-button__link,
    .add_to_cart_button {
        width: calc(100% - 2rem);
        margin: 0 1rem 1rem;
        padding: 12px 16px !important;
        font-size: 11px;
    }

    /* Footer */
    .footer-top {
        padding: 40px 0 30px;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-bottom-links {
        justify-content: center;
    }
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--20);
}

.contact-form .form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--20);
}

.contact-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-form .form-group.full-width {
    grid-column: 1 / -1;
}

.contact-form label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-contrast);
    letter-spacing: 0.02em;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    font-size: 15px;
    font-family: var(--font-body);
    color: var(--color-contrast);
    background: var(--color-base);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-form input[type="text"]:focus,
.contact-form input[type="email"]:focus,
.contact-form input[type="tel"]:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 168, 79, 0.1);
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--color-gray-400);
}

.contact-form select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 48px;
    cursor: pointer;
}

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

.contact-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 40px;
    background: var(--color-primary);
    color: var(--color-base);
    border: none;
    border-radius: 0;
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    align-self: flex-start;
    margin-top: var(--wp--preset--spacing--20);
}

.contact-submit-btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
}

.contact-submit-btn:active {
    transform: translateY(0);
}

.contact-submit-btn svg {
    transition: transform var(--transition-fast);
}

.contact-submit-btn:hover svg {
    transform: translateX(4px);
}

/* Contact Page Responsive */
@media (max-width: 768px) {
    .contact-form .form-row {
        grid-template-columns: 1fr;
    }

    .contact-submit-btn {
        width: 100%;
    }
}

/* ============================================
   FEATURED PRODUCTS CAROUSEL
   ============================================ */

.featured-products-carousel {
    background: var(--color-base);
    padding: 80px 0;
    overflow: hidden;
}

.carousel-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 clamp(1rem, 4vw, 3rem);
}

/* Carousel Header */
.carousel-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 40px;
    gap: 24px;
    flex-wrap: wrap;
}

.carousel-header__text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.carousel-header__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-primary);
}

.carousel-header__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-contrast);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.1;
}

/* Carousel Header Actions (View All + arrows) */
.carousel-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Navigation Arrows */
.carousel-nav {
    display: flex;
    gap: 12px;
}

.carousel-nav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-contrast);
    background: transparent;
    color: var(--color-contrast);
    cursor: pointer;
    transition: all var(--transition-base);
}

.carousel-nav__btn:hover:not(:disabled) {
    background: var(--color-contrast);
    color: var(--color-base);
}

.carousel-nav__btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.carousel-nav__btn svg {
    transition: transform var(--transition-fast);
}

.carousel-nav__btn--prev:hover:not(:disabled) svg {
    transform: translateX(-2px);
}

.carousel-nav__btn--next:hover:not(:disabled) svg {
    transform: translateX(2px);
}

/* Carousel Track */
.carousel-track-wrapper {
    overflow: hidden;
    margin: 0 -12px;
}

.carousel-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 20px;

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* Carousel Item */
.carousel-item {
    flex: 0 0 calc(25% - 18px);
    min-width: calc(25% - 18px);
    scroll-snap-align: start;
}

/* Product Card Carousel */
.product-card-carousel {
    background: var(--color-base);
    border: 1px solid var(--color-gray-300);
    transition: all var(--transition-base);
    overflow: hidden;
}

.product-card-carousel:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
}

.product-card-carousel__link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* Product Image */
.product-card-carousel__image-wrapper {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

.product-card-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.product-card-carousel:hover .product-card-carousel__image {
    transform: scale(1.05);
}

/* NEW Badge - positioned top right */
.product-card-carousel .product-badge--new {
    position: absolute;
    top: 12px;
    right: 12px;
    background: var(--color-primary);
    color: var(--color-base);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 6px 12px;
    border-radius: 100px;
    z-index: 2;
}

/* Product Info */
.product-card-carousel__info {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.product-card-carousel__title {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-contrast);
    margin: 0;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-card-carousel__category {
    font-size: 12px;
    color: var(--color-gray-500);
    text-transform: capitalize;
}

.product-card-carousel__price {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-contrast);
    margin-top: 4px;
}

.product-card-carousel__price del {
    color: var(--color-gray-400);
    font-weight: 400;
    margin-right: 6px;
}

.product-card-carousel__price ins {
    text-decoration: none;
    color: var(--color-primary);
}

/* Color Swatches Mini */
.product-card-carousel__swatches {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    align-items: center;
}

.product-swatch-mini {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    cursor: default;
}

/* Common swatch colors */
.product-swatch-mini[data-color="black"] { background-color: #1a1a1a !important; }
.product-swatch-mini[data-color="white"] { background-color: #ffffff !important; }
.product-swatch-mini[data-color="red"] { background-color: #e53935 !important; }
.product-swatch-mini[data-color="blue"] { background-color: #1e88e5 !important; }
.product-swatch-mini[data-color="green"] { background-color: #43a047 !important; }
.product-swatch-mini[data-color="yellow"] { background-color: #fdd835 !important; }
.product-swatch-mini[data-color="orange"] { background-color: #fb8c00 !important; }
.product-swatch-mini[data-color="purple"] { background-color: #8e24aa !important; }
.product-swatch-mini[data-color="pink"] { background-color: #ec407a !important; }
.product-swatch-mini[data-color="gray"],
.product-swatch-mini[data-color="grey"] { background-color: #757575 !important; }
.product-swatch-mini[data-color="navy"] { background-color: #1a237e !important; }
.product-swatch-mini[data-color="teal"] { background-color: #00897b !important; }

.product-swatch-more {
    font-size: 11px;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* Carousel Empty State */
.carousel-empty {
    width: 100%;
    text-align: center;
    padding: 60px 20px;
    color: var(--color-gray-500);
}

/* Responsive Carousel */

/* Desktop (1200px+): 4 items visible */
@media (min-width: 1200px) {
    .carousel-item {
        flex: 0 0 calc(25% - 18px);
        min-width: calc(25% - 18px);
    }
}

/* Tablet (768-1199px): 3 items visible */
@media (min-width: 768px) and (max-width: 1199px) {
    .carousel-item {
        flex: 0 0 calc(33.333% - 16px);
        min-width: calc(33.333% - 16px);
    }

    .carousel-track {
        gap: 20px;
    }

    .carousel-header__title {
        font-size: clamp(1.5rem, 3vw, 2rem);
    }
}

/* Mobile (480-767px): 2 items visible */
@media (min-width: 480px) and (max-width: 767px) {
    .featured-products-carousel {
        padding: 60px 0;
    }

    .carousel-item {
        flex: 0 0 calc(50% - 8px);
        min-width: calc(50% - 8px);
    }

    .carousel-track {
        gap: 16px;
    }

    .carousel-header {
        margin-bottom: 24px;
    }

    .carousel-nav__btn {
        width: 40px;
        height: 40px;
    }

    .carousel-nav__btn svg {
        width: 16px;
        height: 16px;
    }

    .product-card-carousel__info {
        padding: 12px;
    }

    .product-card-carousel__title {
        font-size: 13px;
    }
}

/* Small mobile (<480px): 1 item visible */
@media (max-width: 479px) {
    .featured-products-carousel {
        padding: 48px 0;
    }

    .carousel-item {
        flex: 0 0 calc(100% - 24px);
        min-width: calc(100% - 24px);
    }

    .carousel-track {
        gap: 16px;
        padding: 0 24px 16px;
    }

    .carousel-track-wrapper {
        margin: 0 -24px;
    }

    .carousel-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        gap: 12px;
    }

    .carousel-nav {
        display: flex;
        gap: 8px;
        flex-shrink: 0;
    }

    .carousel-nav__btn {
        width: 36px;
        height: 36px;
        border-width: 1.5px;
    }

    .carousel-nav__btn svg {
        width: 14px;
        height: 14px;
    }

    .carousel-header__title {
        font-size: 1.25rem;
    }

    .carousel-header__label {
        font-size: 10px;
    }

    .product-card-carousel__title {
        font-size: 14px;
    }

    .product-card-carousel__info {
        padding: 14px;
    }
}

/* ============================================
   NEW ARRIVALS SECTION
   ============================================ */

.new-arrivals-section {
    background: #fafafa;
}

.new-arrivals-section .carousel-header__label {
    color: #111;
}

/* Hide View All button on small mobile */
@media (max-width: 479px) {
    .carousel-header__actions .btn-nike--small {
        display: none;
    }
}

/* ============================================
   HOMEPAGE SECTION SPACING
   ============================================ */

/* Light-to-dark and dark-to-light transitions are seamless.
   Same-tone sections get a separator for visual clarity. */
.featured-products-carousel + .shop-by-sport,
.shop-by-sport + .featured-products-carousel,
.shop-by-sport + .new-arrivals-section {
    /* Adjacent dark→light or nav→product transitions are already clear */
}

/* Ensure white-bg product sections have consistent spacing */
.new-arrivals-section {
    padding: 80px 0;
}

@media (min-width: 480px) and (max-width: 767px) {
    .new-arrivals-section {
        padding: 60px 0;
    }
}

@media (max-width: 479px) {
    .new-arrivals-section {
        padding: 48px 0;
    }
}

/* ============================================
   SINGLE PRODUCT PAGE - MODERN ENHANCEMENTS
   ============================================ */

/* Product Badges Overlay (Gallery) */
.single-product-badges {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.single-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 0;
}

.single-product-badge--sale {
    background: #e53935;
    color: #ffffff;
}

.single-product-badge--new {
    background: var(--color-primary);
    color: #ffffff;
}

/* Stock Status Indicator */
.stock-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    margin-bottom: 20px;
}

.stock-status svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.stock-status--in-stock {
    background: rgba(22, 199, 154, 0.1);
    color: #16C79A;
}

.stock-status--low-stock {
    background: rgba(255, 152, 0, 0.1);
    color: #f57c00;
}

.stock-status--out-of-stock {
    background: rgba(229, 57, 53, 0.1);
    color: #e53935;
}

.stock-status--on-backorder {
    background: rgba(79, 152, 202, 0.1);
    color: var(--color-secondary);
}

/* Product Trust Row (stock status + inline trust badges) */
.product-trust-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 12px 0;
}

.product-trust-row .stock-status {
    margin: 0;
    padding: 6px 12px;
    font-size: 12px;
}

.trust-badge-inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #767676;
    line-height: 1;
}

.trust-badge-inline svg {
    flex-shrink: 0;
    color: #767676;
}

/* Enhanced Price Display */
.price-enhanced {
    margin-bottom: 24px;
}

.price-enhanced .price {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.price-enhanced del {
    color: var(--color-gray-400);
    font-size: 1.25rem;
    font-weight: 500;
}

.price-enhanced ins {
    text-decoration: none;
    color: var(--color-primary);
    font-size: 2rem;
    font-weight: 700;
}

.price-savings {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 199, 154, 0.1);
    color: var(--color-primary);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 0;
}

.price-savings svg {
    width: 14px;
    height: 14px;
}

/* Social Sharing */
.product-share {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 0;
    border-top: 1px solid var(--color-gray-300);
    margin-top: 20px;
}

.product-share__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
}

.product-share__icons {
    display: flex;
    gap: 8px;
}

.product-share__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--color-gray-200);
    color: var(--color-contrast);
    border: none;
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.product-share__btn:hover {
    background: var(--color-primary);
    color: var(--color-base);
}

.product-share__btn svg {
    width: 18px;
    height: 18px;
}

.product-share__btn--copied {
    background: var(--color-primary) !important;
    color: var(--color-base) !important;
}

/* Enhanced Product Meta with Icons */
.product-meta-enhanced {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 0;
    border-top: 1px solid var(--color-gray-300);
}

.product-meta-enhanced__item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-gray-500);
}

.product-meta-enhanced__item svg {
    width: 16px;
    height: 16px;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.product-meta-enhanced__label {
    font-weight: 600;
    color: var(--color-contrast);
}

.product-meta-enhanced__value a {
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.product-meta-enhanced__value a:hover {
    color: var(--color-primary);
}

/* Modern Related Products Header */
.section-header-modern {
    text-align: center;
    margin-bottom: 48px;
}

.section-header-modern__label {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.section-header-modern__title {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-contrast);
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}

.section-header-modern__line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 200px;
    margin: 0 auto;
}

.section-header-modern__line::before,
.section-header-modern__line::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-primary));
}

.section-header-modern__line::after {
    background: linear-gradient(90deg, var(--color-primary), transparent);
}

.section-header-modern__line-dot {
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Enhanced Add-to-Cart Button */
.single-product .single_add_to_cart_button {
    position: relative;
    padding: 18px 40px !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--color-primary);
    color: var(--color-base) !important;
    border: none;
    border-radius: 0;
    cursor: pointer;
    overflow: hidden;
    transition: all var(--transition-base);
}

.single-product .single_add_to_cart_button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s ease;
}

.single-product .single_add_to_cart_button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(22, 199, 154, 0.35);
}

.single-product .single_add_to_cart_button:hover::before {
    left: 100%;
}

.single-product .single_add_to_cart_button:active {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(22, 199, 154, 0.3);
}

/* Quantity Input Styling */
.single-product .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-gray-300);
    border-radius: 0;
    overflow: hidden;
}

.single-product .quantity input[type="number"] {
    width: 60px;
    height: 52px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    padding: 0;
    -moz-appearance: textfield;
}

.single-product .quantity input[type="number"]::-webkit-outer-spin-button,
.single-product .quantity input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.single-product .quantity input:focus {
    outline: none;
    box-shadow: none;
}

/* Product Gallery Container - for badge positioning */
.wc-block-woocommerce-product-image-gallery,
.wp-block-woocommerce-product-image-gallery,
.woocommerce-product-gallery {
    position: relative;
}

/* Single Product Mobile Responsive */
@media (max-width: 768px) {
    .product-trust-row {
        gap: 10px;
    }

    .product-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .single-product .single_add_to_cart_button {
        width: 100%;
        padding: 16px 24px !important;
    }

    .section-header-modern {
        margin-bottom: 32px;
    }

    .section-header-modern__title {
        font-size: 1.5rem;
    }

    .single-product-badges {
        top: 12px;
        left: 12px;
    }

    .single-product-badge {
        padding: 6px 10px;
        font-size: 10px;
    }
}

/* ============================================
   VARIATION SWATCHES - Color/Attribute Selector
   ============================================ */

/* Hide the default WooCommerce variations table */
.woocommerce div.product form.cart .variations {
    display: none !important;
}

/* Variation Swatches Container */
.variation-swatches {
    margin-bottom: 24px;
}

.variation-swatches__group {
    margin-bottom: 16px;
}

.variation-swatches__label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-contrast);
    margin-bottom: 12px;
}

.variation-swatches__label span {
    font-weight: 400;
    color: var(--color-gray-500);
    text-transform: capitalize;
    letter-spacing: 0;
}

.variation-swatches__options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Color Swatch Style */
.variation-swatch {
    position: relative;
    width: 44px;
    height: 44px;
    border: 2px solid var(--color-gray-300);
    border-radius: 0;
    cursor: pointer;
    transition: all var(--transition-fast);
    background-size: cover;
    background-position: center;
}

.variation-swatch::before {
    content: '';
    position: absolute;
    inset: -4px;
    border: 2px solid transparent;
    border-radius: 0;
    transition: border-color var(--transition-fast);
}

.variation-swatch:hover {
    border-color: var(--color-gray-500);
}

.variation-swatch.is-selected {
    border-color: var(--color-primary);
}

.variation-swatch.is-selected::before {
    border-color: var(--color-primary);
}

/* Checkmark for selected swatch */
.variation-swatch.is-selected::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 10px;
    background-repeat: no-repeat;
    background-position: center;
}

/* Color definitions */
.variation-swatch[data-color="black"] { background-color: #1a1a1a; }
.variation-swatch[data-color="white"] { background-color: #ffffff; border-color: var(--color-gray-300); }
.variation-swatch[data-color="red"] { background-color: #e53935; }
.variation-swatch[data-color="blue"] { background-color: #1e88e5; }
.variation-swatch[data-color="green"] { background-color: #43a047; }
.variation-swatch[data-color="yellow"] { background-color: #fdd835; }
.variation-swatch[data-color="orange"] { background-color: #fb8c00; }
.variation-swatch[data-color="purple"] { background-color: #8e24aa; }
.variation-swatch[data-color="pink"] { background-color: #ec407a; }
.variation-swatch[data-color="gray"],
.variation-swatch[data-color="grey"] { background-color: #757575; }
.variation-swatch[data-color="navy"] { background-color: #1a237e; }
.variation-swatch[data-color="teal"] { background-color: #00897b; }
.variation-swatch[data-color="brown"] { background-color: #795548; }
.variation-swatch[data-color="beige"] { background-color: #d7ccc8; }
.variation-swatch[data-color="gold"] { background-color: #ffd700; }
.variation-swatch[data-color="silver"] { background-color: #c0c0c0; }
.variation-swatch[data-color="maroon"] { background-color: #800000; }
.variation-swatch[data-color="cyan"] { background-color: #00bcd4; }
.variation-swatch[data-color="coral"] { background-color: #ff7f50; }
.variation-swatch[data-color="olive"] { background-color: #808000; }

/* Text/Button Style Swatch (for non-color attributes like Size) */
.variation-swatch--text {
    width: auto;
    min-width: 52px;
    height: 44px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-100);
    border: 2px solid var(--color-gray-300);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-contrast);
}

.variation-swatch--text:hover {
    background: var(--color-gray-200);
    border-color: var(--color-gray-500);
}

.variation-swatch--text.is-selected {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-base);
}

.variation-swatch--text.is-selected::after {
    display: none;
}

.variation-swatch--text.is-selected::before {
    display: none;
}

/* Unavailable/Out of stock swatch */
.variation-swatch.is-unavailable {
    opacity: 0.4;
    cursor: not-allowed;
    position: relative;
}

.variation-swatch.is-unavailable::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -2px;
    right: -2px;
    height: 2px;
    background: var(--color-gray-500);
    transform: rotate(-45deg);
}

/* Swatch tooltip */
.variation-swatch[data-tooltip] {
    position: relative;
}

.variation-swatch[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    padding: 6px 10px;
    background: var(--color-contrast);
    color: var(--color-base);
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: 4px;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-fast);
    z-index: 10;
}

.variation-swatch[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) scale(1);
}

/* Clear selection link */
.variation-swatches__clear {
    display: inline-block;
    margin-top: 12px;
    font-size: 12px;
    color: var(--color-gray-500);
    text-decoration: underline;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.variation-swatches__clear:hover {
    color: var(--color-primary);
}

/* Mobile responsive for swatches */
@media (max-width: 768px) {
    .variation-swatch {
        width: 40px;
        height: 40px;
    }

    .variation-swatch--text {
        min-width: 48px;
        height: 40px;
        padding: 0 12px;
        font-size: 12px;
    }

    .variation-swatches__options {
        gap: 8px;
    }
}

/* ============================================
   CATEGORY PAGE - MODERN HERO & TOOLBAR
   ============================================ */

/* Category Hero Banner */
.category-hero {
    position: relative;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    margin-bottom: 0;
}

.category-hero__background {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.category-hero__background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(39, 39, 39, 0.5) 0%,
        rgba(39, 39, 39, 0.75) 50%,
        rgba(39, 39, 39, 0.9) 100%
    );
    z-index: 1;
}

.category-hero__content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 60px 24px;
}

.category-hero__title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 800;
    color: var(--color-base);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.category-hero__description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.75);
    margin: 0 0 24px;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.category-hero__count {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-base);
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: var(--radius-full);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.category-hero__count::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

/* Category Hero without image fallback */
.category-hero--no-image {
    background: linear-gradient(135deg, var(--color-contrast) 0%, #3a3a3a 100%);
    min-height: 260px;
}

.category-hero--no-image .category-hero__overlay {
    background: none;
}

/* Shop page hero specific */
.category-hero--shop {
    background: linear-gradient(135deg, var(--color-contrast) 0%, #2d2d2d 50%, #1a1a1a 100%);
}

.category-hero--shop .category-hero__overlay {
    background: linear-gradient(
        to bottom,
        rgba(22, 199, 154, 0.1) 0%,
        transparent 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

/* Product Toolbar */
.product-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 0 24px;
    margin-bottom: 8px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.product-toolbar__count {
    font-size: 13px;
    color: var(--color-gray-500);
    letter-spacing: 0.01em;
}

.product-toolbar__count strong {
    color: var(--color-contrast);
    font-weight: 600;
}

.product-toolbar__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* View Toggle Buttons - Modern Pill Style */
.view-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px;
    background: var(--color-gray-100);
    border-radius: 50px;
}

.view-toggle__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 34px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-gray-400);
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 50px;
}

.view-toggle__btn:hover {
    color: var(--color-contrast);
}

.view-toggle__btn.is-active {
    background: var(--color-base);
    color: var(--color-contrast);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.view-toggle__btn svg {
    width: 18px;
    height: 18px;
}

/* Sort Dropdown Enhanced */
.product-toolbar .woocommerce-ordering {
    margin: 0;
}

.product-toolbar .orderby {
    min-width: 180px;
    padding: 10px 16px;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    background: var(--color-base);
    font-size: 14px;
    color: var(--color-contrast);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.product-toolbar .orderby:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* ============================================
   ENHANCED PRODUCT CARDS - HOVER EFFECTS
   ============================================ */

/* Quick View Button on Image Hover */
.product-card__quick-view {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--color-base);
    color: var(--color-contrast);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

.product-card__quick-view svg {
    width: 16px;
    height: 16px;
}

.product-card:hover .product-card__quick-view,
.wc-block-grid__product:hover .product-card__quick-view,
.wc-block-product-template .product-card:hover .product-card__quick-view {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.product-card__quick-view:hover {
    background: var(--color-primary);
    color: var(--color-base);
}

/* Wishlist Heart Icon */
.product-card__wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-base);
    border: none;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
}

.product-card__wishlist svg {
    width: 20px;
    height: 20px;
    stroke: var(--color-contrast);
    fill: transparent;
    transition: all var(--transition-fast);
}

.product-card:hover .product-card__wishlist,
.wc-block-grid__product:hover .product-card__wishlist,
.wc-block-product-template .product-card:hover .product-card__wishlist {
    opacity: 1;
    transform: scale(1);
}

.product-card__wishlist:hover svg {
    stroke: #e53935;
}

.product-card__wishlist.is-wishlisted svg {
    fill: #e53935;
    stroke: #e53935;
}

/* ============================================
   QUICK VIEW MODAL
   ============================================ */

.quick-view-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
}

.quick-view-modal.is-active {
    opacity: 1;
    visibility: visible;
}

.quick-view-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
}

.quick-view-modal__content {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    background: var(--color-base);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    transition: transform var(--transition-base);
}

.quick-view-modal.is-active .quick-view-modal__content {
    transform: scale(1) translateY(0);
}

.quick-view-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-base);
    border: 1px solid var(--color-gray-300);
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
}

.quick-view-modal__close:hover {
    background: var(--color-gray-100);
    border-color: var(--color-gray-400);
}

.quick-view-modal__close svg {
    width: 20px;
    height: 20px;
}

.quick-view-modal__image {
    position: relative;
    aspect-ratio: 1;
    background: var(--color-gray-100);
    overflow: hidden;
}

.quick-view-modal__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quick-view-modal__info {
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.quick-view-modal__category {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.quick-view-modal__title {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-contrast);
    margin: 0 0 16px;
    line-height: 1.2;
}

.quick-view-modal__price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-contrast);
    margin-bottom: 20px;
}

.quick-view-modal__price del {
    font-size: 1rem;
    color: var(--color-gray-400);
    font-weight: 400;
    margin-right: 8px;
}

.quick-view-modal__price ins {
    text-decoration: none;
    color: var(--color-primary);
}

.quick-view-modal__description {
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-gray-500);
    margin-bottom: 24px;
    flex-grow: 1;
}

.quick-view-modal__actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
}

.quick-view-modal__add-to-cart {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    background: var(--color-primary);
    color: var(--color-base);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.quick-view-modal__add-to-cart:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(22, 199, 154, 0.3);
}

.quick-view-modal__add-to-cart svg {
    width: 18px;
    height: 18px;
}

.quick-view-modal__view-details {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    background: transparent;
    color: var(--color-contrast);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 2px solid var(--color-gray-300);
    transition: all var(--transition-fast);
}

.quick-view-modal__view-details:hover {
    border-color: var(--color-contrast);
    background: var(--color-gray-100);
}

.quick-view-modal__view-details svg {
    width: 16px;
    height: 16px;
}

/* Quick View Modal Responsive */
@media (max-width: 768px) {
    .quick-view-modal__content {
        grid-template-columns: 1fr;
        max-height: 95vh;
    }

    .quick-view-modal__image {
        aspect-ratio: 4/3;
    }

    .quick-view-modal__info {
        padding: 24px;
    }

    .quick-view-modal__title {
        font-size: 1.5rem;
    }

    .quick-view-modal__close {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
    }
}

/* ============================================
   LOAD MORE SECTION
   ============================================ */

.load-more-section {
    text-align: center;
    padding: 60px 0 40px;
    margin-top: 40px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.load-more-section__progress {
    font-size: 13px;
    color: var(--color-gray-500);
    margin-bottom: 24px;
    letter-spacing: 0.02em;
}

.load-more-section__progress strong {
    color: var(--color-contrast);
    font-weight: 600;
}

.load-more-section__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 48px;
    background: transparent;
    color: var(--color-contrast);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border: 2px solid var(--color-contrast);
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.load-more-section__btn:hover {
    background: var(--color-contrast);
    color: var(--color-base);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.load-more-section__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.load-more-section__btn svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.load-more-section__btn:hover svg {
    transform: translateY(3px);
}

/* Loading spinner */
.load-more-section__btn .spinner {
    display: none;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: var(--color-contrast);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.load-more-section__btn:hover .spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: var(--color-base);
}

.load-more-section__btn.is-loading .spinner {
    display: block;
}

.load-more-section__btn.is-loading svg:not(.spinner) {
    display: none;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ============================================
   PRODUCT GRID ANIMATIONS
   ============================================ */

/* Product fade-in animation - smooth and modern */
.product-grid-animated .product-card,
.product-grid-animated .wc-block-grid__product {
    opacity: 0;
    transform: translateY(24px);
    animation: productFadeIn 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Staggered animation delays - quicker cascade */
.product-grid-animated .product-card:nth-child(1),
.product-grid-animated .wc-block-grid__product:nth-child(1) { animation-delay: 0.02s; }
.product-grid-animated .product-card:nth-child(2),
.product-grid-animated .wc-block-grid__product:nth-child(2) { animation-delay: 0.06s; }
.product-grid-animated .product-card:nth-child(3),
.product-grid-animated .wc-block-grid__product:nth-child(3) { animation-delay: 0.10s; }
.product-grid-animated .product-card:nth-child(4),
.product-grid-animated .wc-block-grid__product:nth-child(4) { animation-delay: 0.14s; }
.product-grid-animated .product-card:nth-child(5),
.product-grid-animated .wc-block-grid__product:nth-child(5) { animation-delay: 0.18s; }
.product-grid-animated .product-card:nth-child(6),
.product-grid-animated .wc-block-grid__product:nth-child(6) { animation-delay: 0.22s; }
.product-grid-animated .product-card:nth-child(7),
.product-grid-animated .wc-block-grid__product:nth-child(7) { animation-delay: 0.26s; }
.product-grid-animated .product-card:nth-child(8),
.product-grid-animated .wc-block-grid__product:nth-child(8) { animation-delay: 0.30s; }
.product-grid-animated .product-card:nth-child(9),
.product-grid-animated .wc-block-grid__product:nth-child(9) { animation-delay: 0.34s; }
.product-grid-animated .product-card:nth-child(10),
.product-grid-animated .wc-block-grid__product:nth-child(10) { animation-delay: 0.38s; }
.product-grid-animated .product-card:nth-child(11),
.product-grid-animated .wc-block-grid__product:nth-child(11) { animation-delay: 0.42s; }
.product-grid-animated .product-card:nth-child(12),
.product-grid-animated .wc-block-grid__product:nth-child(12) { animation-delay: 0.46s; }

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

/* New products loaded animation */
.product-card.product-new-loaded,
.wc-block-grid__product.product-new-loaded {
    animation: productFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* View Toggle Grid Columns - works with WooCommerce flex layout */
.wp-block-woocommerce-product-collection.product-grid--3-cols .wc-block-product-template,
.wp-block-woocommerce-product-collection.product-grid--3-cols > ul {
    --wc-product-template-columns: 3 !important;
}

.wp-block-woocommerce-product-collection.product-grid--4-cols .wc-block-product-template,
.wp-block-woocommerce-product-collection.product-grid--4-cols > ul {
    --wc-product-template-columns: 4 !important;
}

/* ============================================
   PRODUCT GRID - CENTERING & IMAGE FIX
   ============================================ */

/* Center the product grid container */
.wp-block-woocommerce-product-collection.product-grid-animated {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Fix product card image - only show first image */
.product-card .wp-block-woocommerce-product-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-gray-100);
}

/* All images absolute positioned */
.product-card .wp-block-woocommerce-product-image img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    max-width: none !important;
}

/* Hide secondary image by default */
.product-card .wp-block-woocommerce-product-image img.secondary-image {
    opacity: 0;
    z-index: 1;
    transition: opacity var(--transition-base);
}

/* Show secondary on hover */
.product-card:hover .wp-block-woocommerce-product-image img.secondary-image {
    opacity: 1;
}

/* ============================================
   CATEGORY PAGE RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .category-hero {
        min-height: 280px;
    }

    .category-hero__content {
        padding: 48px 20px;
    }

    .product-grid--3-cols,
    .product-grid--4-cols {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .category-hero {
        min-height: 240px;
    }

    .category-hero__content {
        padding: 40px 16px;
    }

    .category-hero__title {
        font-size: 2rem;
    }

    .product-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .product-toolbar__actions {
        width: 100%;
        justify-content: space-between;
    }

    .product-grid--3-cols,
    .product-grid--4-cols {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .view-toggle {
        display: none;
    }

    .load-more-section {
        padding: 32px 0;
    }

    .load-more-section__btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .category-hero {
        min-height: 200px;
    }

    .category-hero__title {
        font-size: 1.75rem;
    }

    .category-hero__description {
        font-size: 0.875rem;
    }

    .category-hero__count {
        font-size: 12px;
        padding: 8px 16px;
    }
}

/* ============================================
   PRODUCT ADD-ONS
   ============================================ */

/* ── Select Dropdown Container ── */
.product-addons-select {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid #e5e5e5;
}

.product-addons-select__group {
    margin-bottom: 16px;
}

.product-addons-select__group:last-child {
    margin-bottom: 0;
}

.product-addons-select__label {
    display: block;
    font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);
    font-size: 0.875rem;
    font-weight: 600;
    color: #111;
    margin-bottom: 6px;
    line-height: 1.4;
}

.product-addons-select__dropdown {
    display: block;
    width: 100%;
    padding: 12px 36px 12px 14px;
    font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);
    font-size: 0.8125rem;
    font-weight: 500;
    color: #111;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 0;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='4 6 8 10 12 6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.product-addons-select__dropdown:focus {
    outline: none;
    border-color: #111;
}

.product-addons-select__dropdown.is-loading {
    opacity: 0.6;
    pointer-events: none;
}

.product-addons-select__dropdown.is-added {
    border-color: #2e7d32;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%232e7d32' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ── Bulk Order CTA Button ── */

.bulk-order-cta {
    margin-top: 12px;
}

.bulk-order-cta__btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #111;
    background: transparent;
    border: 2px solid #111;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.bulk-order-cta__btn:hover {
    background: #111;
    color: #fff;
}

/* ── Toast Notification ── */

.netplay-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: 14px 28px;
    font-family: var(--wp--preset--font-family--sora, 'Sora', sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: #fff;
    background: #111;
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
}

.netplay-toast--error {
    background: #c62828;
}

.netplay-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

/* ── Responsive ── */

@media (max-width: 768px) {
    .product-addons-select {
        margin-top: 20px;
        padding-top: 20px;
    }

    .product-addons-select__dropdown {
        font-size: 0.875rem;
        padding: 14px 36px 14px 14px;
    }
}

/* ── Product description: responsive overflow fix (2026-04-29) ── */
.product-description-section,
.product-description-section .entry-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.product-description-section .entry-content > * {
    max-width: 100%;
}

.product-description-section .entry-content table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    border: 1px solid var(--wp--preset--color--tertiary, #ddd);
}

.product-description-section .entry-content table th,
.product-description-section .entry-content table td {
    overflow-wrap: break-word;
    word-wrap: break-word;
    padding: 10px 12px;
    vertical-align: top;
    border: 1px solid var(--wp--preset--color--tertiary, #ddd);
}

.product-description-section .entry-content img,
.product-description-section .entry-content video,
.product-description-section .entry-content iframe {
    max-width: 100%;
    height: auto;
}

@media (max-width: 480px) {
    .product-description-section .entry-content table th,
    .product-description-section .entry-content table td {
        padding: 8px;
        font-size: 0.95em;
    }
}

/* ── Product gallery: cap image height so tall images don't blow out the layout (2026-04-29) ── */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    max-height: 600px;
    overflow: hidden;
    text-align: center;
    background: var(--wp--preset--color--base, #fff);
}

.woocommerce-product-gallery .woocommerce-product-gallery__image > a {
    display: inline-block;
    max-height: 600px;
    line-height: 0;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image img,
.woocommerce-product-gallery .woocommerce-product-gallery__image > a > img {
    max-height: 600px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain;
    margin: 0 auto;
    display: inline-block;
}

@media (max-width: 600px) {
    .woocommerce-product-gallery .woocommerce-product-gallery__image,
    .woocommerce-product-gallery .woocommerce-product-gallery__image > a,
    .woocommerce-product-gallery .woocommerce-product-gallery__image img {
        max-height: 480px !important;
    }
}

/* ── Sticky footer: keep footer at viewport bottom on short pages (2026-04-29) ── */
html {
    min-height: 100%;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body > .wp-site-blocks {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.wp-site-blocks > main {
    flex: 1 0 auto;
}

.wp-site-blocks > .site-footer,
.wp-site-blocks > footer {
    margin-top: auto;
    flex-shrink: 0;
}