/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
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: astra-child
Template: astra
*/

/* ==========================================================================
   KÅNKEN PREMIUM DESIGN SYSTEM
   ========================================================================== */
:root {
    /* Palette Kånken Outdoor Premium */
    --brand-red: #DA3E26;       /* Rosso logo originale */
    --brand-red-hover: #C2331D;
    --primary-green: #4E6548;  /* Verde foresta svedese */
    --ochre-gold: #E6A15C;     /* Giallo ocra Kånken */
    --leather-brown: #73503C;  /* Marrone cuoio cerato */
    --canvas-sand: #FAF8F5;    /* Sfondo caldo tessuto */
    --bg-pure: #FFFFFF;
    
    /* Toni di Grigio/Slate Caldi */
    --text-dark: #2E2C2A;      /* Carbone caldissimo */
    --text-muted: #6B6560;     /* Grigio terra morbido */
    --border-light: rgba(115, 80, 60, 0.08);
    --border-hover: rgba(115, 80, 60, 0.16);
    
    /* Animazioni e Arrotondamenti */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-soft: 0 10px 30px rgba(115, 80, 60, 0.04);
    --shadow-medium: 0 15px 45px rgba(78, 101, 72, 0.08);
    --shadow-glass: 0 8px 32px rgba(115, 80, 60, 0.06);
}

/* ==========================================================================
   UTILITY & BLOCKS DESIGN
   ========================================================================== */
.kanken-container {
    max-width: 1150px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    width: 100%;
}

/* Expand Astra's default container to match our 1150px design system */
@media (min-width: 922px) {
    .ast-container {
        max-width: 1150px !important;
    }
    /* Expand the primary content area to fill the container */
    #primary.content-area {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   SUBPAGE CONTENT LAYOUT — width, centering, headings
   ========================================================================== */

/* Remove duplicate nested kanken-container boxes from subpages */
.entry-content .kanken-container .kanken-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* The outer kanken-container on subpages */
.entry-content > .wp-block-group > .kanken-container,
.entry-content .kanken-body-wrap > .kanken-container {
    max-width: 1150px !important;
    width: 100% !important;
}

/* Center main section headings on all pages */
.entry-content h2.wp-block-heading,
.entry-content h2 {
    text-align: center;
}

/* But keep table-of-contents and inline headings left-aligned */
.lwptoc h2,
.lwptoc_title,
.kanken-tldr-title h2,
.kanken-calc-form h2,
.kanken-faq-wrap h2,
.entry-content .kanken-container h2.wp-block-heading:first-child {
    text-align: left !important;
}

/* ── Catalog section heading centering ─────────────────────────────────── */
/* Center the "Scegli il tuo modello" heading above the catalog */
.entry-content .kanken-catalog-grid,
.kanken-catalog-grid {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Page-level section headings — bigger and centered */
.entry-content h2.wp-block-heading {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(22px, 2.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--text-dark);
    margin-bottom: 14px;
    margin-top: 48px;
}

/* First h2 on a page — no top margin */
.entry-content h2.wp-block-heading:first-of-type {
    margin-top: 0;
}

/* Centering and styling the primary menu in Astra Theme */
.main-navigation .main-header-menu,
.ast-primary-menu,
#ast-hf-menu-1 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}

.ast-primary-menu .menu-item a,
.main-navigation .menu-item a,
.ast-header-navigation .menu-item a {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--text-dark) !important;
    font-size: 13px !important;
    transition: var(--transition-smooth) !important;
}

.ast-primary-menu .menu-item a:hover,
.main-navigation .menu-item a:hover,
.ast-primary-menu .menu-item.current-menu-item > a,
.main-navigation .menu-item.current-menu-item > a {
    color: var(--brand-red) !important;
}

.kanken-body-wrap {
    background-color: var(--canvas-sand);
    color: var(--text-dark);
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
}

.kanken-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.kanken-badge-red {
    background-color: rgba(218, 62, 38, 0.08);
    color: var(--brand-red) !important;
}
.kanken-badge-green {
    background-color: rgba(78, 101, 72, 0.08);
    color: var(--primary-green) !important;
}
.kanken-badge-ochre {
    background-color: rgba(230, 161, 92, 0.1);
    color: #C07936 !important;
}

.kanken-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 700;
    font-size: 15px;
    transition: var(--transition-smooth);
    cursor: pointer;
    border: none;
    text-decoration: none !important;
}

.kanken-btn-primary {
    background-color: var(--brand-red) !important;
    color: white !important;
    box-shadow: 0 8px 24px rgba(218, 62, 38, 0.2);
}

.kanken-btn-primary:hover {
    background-color: var(--brand-red-hover) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(218, 62, 38, 0.3);
}

.kanken-btn-secondary {
    background-color: white !important;
    color: var(--text-dark) !important;
    border: 2px solid var(--border-light) !important;
    box-shadow: var(--shadow-soft);
}

.kanken-btn-secondary:hover {
    border-color: var(--leather-brown) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium);
}

/* ==========================================================================
   SECTIONS: HERO
   ========================================================================== */
.kanken-hero {
    padding: 60px 0;
    background: linear-gradient(180deg, rgba(250, 248, 245, 1) 0%, rgba(244, 240, 234, 0.5) 100%);
    overflow: hidden;
}

.kanken-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

.kanken-hero-content h1 {
    font-family: 'Outfit', sans-serif;
    font-size: 48px;
    line-height: 1.15;
    margin-bottom: 20px;
    font-weight: 800;
    letter-spacing: -1px;
}

.kanken-hero-content h1 span {
    background: linear-gradient(120deg, var(--brand-red) 0%, var(--ochre-gold) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.kanken-hero-content p {
    font-size: 17px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.kanken-hero-btns {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.kanken-hero-features {
    display: flex;
    gap: 20px;
    margin-top: 40px;
    border-top: 1px solid var(--border-light);
    padding-top: 24px;
}

.kanken-hero-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-dark);
}

.kanken-hero-feature-item svg {
    width: 18px;
    height: 18px;
    color: var(--primary-green);
}

.kanken-hero-img-wrap {
    position: relative;
}

.kanken-hero-img-bg {
    background: linear-gradient(135deg, rgba(78, 101, 72, 0.08) 0%, rgba(115, 80, 60, 0.12) 100%);
    border-radius: var(--radius-lg);
    padding: 16px;
    box-shadow: var(--shadow-medium);
}

.kanken-hero-img-bg img {
    border-radius: calc(var(--radius-lg) - 8px);
    width: 100%;
    height: 440px;
    object-fit: cover;
    transition: var(--transition-smooth);
}

.kanken-hero-img-bg:hover img {
    transform: scale(1.02);
}

/* ==========================================================================
   SECTIONS: TL;DR (IN SINTESI)
   ========================================================================== */
.kanken-tldr-card {
    background: linear-gradient(135deg, #FFF 0%, rgba(244, 240, 234, 0.3) 100%);
    border-left: 6px solid var(--brand-red);
    border-radius: var(--radius-md);
    padding: 30px;
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 1fr 2.2fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 40px;
}

.kanken-tldr-title {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kanken-tldr-title h2 {
    font-size: 28px;
    margin: 0;
}

.kanken-tldr-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.kanken-tldr-list li {
    display: flex;
    gap: 12px;
    font-size: 15px;
    color: var(--text-dark);
}

.kanken-tldr-list li svg {
    width: 20px;
    height: 20px;
    color: var(--primary-green);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ==========================================================================
   SECTIONS: CATALOG GRID
   ========================================================================== */
.kanken-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 30px;
    margin-top: 40px;
}

.kanken-prod-card {
    background-color: var(--bg-pure);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
    display: flex;
    flex-direction: column;
    position: relative;
}

.kanken-prod-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: transparent;
    transition: var(--transition-smooth);
}

.kanken-prod-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-medium);
    border-color: var(--border-hover);
}

.kanken-prod-card:hover::before {
    background-color: var(--brand-red);
}

.kanken-prod-img-box {
    background-color: #FDFDFD;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--border-light);
    height: 220px;
}

.kanken-prod-img-box img {
    max-height: 160px;
    object-fit: contain;
    transition: var(--transition-smooth);
}

.kanken-prod-card:hover .kanken-prod-img-box img {
    transform: scale(1.06);
}

.kanken-prod-info {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.kanken-prod-info h3 {
    font-size: 19px;
    margin-bottom: 8px;
}

.kanken-prod-desc {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 16px;
    flex-grow: 1;
}

.kanken-prod-specs {
    display: flex;
    gap: 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    border-top: 1px dashed var(--border-light);
    padding-top: 12px;
    margin-bottom: 16px;
}

.kanken-prod-actions {
    display: flex;
    gap: 8px;
}

.kanken-btn-amazon {
    flex-grow: 1;
    background: linear-gradient(135deg, #FF9900 0%, #E68900 100%) !important;
    color: white !important;
    border-radius: 50px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(255, 153, 0, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.kanken-btn-amazon:hover {
    background: linear-gradient(135deg, #E68900 0%, #CC7A00 100%) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 153, 0, 0.25);
}

/* ==========================================================================
   SECTIONS: CALCOLATORE KÅNKEN
   ========================================================================== */
.kanken-calc-wrap {
    background-color: var(--bg-pure);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-medium);
    border: 1px solid var(--border-light);
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 40px 0;
}

.kanken-calc-form {
    padding: 40px;
    border-right: 1px solid var(--border-light);
}

.kanken-calc-form h2 {
    font-size: 26px;
    margin-bottom: 8px;
}

.kanken-calc-form p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.kanken-calc-group {
    margin-bottom: 24px;
}

.kanken-calc-label-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.kanken-calc-group label {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.kanken-calc-bubble {
    background-color: rgba(78, 101, 72, 0.08);
    color: var(--primary-green);
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
}

.kanken-calc-slider {
    width: 100%;
    height: 6px;
    background: rgba(115, 80, 60, 0.1);
    border-radius: 10px;
    outline: none;
    -webkit-appearance: none;
}

.kanken-calc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-red);
    cursor: pointer;
    border: 2px solid white;
    box-shadow: 0 4px 8px rgba(218, 62, 38, 0.2);
    transition: var(--transition-smooth);
}

.kanken-calc-slider::-webkit-slider-thumb:hover {
    transform: scale(1.15);
}

.kanken-calc-results {
    background: linear-gradient(135deg, rgba(250, 248, 245, 0.7) 0%, rgba(244, 240, 234, 0.7) 100%);
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

.kanken-calc-welcome {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #FAF8F5 0%, #F4F0EA 100%);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    text-align: center;
    transition: var(--transition-smooth);
}

.kanken-calc-welcome.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

.kanken-calc-welcome h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.kanken-calc-welcome p {
    color: var(--text-muted);
    font-size: 13.5px;
    max-width: 300px;
}

.kanken-calc-results-title {
    font-size: 22px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}

.kanken-calc-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

.kanken-calc-stat-card {
    background-color: var(--bg-pure);
    border: 1px solid var(--border-light);
    padding: 12px;
    border-radius: var(--radius-md);
}

.kanken-calc-stat-lbl {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    text-transform: uppercase;
}

.kanken-calc-stat-val {
    font-size: 16px;
    font-weight: 800;
    color: var(--primary-green);
}

.kanken-calc-rec-box {
    background-color: var(--bg-pure);
    border: 2px solid var(--primary-green);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    gap: 16px;
    align-items: center;
}

.kanken-calc-rec-img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    background-color: #FAFAFA;
    border-radius: var(--radius-sm);
    padding: 6px;
    flex-shrink: 0;
}

.kanken-calc-rec-info h4 {
    font-size: 16px;
    margin-bottom: 4px;
}

.kanken-calc-rec-info p {
    font-size: 12.5px;
    color: var(--text-muted);
    margin-bottom: 8px;
    line-height: 1.4;
}

.kanken-calc-loader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.9);
    z-index: 15;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.kanken-calc-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid rgba(78, 101, 72, 0.1);
    border-top: 4px solid var(--primary-green);
    border-radius: 50%;
    animation: kanken_spin 1s linear infinite;
    margin-bottom: 12px;
}

@keyframes kanken_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   SECTIONS: MISURE TABLE
   ========================================================================== */
.kanken-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-soft);
    margin: 30px 0;
}

table.kanken-tbl {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 14.5px;
    margin: 0 !important;
}

table.kanken-tbl th {
    background-color: var(--primary-green) !important;
    color: white !important;
    padding: 14px 20px !important;
    font-weight: 600;
}

table.kanken-tbl td {
    padding: 14px 20px !important;
    border-bottom: 1px solid var(--border-light) !important;
    background-color: white !important;
    transition: var(--transition-smooth);
}

table.kanken-tbl tr:hover td {
    background-color: rgba(78, 101, 72, 0.02) !important;
}

table.kanken-tbl tr.highlight td {
    background-color: rgba(230, 161, 92, 0.05) !important;
    font-weight: 600;
}

/* ==========================================================================
   SECTIONS: FAQ ACCORDION
   ========================================================================== */
.kanken-faq-wrap {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 30px 0;
}

.kanken-faq-card {
    background-color: var(--bg-pure);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.kanken-faq-card:hover {
    box-shadow: var(--shadow-medium);
}

.kanken-faq-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    text-align: left;
}

.kanken-faq-q {
    font-family: 'Outfit', sans-serif;
    font-size: 16.5px;
    font-weight: 700;
    color: var(--text-dark);
}

.kanken-faq-card.active .kanken-faq-q {
    color: var(--brand-red);
}

.kanken-faq-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(115, 80, 60, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--leather-brown);
    font-weight: 700;
    font-size: 16px;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.kanken-faq-card.active .kanken-faq-icon {
    background-color: var(--brand-red);
    color: white;
    transform: rotate(45deg);
}

.kanken-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.kanken-faq-content-inner {
    padding: 0 24px 20px 24px;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1.65;
    border-top: 1px solid transparent;
}

.kanken-faq-card.active .kanken-faq-content-inner {
    border-top-color: var(--border-light);
}

/* ==========================================================================
   RESPONSIVE LAYOUTS
   ========================================================================== */
@media (max-width: 992px) {
    .kanken-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .kanken-hero-img-bg img {
        height: 380px;
    }
    .kanken-tldr-card {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .kanken-calc-wrap {
        grid-template-columns: 1fr;
    }
    .kanken-calc-form {
        border-right: none;
        border-bottom: 1px solid var(--border-light);
    }
}

@media (max-width: 768px) {
    .kanken-hero-content h1 {
        font-size: 34px;
    }
    .kanken-hero-btns {
        flex-direction: column;
    }
    .kanken-hero-btns .kanken-btn {
        width: 100%;
    }
    .kanken-calc-form, .kanken-calc-results {
        padding: 24px 16px;
    }
}

/* ==========================================================================
   CUSTOM FLOATING HEADER (HOMEPAGE ONLY)
   ========================================================================== */
.home header#masthead,
.home .site-header,
.home header.site-header {
    display: none !important;
}

.kanken-custom-header {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: 99999;
    transition: var(--transition-smooth);
    width: 100%;
}

.kanken-header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.kanken-header-logo {
    display: flex;
    align-items: center;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark) !important;
    font-family: 'Outfit', sans-serif;
    letter-spacing: -0.5px;
    text-decoration: none !important;
    flex-shrink: 0 !important;
}

.kanken-header-logo img {
    height: 32px !important;
    width: auto !important;
    object-fit: contain;
    margin-right: 10px;
}

.kanken-header-logo span {
    color: var(--brand-red);
}

.kanken-header-nav {
    display: flex !important;
    justify-content: center !important;
    flex-grow: 1 !important;
}

/* Only the top-level UL is a horizontal flex row */
.kanken-header-nav > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 18px !important;
}

/* Only the top-level LI items */
.kanken-header-nav > ul > li {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline-block !important;
}

.kanken-header-nav > ul > li > a {
    color: var(--text-dark) !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    padding: 10px 0 !important;
    text-decoration: none !important;
    font-family: 'Outfit', sans-serif !important;
    display: inline-block !important;
    white-space: nowrap !important;
}

.kanken-header-nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--brand-red);
    transition: var(--transition-smooth);
}

.kanken-header-nav > ul > li > a:hover {
    color: var(--brand-red) !important;
}

.kanken-header-nav > ul > li > a:hover::after {
    width: 100%;
}

.kanken-header-cta {
    background-color: var(--primary-green) !important;
    color: white !important;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(78, 101, 72, 0.15);
    transition: var(--transition-smooth);
    font-family: 'Outfit', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.kanken-header-cta:hover {
    background-color: var(--text-dark) !important;
    transform: translateY(-2px);
}

/* ==========================================================================
   DROPDOWN MENU STYLES
   ========================================================================== */
.kanken-header-nav ul li.kanken-dropdown,
.kanken-header-nav ul li.menu-item-has-children {
    position: relative !important;
}

/* Hide Astra mobile toggle buttons in our custom header */
.kanken-header-nav .ast-menu-toggle {
    display: none !important;
}

/* WordPress Sub-Menu Dropdowns (vertical layout and absolute float) */
.kanken-header-nav ul.sub-menu,
.kanken-header-nav ul li .sub-menu {
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(10px) !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-sm) !important;
    padding: 10px 0 !important;
    min-width: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    z-index: 10000 !important;
    list-style: none !important;
    margin: 0 !important;
}

/* Trigger nested dropdown lists on hover */
.kanken-header-nav ul li:hover > .sub-menu,
.kanken-header-nav ul li.menu-item-has-children:hover > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Dropdown list items are displayed block/vertical */
.kanken-header-nav ul .sub-menu li {
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

.kanken-header-nav ul .sub-menu li a {
    display: block !important;
    padding: 10px 20px !important;
    font-size: 13px !important;
    text-transform: none !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    transition: var(--transition-smooth) !important;
    white-space: nowrap !important;
    letter-spacing: 0px !important;
    font-family: 'Outfit', sans-serif !important;
    border: none !important;
    text-decoration: none !important;
}

.kanken-header-nav ul .sub-menu li a::after {
    display: none !important;
}

.kanken-header-nav ul .sub-menu li a:hover {
    background-color: rgba(78, 101, 72, 0.05) !important;
    color: var(--primary-green) !important;
}

/* Custom indicator triangle on menu items with sub-menus */
.kanken-header-nav ul li.menu-item-has-children > a::after {
    content: '▾';
    font-size: 10px;
    margin-left: 5px;
    vertical-align: middle;
    display: inline-block;
}

/* Catalog alignment center tweak */
.kanken-catalog-grid {
    justify-content: center !important;
}

@media (max-width: 992px) {
    .kanken-header-nav {
        display: none !important;
    }
}

/* ==========================================================================
   MOBILE MENU TOGGLE & STICKY HEADER RESPONSIVENESS
   ========================================================================== */

/* Body scroll lock when menu is active */
body.kanken-menu-open {
    overflow: hidden !important;
}

/* Mobile Toggle Button */
.kanken-mobile-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 18px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 100000;
    margin-left: 15px;
    outline: none;
}

.kanken-mobile-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: var(--transition-smooth);
    transform-origin: left center;
}

/* Animate Hamburger into X */
.kanken-mobile-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(2px, -1px);
    background-color: var(--brand-red);
}

.kanken-mobile-toggle.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.kanken-mobile-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(2px, 1px);
    background-color: var(--brand-red);
}

/* Media Queries for Header Responsiveness */
@media (max-width: 992px) {
    .kanken-mobile-toggle {
        display: flex;
    }

    .kanken-header-container {
        padding: 0 20px;
        height: 70px;
    }

    .kanken-header-logo {
        font-size: 20px;
    }

    .kanken-header-logo img {
        height: 28px !important;
    }

    .kanken-header-cta {
        padding: 8px 16px;
        font-size: 12px;
    }

    /* Transform main nav into fullscreen slide-down drawer */
    .kanken-header-nav {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 70px) !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 40px 24px !important;
        box-sizing: border-box !important;
        transition: var(--transition-smooth) !important;
        transform: translateY(-100%) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        z-index: 99998 !important;
        overflow-y: auto !important;
    }

    .kanken-header-nav.active {
        transform: translateY(0) !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    .kanken-header-nav > ul {
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .kanken-header-nav > ul > li {
        width: 100% !important;
        text-align: center !important;
        display: block !important;
    }

    .kanken-header-nav > ul > li > a {
        font-size: 18px !important;
        padding: 10px 0 !important;
        display: inline-block !important;
    }

    .kanken-header-nav > ul > li > a::after {
        display: none !important; /* Hide hover underline effect on mobile */
    }

    /* Sub-menu Dropdowns styling on mobile */
    .kanken-header-nav ul.sub-menu,
    .kanken-header-nav ul li .sub-menu {
        position: static !important;
        transform: none !important;
        background-color: rgba(115, 80, 60, 0.03) !important;
        box-shadow: none !important;
        border: none !important;
        border-radius: var(--radius-sm) !important;
        padding: 10px 0 !important;
        margin: 8px auto 0 auto !important;
        width: 100% !important;
        max-width: 320px !important;
        display: none !important; /* Managed by active class toggle */
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transition: none !important;
    }

    .kanken-header-nav ul.sub-menu.active {
        display: flex !important;
    }

    .kanken-header-nav ul .sub-menu li {
        text-align: center !important;
    }

    .kanken-header-nav ul .sub-menu li a {
        padding: 10px 16px !important;
        font-size: 15px !important;
        text-align: center !important;
    }
    
    .kanken-header-nav ul li.menu-item-has-children > a::after {
        content: ' ▾';
        transition: transform 0.3s;
        display: inline-block;
    }

    .kanken-header-nav ul li.menu-item-has-children > a.expanded::after {
        transform: rotate(180deg);
        color: var(--brand-red);
    }
}

@media (max-width: 768px) {
    .kanken-header-cta {
        display: none !important; /* Hide header CTA to prevent overlap on narrow viewports */
    }
}

/* ==========================================================================
   MOBILE SPACING FOR SUBPAGE CARDS & CALCULATOR
   ========================================================================== */

/* Outer spacing for subpages cards on tablets/mobiles */
@media (max-width: 1200px) {
    .kanken-body-wrap {
        padding: 24px 16px !important;
        box-sizing: border-box !important;
    }
    .entry-content > .wp-block-group > .kanken-container,
    .entry-content .kanken-body-wrap > .kanken-container {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        border-radius: var(--radius-md) !important;
        box-shadow: var(--shadow-soft) !important;
    }
}

@media (max-width: 768px) {
    .kanken-body-wrap {
        padding: 16px 12px !important;
    }
    .entry-content .kanken-body-wrap > .kanken-container {
        padding: 24px 16px !important; /* More space for actual text on mobiles */
    }
    
    /* Ensure kanken-container never touches screen edges on mobile even if overridden inline */
    .kanken-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* Postural Calculator responsiveness on smaller mobiles */
@media (max-width: 480px) {
    .kanken-calc-stats {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .kanken-calc-rec-box {
        flex-direction: column !important;
        text-align: center !important;
        padding: 16px 12px !important;
    }
    .kanken-calc-rec-img {
        margin: 0 auto !important;
    }
}

/* ==========================================================================
   GLOBAL HORIZONTAL OVERFLOW SAFETY NET
   ========================================================================== */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}