/* 1.  Brand design-tokens
-----------------------------------------------------------*/
:root{
    --primary      : #16f4ff;
    --primary-dark : #0cc4d0;
    --accent       : #ff2bd6;
    --text         : #e2e8f0;
    --text-muted   : #9ca3af;
    --bg           : #0b0f1f;
    --white        : #0f172a;
    --radius       : 20px;
    --font         : "Inter", "Helvetica Neue", Arial, sans-serif;

    /* fluid type scale (clamp = min, preferred, max) */
    --step--2: clamp(0.78rem, 0.75rem + 0.16vw, 0.88rem);
    --step--1: clamp(0.94rem, 0.90rem + 0.20vw, 1.06rem);
    --step-0 : clamp(1.13rem, 1.08rem + 0.25vw, 1.28rem);  /* body */
    --step-1 : clamp(1.35rem, 1.29rem + 0.30vw, 1.54rem);
    --step-2 : clamp(1.62rem, 1.55rem + 0.36vw, 1.85rem);
    --step-3 : clamp(1.94rem, 1.86rem + 0.43vw, 2.22rem);
    --step-4 : clamp(2.33rem, 2.23rem + 0.52vw, 2.66rem);
    --step-5 : clamp(2.80rem, 2.68rem + 0.62vw, 3.19rem);
}

/* 2.  Global reset
-----------------------------------------------------------*/
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;font-family:var(--font);font-weight:400;font-size:var(--step-0);
    line-height:1.6;color:var(--text-muted);background:radial-gradient(circle at top, rgba(22,244,255,.15), transparent 40%),
    radial-gradient(circle at 20% 20%, rgba(255,43,214,.2), transparent 35%),
    linear-gradient(180deg,#0b0f1f 0%,#0f172a 100%);overflow-x:hidden;}
img{max-width:100%;display:block;}
a{color:var(--text);text-decoration:none;transition:color .3s ease;}
a:hover{color:var(--primary);}
a.more{font-weight:600;}

/* 3.  Navbar – fully responsive
-----------------------------------------------------------*/
.custom-navbar{background:rgba(11,15,31,.95) !important;padding:18px 0;box-shadow:0 12px 28px rgba(22,244,255,.15);backdrop-filter:blur(12px);}
.custom-navbar .container{display:flex;align-items:center;justify-content:space-between;}
.custom-navbar .navbar-brand{font-size:var(--step-3);font-weight:700;color:var(--accent);letter-spacing:.5px;text-shadow:0 0 18px rgba(22,244,255,.45);}
.custom-navbar .navbar-toggler{border:none;background:none;color:var(--primary);font-size:1.5rem;}
.custom-navbar .navbar-nav{display:flex;flex-direction:column;gap:.5rem;margin-top:1rem;}
.custom-navbar .navbar-nav .nav-link{color:var(--text);opacity:.8;font-weight:500;position:relative;padding:6px 12px;transition:opacity .3s ease,color .3s ease;}
.custom-navbar .navbar-nav .nav-link::before{content:"";position:absolute;left:12px;right:12px;bottom:0;height:2px;background:var(--accent);width:0;transition:width .25s ease;}
.custom-navbar .navbar-nav .nav-link:hover,
.custom-navbar .navbar-nav .nav-link.active{opacity:1;}
.custom-navbar .navbar-nav .nav-link:hover::before,
.custom-navbar .navbar-nav .nav-link.active::before{width:calc(100% - 24px);}

/* hamburger → inline on large screens */
@media(min-width:992px){
    .custom-navbar .navbar-nav{flex-direction:row;gap:1.25rem;margin-top:0;flex-wrap:nowrap;}
    .custom-navbar .navbar-toggler{display:none;}
}

/* 4.  Hero – fluid type + spacing
-----------------------------------------------------------*/
/* ---------- HERO – mobile-first, never overflows ---------- */
.hero {
    background: radial-gradient(circle at top right, rgba(255,43,214,.35), transparent 45%),
        radial-gradient(circle at 20% 20%, rgba(22,244,255,.35), transparent 40%),
        linear-gradient(135deg, #0b0f1f 0%, #111827 55%, #0b0f1f 100%);
    padding: clamp(3rem, 18vw, 6rem) 0 clamp(3rem, 10vw, 5rem);
    display: grid;
    place-items: center;
    text-align: center;
    min-height: 70vh;          /* full-screen on phones */
}
.hero .container {
    display: grid;
    gap: 2rem;
    align-items: center;
    max-width: 1200px;
    padding: 0 1rem;
}
.hero h1 {
    font-weight: 800;
    color: #ffffff;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.15;
    margin: 0 0 1rem;
}
.hero p {
    color: rgba(226,232,240,.75);
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    margin: 0 0 2rem;
}
/* ---------- decorative dots – responsive ---------- */
.hero .hero-img-wrap {
    position: relative;          /* keeps pseudo-element inside flow */
}
.hero .hero-img-wrap::after {
    content: "";
    position: absolute;
    width: clamp(120px, 15vw, 255px);
    height: clamp(100px, 13vw, 217px);
    background: url("../images/dots-light.svg") center / contain no-repeat;
    right: clamp(-40px, -8vw, -100px);
    top: clamp(-10px, -2vw, -40px);
    pointer-events: none;        /* lets clicks pass through */
    display: none;               /* off by default on mobile */
}

/* tablet+ : show it */
@media (min-width: 768px) {
    .hero .hero-img-wrap::after {
        display: block;
    }
}

/* ---------- tablet → laptop two-column ---------- */
/* ==========================================
   WINDOWS / LAPTOP NAVBAR FIX  (≥ 992 px)
========================================== */
@media (min-width: 992px) {
  .custom-navbar .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
  }
  .navbar-brand {
    margin-right: auto;
    flex-shrink: 0;
  }
  .navbar-nav {
    margin: 0 auto;
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem;
    flex-wrap: nowrap !important;
  }
  .navbar-nav .nav-link {
    white-space: nowrap;
  }
  .navbar-text {
    margin-left: auto;
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Navbar dropdown hover (logged-in user) */
@media (min-width: 992px) {
  .custom-navbar .dropdown:hover > .dropdown-menu {
    display: block;
    margin-top: 0;
  }
  .custom-navbar .dropdown-menu {
    margin-top: 0.5rem;
  }
}

/* ---------- 4 K finisher ---------- */
@media (min-width: 2000px) {
    .hero {
        padding: clamp(10rem, 25vw, 15rem) 0;
    }
    .hero h1 {
        font-size: var(--step-5);
    }
}
/* 5.  Buttons – consistent everywhere
-----------------------------------------------------------*/
.btn{display:inline-block;font-weight:600;padding:12px 32px;border-radius:999px;border:1px solid transparent;transition:all .3s ease;text-align:center;box-shadow:0 0 20px rgba(22,244,255,.2); }
.btn-primary{background:linear-gradient(120deg,#16f4ff 0%,#0cc4d0 100%);border-color:transparent;color:#081018;}
.btn-primary:hover{filter:brightness(1.1);transform:translateY(-2px);}
.btn-secondary{background:transparent;border-color:rgba(22,244,255,.4);color:var(--text);}
.btn-outline-primary{border-color:rgba(255,43,214,.6);color:#ffffff;background:transparent;}
.btn-outline-primary:hover{background:rgba(255,43,214,.15);color:#fff;}
.btn-success{background:var(--primary);border:none;}
.btn-success:hover{background:var(--primary-dark);transform:translateY(-3px);}
.btn-outline-success{border-color:var(--primary);color:var(--primary);}
.btn-outline-success:hover{background:var(--primary);color:var(--white);}
.btn-outline-dark:hover{background:var(--primary) !important;color:var(--white) !important;}
.btn-lg{padding:16px 40px;font-size:var(--step-1);}
.btn-sm{padding:8px 20px;font-size:var(--step--1);}

/* 6.  Product cards – responsive grid
-----------------------------------------------------------*/
.product-grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));}
.product-item{display:block;text-decoration:none;color:var(--text);background:rgba(15,23,42,.85);border-radius:18px;overflow:hidden;border:1px solid rgba(22,244,255,.12);box-shadow:0 16px 32px rgba(22,244,255,.08);transition:transform .3s ease,box-shadow .3s ease;}
.product-item:hover{transform:translateY(-8px);box-shadow:0 24px 45px rgba(255,43,214,.2);}
.product-item img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform .3s ease;}
.product-item:hover img{transform:scale(1.08);}
.product-item .body{padding:1.25rem 1rem;text-align:center;}
.product-item h3{font-weight:700;font-size:var(--step-1);margin:.5rem 0;color:#ffffff;}
.product-item strong{font-weight:800;font-size:var(--step-2);color:var(--primary);}

/* 7.  Quantity spinner
-----------------------------------------------------------*/
.qty-control{display:inline-flex;border:1px solid rgba(22,244,255,.2);border-radius:14px;overflow:hidden;background:#0b1224;}
.qty-btn{width:44px;height:40px;border:none;background:#0f172a;font-size:var(--step-2);cursor:pointer;transition:background .3s ease,color .3s ease;color:var(--text);}
.qty-btn:hover{background:var(--primary);color:var(--white);}
.qty-number{min-width:50px;text-align:center;padding:8px;font-weight:600;background:var(--white);}
@media(max-width:768px){.qty-btn{width:38px;height:36px;font-size:var(--step-1);}}

/* 8.  Carousel – horizontal scroll + arrows
-----------------------------------------------------------*/
.products-carousel{position:relative;overflow:hidden;padding:0 3rem;}
#leggingsCarousel{display:flex;gap:1rem;scroll-behavior:smooth;overflow-x:auto;-webkit-overflow-scrolling:touch;}
#leggingsCarousel::-webkit-scrollbar{display:none;} /* hide scrollbar */
.carousel-arrow{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(22,244,255,.2);color:#ffffff;border:none;
    width:50px;height:50px;border-radius:50%;font-size:var(--step-3);
    cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;
    transition:background .3s ease;
}
.carousel-arrow:hover{background:rgba(0,0,0,.9);}
.carousel-arrow-left{left:10px;}
.carousel-arrow-right{right:10px;}
@media(max-width:768px){.carousel-arrow{display:none;}} /* touch scroll only */

/* 9.  Modal gallery – responsive zoom
-----------------------------------------------------------*/
.modal-transparent{background:transparent !important;border:none !important;box-shadow:none !important;}
.modal-backdrop.show{background:rgba(0,0,0,.3);backdrop-filter:blur(5px);}
.main-img{max-height:clamp(500px, 60vh, 0px);object-fit:cover;width:100%;cursor:zoom-in;transition:transform .3s ease;}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.6);color:var(--white);border:none;font-size:var(--step-3);padding:6px 12px;border-radius:50%;z-index:5;cursor:pointer;transition:background .3s ease;}
.nav-btn:hover{background:rgba(0,0,0,.8);}
.prev-btn{left:10px;border-radius:50%;width:40px;height:40px;padding:0;text-align:center;line-height:40px;font-size:20px;}
.next-btn{right:10px;border-radius:50%;width:40px;height:40px;padding:0;text-align:center;line-height:40px;font-size:20px;}
.zoom-controls{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:10;}
.zoom-controls button{background:var(--white);border:none;padding:6px 10px;border-radius:6px;cursor:pointer;}
@media(max-width:768px){.nav-btn{font-size:var(--step-2);padding:4px 8px;}.zoom-controls{top:5px;right:5px;gap:4px;}}

/* 10.  Bulk pricing cards
-----------------------------------------------------------*/
.bulk-card{background:rgba(15,23,42,.9);border-radius:24px;box-shadow:0 20px 45px rgba(22,244,255,.12);padding:2.5rem;position:relative;transition:transform .4s ease,box-shadow .4s ease;}
.bulk-card:hover{transform:translateY(-10px);box-shadow:0 30px 65px rgba(255,43,214,.2);}
.bulk-card.popular{border:3px solid rgba(255,43,214,.45);}
.ribbon{position:absolute;top:20px;right:-10px;background:var(--accent);color:#081018;padding:8px 30px;font-weight:bold;transform:rotate(10deg);box-shadow:0 8px 20px rgba(255,43,214,.45);}
.price-old{font-size:var(--step-2);text-decoration:line-through;color:#aaa;}
.price-new{font-size:var(--step-4);font-weight:800;color:var(--primary);}

/* 11.  Login box – centred card
-----------------------------------------------------------*/
.login-wrapper{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:2rem 1rem;}
.login-box{background:rgba(15,23,42,.95);border-radius:24px;width:100%;max-width:420px;box-shadow:0 24px 60px rgba(22,244,255,.2);overflow:hidden;}
.login-header{background:linear-gradient(135deg,#16f4ff 0%,#ff2bd6 100%);color:#081018;padding:2.25rem;text-align:center;}
.login-header h1{margin:0;font-size:var(--step-3);}
.login-body{padding:2.5rem 2rem;}
.btn-login{width:100%;height:56px;border-radius:12px;font-weight:600;font-size:var(--step-1);}

/* 12.  Utility helpers
-----------------------------------------------------------*/
.section-title{color:#ffffff;font-weight:800;font-size:var(--step-3);letter-spacing:.3px;}
.rounded-4{border-radius:20px;}
.shadow-lg{box-shadow:0 20px 40px rgba(0,0,0,.1);}
.sticky-top{top:100px;}
.max-height-400{max-height:400px;}
.text-primary{color:var(--primary) !important;}
.bg-primary{background-color:var(--primary) !important;}

/* 13.  Footer
-----------------------------------------------------------*/
.footer-section{background:linear-gradient(180deg,#0b0f1f 0%,#0f172a 100%);padding:5rem 0 3rem;}
.footer-section a:hover{color:rgba(47,47,47,.55);}
.footer-section .subscription-form{max-width:480px;margin:0 auto 3rem;}
.footer-section .subscription-form .form-control{height:56px;border-radius:12px;}
.footer-section .btn{border-radius:12px !important;}
.footer-section .links-wrap ul{list-style:none;padding:0;margin:0;}
.footer-section .links-wrap li{margin-bottom:.75rem;}
.footer-section .custom-social{display:flex;gap:.5rem;}
.footer-section .custom-social a{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;background:rgba(22,244,255,.15);color:var(--primary);border-radius:50%;transition:background .3s ease,color .3s ease;}
.footer-section .custom-social a:hover{background:var(--primary);color:var(--white);}

/* 14.  Very-small screens (watch-size)
-----------------------------------------------------------*/
@media(max-width:360px){
    .hero h1{font-size:var(--step-3);}
    .btn-lg{padding:14px 28px;font-size:var(--step-0);}
    .product-grid{grid-template-columns:1fr;}
    .login-body{padding:1.5rem 1rem;}
}

/* 15.  Print styles
-----------------------------------------------------------*/
@media print{
    .navbar,.carousel-arrow,.zoom-controls,.nav-btn{display:none !important;}
    body{background:var(--white);color:#000;}
    .product-item{box-shadow:none;border:1px solid #ccc;}
}

/* ---------- Why sayalclassics? – perfect grid alignment ---------- */
#why-choose .row > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;   /* same gap for every column */
}

#why-choose img,
#why-choose svg,
#why-choose i {
    margin-bottom: 1rem;   /* identical spacing below icon / image */
    height: 50px;          /* force same height (Font-Awesome already 50 px) */
    object-fit: contain;
}

/* mobile-first tidy-up */
@media (min-width: 576px) {
    #why-choose .row {
        row-gap: 2rem;
    }
}

.card,
.product-card,
.product-item {
    padding-bottom: 2rem;
}


/* ---------- Quick View button – always visible + correct colours ---------- */
a.btn.btn-outline-dark.btn-sm.px-4.rounded-pill {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 99 !important;
    background: linear-gradient(120deg,#16f4ff 0%,#ff2bd6 100%) !important;
    border: 1px solid transparent !important;
    color: #081018 !important;
}

/* hover state = outline-dark hover (from your sheet) */
a.btn.btn-outline-dark.btn-sm.px-4.rounded-pill:hover {
    filter: brightness(1.1);
    color: #081018 !important;
}

/* ---------- product card – equal height, no scroll ---------- */
.product-card{
    background: rgba(15,23,42,.85);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(22,244,255,.12);
    transition: transform .3s ease, box-shadow .3s ease;
}
.product-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(255,43,214,.2);
}
.product-img-wrapper{
    position: relative;
    padding-bottom: 125%; /* 4:5 aspect */
    height: 0;
}
.product-img-wrapper img{
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform .4s;
}
.product-card:hover img{
    transform: scale(1.08);
}
.product-info{
    padding: .75rem .5rem 0;
    flex: 1 1 auto;
}
.product-title{
    font-size: 1.2rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: .25rem;
    color: #ffffff;
}
.product-meta{
    font-size: .85rem;
    color: #94a3b8;
    margin-bottom: .5rem;
}
.product-meta .product-color{
    font-weight: 600;
}
.product-meta .product-color.is-white{
    color: #0b0f1f;
    background: linear-gradient(120deg, #0b0f1f 0%, #1f2937 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-price del{
    font-size: .9rem;
    color: #adb5bd;
    margin-right: .5rem;
}
.product-price span{
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
}
.badge-sale,
.badge-stock{
    position: absolute;
    padding: .25rem .5rem;
    font-size: .7rem;
    font-weight: 600;
    border-radius: .25rem;
}
.badge-sale{
    top: .5rem; left: .5rem;
    background: var(--accent); color: #081018;
}
.badge-stock{
    bottom: .5rem; left: 50%;
    transform: translateX(-50%);
    background: rgba(22,244,255,.2); color: #e2e8f0;
    white-space: nowrap;
}
.btn-outline-dark.btn-sm{
    border-width: 1px;
    margin: .75rem .5rem .5rem;
    width: calc(100% - 1rem);   /* full-width inside padding */
}

/* ---------- responsive tweaks ---------- */
@media (max-width: 576px){
    .hero{min-height: 55vh; padding: clamp(4rem, 12vw, 7rem) 0;}
    .product-img-wrapper{padding-bottom: 133%;} /* 3:4 on phones */
}
#modalImage{margin:0 auto;display:block;}

/* size button default */
.size-btn span{
    padding:10px 16px;
    border:1px solid #ccc;
    border-radius:8px;
    cursor:pointer;
    transition:all .3s;
}

/* selected state */
.size-btn input:checked + span{
    background:var(--primary);
    color:#081018;
    border-color:var(--primary);
}

.product-detail ul { padding-left: 1.2em; margin-bottom: 0; }
.product-detail li  { margin-bottom: .25em; }

/* 16. Inline styles consolidated from frontend templates
-----------------------------------------------------------*/
.site-body { font-family: var(--font); }
.navbar-brand { font-size: 32px; font-weight: 800; }
.navbar-brand span { opacity: 0.5; }
.dropdown-menu { border: none; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border-radius: 12px; }
.user-avatar { width: 38px; height: 38px; object-fit: cover; }
.badge-notif { font-size: 0.65rem; padding: 0.35em 0.6em; }
.navbar-spacer { height: 90px; }

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

.addr-card { transition: all .3s ease; }
.addr-card:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,.12); }

.new-arrival-image { height: 280px; object-fit: cover; width: 100%; }
.best-seller-image { height: 250px; object-fit: cover; width: 100%; }

.cart-item-thumb { height: 160px; width: 100%; object-fit: cover; }
.order-item-thumb { width: 60px; height: 60px; object-fit: cover; }
.order-item-thumb-small { width: 50px; height: 50px; object-fit: cover; }
.checkout-empty-image { width: 180px; }

.address-submit-btn { background: #3b5d50; border: none; }

.contact-icon { height: 80px; object-fit: contain; }
.bulk-benefit-icon { height: 130px; width: 130px; object-fit: contain; }

.payment-success { text-align: center; padding: 50px; }
.payment-success-title { color: green; }
.payment-success-actions .btn-view-orders { background: #333; margin-left: 10px; color: #fff; }
.payment-success-actions { display: inline-flex; gap: 10px; align-items: center; }

@media (max-width: 768px) {
    .checkout-page .display-5 { font-size: 2.2rem; }
}

/* Auth (login/register) pages */
.auth-body {
    font-family: var(--font);
    background:
        radial-gradient(circle at top, rgba(22,244,255,.18), transparent 40%),
        radial-gradient(circle at 20% 20%, rgba(255,43,214,.25), transparent 35%),
        linear-gradient(180deg,#0b0f1f 0%,#0f172a 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}
.auth-login .login-box {
    background: rgba(15,23,42,.95);
    border-radius: 22px;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 24px 60px rgba(22,244,255,.2);
    overflow: hidden;
    border: 1px solid rgba(22,244,255,.15);
}
.auth-login .login-header {
    background: linear-gradient(135deg,#16f4ff 0%,#ff2bd6 100%);
    color: #081018;
    padding: 36px;
    text-align: center;
}
.auth-login .login-header h1 { font-weight: 700; margin: 0; font-size: 2.2rem; }
.auth-login .login-header p { margin: .35rem 0 0; color: rgba(8,16,24,.8); }
.auth-login .login-body { padding: 40px; }
.auth-login .form-control {
    height: 56px;
    border-radius: 14px;
    font-size: 1.05rem;
    background: rgba(15,23,42,.7);
    border: 1px solid rgba(22,244,255,.2);
    color: #e2e8f0;
}
.auth-login .form-control::placeholder { color: rgba(226,232,240,.6); }
.auth-login .btn-login {
    background: linear-gradient(120deg,#16f4ff 0%,#0cc4d0 100%);
    height: 56px;
    border-radius: 14px;
    font-weight: 600;
    font-size: 1.05rem;
    color: #081018;
    border: none;
    box-shadow: 0 0 18px rgba(22,244,255,.35);
}
.auth-login .btn-login:hover { filter: brightness(1.1); }
.auth-login .register-link { color: #e2e8f0; font-weight: 600; }
.auth-login .register-link:hover { color: #ffffff; }

.auth-register .auth-card {
    background: rgba(15,23,42,.95);
    border-radius: clamp(14px, 3vw, 22px);
    width: 100%;
    max-width: clamp(300px, 90vw, 420px);
    box-shadow: 0 24px 60px rgba(22,244,255,.2);
    overflow: hidden;
    border: 1px solid rgba(22,244,255,.15);
}
.auth-register h2 {
    background: linear-gradient(135deg,#16f4ff 0%,#ff2bd6 100%);
    color: #081018;
    margin: 0;
    padding: clamp(20px, 5vw, 35px);
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.6rem, 5vw, 2.3rem);
}
.auth-register form {
    padding: clamp(20px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    gap: clamp(10px, 3vw, 15px);
}
.auth-register input,
.auth-register textarea {
    height: clamp(48px, 12vw, 56px);
    border-radius: clamp(10px, 2vw, 14px);
    font-size: clamp(1rem, 3vw, 1.1rem);
    border: 1px solid rgba(22,244,255,.2);
    padding: 0 clamp(10px, 3vw, 15px);
    width: 100%;
    background: rgba(15,23,42,.7);
    color: #e2e8f0;
}
.auth-register input::placeholder,
.auth-register textarea::placeholder { color: rgba(226,232,240,.6); }
.auth-register textarea { height: clamp(80px, 20vw, 100px); padding: clamp(10px, 3vw, 15px); resize: none; }
.auth-register button {
    background: linear-gradient(120deg,#16f4ff 0%,#0cc4d0 100%);
    height: clamp(48px, 12vw, 56px);
    border-radius: clamp(10px, 2vw, 14px);
    font-weight: 600;
    font-size: clamp(1rem, 3vw, 1.1rem);
    color: #081018;
    border: none;
    cursor: pointer;
    box-shadow: 0 0 18px rgba(22,244,255,.35);
}
.auth-register button:hover { filter: brightness(1.1); }
.auth-register .error-message {
    background: rgba(255, 59, 48, 0.15);
    border: 1px solid rgba(255, 59, 48, 0.3);
    color: #ff6b6b;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
}
.auth-register .error-message a { color: #16f4ff; text-decoration: underline; }
.auth-register .error-message a:hover { color: #ff2bd6; }
.auth-register .success-message {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    padding: 12px 16px;
    border-radius: 10px;
    margin-bottom: 15px;
    font-size: 0.9rem;
    text-align: center;
}
@media (max-width: 360px) {
    .auth-register h2 { font-size: 1.4rem; padding: 15px; }
    .auth-register input,
    .auth-register textarea,
    .auth-register button { font-size: 0.95rem; }
}

/* Account page */
.account-page .profile-card { padding: 2rem; overflow: hidden; }
.account-page .profile-header { text-align: center; margin-bottom: 1.5rem; }
.account-page .profile-avatar { margin-bottom: 1rem; }
.account-page .profile-name { margin-bottom: 0.5rem; font-weight: 700; }
.account-page .profile-email {
    font-size: 0.875rem;
    color: #6c757d;
    word-break: break-all;
    overflow-wrap: break-word;
    line-height: 1.4;
    margin: 0;
    padding: 0 0.5rem;
}
.account-page .profile-info { border-top: 1px solid #e9ecef; padding-top: 1.5rem; }
.account-page .info-item { margin-bottom: 1.25rem; }
.account-page .info-item:last-child { margin-bottom: 0; }
.account-page .info-label { font-weight: 600; color: #212529; display: block; margin-bottom: 0.25rem; font-size: 0.9rem; }
.account-page .info-value { color: #6c757d; display: block; line-height: 1.5; word-break: break-word; }
.account-page .profile-actions { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e9ecef; }
.account-page .sticky-top { top: 100px; }
.account-page .modal-body { padding: 2rem; }
.account-page .modal-footer { padding: 1.5rem 2rem; }
.account-page .form-label { margin-bottom: 0.5rem; font-weight: 600; }
.account-page .form-control { padding: 0.75rem 1rem; }
@media (max-width: 991.98px) {
    .account-page .profile-card { padding: 1.5rem; }
    .account-page .sticky-top { position: relative; top: 0; }
}
@media (max-width: 575.98px) {
    .account-page .profile-card { padding: 1.25rem; }
    .account-page .modal-body { padding: 1.5rem; }
}

/* Orders page */
.orders-page {
    --primary-color: #3b5d50;
    --secondary-color: #f9bf29;
    --neutral-gray: #6c757d;
    --light-bg: #f8f9fa;
}
.orders-page .badge-ordered { background: #ffeaa7; color: #6c5f00; }
.orders-page .badge-shipped { background: #74b9ff; color: #fff; }
.orders-page .badge-delivered { background: #28a745; color: #fff; }
.orders-page .badge-cancelled { background: #fd79a8; color: #fff; }
.orders-page .badge-returned { background: #a29bfe; color: #fff; }
.orders-page .track-box { border: 1px solid var(--neutral-gray); border-radius: 6px; padding: 12px; margin-top: 12px; font-size: .85rem; }
.orders-page .track-box a { color: var(--primary-color); font-weight: 600; }
.orders-page .action-btn { padding: .25rem .5rem; font-size: .8rem; border-radius: 4px; border: 1px solid transparent; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.orders-page .btn-cancel { border-color: var(--error-color); color: var(--error-color); background: transparent; }
.orders-page .btn-cancel:hover { background: var(--error-color); color: #fff; }
.orders-page .btn-return { border-color: var(--info-color); color: var(--info-color); background: transparent; }
.orders-page .btn-return:hover { background: var(--info-color); color: #fff; }
.orders-page .container { max-width: 1200px; }
.orders-page .accordion-button:not(.collapsed) { background-color: #f8f9fa; }
.orders-page .accordion-button:focus { box-shadow: none; border-color: rgba(0,0,0,.125); }

/* Product detail page */
.product-detail-body { overflow-x: hidden; height: 100%; }
.product-detail-page { min-height: 100vh; }
.product-detail-page .product-img-wrapper {
    position: relative;
    padding-bottom: 125%;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.product-detail-page .product-img-wrapper img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform .4s ease;
}
.product-detail-page .product-img-wrapper:hover img { transform: scale(1.05); }
.product-detail-page .badge-sale {
    position: absolute;
    top: 1rem; left: 1rem;
    background: #dc3545;
    color: #fff;
    padding: .5rem 1rem;
    font-weight: 700;
    border-radius: 12px;
    z-index: 2;
}
.product-detail-page .sold-out-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}
.product-detail-page .sold-out-overlay span {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    text-transform: uppercase;
}
.product-detail-page .carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    width: 50px; height: 50px;
    border-radius: 50%;
    font-size: 1.8rem;
    border: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
}
.product-detail-page .product-img-wrapper:hover .carousel-arrow { opacity: 1; }
.product-detail-page .carousel-arrow-left { left: 1rem; }
.product-detail-page .carousel-arrow-right { right: 1rem; }
@media (max-width: 768px) { .product-detail-page .carousel-arrow { opacity: 1; } }
.product-detail-page .size-btn input { position: absolute; opacity: 0; }
.product-detail-page .size-btn span {
    display: block;
    padding: 14px 20px;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    min-width: 90px;
    transition: all .3s;
    cursor: pointer;
}
.product-detail-page .size-btn input:checked + span {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}
.product-detail-page .size-btn.disabled span {
    background: #f8f9fa;
    color: #999;
    border-color: #eee;
    cursor: not-allowed;
}
.product-detail-page .size-btn span small {
    display: block;
    margin-top: 6px;
    font-size: .8rem;
}
.product-detail-page .product-detail { font-size: .95rem; }
@media (max-width: 767px) {
    .product-detail-page .detail-content > form {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: var(--bg);
        padding: 1rem;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
        z-index: 1000;
    }
    .product-detail-page .detail-content { padding-bottom: 100px; }
    .product-detail-page .d-grid { grid-gap: 1rem; }
}
#imagePreviewModal .modal-dialog { max-width: 100vw; margin: 0; }
#imagePreviewModal .modal-content { background: rgba(0,0,0,0.95); }
#imagePreviewModal img { max-height: 94vh; max-width: 94vw; object-fit: contain; }
#imagePreviewModal .carousel-arrow { opacity: 1; background: rgba(255,255,255,0.2); }
#imagePreviewModal .carousel-arrow:hover { background: rgba(255,255,255,0.4); }