/*
Theme Name:    Netvision Child
Theme URI:     https://netvision.com.tr
Description:   Professional corporate e-commerce child theme for netvision.com.tr – Electronics & Technology
Author:        MK
Author URI:    https://netvision.com.tr
Template:      storefront
Version:       1.0.0
License:       GNU General Public License v2 or later
License URI:   http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:   netvision-child
*/

/*--------------------------------------------------------------
# GOOGLE FONTS — Exo 2 (tech/corporate display) + Nunito Sans (body)
--------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400;500;600;700;800&family=Nunito+Sans:wght@300;400;500;600;700&display=swap');

/*--------------------------------------------------------------
# DESIGN TOKENS
--------------------------------------------------------------*/
:root {
    /* ── Brand Palette ── */
    --cyan:           #00c2e0;       /* electric cyan — primary accent */
    --cyan-dark:      #0099b3;
    --cyan-glow:      rgba(0,194,224,0.15);
    --slate-900:      #0d1b2a;       /* deepest bg, footer */
    --slate-800:      #162233;       /* header */
    --slate-700:      #1e3048;       /* card hover bg */
    --slate-600:      #2a4060;       /* borders on dark */
    --slate-100:      #f0f4f8;       /* page background */
    --slate-50:       #f8fafc;       /* card / widget bg */
    --white:          #ffffff;

    /* ── Text ── */
    --text-primary:   #0d1b2a;
    --text-secondary: #3d5166;
    --text-muted:     #7a90a4;
    --text-on-dark:   #c8daea;
    --text-on-dark-h: #ffffff;

    /* ── Accent / Status ── */
    --price-color:    #e85d00;       /* warm amber-orange — prices pop */
    --sale-badge:     #e8003d;
    --success:        #00b87a;
    --warning:        #f59e0b;

    /* ── Surfaces ── */
    --card-bg:        var(--white);
    --card-border:    #dde6ef;
    --card-radius:    12px;
    --card-shadow:    0 2px 8px rgba(13,27,42,0.07);
    --card-shadow-hover: 0 10px 32px rgba(0,194,224,0.18);

    /* ── Header ── */
    --header-bg:      var(--slate-800);
    --header-h:       68px;
    --header-border:  var(--slate-600);
    --nav-link:       #a8c0d6;
    --nav-link-hover: var(--cyan);

    /* ── Footer ── */
    --footer-bg:      var(--slate-900);
    --footer-border:  var(--slate-600);
    --footer-text:    #8aa4bb;
    --footer-link:    #a8c8de;
    --footer-title:   var(--white);
    --footer-accent:  var(--cyan);

    /* ── Typography ── */
    --font-display:   'Exo 2', sans-serif;
    --font-body:      'Nunito Sans', sans-serif;

    /* ── Spacing scale ── */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;
    --sp-12: 3rem;

    /* ── Transitions ── */
    --t-fast:  0.15s ease;
    --t-base:  0.22s ease;
    --t-slow:  0.38s ease;
}

/*--------------------------------------------------------------
# RESET & BASE
--------------------------------------------------------------*/
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.7;
    background-color: var(--slate-100);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body, button, input, textarea { line-height: 1.7; }

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

/*--------------------------------------------------------------
# TYPOGRAPHY
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    color: var(--text-primary);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: var(--sp-3);
    letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 2.8vw, 1.9rem); }
h3 { font-size: clamp(1.1rem, 2.2vw, 1.45rem); }
h4 { font-size: 1.15rem; }
h5 { font-size: 0.98rem; }
h6 { font-size: 0.88rem; }

p { margin-bottom: var(--sp-4); }

a {
    color: var(--cyan-dark);
    text-decoration: none;
    transition: color var(--t-fast);
}
a:hover, a:focus {
    color: var(--cyan);
    text-decoration: none;
}

/*--------------------------------------------------------------
# UTILITY — SECTION WRAPPER
--------------------------------------------------------------*/
.nv-section {
    padding: var(--sp-10) 0;
}

.nv-section-title {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.nv-section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(to right, var(--cyan), transparent);
    border-radius: 2px;
}

/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/
.button,
button,
input[type="button"],
input[type="submit"],
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.55em 1.5em;
    background-color: var(--cyan);
    color: var(--slate-900) !important;
    border: none;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    text-decoration: none !important;
    transition: background-color var(--t-base), transform var(--t-fast), box-shadow var(--t-base);
    box-shadow: 0 2px 8px rgba(0,194,224,0.25);
    text-transform: uppercase;
}

.button:hover,
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover {
    background-color: var(--cyan-dark);
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,194,224,0.3);
    text-decoration: none !important;
}

/* Add-to-cart / Checkout CTA */
.single_add_to_cart_button,
.woocommerce #respond input#submit,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    background: linear-gradient(135deg, var(--cyan) 0%, var(--cyan-dark) 100%) !important;
    color: var(--slate-900) !important;
    font-size: 1rem !important;
    padding: 0.75em 2.2em !important;
    box-shadow: 0 4px 14px rgba(0,194,224,0.3) !important;
    letter-spacing: 0.03em;
}

.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background: linear-gradient(135deg, var(--cyan-dark) 0%, #007a8f 100%) !important;
    color: var(--white) !important;
    box-shadow: 0 8px 22px rgba(0,194,224,0.35) !important;
}

/* Ghost / outline button variant */
.button.outline {
    background: transparent;
    color: var(--cyan) !important;
    border: 2px solid var(--cyan);
    box-shadow: none;
}
.button.outline:hover {
    background: var(--cyan);
    color: var(--slate-900) !important;
}

/* WP block button */
.hentry .entry-content .wp-block-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
    background-color: var(--cyan);
    color: var(--slate-900);
    font-weight: 700;
    border-radius: 6px;
}

/*--------------------------------------------------------------
# FORMS
--------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    border: 1.5px solid var(--card-border);
    border-radius: 6px;
    padding: 0.5em 0.85em;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--text-primary);
    background-color: var(--white);
    transition: border-color var(--t-base), box-shadow var(--t-base);
    width: 100%;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-glow);
    outline: none;
}

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

/*--------------------------------------------------------------
# HEADER
--------------------------------------------------------------*/
.site-header {
    background-color: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.22);
    padding: 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    min-height: var(--header-h);
    display: flex;
    align-items: center;
}

.home.blog .site-header,
.home.page:not(.page-template-template-homepage) .site-header,
.home.post-type-archive-product .site-header {
    margin-bottom: 0;
}

/* Branding */
.site-branding {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0.3rem 0;
}

.site-title {
    font-family: var(--font-display);
    font-size: 1.55rem;
    font-weight: 800;
    margin: 0;
    line-height: 1;
    letter-spacing: -0.02em;
}

.site-title a {
    color: var(--white);
    text-decoration: none;
}

.site-title a:hover {
    color: var(--cyan);
    text-decoration: none;
}

/* Cyan dot accent on brand name */
.site-title a::after {
    content: '.';
    color: var(--cyan);
}

.site-description {
    font-size: 0.72rem;
    color: var(--text-on-dark);
    margin-top: 2px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ── HEADER: search above cart, both on the right, min 30px height ── */

/* The .col-full inside .site-header uses flex;
   we push search+cart to the right and stack them vertically */
.site-header .col-full {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    padding-right: 1em;
}

/* Branding takes remaining space */
.site-branding { flex: 1 1 auto !important; }

/* Group search on top, cart below — vertical stack on the right */
.site-search,
.site-header-cart {
    flex-shrink: 0 !important;
    margin-left: 0 !important;
}

/* Wrap search+cart in a column — achieved via flex-direction trick */
/* Search gets pushed right, cart comes after */
.site-search {
    order: 10;
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}

.site-header-cart {
    order: 11;
    margin-left: 8px !important;
    display: flex !important;
    align-items: center !important;
}

/* ── SEARCH FIELD ── */
.site-search .search-field,
.site-search input[type="search"] {
    border-radius: 16px !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 1em !important;
    width: 190px !important;
    background-color: rgba(255,255,255,0.1) !important;
    border: 1.5px solid var(--slate-600) !important;
    color: var(--white) !important;
    font-size: 0.85rem !important;
    box-sizing: border-box !important;
    transition: border-color var(--t-base), width var(--t-slow), background-color var(--t-base) !important;
}

.site-search .search-field::placeholder { color: rgba(200,218,234,0.6) !important; }

.site-search .search-field:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 3px var(--cyan-glow) !important;
    background-color: rgba(255,255,255,0.15) !important;
    width: 230px !important;
    outline: none !important;
}

.site-search .search-submit,
.site-search button[type="submit"] {
    background-color: transparent !important;
    border: none !important;
    color: var(--cyan) !important;
    font-size: 1rem !important;
    padding: 0 0.3em !important;
    box-shadow: none !important;
    transform: none !important;
    height: 34px !important;
    min-height: 34px !important;
    cursor: pointer !important;
    line-height: 34px !important;
}

.site-search .search-submit:hover {
    color: var(--white) !important;
    background-color: transparent !important;
}

/* ── CART BUTTON ── */
.site-header-cart .cart-contents,
.site-header-cart a.cart-contents {
    background-color: rgba(0,194,224,0.12) !important;
    color: var(--cyan) !important;
    height: 34px !important;
    min-height: 34px !important;
    min-width: 34px !important;
    padding: 0 0.9em !important;
    border-radius: 6px !important;
    border: 1.5px solid var(--cyan) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    transition: background-color var(--t-base), color var(--t-base) !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.site-header-cart .cart-contents:hover,
.site-header-cart a.cart-contents:hover {
    background-color: var(--cyan) !important;
    color: var(--slate-900) !important;
    text-decoration: none !important;
}

.site-header-cart .cart-contents .count {
    background-color: var(--sale-badge) !important;
    color: #fff !important;
    border-radius: 50% !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

/*--------------------------------------------------------------
# PRIMARY NAVIGATION — DESKTOP
--------------------------------------------------------------*/
@media screen and (min-width: 768px) {

    .primary-navigation,
    .main-navigation {
        display: block !important;
        position: absolute;
        top: 50%;
        left: 8%;
        transform: translateX(-8%);
    }

    .main-navigation ul.menu {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 0.1em;
    }

    .main-navigation li {
        margin: 0;
        position: relative;
    }

    .main-navigation a {
        display: block;
        padding: 0.45em 0.75em;
        color: var(--nav-link);
        font-weight: 600;
        font-size: 0.88rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        transition: color var(--t-base), background-color var(--t-base);
        border-radius: 5px;
        text-decoration: none;
    }

    .main-navigation a:hover,
    .site-header ul.menu li.current-menu-item > a {
        color: var(--cyan) !important;
        background-color: rgba(0,194,224,0.08);
        text-decoration: none;
    }

    .main-navigation ul li a,
    .site-title a,
    ul.menu li a,
    .site-branding h1 a,
    button.menu-toggle,
    .handheld-navigation .dropdown-toggle {
        color: var(--nav-link);
        font-weight: 600;
    }

    /* Dropdown */
    .main-navigation ul.menu > li:hover > ul.sub-menu {
        display: block;
        position: absolute;
        left: 0;
        top: 100%;
        min-width: 210px;
        background: var(--slate-800);
        border: 1px solid var(--slate-600);
        border-top: 2px solid var(--cyan);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.35);
        padding: 0.4em 0;
        z-index: 9999;
    }

    .main-navigation ul.menu > li > ul.sub-menu > li { width: 100%; }

    .main-navigation ul.menu > li > ul.sub-menu > li a {
        display: block;
        padding: 0.55em 1.2em;
        color: var(--nav-link);
        font-size: 0.86rem;
        text-transform: none;
        letter-spacing: 0.01em;
        border-radius: 0;
        transition: background-color var(--t-fast), color var(--t-fast);
    }

    .main-navigation ul.menu > li > ul.sub-menu > li a:hover {
        background-color: rgba(0,194,224,0.1);
        color: var(--cyan);
    }

    /* Mega menu */
    .main-navigation ul.menu > li.mega-menu:hover > ul.sub-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        width: 820px;
        justify-content: flex-start;
        align-items: flex-start;
        padding: var(--sp-4);
        gap: var(--sp-3);
    }

    .main-navigation ul.menu li.mega-menu > ul.sub-menu > li {
        width: 30%;
        padding: var(--sp-3);
        border-right: 1px solid var(--slate-600);
    }

    /* Nested sub-sub */
    .main-navigation ul.menu li ul.sub-menu li ul.sub-menu {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        min-width: 220px;
        background: var(--slate-800);
        border: 1px solid var(--slate-600);
        border-top: 2px solid var(--cyan);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.35);
        padding: 0.4em 0;
    }

    .main-navigation ul.menu li ul.sub-menu li:hover > ul.sub-menu { display: block; }
    .main-navigation ul.menu li ul.sub-menu li ul.sub-menu li {
        width: 220px;
        white-space: nowrap;
    }
}

/* Arrow indicators */
.main-navigation ul.menu li.menu-item-has-children { position: relative; }
.main-navigation ul.menu li.menu-item-has-children > a { padding-right: 1.5em; }
.main-navigation ul.menu li.menu-item-has-children > a::after {
    content: "▾";
    color: var(--cyan);
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    pointer-events: none;
}
.main-navigation ul.menu > li.mega-menu > a::after { content: none; }

/* Hide submenus by default */
.main-navigation ul.menu li ul.sub-menu { display: none; }
.main-navigation ul ul { display: block; margin-left: 0.2em; }
.main-navigation ul.menu ul a,
.main-navigation ul.nav-menu ul a { display: block; width: 100%; }
.main-navigation ul.menu li a:hover,
.main-navigation ul.menu li a:focus { outline: none; }

/* Menu item images */
.menu-item-image { text-align: center; margin-bottom: 5px; }
.menu-item-image img { max-width: 52px; height: auto; border-radius: 5px; }

/* My Account icon */
.main-navigation ul.menu li.menu-item a[href*="my-account"]::before,
.main-navigation ul.sf-menu li.menu-item a[href*="my-account"]::before {
    font-family: 'Font Awesome 6 Free';
    content: '\f007';
    font-weight: 900;
    margin-right: 0.4em;
    vertical-align: middle;
}

/*--------------------------------------------------------------
# TABLET NAV HIDE
--------------------------------------------------------------*/
@media screen and (max-width: 991px) {
    .site-header .col-full { flex-wrap: wrap; justify-content: center; }
    .site-branding,
    .site-search,
    .site-header-cart {
        flex-basis: 100%;
        text-align: center;
        margin-bottom: var(--sp-2);
        margin-left: 0;
    }
    .primary-navigation,
    .main-navigation:not(.toggled) ul.menu { display: none !important; }
    .secondary-navigation { display: none !important; }
    .widget-area { padding-left: 0; margin-top: var(--sp-8); }
}

/*--------------------------------------------------------------
# MOBILE NAVIGATION
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    h1 { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    h2 { font-size: clamp(1.2rem, 5vw, 1.5rem); }
    h3 { font-size: clamp(1rem, 4vw, 1.25rem); }

    .site-header { padding: var(--sp-2) 0; min-height: auto; }
    .site-title { font-size: 1.3rem; }

    .main-navigation { display: block; width: 100%; position: relative; }

    .menu-toggle {
        display: block !important;
        background-color: rgba(0,194,224,0.1);
        color: var(--cyan);
        border: 1.5px solid var(--cyan);
        border-radius: 6px;
        padding: 0.45em 1em;
        font-size: 0.88rem;
        font-weight: 700;
        font-family: var(--font-display);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        cursor: pointer;
        margin: 0 auto 4px auto;
        float: none !important;
        width: auto !important;
        text-align: center !important;
    }

    .handheld-navigation {
        width: 100% !important;
        background-color: var(--slate-800);
        box-shadow: 0 6px 16px rgba(0,0,0,0.3);
        border-radius: 0 0 10px 10px;
    }

    #site-navigation.toggled ul.menu,
    .main-navigation.toggled ul.menu {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0.4em 0 !important;
        list-style: none !important;
        background-color: var(--slate-800);
    }

    .handheld-navigation ul.menu li,
    #site-navigation.toggled ul.menu li {
        width: 100% !important;
        text-align: left !important;
        border-bottom: 1px solid var(--slate-600);
        margin: 0 !important;
    }

    .handheld-navigation ul.menu li:last-child,
    #site-navigation.toggled ul.menu li:last-child { border-bottom: none; }

    .handheld-navigation ul.menu li a,
    #site-navigation.toggled ul.menu li a {
        padding: 0.75em 1.2em !important;
        display: block !important;
        width: 100% !important;
        color: var(--nav-link) !important;
        font-size: 0.92rem;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        font-weight: 600;
        text-decoration: none !important;
    }

    .handheld-navigation ul.menu li a:hover,
    #site-navigation.toggled ul.menu li a:hover {
        background-color: rgba(0,194,224,0.1) !important;
        color: var(--cyan) !important;
    }

    .handheld-navigation ul ul.sub-menu,
    #site-navigation.toggled ul ul.sub-menu {
        position: static !important;
        display: block !important;
        box-shadow: none !important;
        background-color: rgba(0,0,0,0.2) !important;
        padding-left: var(--sp-4) !important;
        border-left: 3px solid var(--cyan);
    }

    .main-navigation ul.menu li.menu-item-has-children > a::after,
    .handheld-navigation ul.menu li.menu-item-has-children > a::after {
        content: "▾";
        color: var(--cyan) !important;
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        pointer-events: auto;
    }
}

/*--------------------------------------------------------------
# LAYOUT — CONTENT + SIDEBAR
--------------------------------------------------------------*/
.site-content {
    margin-top: 0;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box;
    margin-left: 0 !important;
}

.entry-content, .page-content {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
}

.entry-content .alignwide,
.entry-content .alignfull,
.page-content .alignwide,
.page-content .alignfull {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.page,
body.single { padding-left: 0 !important; padding-right: 0 !important; }

@media (min-width: 768px) {
    .col-full {
        max-width: 66.5em;
        margin-left: auto;
        margin-right: auto;
        padding: 0 0.75em;
        box-sizing: content-box;
    }
}

:root :where(.is-layout-grid) { gap: 14px; }

@media screen and (min-width: 768px) {

    /* ── PAGE LAYOUT: content left, sidebar fixed right ── */
    .site-content .col-full {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        gap: 0 !important;
    }

    .content-area { padding: 0 0.5em !important; }

    /* Main content — flex:1 but with hard overflow prevention */
    #primary {
        flex: 1 1 auto !important;
        width: 0 !important;            /* flex-grow fills remaining space */
        min-width: 0 !important;
        max-width: 100% !important;
        float: none !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        order: 1;
        overflow-x: hidden !important;
    }

    /* Sidebar — rigid 255px, sticky, never squished */
    #secondary {
        flex: 0 0 255px !important;
        width: 255px !important;
        max-width: 255px !important;
        min-width: 255px !important;
        background-color: var(--white) !important;
        padding: 0.75em !important;
        border-radius: var(--card-radius) !important;
        border: 1px solid var(--card-border) !important;
        box-shadow: var(--card-shadow) !important;
        margin-left: 20px !important;
        box-sizing: border-box !important;
        order: 2;
        float: none !important;
        position: sticky !important;
        top: calc(var(--header-h) + 12px) !important;
        align-self: flex-start !important;
        overflow: hidden !important;
    }

    .widget-area { padding: 0 !important; margin-top: 0 !important; }

    .widget {
        background-color: var(--white) !important;
        border: 1px solid var(--card-border) !important;
        border-radius: 8px !important;
        padding: 0.85em !important;
        margin-bottom: var(--sp-4) !important;
        box-shadow: var(--card-shadow) !important;
    }

    .site-main ul.products.columns-4 li.product {
        width: 23.05%;
        margin-right: 2%;
    }

    /* ── SINGLE PRODUCT: clear Storefront's floats, use flex ── */

    /* Storefront uses float on gallery and summary — kill it */
    .single-product #primary,
    .woocommerce-page.single-product #primary {
        overflow: visible !important;
    }

    .single-product div.product,
    .woocommerce div.product {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        gap: var(--sp-6) !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        float: none !important;
        clear: both !important;
    }

    /* Kill Storefront float on gallery */
    .single-product div.product .woocommerce-product-gallery,
    .woocommerce div.product .woocommerce-product-gallery {
        float: none !important;
        width: 44% !important;
        max-width: 44% !important;
        min-width: 0 !important;
        flex: 0 0 44% !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Kill Storefront float on summary */
    .single-product div.product .summary,
    .woocommerce div.product .summary {
        float: none !important;
        width: auto !important;
        max-width: none !important;
        flex: 1 1 0% !important;
        min-width: 0 !important;
        padding-left: 0 !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* Tabs: full width row below image+summary */
    .single-product div.product .woocommerce-tabs,
    .woocommerce div.product .woocommerce-tabs {
        float: none !important;
        clear: both !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-top: var(--sp-6) !important;
    }

    /* Upsells and related products: also full width */
    .single-product .up-sells,
    .single-product .related {
        clear: both !important;
        width: 100% !important;
        float: none !important;
        box-sizing: border-box !important;
    }
}

/* Home page: full-width */
.home.page .site-content .content-area {
    background-color: var(--white) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
}

.home.page .site-content { padding: 0 !important; }
.home.page .site-content .col-full {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home.page #primary { width: 100% !important; max-width: none !important; }

/*--------------------------------------------------------------
# WOOCOMMERCE — PRODUCT GRID
--------------------------------------------------------------*/
ul.products li.product {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: var(--sp-4);
    margin-bottom: var(--sp-4);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    overflow: hidden;
}

ul.products li.product::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--cyan), transparent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--t-slow);
}

ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--cyan);
}

ul.products li.product:hover::before { transform: scaleX(1); }

ul.products li.product .price {
    font-size: 1.15rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--price-color);
    margin-top: var(--sp-2);
    display: block;
}

ul.products li.product .woocommerce-loop-product__title {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
}

ul.products li.product .button {
    margin-top: var(--sp-3);
    width: 100%;
    font-size: 0.82rem;
}

/* Sale badge */
ul.products li.product .onsale {
    background-color: var(--sale-badge);
    color: #fff;
    border-radius: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.2em 0.6em;
    letter-spacing: 0.04em;
}

/* Block products */
.wc-block-product-template__responsive {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.wc-block-product-template__responsive > li {
    flex: 1 1 calc(33.333% - 1rem);
    box-sizing: border-box;
    text-align: center;
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: 1rem;
    background-color: var(--white);
    transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
    position: relative;
    overflow: hidden;
}

.wc-block-product-template__responsive > li:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--cyan);
}

.wc-block-product-template__responsive > li img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 0.75rem;
}

.wc-block-product-template__responsive > li .wc-block-grid__product-link {
    text-decoration: none;
    color: var(--text-primary);
    font-weight: 600;
    font-family: var(--font-display);
    margin-bottom: 0.4rem;
    display: block;
}

.wc-block-product-template__responsive > li .wc-block-grid__product-link:hover { color: var(--cyan); }

.wc-block-product-template__responsive > li .wc-block-grid__product-price {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--price-color);
    margin-bottom: 0.75rem;
    display: block;
    font-family: var(--font-display);
}

.wc-block-product-template__responsive > li .button,
.wc-block-product-template__responsive > li .wp-block-button__link {
    background-color: var(--cyan);
    color: var(--slate-900) !important;
    padding: 0.5em 1.2em;
    border-radius: 5px;
    font-weight: 700;
    display: inline-block;
    border: none;
    cursor: pointer;
    transition: background-color var(--t-base), transform var(--t-fast);
}

.wc-block-product-template__responsive > li .button:hover,
.wc-block-product-template__responsive > li .wp-block-button__link:hover {
    background-color: var(--cyan-dark);
    transform: scale(1.03);
    color: var(--white) !important;
}

@media (max-width: 1024px) {
    .wc-block-product-template__responsive > li { flex: 1 1 calc(50% - 1rem); }
}

@media (max-width: 767px) {
    .wc-block-product-template__responsive > li { flex: 1 1 100%; }
    ul.products li.product { width: 100% !important; margin-right: 0; margin-left: 0; }
}

/*--------------------------------------------------------------
# WOOCOMMERCE — SINGLE PRODUCT
--------------------------------------------------------------*/
.single-product .product .summary { padding-left: 0; }

/* Gap between product content area and right sidebar */
.single-product #primary {
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

.single-product .product .price {
    font-size: 2rem;
    font-weight: 800;
    font-family: var(--font-display);
    color: var(--price-color);
    margin-bottom: var(--sp-4);
}

.single-product .product .single_add_to_cart_button {
    font-size: 1rem;
    padding: 0.75em 2.2em;
}

@media screen and (max-width: 767px) {
    .single-product .product .summary {
        padding-left: 0;
        margin-top: var(--sp-8);
    }
}

/*--------------------------------------------------------------
# WOOCOMMERCE — PRODUCT TABS (Horizontal accordion row)
# All tabs sit in one row; clicking opens content below like a dropdown
--------------------------------------------------------------*/

/* Hide default WooCommerce tab panel switching — JS handles it */
.woocommerce div.product .woocommerce-tabs {
    margin-top: var(--sp-8);
    position: relative;
}

/* ── TAB ROW ── */
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: stretch !important;
    align-items: stretch !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    gap: 0 !important;
    border-bottom: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after {
    display: none !important;
}

/* ── EACH TAB ITEM ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    flex: 1 1 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    list-style: none !important;
    position: relative !important;
    border-right: 1px solid var(--card-border) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:last-child {
    border-right: none !important;
}

/* ── TAB LINK ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4em !important;
    width: 100% !important;
    padding: 0.85em 0.5em !important;
    background-color: var(--slate-100) !important;
    border: none !important;
    border-top: 3px solid transparent !important;
    border-bottom: 3px solid var(--card-border) !important;
    text-decoration: none !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
    font-size: 0.82rem !important;
    color: var(--text-secondary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    text-align: center !important;
    cursor: pointer !important;
    transition: background-color var(--t-base), color var(--t-base), border-color var(--t-base) !important;
    white-space: nowrap !important;
}

/* Chevron indicator */
.woocommerce div.product .woocommerce-tabs ul.tabs li a::after {
    content: '▾' !important;
    font-size: 0.75rem !important;
    opacity: 0.5 !important;
    transition: transform var(--t-base), opacity var(--t-base) !important;
    display: inline-block !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    background-color: var(--cyan-glow) !important;
    color: var(--cyan-dark) !important;
    border-top-color: var(--cyan) !important;
    border-bottom-color: transparent !important;
}

/* ── ACTIVE TAB ── */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    background-color: var(--white) !important;
    color: var(--cyan) !important;
    border-top: 3px solid var(--cyan) !important;
    border-bottom: 3px solid transparent !important;
    box-shadow: 0 -2px 8px rgba(0,194,224,0.1) !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
    transform: rotate(180deg) !important;
    opacity: 1 !important;
    color: var(--cyan) !important;
}

/* ── TAB PANELS CONTAINER ── */
.woocommerce div.product .woocommerce-tabs .panel {
    display: none !important;
    padding: var(--sp-6) var(--sp-5) !important;
    background-color: var(--white) !important;
    border: 1px solid var(--card-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--card-radius) var(--card-radius) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.05) !important;
    animation: tabFadeIn 0.25s ease !important;
}

.woocommerce div.product .woocommerce-tabs .panel.active-panel {
    display: block !important;
}

@keyframes tabFadeIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Panel headings */
.woocommerce div.product .woocommerce-tabs .panel h2 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 2px solid var(--cyan-glow);
}

/* ── MOBILE: stack tabs vertically ── */
@media (max-width: 600px) {
    .woocommerce div.product .woocommerce-tabs ul.tabs {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li {
        border-right: none !important;
        border-bottom: 1px solid var(--card-border) !important;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        justify-content: space-between !important;
        padding: 0.75em 1em !important;
        font-size: 0.85rem !important;
        white-space: normal !important;
    }
}

/*--------------------------------------------------------------
# WOOCOMMERCE — CART & CHECKOUT
--------------------------------------------------------------*/
.woocommerce-cart-form,
.woocommerce-checkout {
    background-color: var(--white);
    padding: var(--sp-8);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    border: 1px solid var(--card-border);
}

.woocommerce-cart-form .button,
.woocommerce-checkout .button {
    font-size: 0.95rem;
    padding: 0.75em 1.8em;
}

@media screen and (max-width: 767px) {
    .content-area,
    .woocommerce-cart-form,
    .woocommerce-checkout { padding: var(--sp-4) !important; }

    #primary,
    #secondary {
        flex: 1 0 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        order: unset !important;
        padding: var(--sp-4) !important;
        float: none !important;
    }

    #secondary .widget-area { padding: 0 !important; }
}

/*--------------------------------------------------------------
# TRUST BADGES SECTION
# Add to your homepage with a shortcode or custom block using
# class="nv-trust-bar"
--------------------------------------------------------------*/
.nv-trust-bar {
    background: linear-gradient(135deg, var(--slate-800) 0%, var(--slate-900) 100%);
    border-top: 3px solid var(--cyan);
    border-bottom: 1px solid var(--slate-600);
    padding: var(--sp-6) 0;
    margin: 0;
}

.nv-trust-bar .col-full {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    gap: var(--sp-4);
}

.nv-trust-item {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    color: var(--text-on-dark);
    min-width: 180px;
    padding: var(--sp-2) var(--sp-4);
}

.nv-trust-icon {
    width: 42px;
    height: 42px;
    background: rgba(0,194,224,0.12);
    border: 1.5px solid var(--cyan);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cyan);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.nv-trust-label {
    display: flex;
    flex-direction: column;
}

.nv-trust-label strong {
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1.2;
}

.nv-trust-label span {
    font-size: 0.75rem;
    color: var(--footer-text);
    margin-top: 1px;
}

/*--------------------------------------------------------------
# NEWSLETTER SECTION
# Add to homepage with class="nv-newsletter"
--------------------------------------------------------------*/
.nv-newsletter {
    background: var(--slate-100);
    border-top: 1px solid var(--card-border);
    padding: var(--sp-10) 0;
    text-align: center;
}

.nv-newsletter-inner {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 var(--sp-4);
}

.nv-newsletter h2 {
    font-family: var(--font-display);
    font-size: clamp(1.3rem, 2.5vw, 1.7rem);
    color: var(--text-primary);
    margin-bottom: var(--sp-2);
}

.nv-newsletter p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: var(--sp-5);
}

.nv-newsletter-form {
    display: flex;
    gap: var(--sp-2);
    max-width: 440px;
    margin: 0 auto;
}

.nv-newsletter-form input[type="email"] {
    flex: 1;
    height: 46px;
    border-radius: 6px;
    border: 1.5px solid var(--card-border);
    padding: 0 1em;
    font-size: 0.95rem;
}

.nv-newsletter-form input[type="email"]:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px var(--cyan-glow);
}

.nv-newsletter-form button {
    height: 46px;
    padding: 0 1.6em;
    white-space: nowrap;
    font-size: 0.85rem;
}

@media (max-width: 520px) {
    .nv-newsletter-form { flex-direction: column; }
    .nv-newsletter-form input[type="email"],
    .nv-newsletter-form button { width: 100%; height: 44px; }
}

/*--------------------------------------------------------------
# FEATURED PRODUCTS SECTION WRAPPER
--------------------------------------------------------------*/
.nv-featured-products {
    padding: var(--sp-10) 0;
    background-color: var(--white);
    border-top: 1px solid var(--card-border);
    border-bottom: 1px solid var(--card-border);
}

/*--------------------------------------------------------------
# FOOTER
--------------------------------------------------------------*/
.site-footer {
    background: linear-gradient(180deg, var(--slate-800) 0%, var(--footer-bg) 100%);
    color: var(--footer-text);
    padding: var(--sp-10) 0 0;
    margin-top: var(--sp-8);
    border-top: 3px solid var(--cyan);
}

.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer .widget .widget-title,
.site-footer .widget .widgettitle {
    color: var(--footer-title);
    font-family: var(--font-display);
}

.site-footer a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color var(--t-fast);
}

.site-footer a:hover { color: var(--cyan); text-decoration: none; }

.site-footer .footer-widgets { margin-top: 0; padding-top: 0; }
.site-footer .widget-area { padding-left: 0; }

.site-footer .block.footer-widget-1,
.site-footer .block.footer-widget-2,
.site-footer .block.footer-widget-3,
.site-footer .block.footer-widget-4 {
    margin-bottom: var(--sp-4);
    padding-bottom: 0;
}

.site-footer .widget {
    background-color: transparent;
    box-shadow: none;
    color: var(--footer-text);
    margin-bottom: 0.8em;
    padding: 0;
    border: none;
}

.site-footer .widget-title {
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 0.7em;
    border-bottom: 1px solid var(--footer-border);
    padding-bottom: 0.4em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--white);
}

.site-footer .widget ul { list-style: none; margin: 0; padding: 0; }
.site-footer .widget ul li {
    margin-bottom: 0.35em;
    padding-left: 0.8em;
    position: relative;
    font-size: 0.88rem;
}

.site-footer .widget ul li::before {
    content: '›';
    position: absolute;
    left: 0;
    color: var(--cyan);
    font-weight: 700;
}

/* Copyright bar */
.site-info {
    text-align: center;
    margin-top: var(--sp-6);
    border-top: 1px solid var(--footer-border);
    font-size: 0.82rem;
    color: var(--footer-text);
    background-color: rgba(0,0,0,0.3);
    padding: 0.9em 0;
    letter-spacing: 0.02em;
}

/*--------------------------------------------------------------
# MOBILE FOOTER
--------------------------------------------------------------*/
@media screen and (max-width: 767px) {
    .site-footer { padding: var(--sp-6) 0 0; }

    .site-footer .block.footer-widget-1,
    .site-footer .block.footer-widget-2,
    .site-footer .block.footer-widget-3,
    .site-footer .block.footer-widget-4 { margin-bottom: var(--sp-4); }

    .nv-trust-bar .col-full {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 var(--sp-4);
    }

    .nv-trust-item { min-width: unset; width: 100%; }
}