@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* =========================
   YKB DESIGN SYSTEM
========================= */

:root{
    /* Light Theme */
    --bg: #f8fafc;
    --surface: #ffffff;
    --surface-2: #f3f4f6;

    --text: #0e1414;
    --text-light: #6b7280;

    --primary: #088178;
    --primary-dark: #066b63;
    --mint: #e6f6f4;
    --gold: #f59e0b;

    --border: #e5e7eb;

    --shadow:
    0 20px 50px rgba(0,0,0,.08);

    --shadow-sm:
    0 10px 30px rgba(0,0,0,.08);

    --radius:22px;
    --radius-sm:12px;
    --radius-md:18px;
    --radius-pill:50px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

h1,h2,h3,h4,h5,h6{
    font-family:'Space Grotesk', sans-serif;
}

body{
    padding-top:130px;

    background:var(--bg);

    color:var(--text);

    transition:.3s;
}

/* SCROLL ANIMATION ONLY */

section:not(#header){
    opacity:0;
    transform:translateY(40px);
    transition:.7s ease;
}

section.show:not(#header){
    opacity:1;
    transform:translateY(0);
}

/* =========================================================
   HEADER
   FIX: previously this used `left:50%; transform:translateX(-50%)`
   to center itself. A transform on an ancestor creates a new
   containing block for any position:fixed descendant — and
   #navbar lives inside #header. That meant the mobile slide-out
   menu (position:fixed) was positioning itself relative to the
   75px header bar instead of the real viewport, which is the
   root cause of most of the old mobile-nav glitches. Centering
   with left:0; right:0; margin:0 auto avoids transform entirely.
========================================================= */

#header{
    width:90%;
    max-width:1400px;
    height:75px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 35px;
    position:fixed;
    top:18px;
    left:0;
    right:0;
    margin:0 auto;
    border-radius:22px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    z-index:9999;
}

.section-p1 {
    padding: 60px 8%;
}

/* BUTTON SYSTEM — pill-shaped, per design system */
button,
.normal {
    background: var(--primary);
    color: #fff;
    padding: 14px 26px;
    border: none;
    border-radius: var(--radius-pill);
    font-weight:700;
    cursor: pointer;
    transition: 0.3s ease;
}

button:hover {
    transform: translateY(-2px);
    background: var(--primary-dark);
}

/* LINKS */
a {
    text-decoration: none;
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* =========================================================
   NAVBAR SYSTEM (single source of truth — do not duplicate
   these rules anywhere else in this file)
========================================================= */

#navbar{
    display:flex;
    align-items:center;
    gap:28px;
    list-style:none;
    margin:0;
    padding:0;
}

#navbar li{ display:flex; align-items:center; list-style:none; }

#navbar li a{
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    transition:color .25s;
}

#navbar li a:hover,
#navbar li a.active{ color:var(--primary); }

#navbar li a::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0;
    height:3px;
    background:var(--primary);
    border-radius:10px;
    transform:translateX(-50%);
    transition:width .25s;
}

#navbar li a:hover::after,
#navbar li a.active::after{ width:100%; }

.nav-label{ display:none; }

/* Cart / wishlist count badge */
.count-badge{
    min-width:18px;
    height:18px;
    padding:0 4px;
    border-radius:999px;
    background:var(--primary);
    color:#fff;
    font-size:11px;
    font-weight:700;
    display:none;
    align-items:center;
    justify-content:center;
    line-height:1;
}
.count-badge.show{ display:flex; }

.wishlist-icon,
#lg-bag{ display:flex; align-items:center; }

.wishlist-icon a,
#lg-bag a{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
}

.wishlist-icon i,
#lg-bag i{ font-size:20px; }

.wishlist-icon .count-badge,
#lg-bag .count-badge{
    position:absolute;
    top:-8px;
    right:-10px;
}

/* Account dropdown */
.user-menu{ position:relative; display:flex; align-items:center; }

#user-btn{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:600;
    cursor:pointer;
}

#user-btn i{ font-size:20px; }

.dropdown-caret{ font-size:10px; transition:transform .25s; }
#user-btn[aria-expanded="true"] .dropdown-caret{ transform:rotate(180deg); }

.dropdown{
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    min-width:200px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    box-shadow:0 15px 35px rgba(0,0,0,.15);
    padding:8px 0;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:.2s ease;
    z-index:100000;
}

.dropdown.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

.dropdown a{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 18px;
    color:var(--text);
    text-decoration:none;
}

.dropdown a:hover{ background:var(--mint); color:var(--primary); }

.hidden{ display:none !important; }

/* Auth links (logged out state) */
#auth-area{ display:flex; align-items:center; }

#guest-links{
    display:flex;
    align-items:center;
    gap:12px;
}

.nav-login{
    padding:10px 18px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface);
    color:var(--text);
    font-weight:600;
    transition:.3s;
}

.nav-login:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
}

.nav-register{
    padding:10px 20px;
    border-radius:999px;
    background:var(--primary);
    color:#fff !important;
    font-weight:700;
    transition:.3s;
}

.nav-register:hover{
    background:var(--primary-dark);
    transform:translateY(-2px);
}

/* Dark mode toggle button — icon swap (fa-moon <-> fa-sun) is handled
   by darkmode.js; this just styles the circle itself. */
#dark-mode-btn{
    width:42px;
    height:42px;
    font-size:17px;
    border:none;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:background .3s, transform .3s, box-shadow .3s;
    flex-shrink:0;
}

#dark-mode-btn:hover{
    background:var(--primary-dark);
    transform:rotate(180deg);
    box-shadow:0 6px 18px rgba(8,129,120,.35);
}

#dark-mode-btn:active{
    transform:scale(.9);
}

/* Shine sweep (added for other pill buttons) doesn't suit a small
   rotating circle — skip it here */
#dark-mode-btn::before{ display:none; }

/* Mobile hamburger / cart icons (hidden on desktop) */
#mobile{ display:none; }

/* Dim backdrop behind the open mobile menu.
   NOTE: in the HTML, #nav-overlay must be a SIBLING of #header,
   not nested inside it — same containing-block reasoning as the
   #header fix above. */
#nav-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    /* Keep the header (and its slide-out links) above the backdrop so
       the menu remains tappable on phones. */
    z-index:9998;
    opacity:0;
    transition:opacity .3s ease;
}
#nav-overlay.active{ display:block; opacity:1; }

/* ---------------- COMPACT NAV (<=1099px) ---------------- */
@media(max-width:1099px){

    #header{ width:94%; padding:0 18px; }

    #mobile{
        display:flex;
        align-items:center;
        gap:10px;
        margin-left:auto;
    }

    #mobile a,
    #mobile button{
        display:flex;
        align-items:center;
        justify-content:center;
        width:42px;
        height:42px;
        border:0;
        border-radius:50%;
        background:var(--surface-2);
        color:var(--text);
        cursor:pointer;
        padding:0;
    }

    #mobile a:hover,
    #mobile button:hover{ background:var(--primary); color:#fff; }

    #mobile i{ font-size:20px; color:currentColor; }

    /* Hide hamburger while the menu is open */
    body:has(#navbar.active) #mobile{
        opacity:0;
        pointer-events:none;
    }

    #navbar{
        position:fixed;
        top:0;
        right:0;
        width:min(320px,85vw);
        height:100vh;
        box-sizing:border-box;
        flex-direction:column;
        align-items:stretch;
        gap:2px;
        padding:90px 20px 30px;
        background:var(--surface);
        box-shadow:-15px 0 40px rgba(0,0,0,.2);
        overflow-y:auto;
        clip-path:inset(0 0 0 100%);
        visibility:hidden;
        transition:clip-path .3s ease, visibility .3s ease;
        z-index:99999;
    }

    #navbar.active{ clip-path:inset(0); visibility:visible; }

    #navbar > li{ width:100%; margin:0; }

    #navbar > li > a{
        width:100%;
        box-sizing:border-box;
        padding:14px 10px;
        font-size:17px;
        border-radius:12px;
    }

    #navbar > li > a:hover,
    #navbar > li > a.active{ background:var(--mint); }

    #navbar li a::after{ display:none; }

    .nav-label{ display:inline; }

    .wishlist-icon .count-badge,
    #lg-bag .count-badge{
        position:static;
        margin-left:auto;
    }

    .wishlist-icon,
    .user-menu,
    #auth-area{ width:100%; }

    .wishlist-icon a{ width:100%; }

    #lg-bag{ display:none; }

    #dark-mode-btn{ margin-top:8px; }

    #close-item{
        display:block;
        position:absolute;
        top:16px;
        right:16px;
        width:auto;
        margin:0;
        padding:0;
    }

    #close{
        display:flex;
        align-items:center;
        justify-content:center;
        width:40px;
        height:40px;
        border-radius:50%;
        background:var(--surface-2);
        color:var(--text);
    }

    #close i{ font-size:21px; line-height:1; }

    #close:hover{ background:var(--primary); color:#fff; }

    .dropdown{
        position:static;
        width:100%;
        margin-top:6px;
        border:none;
        box-shadow:none;
        background:transparent;
        padding:0;
        opacity:1;
        visibility:visible;
        transform:none;
        display:none;
    }

    .dropdown.active{ display:block; }

    .dropdown a{ padding:10px 10px 10px 30px; }
}

/* #close-item only exists for the mobile slide-out panel */
@media(min-width:1100px){ #close-item{ display:none; } }

@media(max-width:477px){
    #header{ width:94%; height:64px; padding:0 14px; top:12px; border-radius:18px; }
    #header .logo{ width:100px; }
    #mobile a, #mobile button{ width:38px; height:38px; }
}

@media(max-width:400px){
    #header{ gap:8px; padding:0 10px; }
    #header .brand-logo{ gap:6px; min-width:0; }
    #header .brand-logo .logo{ width:36px; height:36px; }
    #header .brand-name{ font-size:16px; white-space:nowrap; }
    #mobile{ gap:6px; }
    #mobile a, #mobile button{ width:36px; height:36px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* Home Page */

#hero{
    min-height:82vh;
    border-radius:36px;
    overflow:hidden;
    margin:30px;
    padding:80px 7%;
    background:
        linear-gradient(90deg, rgba(6,20,20,.78), rgba(6,20,20,.32)),
        url("../images/banner/hero4.avif");
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:center;
    color:#fff;
    position:relative;
}

/* subtle organic blob decoration, per design system */
#hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    right:-140px;
    bottom:-160px;
    background:var(--primary);
    opacity:.25;
    border-radius:42% 58% 63% 37% / 41% 44% 56% 59%;
    filter:blur(2px);
    pointer-events:none;
}

.hero-content{
    max-width:640px;
    position:relative;
    z-index:1;
}

.hero-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:999px;
    background:#ffffff;
    color:var(--primary-dark);
    font-family:'Space Mono', monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:22px;
    box-shadow:0 8px 20px rgba(0,0,0,.2);
    animation:slide .8s ease;
}

#hero h1{
    font-size:72px;
    line-height:1.02;
    font-weight:800;
    animation:slide 1s ease;
}

#hero h1 span{
    color:#5eead4;
}

#hero p{
    font-size:18px;
    line-height:1.8;
    color:rgba(255,255,255,.88);
    margin:20px 0 32px;
    animation:slide 1.2s ease;
}

.hero-actions{
    display:flex;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:40px;
    animation:slide 1.4s ease;
}

.hero-primary{
    background:var(--primary);
    color:#fff;
    padding:16px 30px;
    border-radius:999px;
    font-weight:700;
}

.hero-primary:hover{
    background:var(--primary-dark);
    transform:translateY(-2px) scale(1.03);
}

.hero-secondary{
    color:#fff;
    font-weight:600;
    padding:14px 6px;
    text-decoration:none;
    border-bottom:2px solid transparent;
    transition:.25s;
}

.hero-secondary:hover{
    color:#5eead4;
    border-bottom-color:#5eead4;
}

.hero-stats{
    display:flex;
    gap:28px;
    flex-wrap:wrap;
}

.hero-stats div{
    display:flex;
    flex-direction:column;
    gap:6px;
}

.hero-stats strong{
    font-family:'Space Mono', monospace;
    font-size:26px;
    font-weight:800;
}

.hero-stats span{
    color:rgba(255,255,255,.72);
    font-size:13px;
}

@media(max-width:799px){
    #hero{
        min-height:70vh;
        padding:56px 8%;
        margin:16px;
    }

    #hero h1{
        font-size:48px;
    }

    #hero p{
        font-size:16px;
    }

    #hero::after{
        width:280px;
        height:280px;
        right:-100px;
        bottom:-120px;
    }
}

@media(max-width:477px){
    #hero{
        min-height:64vh;
        padding:42px 7%;
        margin:12px;
    }

    #hero h1{
        font-size:36px;
    }

    .hero-actions{
        flex-direction:column;
        align-items:stretch;
    }

    .hero-primary{
        width:100%;
        text-align:center;
    }

    .hero-secondary{
        text-align:center;
    }

    .hero-stats{
        gap:18px;
    }
}

@keyframes slide{
    from{ opacity:0; transform:translateX(-40px); }
    to{ opacity:1; transform:none; }
}

/* =========================
   FEATURE ICONS
========================= */

#feature {
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:25px;
}

#feature .fe-box{
    background:var(--surface);
    color:var(--text);
    border:none;
    border-radius:25px;
    box-shadow:var(--shadow);
    transition:.3s;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:20px 10px;
}

#feature .fe-box:hover{
    transform:translateY(-12px);
}

#feature .fe-box img{
    transition:.4s;
    width:120px;
    height:90px;
    object-fit:contain;
}

#feature .fe-box:hover img{
    transform:scale(1.15);
}

#feature .fe-box h6 {
    display: inline-block;
    padding: 9px 14px;
    line-height: 1;
    border-radius: 999px;
    color: var(--primary);
    background-color: var(--mint);
    font-family:'Space Mono', monospace;
    font-size:12px;
    margin-top:14px;
}

#feature .fe-box:nth-child(2) h6 { background-color: #cdebbc; color:#2f6b1f; }
#feature .fe-box:nth-child(3) h6 { background-color: #d1e8f2; color:#12607f; }
#feature .fe-box:nth-child(4) h6 { background-color: #cdd4f8; color:#3d43a0; }
#feature .fe-box:nth-child(5) h6 { background-color: #f6dbf6; color:#8a2b8a; }
#feature .fe-box:nth-child(6) h6 { background-color: #fff2e5; color:#a35b12; }

@media(max-width:1099px){
    #feature{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:600px){
    #feature{
        grid-template-columns:repeat(2,1fr);
        gap:16px;
    }

    #feature .fe-box img{
        width:90px;
        height:70px;
    }
}

/*
  NOTE: two product-grid sections on the home page (Men / Women)
  both need this styling. Duplicate IDs are invalid HTML, so both
  sections share a ".product-section" class instead, and these
  selectors target that class so both grids render correctly.
*/

.product-section .pro-container{
    display:grid;
    /* Keep the normal grid tracks present after category/search filtering,
       so a small result set never stretches its remaining cards. */
    grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
    gap:25px;
}

/* =========================
   PRODUCT SECTION HEADERS
========================= */

.product-section{
    padding-top:90px;
    padding-bottom:90px;
}

.product-section h2{
    font-size:40px;
    font-weight:800;
    color:var(--text);
    text-align:center;
    margin-bottom:14px;
    letter-spacing:-0.5px;
}

.product-section p{
    text-align:center;
    color:var(--text-light);
    font-size:16px;
    max-width:620px;
    margin:0 auto 42px;
    line-height:1.7;
}

.product-section .section-chip{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 18px;
    border-radius:999px;
    background:var(--mint);
    color:var(--primary);
    font-family:'Space Mono', monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.4px;
    text-transform:uppercase;
    margin:0 auto 18px;
}

.product-section .section-heading{
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* =========================
   HOME SEARCH BAR
========================= */

.search-wrapper{
    margin-top:24px;
    width:min(560px,100%);
    position:relative;
}

.search-wrapper i{
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    color:#6b7280;
}

.search-wrapper input{
    width:100%;
    height:56px;
    border:1px solid var(--border);
    border-radius:999px;
    padding:0 20px 0 48px;
    font-size:15px;
    background:var(--surface);
    color:var(--text);
    outline:none;
    transition:.25s;
}

.search-wrapper input:focus{
    border-color:var(--primary);
    box-shadow:0 0 0 4px rgba(8,129,120,.14);
}

@media(max-width:799px){
    .product-section{
        padding-top:70px;
        padding-bottom:70px;
    }

    .product-section h2{
        font-size:32px;
    }

    .product-section p{
        font-size:15px;
        margin-bottom:32px;
    }
}

@media(max-width:900px){
    .product-section .pro-container{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:500px){
    .product-section .pro-container{
        grid-template-columns:1fr;
    }
}

.product-section .pro{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:28px;
    overflow:hidden;
    box-shadow:0 18px 45px rgba(0,0,0,.08);
    transition:transform .35s ease, box-shadow .35s ease;
    position:relative;
}

.product-section .pro:hover{
    transform:translateY(-10px);
    box-shadow:0 28px 60px rgba(0,0,0,.14);
}

.product-section .pro img{
    width:100%;
    height:340px;
    object-fit:cover;
    transition:transform .45s ease;
}

.product-section .pro:hover img{
    transform:scale(1.06);
}

.product-section .pro a{
    position:absolute;
    right:20px;
    bottom:20px;
}

.product-section .pro .cart{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0e1414;
    color:#fff;
    box-shadow:0 12px 28px rgba(17,24,39,.28);
    transition:.3s;
}

.product-section .pro .cart:hover{
    background:var(--primary);
    transform:scale(1.08);
}

/* Without this, the button used --text for its background — which is
   near-black in light mode but flips to white in dark mode, so a white
   icon on a white circle effectively disappeared. Pin it to a fixed
   dark shade instead so it's always visible regardless of theme. */
.dark-mode .product-section .pro .cart{
    background:#1f2937;
    color:#fff;
    box-shadow:0 12px 28px rgba(0,0,0,.5);
}

.dark-mode .product-section .pro .cart:hover{
    background:var(--primary);
}

.product-section .pro .des{
    padding:22px;
}

.product-section .pro .des span{
    color:var(--text-light);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.2px;
    font-weight:700;
}

.product-section .pro .des h5{
    margin:12px 0 14px;
    color:var(--text);
    font-size:17px;
    font-weight:700;
    line-height:1.45;
    min-height:48px;
}

.product-section .pro .des h4{
    margin-top:14px;
    font-family:'Space Mono', monospace;
    font-size:22px;
    font-weight:800;
    color:var(--primary);
}

.product-section .pro .des i {
    font-size: 12px;
    color: var(--gold);
}

/* =========================
   PRODUCT TOOLBAR
========================= */

.product-toolbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    margin:28px 0 40px;
}

.filter-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.filter-btn{
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:999px;
    padding:10px 18px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
}

.filter-btn:hover,
.filter-btn.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

#sort-products{
    height:48px;
    padding:0 16px;
    border-radius:14px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:14px;
    outline:none;
}

@media(max-width:768px){
    .product-toolbar{
        flex-direction:column;
        align-items:stretch;
        width:100%;
        min-width:0;
    }

    .filter-buttons{
        overflow-x:auto;
        flex-wrap:nowrap;
        padding-bottom:6px;
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .filter-btn{
        flex-shrink:0;
    }

    #sort-products{
        width:100%;
    }
}

#banner{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:
        linear-gradient(135deg, rgba(8,129,120,.85), rgba(14,20,20,.92)),
        url(../images/banner/b2.jpg);
    background-size:cover;
    background-position:center;
    width:100%;
    min-height:46vh;
    border-radius:30px;
    margin:40px auto;
    padding:50px 30px;
    color:#fff;
}

#banner h4{
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
    opacity:.9;
    margin-bottom:12px;
}

#banner h2{
    font-size:42px;
    font-weight:900;
    line-height:1.2;
    max-width:700px;
    margin-bottom:20px;
    color: #fff;
}

#banner h2 span{
    color:#facc15;
}

#banner .normal{
    background:#fff;
    color:#0e1414;
    border-radius:999px;
    padding:14px 28px;
    font-weight:700;
}

#banner .normal:hover{
    background:var(--primary);
    color:#fff;
}

@media(max-width:600px){
    #banner{ padding:36px 20px; margin:24px 0; border-radius:22px; }
    #banner h2{ font-size:28px; }
}

#sm-banner{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:28px;
    padding:0 8%;
}

#sm-banner .banner-box{
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    text-align:left;
    min-height:320px;
    border-radius:28px;
    padding:34px;
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
    background-image:url(../images/banner/b3.webp);
}

#sm-banner .banner-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(6,20,20,.08), rgba(6,20,20,.82));
}

#sm-banner .banner-box *{
    position:relative;
    z-index:1;
}

#sm-banner .banner-box2{
    background-image:url(../images/banner/b4.webp);
}

#sm-banner h4{
    color:#fff;
    font-size:20px;
    font-weight:300;
    letter-spacing:1.6px;
    text-transform:uppercase;
    margin-bottom:10px;
}

#sm-banner h2{
    color:#fff;
    font-size:34px;
    font-weight:800;
    margin-bottom:12px;
}

#sm-banner span{
    display:block;
    color:rgba(255,255,255,.85);
    font-size:14px;
    font-weight:500;
    margin-bottom:18px;
}

#sm-banner .white{
    background:#fff;
    color:#0e1414;
    border-radius:999px;
    padding:12px 22px;
    font-weight:700;
}

#sm-banner .white:hover{
    background:var(--primary);
    color:#fff;
}

@media(max-width:900px){
    #sm-banner{
        grid-template-columns:1fr;
        padding:0 6%;
    }
}

@media(max-width:477px){
    #sm-banner{ padding:0 4%; gap:18px; }
    #sm-banner .banner-box{ min-height:260px; padding:24px; }
    #sm-banner h2{ font-size:26px; }
}

/* =========================
   BANNER 3 STRIP
========================= */

#banner3 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:20px;
    padding: 0 8%;
}

#banner3 .banner-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;

    flex: 1 1 30%;
    min-width: 260px;
    height: 30vh;

    background-size: cover;
    background-position: center;

    border-radius:24px;
    position: relative;
    overflow: hidden;
}

#banner3 .banner-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(6,20,20,.42);
}

#banner3 .banner-box *{
    position:relative;
    z-index:1;
}

/* 1 — Seasonal Sale */
#banner3 .banner-box1 {
    background-image: url("../images/banner/b5.avif");
}

/* 2 — New Collection */
#banner3 .banner-box2 {
    background-image: url("../images/banner/b6.jpg");
}

/* 3 — T-Shirt */
#banner3 .banner-box3 {
    background-image: url("../images/banner/b7.jpg");
}

@media(max-width:700px){
    #banner3{
        flex-direction:column;
        padding:0 4%;
    }

    #banner3 .banner-box{
        flex:1 1 auto;
        width:100%;
        min-width:0;
        height:26vh;
    }
}

/* =========================
   NEWSLETTER
========================= */

#newsletter{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
    background:var(--text);
    border-radius:30px;
    padding:48px;
    margin:70px auto;
    color:#fff;
}

#newsletter h4{
    font-size:32px;
    font-weight:800;
    margin-bottom:10px;
}

#newsletter p{
    color:#cbd5e1;
    font-size:16px;
    line-height:1.7;
}

#newsletter p span{
    color:#5eead4;
    font-weight:700;
}

#newsletter .form{
    display:flex;
    align-items:flex-start;
    width:min(460px,100%);
    gap:10px;
}

.newsletter-field{
    flex:1;
    display:flex;
    flex-direction:column;
}

#newsletter input{
    height:58px;
    border:2px solid transparent;
    outline:none;
    padding:0 20px;
    font-size:15px;
    border-radius:999px;
    background:#fff;
    color:#0e1414;
    transition:.2s;
}

#newsletter input.input-error{
    border-color:#ef4444;
}

#newsletter .field-error{
    min-height:18px;
    margin-top:6px;
    padding-left:8px;
    font-size:12px;
    color:#fca5a5;
}

#newsletter button{
    height:58px;
    padding:0 24px;
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:999px;
    font-weight:700;
    flex-shrink:0;
}

#newsletter button:hover{
    background:var(--primary-dark);
}

#newsletter button.is-busy{
    opacity:.7;
    pointer-events:none;
}

@media(max-width:799px){
    #newsletter{
        padding:32px 24px;
    }

    #newsletter h4{
        font-size:26px;
    }

    #newsletter .form{
        flex-direction:column;
        width:100%;
    }

    #newsletter button{
        width:100%;
    }
}

/* =========================
   TOAST SYSTEM (replaces alert())
========================= */

#toast-stack{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:1000000;
    display:flex;
    flex-direction:column-reverse;
    gap:10px;
    max-width:min(360px,90vw);
}

.toast{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    border-radius:999px;
    background:var(--text);
    color:#fff;
    font-size:14px;
    font-weight:600;
    box-shadow:0 15px 35px rgba(0,0,0,.25);
    animation:toast-in .25s ease;
}

.toast.toast-success{ background:var(--primary); }
.toast.toast-error{ background:#dc2626; }
.toast.toast-info{ background:var(--text); }

.toast.toast-out{
    animation:toast-out .2s ease forwards;
}

@keyframes toast-in{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:none; }
}

@keyframes toast-out{
    from{ opacity:1; transform:none; }
    to{ opacity:0; transform:translateY(8px); }
}

@media(max-width:477px){
    #toast-stack{
        left:16px;
        right:16px;
        max-width:none;
    }
}

/* =========================
   FOOTER
========================= */

footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap:30px;
}

footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex:1 1 200px;
    margin-bottom: 20px;
}

footer .logo {
    width: 80px;
    height: auto;
}

#header .logo {
    width: 150px;
    height: auto;
}

footer h4 {
    font-size: 14px;
    padding-bottom: 20px;
}

footer p{
    font-size: 13px;
    color:var(--text-light);
    margin: 0 0 8px 0;
}

footer a{
    font-size: 13px;
    text-decoration: none;
    color:var(--text);
    margin-bottom: 10px;
}

footer .follow {
    margin-top: 20px;
}

footer .follow i {
    color: #465b52;
    padding-right: 4px;
    cursor: pointer;
}

footer .install .row img {
    border: 2px solid var(--primary);
    border-radius: 6px;
}

footer .install img {
    margin: 10px 0 15px 0;
    width: 100%;
    margin-right: 20px;
}

footer .follow i:hover,
footer a:hover {
    color: var(--primary);
}

footer .copyright{
    width: 100%;
    text-align: center;
    padding-top:20px;
    border-top:1px solid var(--border);
}

.col.install .row img {
    width: 140px;
    height: auto;
    object-fit: contain;
    margin-right: 10px;
}

.col.install > img {
    width: 180px;
    height: auto;
    object-fit: contain;
    margin-top: 10px;
}

@media(max-width:600px){
    footer{
        flex-direction:column;
        gap:0;
    }

    footer .col{
        width:100%;
        flex:1 1 auto;
    }
}

/* Page Header */

#page-header{
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 14px;
}

#page-header h2,
#page-header p{
    color: #fff;
}

/* Cart Header */

#page-header.cart-header{
    background-image: url(images/banner/b1.jpg);
}

/* Cart Table */

#cart{
    overflow-x: auto;
}

#cart table {
    width: 100%;
    min-width:640px;
    background:var(--surface);
    color:var(--text);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

#cart table th {
    background:var(--surface-2);
    color:var(--text);
    padding: 15px;
    font-size: 14px;
}

#cart table td {
    padding: 15px;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

#cart table img{
    width: 90px;
    border-radius: 10px;
}

#cart table td:nth-child(1){
    width: 100px;
    text-align: center;
}

#cart table td:nth-child(2){
    width: 150px;
    text-align: center;
}

#cart table td:nth-child(3){
    width: 250px;
    text-align: center;
}

#cart table td:nth-child(4),
#cart table td:nth-child(5),
#cart table td:nth-child(6){
    width: 150px;
    text-align: center;
}

#cart table td:nth-child(5) input{
    width: 70px;
    padding: 10px;
}

#cart table thead{
    border: 1px solid var(--border);
    border-left: none;
    border-right: none;
}

#cart table thead td{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 18px 0;
}

#cart table tbody tr td{
    padding-top: 15px;
}

#cart table tbody td{
    font-size: 14px;
}

/* Coupon + Total */

#cart-add{
    display: flex;
    flex-wrap: wrap;
    gap:20px;
    justify-content: space-between;
}

#coupon{
    flex:1 1 320px;
    margin-bottom: 30px;
}

#coupon h3,
#subtotal h3{
    padding-bottom: 15px;
}

#coupon input{
    padding: 10px 20px;
    outline: none;
    width: 60%;
    margin-right: 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

#coupon button{
    background: var(--primary);
    color: #fff;
}

#subtotal{
    flex:1 1 320px;
    margin-bottom: 30px;
    border: 1px solid var(--border);
    padding: 30px;
    border-radius: var(--radius-md);
}

#subtotal table{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

#subtotal table td{
    width: 50%;
    border: 1px solid var(--border);
    padding: 10px;
    font-size: 14px;
}

/* Checkout Button */

.checkout-btn{
    width: 100%;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 15px;
    font-size: 16px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: .3s;
}

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

/* About Page */

#page-header.about-header {
    background-image: url(../images/about/a1.jpg);
}

#about-head{
    display: flex;
    align-items: center;
    gap:40px;
}

#about-head img {
    width: 50%;
    height: auto;
    border-radius: var(--radius-md);
}

#about-head div {
    padding-left: 0;
}

@media(max-width:768px){
    #about-head{
        flex-direction:column;
    }

    #about-head img{
        width:100%;
    }
}

#about-app {
    text-align: center;
}

#about-app .video{
    width: 70%;
    height: 100%;
    margin: 30px auto 0 auto;
}

#about-app .video video{
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

@media(max-width:600px){
    #about-app .video{ width:100%; }
}

/* =========================
   DARK MODE
========================= */

.dark-mode{
    --bg:#0f1115;
    --surface:#1b1d22;
    --surface-2:#24262c;
    --text:#ffffff;
    --text-light:#b5b5b5;
    --border:#333;
    --mint:#123632;
    --shadow: 0 20px 50px rgba(0,0,0,.5);
    --shadow-sm: 0 10px 25px rgba(0,0,0,.45);
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #ffffff;
}

.dark-mode p,
.dark-mode label {
    color: #ffffff;
}

.dark-mode .pro {
    background: #1e1e1e;
}

.dark-mode .pro .des h5,
.dark-mode .pro .des span,
.dark-mode .pro .des h4 {
    color: #ffffff;
}

.dark-mode .fe-box {
    background: #1f1f1f;
}

.dark-mode .fe-box h6 {
    color: #fff;
}

.dark-mode #header {
    background: rgba(20,20,20,.85);
}

.dark-mode #navbar a {
    color: white;
}

.dark-mode .dropdown {
    background: #1f1f1f;
}

.dark-mode .dropdown a {
    color: white;
}

.dark-mode .dropdown a:hover {
    background: #333;
}

.dark-mode #cart table {
    background: #1f1f1f;
    color: white;
}

.dark-mode #cart table th {
    background: #2b2b2b;
    color: white;
}

.dark-mode #cart table td {
    color: white;
}

.dark-mode #newsletter {
    background: #1b1b1b;
}

.dark-mode footer,
.dark-mode footer p,
.dark-mode footer a,
.dark-mode footer h4 {
    color: white;
}

.dark-mode #blog .blog-box,
.dark-mode .modal-content,
.dark-mode #search-input,
.dark-mode #dark-mode-btn,
.dark-mode .empty-blog{
    background:#1f1f1f;
    color:#fff;
}

.dark-mode #blog .blog-details p,
.dark-mode #modal-text,
.dark-mode #modal-date{
    color:#cfcfcf;
}

.dark-mode #blog .blog-details h4{
    color:#fff;
}

.dark-mode #pagination a{
    background:#1f1f1f;
    color:#fff;
}

.dark-mode .category{
    background:#2b2b2b;
}

.dark-mode #search-input{
    box-shadow:none;
}

.dark-mode .product-section .pro .des h5 {
    color: white;
}

/* ---- Filled in for dark mode: components the previous pass missed ---- */

.dark-mode .filter-btn,
.dark-mode #sort-products,
.dark-mode .search-wrapper input,
.dark-mode .nav-login,
.dark-mode #coupon input,
.dark-mode #subtotal,
.dark-mode #subtotal table td{
    background:var(--surface-2);
    color:var(--text);
    border-color:var(--border);
}

.dark-mode .filter-btn:hover,
.dark-mode .filter-btn.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}

.dark-mode .search-wrapper input:focus{
    box-shadow:0 0 0 4px rgba(94,234,212,.14);
}

.dark-mode .nav-login:hover{
    border-color:var(--primary);
    color:var(--primary);
}

.dark-mode #feature .fe-box{
    background:var(--surface);
    box-shadow:var(--shadow);
}

.dark-mode .hero-badge{
    background:#101a19;
    color:#5eead4;
}

@media (max-width:477px){

    body{
        padding-top:100px;
    }

    .section-p1{
        padding:20px 16px;
    }

    #hero{
        height:58vh;
        margin:12px;
        padding:0 18px;
    }

    #hero h1{
        font-size:32px;
        line-height:1.1;
    }

    #hero p{
        font-size:13px;
    }

    .product-section .pro img{
        height:240px;
    }
}

.nav-btn{
    padding:10px 22px;
    border-radius:25px;
    background:var(--primary);
    color:white !important;
    transition:.3s;
}

.nav-btn:hover{
    background:var(--primary-dark);
    transform:translateY(-3px);
}

/* =========================
   SMOOTH THEME TRANSITION
========================= */

body,
section,
div,
button,
a,
input,
table,
th,
td,
footer,
header,
.pro,
.fe-box,
.dropdown {
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

/* =========================
   PREMIUM BRAND LOGO
========================= */

.brand-logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.brand-logo .logo{
    width:56px;
    height:56px;
    object-fit:contain;
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.brand-name{
    font-size:22px;
    font-weight:700;
    color:var(--text);
    letter-spacing:.2px;
}

.brand-tag{
    font-family:'Space Mono', monospace;
    font-size:11px;
    color:var(--text-light);
    text-transform:uppercase;
    letter-spacing:1.4px;
}

/* Shared storefront navigation polish */
#header{
    width:min(96%, 1440px);
    min-height:74px;
    padding:0 clamp(16px, 2.4vw, 34px);
    gap:clamp(12px, 1.6vw, 24px);
    border:1px solid rgba(8,129,120,.09);
    box-shadow:0 14px 38px rgba(14,20,20,.11);
}

#header .brand-logo{ flex:none; }
#header .brand-logo .logo{ width:50px; height:50px; }
#header .brand-name{ font-size:20px; letter-spacing:-.35px; }
#header .brand-tag{ font-size:9px; letter-spacing:1.25px; }

#navbar{ gap:clamp(12px, 1.35vw, 20px); }
#navbar > li > a{
    min-height:40px;
    padding:0 3px;
    border-radius:9px;
    font-size:13px;
    font-weight:650;
    white-space:nowrap;
}
#navbar > li > a::after{ bottom:0; height:2px; }
#navbar > li > a.active{ color:var(--primary-dark); }
#navbar .nav-label{ display:inline; font-size:12px; }

#auth-area{ min-width:0; }
#guest-links{ gap:8px; }
#guest-links .nav-login,
#guest-links .nav-register{ padding:9px 14px; font-size:12px; white-space:nowrap; }
#user-menu #user-btn{
    max-width:190px;
    min-height:40px;
    padding:0 12px;
    border:1px solid var(--border);
    border-radius:999px;
    background:var(--surface-2);
    font-size:12px;
}
#user-menu #nav-username{
    display:block;
    max-width:116px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#navbar .wishlist-icon > a,
#navbar #lg-bag > a{
    min-width:42px;
    min-height:42px;
    gap:5px;
    padding:0 7px;
    border-radius:12px;
    background:var(--surface-2);
}
#navbar .wishlist-icon > a:hover,
#navbar #lg-bag > a:hover{ background:var(--mint); }
#navbar .wishlist-icon i,
#navbar #lg-bag i{ font-size:16px; }
#navbar .count-badge{ top:-5px; right:-5px; min-width:17px; height:17px; font-size:10px; }
#dark-mode-btn{ width:40px; height:40px; background:var(--surface-2); color:var(--text); }
#dark-mode-btn:hover{ background:var(--primary); color:#fff; }

body.dark-mode #header{ background:rgba(24,29,31,.95); border-color:rgba(255,255,255,.08); }
body.dark-mode #user-menu #user-btn,
body.dark-mode #navbar .wishlist-icon > a,
body.dark-mode #navbar #lg-bag > a,
body.dark-mode #dark-mode-btn{ background:#252d30; color:#f7fbfc; border-color:rgba(255,255,255,.1); }
body.dark-mode #navbar .wishlist-icon > a:hover,
body.dark-mode #navbar #lg-bag > a:hover,
body.dark-mode #dark-mode-btn:hover{ background:#314144; }

@media(max-width:1099px){
    #header{ width:94%; min-height:68px; padding:0 18px; gap:14px; }
    #navbar .nav-label{ display:inline; }
    #navbar > li > a{ min-height:46px; padding:0 10px; font-size:16px; }
    #navbar .wishlist-icon > a,
    #navbar #lg-bag > a{ justify-content:flex-start; width:100%; background:transparent; }
    #navbar #lg-bag{ display:flex; }
    #navbar .count-badge{ position:static; margin-left:auto; }
    #user-menu #user-btn{ max-width:none; width:100%; min-height:46px; border:0; background:transparent; font-size:16px; }
    #user-menu #nav-username{ max-width:220px; }
    #guest-links{ width:100%; }
    #guest-links .nav-login,
    #guest-links .nav-register{ flex:1; text-align:center; padding:12px 14px; font-size:14px; }
}

@media(max-width:600px){
    #header .brand-logo .logo{ width:44px; height:44px; }
    #header .brand-name{ font-size:17px; }
    #mobile a,#mobile button{ width:40px; height:40px; }
    #navbar{ width:min(360px,88vw); padding:82px 20px 28px; }
}

@media(max-width:600px){
    .brand-tag{
        display:none;
    }

    .brand-name{
        font-size:18px;
    }

    .brand-logo .logo{
        width:46px;
        height:46px;
    }
}

/* =====================================================
   HOME - 3 PROMOTIONAL BANNERS
   TEXT ALWAYS WHITE IN LIGHT & DARK MODE
   ===================================================== */

.banner-fixed-white h2,
.banner-fixed-white h3,
.banner-fixed-white h4,
.banner-fixed-white p,
.banner-fixed-white span,
.banner-fixed-white a {
    color: #ffffff !important;
}

.icon a {
    color: inherit;
    text-decoration: none;
}

.icon a i {
    cursor: pointer;
    transition: 0.3s ease;
}

.icon a:hover i {
    transform: translateY(-3px);
}

/* =========================================================
   PREMIUM POLISH LAYER
   Purely additive — refines existing components, introduces
   no new markup dependencies, and respects the design system
   (teal primary, pill buttons, mint accents, no glassmorphism
   beyond the header's existing blur).
========================================================= */

/* -- Selection & scrollbar -- */
::selection{
    background:var(--primary);
    color:#fff;
}

html{
    scrollbar-color: var(--primary) var(--surface-2);
    scrollbar-width: thin;
}

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--surface-2); }
::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:999px;
    border:2px solid var(--surface-2);
}
::-webkit-scrollbar-thumb:hover{ background:var(--primary-dark); }

/* -- Accessible, on-brand focus states (keyboard nav) -- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
.filter-btn:focus-visible{
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 8px;
}

/* -- Button shine sweep on the primary pill buttons -- */
button,
.normal,
.hero-primary,
.checkout-btn{
    position:relative;
    overflow:hidden;
}

button::before,
.normal::before,
.hero-primary::before,
.checkout-btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-60%;
    width:40%;
    height:100%;
    background:linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
}

button:hover::before,
.normal:hover::before,
.hero-primary:hover::before,
.checkout-btn:hover::before{
    left:130%;
}

/* Buttons that are white/light already (e.g. inside dark banners)
   shouldn't get the light shine — swap to a dark sweep instead. */
#banner .normal::before,
#sm-banner .white::before{
    background:linear-gradient(120deg, transparent, rgba(8,129,120,.25), transparent);
}

/* -- Hero: gentle floating motion on the organic blob so the
   section feels alive instead of static -- */
#hero::after{
    animation: heroFloat 9s ease-in-out infinite;
}

@keyframes heroFloat{
    0%, 100%{ transform:translate(0,0) scale(1); }
    50%{ transform:translate(-18px,-22px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
    #hero::after{ animation:none; }
    section:not(#header),
    button::before, .normal::before, .hero-primary::before, .checkout-btn::before{
        animation:none;
        transition:none;
    }
}

/* -- Feature icon boxes: soft gradient edge that appears on hover,
   reinforcing the lift without changing the layout -- */
#feature .fe-box{
    position:relative;
    border:1px solid transparent;
}

#feature .fe-box::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1.5px;
    background:linear-gradient(135deg, var(--primary), transparent 60%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity:0;
    transition:opacity .3s ease;
    pointer-events:none;
}

#feature .fe-box:hover::after{ opacity:1; }

/* -- Product cards: slightly richer depth + a teal glow ring on
   hover instead of a flat shadow bump -- */
.product-section .pro{
    will-change: transform;
}

.product-section .pro:hover{
    box-shadow:
        0 28px 60px rgba(0,0,0,.14),
        0 0 0 1px rgba(8,129,120,.18);
}

.dark-mode .product-section .pro:hover{
    box-shadow:
        0 28px 60px rgba(0,0,0,.5),
        0 0 0 1px rgba(94,234,212,.18);
}

/* -- Section chips get a hairline ring so they read as "premium
   sticker" rather than a flat fill -- */
.product-section .section-chip{
    box-shadow: inset 0 0 0 1px rgba(8,129,120,.18);
}

/* -- Newsletter block: soft teal glow edge -- */
#newsletter{
    box-shadow: 0 30px 70px rgba(0,0,0,.12);
}


/* =========================================================
   YKB CLOTHING — MOBILE RESPONSIVENESS PATCH
   Add at the very end of styles.css
========================================================= */

/* Prevent accidental horizontal overflow */
html {
    width: 100%;
    overflow-x: clip;
}

body {
    width: 100%;
    min-width: 320px;
    overflow-x: clip;
}

img {
    max-width: 100%;
}

/* Mobile section spacing */
@media (max-width: 600px) {
    .section-p1 {
        padding: 28px 16px;
    }

    /* Hero */
    #hero {
        width: auto;
        min-height: 0;
        height: auto;
        margin: 12px;
        padding: 42px 22px;
        border-radius: 24px;
        background-position: center;
    }

    #hero h1 {
        font-size: clamp(30px, 8vw, 38px);
        line-height: 1.1;
        overflow-wrap: break-word;
    }

    #hero p {
        font-size: 14px;
        line-height: 1.7;
        margin: 16px 0 24px;
    }

    .hero-badge {
        font-size: 10px;
        letter-spacing: 1px;
        padding: 9px 12px;
        margin-bottom: 18px;
    }

    .hero-actions {
        gap: 10px;
        margin-bottom: 28px;
    }

    .hero-primary,
    .hero-secondary {
        width: 100%;
        text-align: center;
    }

    .hero-stats {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    .hero-stats strong {
        font-size: clamp(16px, 4.5vw, 22px);
    }

    .hero-stats span {
        font-size: 11px;
        line-height: 1.4;
        overflow-wrap: anywhere;
    }

    /* Feature boxes */
    #feature {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        padding: 24px 16px;
    }

    #feature .fe-box {
        min-width: 0;
        padding: 16px 8px;
        border-radius: 18px;
    }

    #feature .fe-box img {
        width: 72px;
        height: 62px;
    }

    #feature .fe-box h6 {
        font-size: 10px;
        padding: 8px 10px;
        max-width: 100%;
        line-height: 1.3;
    }

    /* Product section */
    .product-section {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .product-section h2 {
        font-size: clamp(25px, 6.5vw, 32px);
        line-height: 1.2;
    }

    .product-section p {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 22px;
    }

    .product-section .section-chip {
        font-size: 10px;
        padding: 8px 12px;
    }

    .search-wrapper {
        margin-top: 16px;
    }

    .search-wrapper input {
        height: 50px;
        font-size: 14px;
    }

    /* Two products per row */
    .product-section .pro-container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .product-section .pro {
        min-width: 0;
        border-radius: 16px;
    }

    .product-section .pro img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .product-section .pro .des {
        padding: 12px 10px;
    }

    .product-section .pro .des span {
        font-size: 9px;
        letter-spacing: 0.5px;
        overflow-wrap: anywhere;
    }

    .product-section .pro .des h5 {
        font-size: 12px;
        line-height: 1.45;
        margin: 8px 0;
        min-height: 0;
        overflow-wrap: anywhere;
    }

    .product-section .pro .des h4 {
        font-size: 15px;
        margin-top: 10px;
    }

    .product-section .pro > a {
        right: 8px;
        bottom: 8px;
    }

    .product-section .pro .cart {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    /* Filters and sorting */
    .product-toolbar {
        gap: 14px;
        margin: 22px 0;
    }

    .filter-buttons {
        gap: 8px;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .filter-btn {
        padding: 9px 13px;
        font-size: 12px;
    }

    #sort-products {
        height: 46px;
        font-size: 13px;
    }

    /* Promotional banners */
    #banner {
        min-height: 0;
        padding: 38px 20px;
    }

    #banner h2 {
        font-size: clamp(25px, 6.5vw, 30px);
        line-height: 1.25;
    }

    #sm-banner {
        grid-template-columns: minmax(0, 1fr);
        padding: 0 16px;
        gap: 14px;
    }

    #sm-banner .banner-box {
        min-width: 0;
        min-height: 230px;
        padding: 22px;
        border-radius: 20px;
    }

    #sm-banner h2 {
        font-size: 25px;
        line-height: 1.25;
    }

    #banner3 {
        padding: 0 16px;
        gap: 14px;
    }

    #banner3 .banner-box {
        min-width: 0;
        width: 100%;
        height: 190px;
        flex: 1 1 100%;
        border-radius: 20px;
    }

    #banner3 .banner-box h2 {
        font-size: 23px;
    }

    #banner3 .banner-box h3 {
        font-size: 15px;
    }

    /* Newsletter */
    #newsletter {
        margin: 36px 12px;
        padding: 26px 18px;
        border-radius: 22px;
        gap: 18px;
    }

    #newsletter h4 {
        font-size: 24px;
        line-height: 1.25;
    }

    #newsletter p {
        font-size: 14px;
    }

    #newsletter .form {
        gap: 8px;
    }

    #newsletter input {
        width: 100%;
        min-width: 0;
        height: 52px;
        font-size: 14px;
    }

    #newsletter button {
        height: 50px;
    }

    /* Footer */
    footer.section-p1 {
        padding: 32px 20px;
    }

    footer .col {
        min-width: 0;
        overflow-wrap: anywhere;
        margin-bottom: 24px;
    }

    footer .install .row {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    footer .install .row img {
        width: min(140px, 45%);
        margin: 0;
    }

    footer .install > img {
        width: min(180px, 100%);
        margin-right: 0;
    }

    /* Keep toast notifications inside the viewport */
    #toast-stack {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
    }

    .toast {
        border-radius: 14px;
        overflow-wrap: anywhere;
    }
}

/* Very narrow phones */
@media (max-width: 360px) {
    #header {
        padding: 0 9px;
        gap: 6px;
    }

    #header .brand-logo .logo {
        width: 38px;
        height: 38px;
    }

    #mobile {
        gap: 5px;
    }

    #mobile a,
    #mobile button {
        width: 34px;
        height: 34px;
    }

    .product-section .pro-container {
        gap: 8px;
    }

    .product-section .pro .des {
        padding: 10px 8px;
    }

    .product-section .pro .des h5 {
        font-size: 11px;
    }

    .product-section .pro .des h4 {
        font-size: 14px;
    }

    .hero-stats {
        gap: 8px;
    }
}

/* Avoid hover lift effects on touch-first devices */
@media (hover: none) {
    .product-section .pro:hover,
    #feature .fe-box:hover {
        transform: none;
    }

    .product-section .pro:hover img,
    #feature .fe-box:hover img {
        transform: none;
    }
}


/* Mobile account dropdown fix */
@media (max-width: 768px) {
    .dropdown {
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        left: auto;

        width: min(240px, calc(100vw - 32px));
        min-width: 0;
        max-width: calc(100vw - 32px);
        box-sizing: border-box;

        z-index: 100000;
    }

    .dropdown a {
        width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        white-space: normal;
    }
}