/* ======================
IMPORTS
====================== */
@import url('base.css');
@import url('cart.css');
@import url('layout.css');
@import url('components.css');
@import url('pages.css');
@import url('articles.css');
@import url('animations.css');
@import url('icon.css');
@import url('pages/gummies-list.css');
@import url('pages/gummy-detail.css');
@import url('pages/faq.css');
@import url('pages/contact.css');
@import url('pages/shop.css');
@import url('pages/cart.css');
@import url('pages/checkout.css');
@import url('pages/order-success.css');
@import url('pages/home-my.css');
@import url('pages/about-us.css');
@import url('components/country-banner.css');
@import url('components/country-switcher.css');
@import url('mobile/mobile.css');

/* ======================
ROOT VARIABLES
====================== */
:root {
    --pn-orange: #ff7a00;
    --pn-orange-soft: #fff1e6;
    --pn-blue: #1e4ed8;
    --pn-blue-light: #60a5fa;
    --pn-red: #ef4444;
    --pn-text-dark: #1f2937;
    --pn-text-light: #6b7280;
    --pn-white: #ffffff;
    --pn-border: #e5e7eb;
    --pn-shadow-soft: 0 10px 25px rgba(0,0,0,0.08);
    --font-size-h1: 36px;
    --font-size-h2: 28px;
}

/* ======================
BASE SAFETY
====================== */
body {
    position: relative;
    overflow-x: hidden;
}

/* ======================
DESKTOP BREAKPOINT
====================== */
@media (min-width: 768px) {
    :root {
        --font-size-h1: 46px;
        --font-size-h2: 34px;
    }

    .hero h1 { font-size: var(--font-size-h1); }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
    .pectin-flex { flex-direction: row; align-items: center; }
    .counter-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ======================
NAV DROPDOWN - DESKTOP
====================== */
.nav-dropdown { position: relative; }

.nav-dropdown-toggle {
    background: none;
    border: none;
    font: inherit;
    cursor: pointer;
    color: inherit;
    font-weight: bold;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 8px;
    padding: 8px 0;
    display: none;
    z-index: 100;
}

.nav-dropdown-menu a {
    display: block;
    padding: 10px 16px;
    white-space: nowrap;
}

@media (min-width: 769px) {
    .nav-dropdown:hover .nav-dropdown-menu { display: block; }
}

/* ======================
MOBILE NAV - FIXED
====================== */
@media (max-width: 768px) {
    .site-header {
        position: relative;
        z-index: 10050;
    }

    .main-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: min(86vw, 320px);
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 95px 24px 35px;
        background: #ffffff;
        overflow-y: auto;
        overflow-x: hidden;
        box-shadow: -15px 0 40px rgba(0,0,0,0.16);
        transition: right 0.3s ease;
        z-index: 10050;
        pointer-events: auto;
    }

    .main-nav.open {
        right: 0;
        pointer-events: auto;
    }

    .main-nav > a {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 13px 14px;
        border-radius: 10px;
        color: #1f2937;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        pointer-events: auto;
    }

    .main-nav > a:hover,
    .main-nav > a:active { background: #f5f7fa; }

    .hamburger {
        position: relative;
        z-index: 10060;
        display: block;
        padding: 8px;
        background: none;
        border: none;
        cursor: pointer;
        pointer-events: auto;
    }

    .hamburger span {
        display: block;
        width: 26px;
        height: 3px;
        margin: 5px 0;
        background: var(--pn-orange);
        border-radius: 2px;
    }

    .main-nav .nav-dropdown {
        position: relative;
        width: 100%;
        pointer-events: auto;
    }

    .main-nav .nav-dropdown-toggle {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 13px 14px;
        background: transparent;
        border: none;
        border-radius: 10px;
        color: #1f2937;
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        pointer-events: auto;
    }

    .main-nav .nav-dropdown-toggle:hover,
    .main-nav .nav-dropdown-toggle:focus { background: #f5f7fa; }

    .main-nav .nav-dropdown-menu {
        position: static;
        display: none;
        width: 100%;
        min-width: 0;
        margin-top: 3px;
        padding: 5px 0 7px 12px;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        z-index: auto;
    }

    .main-nav .nav-dropdown.open .nav-dropdown-menu {
        display: block;
    }

    .main-nav .nav-dropdown.open .nav-dropdown-toggle {
        background: #f5f7fa;
        color: var(--pn-blue);
    }

    .main-nav .nav-dropdown-menu a {
        display: block;
        width: 100%;
        padding: 10px 13px;
        border-radius: 8px;
        color: #596879;
        font-size: 13px;
        font-weight: 600;
        white-space: normal;
        text-decoration: none;
        pointer-events: auto;
    }

    .main-nav .nav-dropdown-menu a:hover,
    .main-nav .nav-dropdown-menu a:active {
        background: #f3f6f9;
        color: var(--pn-blue);
    }

    .main-nav .nav-quiz {
        justify-content: center;
        margin-top: 8px;
        padding: 12px 16px !important;
        border-radius: 999px !important;
        background: linear-gradient(135deg, #ff453a, #ff7a35) !important;
        color: #ffffff !important;
        box-shadow: 0 8px 20px rgba(255, 90, 55, 0.22);
    }

    .main-nav a[href*="where-to-buy"] {
        justify-content: center;
        margin-top: 4px;
        padding: 11px 16px !important;
        border: 1.5px solid #90caf9;
        border-radius: 999px;
        background: #ffffff;
        color: #0757a3 !important;
    }

    .country-switcher,
    .language-switcher {
        position: relative;
        z-index: 10055;
    }

    .pn-sticky-quiz { z-index: 990 !important; }
    .floating-cart { z-index: 990 !important; }
    .mini-cart-overlay { z-index: 10070; }
    .mini-cart { z-index: 10080; }
}

/* ======================
MINI CART OVERLAY
====================== */
.mini-cart-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
    z-index: 998;
}

.mini-cart-overlay.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* ======================
MINI CART DRAWER
====================== */
.mini-cart {
    position: fixed;
    top: 0;
    right: -360px;
    width: 360px;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    transition: right .35s ease;
    z-index: 999;
    box-shadow: -10px 0 30px rgba(0,0,0,0.15);
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}

.mini-cart.open { right: 0; }

.mini-cart-header {
    padding: 18px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.mini-cart-header h3 { margin: 0; font-size: 18px; }
.mini-cart-body { padding: 20px; flex: 1; overflow-y: auto; }

.mini-cart-footer {
    padding: 16px;
    border-top: 1px solid var(--pn-border);
    display: grid;
    gap: 12px;
}

#closeMiniCart {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

/* ======================
FLOATING CART ICON
====================== */
.floating-cart {
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #1e4ed8;
    color: #fff;
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1001;
}

.floating-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--pn-red);
    color: #fff;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 50%;
}

.floating-cart::after {
    content: '';
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--pn-blue-light);
    border-radius: 50%;
}

.floating-cart.has-items::after { display: none; }

/* ======================
TOAST NOTIFICATION
====================== */
.toast {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background: #333;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    opacity: 0;
    transform: translateY(10px);
    transition: .3s ease;
    z-index: 1002;
}

.toast.show {
    opacity: 1;
    transform: translateY(0);
}

.cart-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
}

.cart-item h4 {
    font-size: 14px;
    margin: 0 0 6px;
    line-height: 1.4;
}

.cart-price {
    font-weight: 600;
    color: var(--pn-blue);
}

.qty-control {
    display: inline-flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
}

.qty-control button {
    width: 26px;
    height: 26px;
    border: none;
    background: #f3f4f6;
    cursor: pointer;
    font-weight: bold;
}

.qty-control span {
    width: 30px;
    text-align: center;
    font-size: 13px;
}

.cart-total {
    padding: 14px 20px;
    border-top: 1px solid #eee;
    font-weight: 600;
    font-size: 16px;
}

/* ======================
PECTIN NOTE BADGE
====================== */
.pectin-note-badge {
    margin: 16px auto 0;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #fff8e7, #fef3c7);
    border: 1px solid #f3d27a;
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    text-align: left;
}

.pectin-note-icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f4b400;
    color: #fff;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.pectin-note-text strong {
    display: block;
    font-size: 15px;
    color: #222;
    line-height: 1.2;
}

.pectin-note-text span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: #666;
    line-height: 1.3;
}


.faq-more-btn-wrap{
    margin-top:28px;
    text-align:center;
}

.faq-more-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:13px 22px;
    border-radius:999px;
    background:#e4332b;
    color:#fff;
    font-weight:800;
    text-decoration:none;
    transition:.2s ease;
}

.faq-more-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 22px rgba(228,51,43,.2);
}

/* =========================================================
   MOBILE NAV - STABLE DROPDOWN OVERRIDE
========================================================= */
@media (max-width:768px){
    #mainNav .nav-dropdown .nav-dropdown-menu{
        display:none !important;
    }

    #mainNav .nav-dropdown.open .nav-dropdown-menu{
        display:block !important;
    }

    #mainNav .nav-dropdown-toggle{
        touch-action:manipulation;
        -webkit-tap-highlight-color:transparent;
    }
}

/* =========================================================
   MANUFACTURING PARTNER
========================================================= */

.factory-partner-section{
    position:relative;
    min-height:590px;
    display:flex;
    align-items:center;
    overflow:hidden;
    background:#103b67;
}

.factory-partner-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.factory-partner-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}

.factory-video-overlay{
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            90deg,
            rgba(9,40,72,.94) 0%,
            rgba(9,40,72,.85) 38%,
            rgba(9,40,72,.48) 68%,
            rgba(9,40,72,.24) 100%
        );
}

.factory-partner-container{
    position:relative;
    z-index:2;
    width:100%;
}

.factory-partner-content{
    max-width:610px;
    padding:85px 0;
    color:#fff;
}

.factory-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:16px;
    padding:7px 12px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:999px;

    background:rgba(255,255,255,.1);

    font-size:11px;
    font-weight:800;
    letter-spacing:.1em;
    text-transform:uppercase;

    backdrop-filter:blur(8px);
}

.factory-partner-content h2{
    max-width:580px;
    margin:0 0 20px;

    color:#fff;
    font-size:clamp(36px,5vw,58px);
    line-height:1.05;
    letter-spacing:-.035em;
}

.factory-partner-content h2 span{
    display:block;
    color:#ffc952;
}

.factory-partner-content > p{
    max-width:560px;
    margin:0 0 30px;

    color:rgba(255,255,255,.82);
    font-size:16px;
    line-height:1.7;
}

.factory-points{
    display:grid;
    gap:11px;
    margin-bottom:30px;
}

.factory-point{
    display:flex;
    align-items:center;
    gap:13px;

    max-width:470px;
    padding:12px 14px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:15px;

    background:rgba(255,255,255,.09);
    backdrop-filter:blur(8px);
}

.factory-point > span{
    display:grid;
    width:42px;
    height:42px;
    flex:0 0 42px;
    place-items:center;

    border-radius:12px;
    background:rgba(255,255,255,.14);

    font-size:19px;
}

.factory-point div{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.factory-point strong{
    color:#fff;
    font-size:13px;
}

.factory-point small{
    color:rgba(255,255,255,.67);
    font-size:11px;
    line-height:1.45;
}

.factory-partner-link{
    display:inline-flex;
    align-items:center;
    gap:9px;

    padding:13px 19px;

    border-radius:13px;
    background:#fff;

    color:#174f7f;
    font-size:13px;
    font-weight:800;
    text-decoration:none;

    transition:.2s ease;
}

.factory-partner-link:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,.15);
}

.factory-partner-link span{
    font-size:16px;
}

/* MOBILE */

@media(max-width:768px){

    .factory-partner-section{
        min-height:640px;
        align-items:flex-end;
    }

    .factory-video-overlay{
        background:
            linear-gradient(
                180deg,
                rgba(9,40,72,.22) 0%,
                rgba(9,40,72,.72) 42%,
                rgba(9,40,72,.96) 75%,
                #092848 100%
            );
    }

    .factory-partner-content{
        padding:210px 0 55px;
    }

    .factory-partner-content h2{
        font-size:36px;
    }

    .factory-partner-content > p{
        font-size:14px;
    }

    .factory-point{
        max-width:none;
    }

    .factory-partner-link{
        width:100%;
        justify-content:center;
    }
}