/* Desktop visible by default */
.desktop-section {
    display: block;
}

.mobile-section {
    display: none;
}

/* Mobile */
@media (max-width: 768px) {
    .desktop-section {
        display: none;
    }

    .mobile-section {
        display: block;
    }

    html, body {
        background: #fff !important;
        overscroll-behavior-y: none;
    }
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#fff;
}

html{
    background:#fff;
}

/* Header */
/* Account sheet — slides in from the RIGHT */
#accountSheet {
  position: fixed;
  top: 0;
  right: -100%;
  bottom: auto;
  left: auto;
  width: 280px;
  height: 100vh;
  border-radius: 0;
  z-index: 1000;
  transition: right .35s;
}

#accountSheet.active {
  right: 0;
  bottom: auto;
}

#accountSheet ul li:last-child {
  border-bottom: none;
}
.header {
    width: 100%;
    height: 71px;
    background: #fff;
    border-bottom: 1px solid #eee;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);

    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 22px;
    position: sticky;
    top: 0;
    z-index: 100;
}
/* Left Icons */

.left-icons{
    display:flex;
    align-items:center;
    gap:18px;
}

/* Right Icons */

.right-icons{
    display:flex;
    align-items:center;
    gap:18px;
}

/* Logo */

.logo{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

.logo img {
    width: 180px;   /* change this number to whatever size you want */
    height: auto;
    display: block;
}
/* Buttons */

.icon-btn{
    border:none;
    background:transparent;
    cursor:pointer;

    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.fa-bars{
    font-size:22px;
}

.fa-magnifying-glass{
    font-size:21px;
}

.fa-user{
    font-size:21px;
}

.fa-heart{
    font-size:21px;
}

.fa-bag-shopping{
    font-size:21px;
    font-weight:400;
}

.left-icons img,
.right-icons img{
    width:22px;
    height:22px;
    object-fit:contain;
}

.logo img{
    width:102px;
}

.header{
    position:relative;
}

/* Overlay */

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.30);
    opacity:0;
    visibility:hidden;
    transition:.3s;
    z-index:999;
    pointer-events:none;
}

.overlay.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

/* Menu */

.menu-drawer{
    position:fixed;
    top:71px;
    left:-280px;
    width:260px;
    height:auto;
    min-height:fit-content;
    background:#fff;
    z-index:1000;
    transition:.35s;
    overflow:hidden;
    box-shadow:2px 0 15px rgba(0,0,0,.15);
    border-radius:0 0 16px 0;
    pointer-events:none;
}

.menu-drawer.active{
    left:0;
    pointer-events:auto;
}

/* Hover Effect */
.menu-drawer li:hover{
    background:#ececec;
    transition:0.3s;
}

.menu-drawer li:hover a{
    color:#000;
}

/* Active/Clicked Menu Item */
.menu-drawer li.active{
    background:#e8e8e8;
}

.menu-drawer li.active a{
    font-weight:600;
    color:#000;
}

/* Remove browser blue highlight on tap/click */
.menu-drawer li a:focus,
.menu-drawer li a:active,
.menu-drawer li a:visited,
.bottom-sheet li a:focus,
.bottom-sheet li a:active,
.bottom-sheet li a:visited {
    outline:none;
    color:#000;
    -webkit-tap-highlight-color: transparent;
    background:none;
}

.menu-drawer a,
.bottom-sheet a {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* RIGHT PANELS */
.bottom-sheet,
#accountSheet{
    position:fixed;
    top:0;
    right:-280px;
    width:260px;
    height:auto;
    min-height:fit-content;
    background:#fff;
    z-index:1000;
    transition:.35s;
    box-shadow:-2px 0 15px rgba(0,0,0,.15);
    border-radius:0 0 0 16px;
}

.bottom-sheet.active,
#accountSheet.active{
    right:0;
}
.drawer-header{
    height:71px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    border-bottom:1px solid #eee;
}

.drawer-header button{
    border:none;
    background:none;
    cursor:pointer;
}

.menu-drawer ul{
    list-style:none;
}

.menu-drawer li{
    padding:18px 20px;
    border-bottom:1px solid #eee;
    font-size:12px;
    letter-spacing:1px;
}

/* Search */

.search-panel {
    display: none;
    position: fixed;
    top: 71px;
    left: 0;
    right: 0;
    z-index: 1001;
    background: rgba(214, 214, 214, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.search-panel.active {
    display: block;
}

.search-box{
    background:#fff;
    border-radius:8px;
    padding:12px;
    display:flex;
    align-items:center;
}

.search-box input{
    flex:1;
    border:none;
    outline:none;
}

.search-box button{
    border:none;
    background:none;
    cursor:pointer;
}

/* Bottom Sheets */

.bottom-sheet{
    position:fixed;
    top:0;
    right:-100%;
    left:auto;
    bottom:auto;

    width:260px;
    max-width:100%;
    height:auto;
    min-height:fit-content;

    background:#fff;
    border-radius:0 0 0 16px;

    z-index:1000;
    transition:right .35s ease;
    box-shadow:-2px 0 15px rgba(0,0,0,.15);
    pointer-events:none;
}

.bottom-sheet.active{
    pointer-events:auto;
}

/* Bag sheet: matches menu/account drawers — compact, scroll when many items */
#bagSheet {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    left: auto !important;
    bottom: auto !important;
    width: 270px !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: fit-content !important;
    max-height: 85vh !important;
    border-radius: 0 0 0 16px !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    overflow: hidden !important;
    transition: right .35s ease !important;
  z-index: 1100 !important;
    box-shadow: -2px 0 15px rgba(0,0,0,.15) !important;
}

#overlay {
    z-index: 1000 !important;
}
#bagSheet.active {
    right: 0 !important;
    bottom: auto !important;
}

.bottom-sheet.active{
    right:0;
}

.sheet-bar{
    display:none;
}

.sheet-bar{
    width:45px;
    height:4px;
    background:#ececec;
    border-radius:30px;
    margin:10px auto;
}

.sheet-header{
    height:71px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 20px;
    border-bottom:1px solid #eee;
}

.sheet-header button{
    border:none;
    background:none;
    cursor:pointer;
}

.bottom-sheet ul{
    list-style:none;
}

.bottom-sheet li{
    padding:16px 20px;
    border-bottom:1px solid #eee;
    font-size:12px;
    letter-spacing:1px;
}

.bottom-sheet li a{
    display:block;
    width:100%;
    text-decoration:none;
    color:#000;
    font-size:12px;
    letter-spacing:1px;
    -webkit-tap-highlight-color:transparent;
}

.bottom-sheet li:hover{
    background:#ececec;
    transition:0.3s;
}

.bottom-sheet li a:hover{
    color:#555;
}

.empty-box{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px 20px;
    color: #999;
}

.checkout-btn{
    width: calc(100% - 40px);
    margin: 20px auto 0;
    display: block;
    height:45px;
    border:none;
    background:#000;
    color:#fff;
    cursor:pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
}
#bagSheet {
    background: #ffffff !important;
    opacity: 1 !important;
}
.menu-drawer li a{
    display:block;
    width:100%;
    text-decoration:none;
    color:#000;
    font-size:12px;
    letter-spacing:1px;
}

.menu-drawer li a:hover{
    color:#555;
}

html{
    scroll-behavior:smooth;
    background:#fff;
}

/* HERO SECTION */
.hero-section{
    width:100%;
    padding:0;
    margin:0;
    background:#fff;
}

.hero-card{
    width:100%;
    margin:0;
    border-radius:10px;
    overflow:hidden;
}

.hero-card img{
    width:100%;
    display:block;
    border-radius:10px;
}


/* OFFER BANNER */

.offer-banner{
    width:100%;
    padding:8px 5px 0;
    background:#fff;
}

.offer-banner-card{
    width:100%;
    height:81px;
    border-radius:10px;
    overflow:hidden;
}

.offer-banner-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* NEW ARRIVALS HEADING */

.new-arrivals-heading-section{
    width:100%;
    padding:16px 12px 0;
    background:#fff;
}

.new-arrivals-heading{
    font-family:'Inter', sans-serif;
    font-size:19.5px;
    font-weight:700;
    line-height:24px;
    color:#000;
    margin:0;
}

/* All classes are prefixed "na-" so nothing clashes with your existing CSS */
 
.na-products{
  width:100%;
  padding:8px 8px 0;
  background:#fff;
}
 
.na-slider{
  display:flex;
  gap:10px;
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  padding-bottom:10px;
}
.na-slider::-webkit-scrollbar{display:none;}
 
.na-card{
  width: calc(50vw - 12px);
  min-width: calc(50vw - 12px);
  background:#fff;
  border:1px solid #e8e8e8;

  border-radius:5px; /* Figma */

  box-shadow:0 2px 8px rgba(0,0,0,.08);
  overflow:hidden;
  transition:box-shadow .2s;
  flex-shrink:0;
}

.na-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.14);}
 
/* Image area */
.na-img-wrap{
  position:relative;
  width:100%;
  height:calc(50vw - 24px);
  background:#f9f9f9;
  overflow:hidden;

  border-top-left-radius:5px;
  border-top-right-radius:5px;
}

.na-card{
    border-radius:5px;
}

.na-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center; /* ← anchors image to top so head isn't cut */
  display: block;
}
 
/* Wishlist button */
.na-wish{
  position:absolute;
  top:8px;right:8px;
  width:26px;height:26px;
  border:none;
  background:rgba(255,255,255,.92);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .15s;
  padding:0;
}
.na-wish:hover{transform:scale(1.15);}
.na-wish svg{
  width:14px;height:14px;
  fill:none;
  stroke:#999;
  stroke-width:2;
  transition:fill .2s,stroke .2s;
}
.na-wish.na-active svg{fill:#e53935;stroke:#e53935;}
 
/* Zoom / Quick-view button */
.na-zoom{
  position:absolute;
  top:38px;right:8px;
  width:26px;height:26px;
  border:none;
  background:rgba(255,255,255,.92);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  transition:transform .15s,background .15s;
  padding:0;
}
.na-zoom:hover{transform:scale(1.15);background:#fff;}
.na-zoom svg{width:13px;height:13px;stroke:#555;}

.td__wish { z-index: 4; }

/* Keep product overlay icons at original compact circular size */
.na-zoom, .sl__zoom, .na-wish, .sl__wish {
  min-height: 0;
  min-width: 0;
}
 
/* Card body */
.na-body{padding:8px 10px 10px;}
 
.na-title{
  font-size:10.5px;
  font-weight:500;
  line-height:1.35;
  color:#111;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
 
.na-prices{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:9px;
}
.na-price{font-size:12px;font-weight:700;color:#111;}
.na-old{font-size:9.5px;color:#aaa;text-decoration:line-through;}
 
/* Shop Now button */
/* Shop Now button */
.na-shop {
  width: 91px;
  height: 27px;
  margin: 0 auto;
  display: block;
  background: rgba(217, 217, 217, 0.20);
  border: 1px solid #D9D9D9;
  border-radius: 5px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .5px;
  color: #222;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .15s, border-color .15s, color .15s;
}

.na-shop:hover {
  background: rgba(217, 217, 217, 0.50);
  border-color: #bbb;
  color: #222;
}

.na-shop:active {
  background: #111;
  border-color: #111;
  color: #fff;
  transform: scale(.97);
  transition: background 0s, border-color 0s, color 0s; /* instant black on press */
}
 
/* Quick-view modal */
.na-modal-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  align-items:center;justify-content:center;
}
.na-modal-overlay.na-open{display:flex;}
 
.na-modal-box{
  background:#fff;
  border-radius:14px;
  padding:20px;
  width:280px;max-width:90vw;
  box-shadow:0 8px 40px rgba(0,0,0,.22);
  position:relative;
  animation:naFadeUp .22s ease;
}
@keyframes naFadeUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
 
.na-modal-close{
  position:absolute;top:10px;right:12px;
  background:none;border:none;
  font-size:20px;cursor:pointer;color:#666;
}
.na-modal-img{
  width:100%;height:160px;
  object-fit:cover;
  border-radius:8px;
  background:#f0f0f0;
  margin-bottom:12px;
  display:block;
}
.na-modal-title{font-size:13px;font-weight:700;margin-bottom:6px;}
.na-modal-prices{display:flex;gap:8px;align-items:center;margin-bottom:14px;}
.na-modal-price{font-size:14px;font-weight:700;}
.na-modal-old{font-size:11px;color:#aaa;text-decoration:line-through;}
.na-modal-shop{
  width:100%;height:36px;
  background:#111;color:#fff;
  border:none;border-radius:6px;
  font-size:11px;font-weight:700;letter-spacing:.6px;
  cursor:pointer;transition:background .15s;
}
.na-modal-shop:hover{background:#333;}
 
/* Toast */
.na-toast{
  position:fixed;
  bottom:30px;left:50%;
  transform:translateX(-50%) translateY(60px);
  background:#222;color:#fff;
  padding:8px 18px;
  border-radius:20px;
  font-size:12px;font-weight:500;
  opacity:0;
  transition:all .3s;
  z-index:10000;
  pointer-events:none;
  white-space:nowrap;
}
.na-toast.na-show{opacity:1;transform:translateX(-50%) translateY(0);}

/* SUN PROTECTION BANNER */

.sun-protection-banner{
    width:100%;
    padding:10px 5px 0;
    background:#fff;
}

.sun-protection-card{
    width:100%;
    height:226px;
    border-radius:10px;
    overflow:hidden;
}

.sun-protection-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* ============================================================
   TOP DEALS — namespaced td__  |  zero side-effects
   ============================================================ */
.td__section *,.td__section *::before,.td__section *::after{box-sizing:border-box;margin:0;padding:0;}

.td__section{width:100%;background:#fff;padding:14px 8px 16px;font-family:'Inter',sans-serif;}

.td__heading{font-size:19px;font-weight:700;color:#111;margin:0 0 10px 2px;letter-spacing:.2px;}

/* ── 2×2 grid ── */
.td__grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}

.td__card{position:relative;border-radius:8px;overflow:hidden;cursor:pointer;aspect-ratio:182/258;background:#111;}
.td__img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.td__card:hover .td__img{transform:scale(1.04);}
.td__overlay{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 55%,rgba(0,0,0,.55) 100%);pointer-events:none;}

.td__btn{
  position:absolute;bottom:10px;left:10px;
  width:58px;height:17px;padding:0;
  background:rgba(0,0,0,.20);
  border:1px solid #D9D9D9;border-radius:5px;
  color:#fff;font-size:7px;font-weight:700;letter-spacing:.5px;
  cursor:pointer;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background .18s,color .18s,border-color .18s;
  z-index:2;
  font-family:'Inter',sans-serif;
}
.td__btn:hover{background:#fff;border-color:#fff;color:#111;}
.td__btn:active{background:#111;border-color:#111;color:#fff;transform:scale(.96);}

/* ══════════════════════════════════════════
   PRODUCT PAGE OVERLAY
   ══════════════════════════════════════════ */
.td__page{
  display:none;
  position:fixed;inset:0;
  background:#f7f7f7;
  z-index:9998;
  flex-direction:column;
  overflow-y:auto;
  animation:tdSlideUp .28s ease;
}
.td__page.td__open{display:flex;}
@keyframes tdSlideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}

/* ── Page header ── */
.td__page-header{
  position:sticky;top:0;
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px 12px;
  border-bottom:1px solid #efefef;
  z-index:2;
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.td__page-title{font-family:'Inter',sans-serif;font-size:16px;font-weight:800;color:#111;letter-spacing:-.2px;}
.td__page-sub{font-family:'Inter',sans-serif;font-size:10px;color:#888;margin-top:2px;}

.td__back{
  background:none;border:none;cursor:pointer;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#111;
  display:flex;align-items:center;gap:4px;
  padding:6px 10px;border-radius:6px;
  transition:background .15s;
}
.td__back:hover{background:#f5f5f5;}
.td__back svg{flex-shrink:0;}

/* ── Product grid inside page ── */
.td__prod-grid{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 8px 32px;
}

/* ── Product card ── */
.td__prod-card{
  width:calc(50% - 4px);
  min-width:calc(50% - 4px);
  height:250px;
  flex-shrink:0;
  background:#fff;
  border:1px solid #fff;
  border-radius:10px;
  box-shadow:0 4px 16px rgba(0,0,0,.10);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:box-shadow .2s;
}
.td__prod-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.16);}

.td__prod-img-wrap{
  position:relative;
  width:100%;height:150px;flex-shrink:0;
  background:#f5f5f5;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.td__prod-img{width:100%;height:100%;object-fit:contain;display:block;padding:10px;box-sizing:border-box;}

/* wishlist on product card */
.td__prod-wish{
  position:absolute;top:8px;right:8px;
  width:28px;height:28px;
  border:none;background:rgba(255,255,255,.95);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.15);padding:0;
  transition:transform .15s;z-index:2;
}
.td__prod-wish:hover{transform:scale(1.15);}
.td__prod-wish svg{width:14px;height:14px;fill:none;stroke:#bbb;stroke-width:2;transition:fill .2s,stroke .2s;}
.td__prod-wish.td__active svg{fill:#e53935;stroke:#e53935;}

.td__prod-body{padding:8px 10px 10px;}
.td__prod-name{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:#111;margin:0 0 6px;line-height:1.4;display:-webkit-box;;-webkit-box-orient:vertical;overflow:hidden;}
.td__prod-prices{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.td__prod-price{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#111;}
.td__prod-old{font-family:'Inter',sans-serif;font-size:9.5px;color:#aaa;text-decoration:line-through;}

.td__prod-shop{
  width:91px;height:27px;display:block;margin:0 auto;
  background:rgba(217,217,217,.20);border:1px solid #D9D9D9;border-radius:5px;
  font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;color:#000;
  cursor:pointer;transition:background .18s,color .18s,border-color .18s;
}
.td__prod-shop:hover{background:#111;border-color:#111;color:#fff;}
.td__prod-shop:active{background:#333;transform:scale(.97);}

/* ── Image-only fullscreen modal ── */
.td__img-modal{
  display:none;position:fixed;inset:0;
  background:#000;z-index:10000;
  align-items:center;justify-content:center;
}
.td__img-modal.td__open{display:flex;}
.td__img-modal-close{
  position:absolute;top:14px;right:16px;
  background:rgba(255,255,255,.15);border:none;border-radius:50%;
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#fff;font-size:18px;transition:background .15s;z-index:2;
}
.td__img-modal-close:hover{background:rgba(255,255,255,.3);}
.td__img-modal img{width:100vw;height:auto;max-height:100vh;object-fit:contain;display:block;}

/* ── Toast ── */
.td__toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;padding:9px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;z-index:10001;}
.td__toast.td__show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== CSS ===== */

/* ---- Section wrapper ---- */
.wv-section {
  width: 100%;
  background: #f5f5c8;
  padding: 16px 8px 20px;
  box-sizing: border-box;
}

/* ---- Header ---- */
.wv-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  gap: 4px;
}

.wv-brand-img {
  width: 111px;
  height: auto;
  display: block;
  transform: scale(1.4);
}
.wv-title-img {
  width: 220px;
  height: auto;
  display: block;
}

/* ---- Slider ---- */
.wv-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* height set dynamically by JS */
}

/* ---- Story card ---- */
.wv-card {
  position: absolute;
  top: 14px;
  width: calc((100vw - 16px - 16px) / 3);
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transform: scale(0.88);
  opacity: 0.55;
  transition: transform 0.48s cubic-bezier(.4,0,.2,1),
              opacity   0.48s cubic-bezier(.4,0,.2,1),
              box-shadow 0.48s,
              left      0.48s cubic-bezier(.4,0,.2,1);
}

/* Active centre card */
.wv-card.wv-active {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  z-index: 2;
}

.wv-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.32);
}

/* ---- Video ---- */
.wv-card-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- Bottom vignette ---- */
.wv-card-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.25) 100%);
  pointer-events: none;
}
 
/* ---- Ticker strip ---- */
.tk-ticker-wrap {
  width: 100%;
  background: #D9D9D9;        /* same cream as Wear the Vibe bg */
  overflow: hidden;
  border-top: 1px solid #D9D9D9;
  border-bottom: 1px solid #D9D9D9;
  height: 36px;
  display: flex;
  align-items: center;
}
 
.tk-ticker {
  display: flex;
  align-items: center;
  white-space: nowrap;
  /* total width is content × 2 for seamless loop */
  animation: tkScroll 14s linear infinite;
  will-change: transform;
}
 
.tk-item {
  font-size: 11px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.4px;
  padding: 0 4px;
  font-family: sans-serif;
}
 
.tk-dot {
  width: 29px;
  height: 29px;
  object-fit: contain;
  padding: 0 6px;
  flex-shrink: 0;
}
 
@keyframes tkScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
 
/* pause on hover */
.tk-ticker-wrap:hover .tk-ticker {
  animation-play-state: paused;
}
 
/* ---- Shade Lab row ---- */
.tk-shade-row {
  width: 100%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px 6px;
  box-sizing: border-box;
}
 
.tk-shade-title {
  font-size: 18px;
  font-weight: 800;
  color: #111;
  letter-spacing: 0.1px;
  font-family: sans-serif;
}
 
.tk-view-all {
  font-size: 11px;
  font-weight: 600;
  color: #555;
  text-decoration: none;
  letter-spacing: 0.2px;
}
 
.tk-view-all:hover {
  color: #111;
  text-decoration: underline;
}


 
/* ---- Section ---- */
.sv-section {
  width: 100%;
  background: #fff;
  padding: 14px 8px 18px;
  box-sizing: border-box;
}
 
/* ---- Header ---- */
/* ============================================================
   SHADE LAB — namespaced sl__  |  zero side-effects
   ============================================================ */
.sl__section *,.sl__section *::before,.sl__section *::after{box-sizing:border-box;margin:0;padding:0;}

.sl__section{width:100%;padding:16px 8px 20px;background:#fff;font-family:'Inter',sans-serif;}

/* ── Header ── */
.sl__header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px;padding:0 2px;}
.sl__header-left{display:flex;flex-direction:column;gap:0;width:157px;height:50px;overflow:visible;}
.sl__title{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:#372D3B;line-height:1.15;letter-spacing:-.3px;white-space:nowrap;}
.sl__subtitle{font-family:'Inter',sans-serif;font-size:10px;font-weight:400;color:#686363;line-height:1.3;white-space:nowrap;margin-top:1px;}
.sl__view-all{display:inline-block;font-family:'Inter',sans-serif;font-size:13.3px;font-weight:700;color:#000;text-decoration:none;white-space:nowrap;margin-top:4px;cursor:pointer;}
.sl__view-all:hover{text-decoration:underline;}

/* ── Slider ── */
.sl__slider{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:4px;}

/* ── Card ── */
.sl__card{width:calc(50% - 4px);min-width:calc(50% - 4px);height:auto;min-height:250px;flex-shrink:0;background:#fff;border:1px solid #fff;border-radius:10px;box-shadow:0 4px 16px rgba(0,0,0,.12);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .2s;}
.sl__card:hover{box-shadow:0 6px 24px rgba(0,0,0,.18);}
/* ── Image wrap ── */
.sl__img-wrap{position:relative;width:100%;height:150px;flex-shrink:0;background:#f5f5f5;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.sl__img{width:100%;height:100%;object-fit:cover;display:block;padding:0;box-sizing:border-box;}

/* ── Wishlist ── */
.sl__wish{position:absolute;top:8px;right:8px;width:28px;height:28px;border:none;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.15);padding:0;transition:transform .15s;z-index:2;}
.sl__wish:hover{transform:scale(1.15);}
.sl__wish svg{width:14px;height:14px;fill:none;stroke:#bbb;stroke-width:2;transition:fill .2s,stroke .2s;}
.sl__wish.sl__active svg{fill:#e53935;stroke:#e53935;}

/* ── Zoom ── */
.sl__zoom{position:absolute;top:42px;right:8px;width:28px;height:28px;border:none;background:rgba(255,255,255,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 1px 5px rgba(0,0,0,.15);padding:0;transition:transform .15s;z-index:2;}
.sl__zoom:hover{transform:scale(1.15);}
.sl__zoom svg{width:13px;height:13px;stroke:#666;fill:none;stroke-width:2;}

/* ── Card body ── */
.sl__body{padding:8px 10px 10px;}
.sl__name{font-family:'Inter',sans-serif;font-size:11px;font-weight:500;color:#111;margin:0 0 6px;line-height:1.4;display:-webkit-box;;-webkit-box-orient:vertical;overflow:hidden;}
.sl__prices{display:flex;align-items:center;gap:6px;margin-bottom:10px;}
.sl__price{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;color:#111;}
.sl__old{font-family:'Inter',sans-serif;font-size:9.5px;color:#aaa;text-decoration:line-through;}
.sl__shop{width:91px;height:27px;display:block;margin:0 auto;background:rgba(217,217,217,.20);border:1px solid #D9D9D9;border-radius:5px;font-family:'Inter',sans-serif;font-size:9px;font-weight:700;letter-spacing:.5px;color:#000;cursor:pointer;transition:background .18s;}
.sl__shop:hover{background:#111;border-color:#111;color:#fff;}
.sl__shop:active{background:#333;border-color:#333;color:#fff;transform:scale(.97);}

/* ══════════════════════════════════════════
   VIEW ALL PAGE — full screen overlay
   ══════════════════════════════════════════ */
.sl__va-overlay{
  display:none;
  position:fixed;inset:0;
  background:#fff;
  z-index:9998;
  flex-direction:column;
  overflow-y:auto;
  animation:slSlideUp .28s ease;
}
.sl__va-overlay.sl__open{display:flex;}
@keyframes slSlideUp{from{transform:translateY(40px);opacity:0;}to{transform:translateY(0);opacity:1;}}

.sl__va-header{
  position:sticky;top:0;
  background:#fff;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 12px 10px;
  border-bottom:1px solid #f0f0f0;
  z-index:2;
}
.sl__va-header-left{display:flex;flex-direction:column;gap:1px;}
.sl__va-htitle{font-family:'Inter',sans-serif;font-size:22px;font-weight:800;color:#372D3B;line-height:1.15;letter-spacing:-.3px;}
.sl__va-hsubtitle{font-family:'Inter',sans-serif;font-size:10px;color:#686363;}
.sl__va-back{background:none;border:none;cursor:pointer;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:#111;display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;transition:background .15s;}
.sl__va-back:hover{background:#f5f5f5;}

.sl__va-grid{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:12px 8px 24px;
}
/* cards inside view-all take full 50% width */
.sl__va-grid .sl__card{
  width:calc(50% - 4px);
  min-width:calc(50% - 4px);
}

/* ══════════════════════════════════════════
   IMAGE ONLY MODAL (zoom)
   ══════════════════════════════════════════ */
.sl__img-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);   /* was: background:#000 */
  backdrop-filter: blur(12px);        /* ← blur effect */
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  align-items: center; justify-content: center;
  animation: slFadeIn .2s ease;
}
.sl__img-modal.sl__open { display: flex; }
.sl__img-modal-close{
  position:absolute;top:14px;right:16px;
  background:rgba(255,255,255,.15);
  border:none;border-radius:50%;
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:#fff;font-size:18px;
  transition:background .15s;
  z-index:2;
}
.sl__img-modal-close:hover{background:rgba(255,255,255,.3);}

.sl__img-modal img{
  width:100vw;
  height:auto;
  max-height:100vh;
  object-fit:contain;
  display:block;
}

/* ── Toast ── */
.sl__toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;font-family:'Inter',sans-serif;font-size:12px;font-weight:500;padding:9px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;z-index:10001;}
.sl__toast.sl__show{opacity:1;transform:translateX(-50%) translateY(0);}
/* ---- Toast (shared) ---- */
.na-toast {
  position: fixed;
  bottom: 30px; left: 50%;
  transform: translateX(-50%) translateY(60px);
  background: #222; color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 12px; font-weight: 500;
  opacity: 0;
  transition: all .3s;
  z-index: 10000;
  pointer-events: none;
  white-space: nowrap;
  font-family: sans-serif;
}
.na-toast.na-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══ IMAGE MODAL — blur backdrop ══ */
.sl__img-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: slFadeIn .2s ease;
}
.sl__img-modal.sl__open { display: flex; }

/* ══ White card container — exact Figma size ══ */
.sl__img-modal-card {
  width: 362px;
  height: 413px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  position: relative;
}

.sl__img-modal-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  display: block;
}

/* close button stays top-right of the screen, not the card */
.sl__img-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff; font-size: 18px;
  transition: background .15s;
  z-index: 2;
}
.sl__img-modal-close:hover { background: rgba(255, 255, 255, 0.35); }




.xvlt7_section *, .xvlt7_section *::before, .xvlt7_section *::after { box-sizing: border-box; }
 
  .xvlt7_section {
    font-family: 'Segoe UI', Arial, sans-serif;
    background: #fff;
    padding: 18px 12px 24px;
    border: 1.5px solid #d0e6f7;
    border-radius: 8px;
    max-width: 420px;
    margin: 0 auto;
  }
  .xvlt7_container { width: 100%; }
  .xvlt7_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
  }
  .xvlt7_title { font-size: 18px; font-weight: 700; color: #111; margin: 0 0 2px; line-height: 1.2; }
  .xvlt7_subtitle { font-size: 11px; color: #888; margin: 0; }
  .xvlt7_view-all {
    font-size: 12px; color: #1a73e8; text-decoration: none;
    font-weight: 500; white-space: nowrap; margin-top: 2px; transition: color 0.2s;
  }
  .xvlt7_view-all:hover { color: #0d47a1; text-decoration: underline; }
 
  .xvlt7_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
 
  .xvlt7_card {
    border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden;
    background: #fff; transition: box-shadow 0.22s, transform 0.22s;
    display: flex; flex-direction: column;
  }
  .xvlt7_card:hover { box-shadow: 0 6px 22px rgba(0,0,0,0.13); transform: translateY(-2px); }
 
  .xvlt7_img-wrap {
    position: relative; width: 100%; aspect-ratio: 1/1;
    background: #f7f7f7; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
  }
  .xvlt7_img {
    width: 100%; height: 100%; object-fit: cover;
    display: block; transition: transform 0.3s ease;
    position: absolute; top: 0; left: 0;
  }
  .xvlt7_card:hover .xvlt7_img { transform: scale(1.05); }
 
  /* Placeholder shown when image fails */
  .xvlt7_img-placeholder {
    font-size: 42px; color: #ccc; z-index: 0;
    display: flex; align-items: center; justify-content: center;
  }
 
  .xvlt7_icon-btn {
    position: absolute; width: 30px; height: 30px; border-radius: 50%;
    border: none; background: rgba(255,255,255,0.92); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; transition: background 0.2s, transform 0.15s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12); z-index: 2;
  }
  .xvlt7_icon-btn svg { width: 15px; height: 15px; transition: stroke 0.2s, fill 0.2s; }
  .xvlt7_icon-btn:hover { background: #fff; transform: scale(1.12); }
  .xvlt7_icon-btn:active { transform: scale(0.95); }
 
  .xvlt7_wishlist { top: 8px; right: 8px; color: #888; }
  .xvlt7_wishlist.xvlt7--active svg { stroke: #e53935; fill: #e53935; }
 
  .xvlt7_zoom { top: 8px; right: 44px; color: #555; }
  .xvlt7_zoom.xvlt7--active svg { stroke: #1a73e8; }
 
  .xvlt7_info { padding: 8px 8px 10px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
  .xvlt7_name { font-size: 11.5px; color: #222; margin: 0; line-height: 1.35; font-weight: 500; }
  .xvlt7_prices { display: flex; align-items: center; gap: 6px; }
  .xvlt7_price { font-size: 12.5px; font-weight: 700; color: #111; }
  .xvlt7_old-price { font-size: 11px; color: #aaa; text-decoration: line-through; }
 
  .xvlt7_shop-btn {
    margin-top: 6px; width: 100%; padding: 7px 0;
    font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
    color: #222; background: #fff; border: 1.5px solid #222;
    border-radius: 3px; cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.15s;
    text-transform: uppercase;
  }
  .xvlt7_shop-btn:hover { background: #222; color: #fff; border-color: #222; transform: translateY(-1px); }
  .xvlt7_shop-btn:active { transform: translateY(0); background: #000; }
 
  /* Modal */
  .xvlt7_modal { display: none; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; }
  .xvlt7_modal.xvlt7--open { display: flex; }
  .xvlt7_modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); cursor: pointer; }
  .xvlt7_modal-box {
    position: relative; background: #fff; border-radius: 10px;
    padding: 24px 20px 20px; max-width: 340px; width: 90%; z-index: 1;
    box-shadow: 0 16px 48px rgba(0,0,0,0.28);
    animation: xvlt7ModalIn 0.25s cubic-bezier(.4,0,.2,1);
  }
  @keyframes xvlt7ModalIn {
    from { opacity: 0; transform: scale(0.92) translateY(16px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
  }
  .xvlt7_modal-close {
    position: absolute; top: 10px; right: 14px; background: none;
    border: none; font-size: 24px; cursor: pointer; color: #555;
    line-height: 1; padding: 0; transition: color 0.2s;
  }
  .xvlt7_modal-close:hover { color: #000; }
  .xvlt7_modal-img { width: 100%; border-radius: 6px; object-fit: cover; display: block; }
  .xvlt7_modal-name { margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #222; text-align: center; }



  /* TESTIMONIAL BANNER */
/* ── Reset scoped to this section only ── */
.tb__section *,
.tb__section *::before,
.tb__section *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Section wrapper ── */
.tb__section {
  width: 100%;
  padding: 10px 5px 0;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow: hidden;
}

/* ── Scrolling track container ── */
.tb__track-wrap {
  width: 100%;
  overflow: hidden;
  /* mask edges so cards fade in/out softly */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 6%,
    black 94%,
    transparent 100%
  );
}

/* ── Scrolling track ── */
.tb__track {
  display: flex;
  gap: 16px;
  width: max-content;
  /* animation defined per-instance via inline style so pause on hover works */
  animation: tb-scroll linear infinite;
  animation-duration: 18s;   /* adjust speed here */
}

.tb__track:hover {
  animation-play-state: paused;
}

@keyframes tb-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Individual card — matches Figma: 402 × 119, border-radius mixed ── */
.tb__card {
  flex-shrink: 0;
  width: 402px;
  height: 119px;
  background: #D9D9D9;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 16px 13px 13px;
  position: relative;
}

/* ── Person photo — matches Figma: 96 × 92 ── */
.tb__avatar {
  flex-shrink: 0;
  width: 96px;
  height: 92px;
  border-radius: 4px;
  object-fit: cover;
  object-position: top center;
  display: block;
}

/* ── Text block ── */
.tb__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Stars — Figma: 133×24px total, gap 2px between 5 stars ── */
.tb__stars {
  display: flex;
  align-items: center;
  justify-content: center; /* center stars */
  gap: 2px;
  width: 133px;
  height: 24px;
  color: #000000;
  line-height: 1;
  flex-shrink: 0;
}

.tb__star {
  /* Each star: (133 - 4×2gap) / 5 = ~24.6px → 24px to hit exactly 133 total */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font-size: 22px;        /* large filled star, matches Figma visual weight */
  line-height: 1;
}

.tb__stars{
    margin:0 auto;
}

/* ── Quote headline — Figma: bold, uppercase, tight ── */
.tb__quote {
  font-size: 10.5px;
  font-weight: 400;
  color: #000000;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Arial Black", sans-serif;
}

/* ── Body copy — Figma: lighter, smaller, grey ── */
.tb__copy {
  font-size: 9px;
  color: #3a3a3a;
  line-height: 1.5;
  font-weight: 400;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tb__quote{
  text-align:center;
}

.tb__copy{
  text-align:center;
}

.tb__quote,
.tb__copy{
  width:100%;
}

 .faq83_section *,
  .faq83_section *::before,
  .faq83_section *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
.faq83_section {
  background: #E4E2E1;
  width: 100%;
  padding: 24px 16px 28px;
  font-family: 'Segoe UI', Arial, sans-serif;
  margin-top: 20px; /* 👈 add this line */
}
  .faq83_container { max-width: 480px; margin: 0 auto; }
  .faq83_title {
    font-size: 17px; font-weight: 700; color: #111;
    margin-bottom: 14px; letter-spacing: 0.2px;
  }
  .faq83_list {
    display: flex; flex-direction: column;
    border-top: 1px solid #ccc;
  }
  .faq83_item { border-bottom: 1px solid #ccc; }
 
  .faq83_question {
    width: 100%; background: none; border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 13px 2px; text-align: left; font-family: inherit;
  }
  .faq83_question span {
    font-size: 12.5px; font-weight: 500; color: #222;
    line-height: 1.4; flex: 1;
  }
  .faq83_question:hover span { color: #000; }
 
  .faq83_icon {
    width: 16px; height: 16px; flex-shrink: 0; color: #444;
    transition: transform 0.3s ease;
  }
 
  /* Answer — hidden by default using display toggle via JS */
  .faq83_answer {
    display: none;
    padding: 0 2px 12px;
  }
  .faq83_answer p {
    font-size: 12px; color: #555; line-height: 1.65;
  }
 
  /* Open state */
  .faq83_item.faq83--open .faq83_answer { display: block; }
  .faq83_item.faq83--open .faq83_icon  { transform: rotate(90deg); }
.ftr92_footer *,
.ftr92_footer *::before,
.ftr92_footer *::after { box-sizing: border-box; margin: 0; padding: 0; }

.ftr92_footer {
  background: #fff;
  border-top: 1px solid #e0e0e0;
  width: 100%;
  padding: 14px 20px 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  font-family: 'Segoe UI', Arial, sans-serif;
}

.ftr92_inner {
  display: flex;
  flex-direction: column;
  max-width: 960px;
  margin: 0 auto;
  gap: 10px;
}

/* ROW 1 */
.ftr92_row1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.ftr92_logo-wrap {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.ftr92_logo {
  height: 40px;
  width: auto;
  max-height: 40px;
  display: block;
  object-fit: contain;
  image-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.ftr92_socials {
  display: flex;
  align-items: center;
  gap: 13px;
}

.ftr92_social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: #333;
  text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}

.ftr92_social-link svg { width: 100%; height: 100%; }
.ftr92_social-link:hover { transform: scale(1.2); }
.ftr92_social-link[aria-label="Facebook"]:hover  { color: #1877f2; }
.ftr92_social-link[aria-label="Instagram"]:hover { color: #e1306c; }
.ftr92_social-link[aria-label="WhatsApp"]:hover  { color: #25d366; }

/* ROW 2 - full width divider */
.ftr92_divider {
  width: 100%;
  height: 1px;
  background: #e0e0e0;
  border: none;
  margin: 0;
}

/* ROW 3 - nav right aligned */
.ftr92_nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 16px;
}

.ftr92_nav-link {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #333;
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
}

.ftr92_nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1.5px;
  background: #111;
  transition: width 0.22s ease;
}

.ftr92_nav-link:hover { color: #000; }
.ftr92_nav-link:hover::after { width: 100%; }
  .wv-section {
  width: 100%;
  background: #f5f5c8;
  padding: 16px 8px 20px;
  box-sizing: border-box;
  overflow: hidden;
}
 
.wv-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 14px;
  gap: 4px;
}
 
.wv-brand-img { width: 111px; height: auto; display: block; }
.wv-title-img { width: 220px; height: auto; display: block; }
 
.wv-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;          /* NO scroll bar, we animate with JS */
  padding: 14px 0;
  position: relative;
}
 
.wv-card {
  position: relative;
  flex-shrink: 0;
  width: calc((100vw - 32px) / 3);
  aspect-ratio: 9 / 16;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18);
  transform: scale(0.86);
  opacity: 0.5;
  transition: transform 0.5s cubic-bezier(.4,0,.2,1),
              opacity   0.5s cubic-bezier(.4,0,.2,1),
              box-shadow 0.5s;
}
 
.wv-card.wv-active {
  transform: scale(1.1);
  opacity: 1;
  box-shadow: 0 8px 28px rgba(0,0,0,0.30);
  z-index: 2;
}
 
.wv-card-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
 
.wv-card-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.28) 100%);
  pointer-events: none;
}



/* Header — sticky with scroll-solid effect */
.header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: transparent;
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

.header.scrolled {
    background: #e8e8eb;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}







































/* Desktop header shell — scoped (do not leak skyblue onto mobile/body) */
@media (min-width: 769px) {
  .desktop-section > header {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 7px 8px;
    width: 100%;
    overflow: hidden;
    background: transparent;
  }
}

    /* ── PILL ── */
    .header-inner {
      display: flex;
      align-items: center;
      height: 44px;
      padding: 0 16px;
      background: #fff;
      border-radius: 50px;
      box-shadow: 0 1px 10px rgba(0,0,0,0.09);
      border: 1.5px solid #dedede;
      position: relative;
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      overflow: hidden;
    }

    /* ── LEFT NAV ── */
    .nav-left {
      display: flex;
      align-items: center;
      flex-shrink: 1;
      z-index: 1;
      min-width: 0;
      gap: 5px;
    }
    .nav-left a {
      text-decoration: none;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: 0.055em;
      color: #111;
      padding: 0 8px;
      height: 44px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      transition: color 0.2s;
      flex-shrink: 0;
    }
    .nav-left a:hover { color: #555; }

    /* COLLECTION */
    .nav-item { position: relative; }
    .collection-link {
      border-bottom: 1.5px dotted #888 !important;
      padding-bottom: 1px;
    }
    .caret { font-size: 7px; margin-left: 3px; display: inline-block; transition: transform 0.2s; }
    .nav-item:hover .caret { transform: rotate(180deg); }

    .dropdown {
      display: none;
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      background: #fff;
      border: 1px solid #e0e0e0;
      box-shadow: 0 6px 20px rgba(0,0,0,0.10);
      min-width: 160px;
      border-radius: 8px;
      z-index: 3000;
      overflow: hidden;
    }
    .nav-item:hover .dropdown { display: block; }
    .dropdown a {
      display: block;
      padding: 9px 14px;
      font-size: 10.5px;
      font-weight: 600;
      color: #333;
      text-decoration: none;
      border-bottom: 1px solid #f2f2f2;
      transition: background 0.12s;
      white-space: nowrap;
    }
    .dropdown a:last-child { border-bottom: none; }
    .dropdown a:hover { background: #f7f7f7; }

    /* ── LOGO — absolutely centered in pill ── */
    .logo-wrap {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      text-decoration: none;
      cursor: pointer;
      transition: opacity 0.2s;
      z-index: 0;
    }
    .logo-wrap:hover { opacity: 0.7; }
    .logo-text {
      font-size: 20px;
      font-weight: 800;
      letter-spacing: 0.01em;
      color: #111;
      white-space: nowrap;
    }

    /* ── RIGHT ── */
    .nav-right {
      display: flex;
      align-items: center;
      gap: 3px;
      margin-left: auto;
      flex-shrink: 1;
      z-index: 1;
      min-width: 0;
    }

    /* Search */
    .search-wrap {
      display: flex;
      align-items: center;
      border: 1.5px solid #ddd;
      border-radius: 20px;
      padding: 0 10px;
      height: 30px;
      gap: 5px;
      background: #f9f9f9;
      transition: border-color 0.2s;
      min-width: 0;
      max-width: 300px;
      flex-shrink: 1;
    }
    .search-wrap:focus-within { border-color: #999; background: #fff; }
    .search-wrap input {
      border: none; outline: none;
      font-family: 'Montserrat', sans-serif;
      font-size: 10.5px;
      color: #333;
      flex: 1;
      min-width: 100px;
      background: transparent;
    }
    .search-wrap input::placeholder { color: #bbb; }
    .search-btn {
      background: none; border: none; cursor: pointer;
      padding: 0; display: flex; align-items: center;
      color: #777; flex-shrink: 0;
    }
    .search-btn:hover { color: #111; }

    /* Icon btns */
    .icon-btn {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      background: none; border: none; cursor: pointer;
      border-radius: 50%;
      position: relative;
      transition: background 0.15s;
      text-decoration: none;
      flex-shrink: 0;
    }
    .icon-btn:hover { background: #f2f2f2; }
    .icon-btn img {
      width: 18px; height: 18px;
      object-fit: contain; display: block;
    }
    .cart-badge {
      position: absolute; top: 1px; right: 0;
      background: #222; color: #fff;
      font-size: 7px; font-weight: 800;
      min-width: 13px; height: 13px;
      border-radius: 7px;
      display: flex; align-items: center;
      justify-content: center; padding: 0 2px;
    }

    /* ── HERO ── */
    .hero { width: 100%; display: block; line-height: 0; }
    .hero img {
      width: 100%; height: auto;
      display: block; cursor: pointer;
    }

    /* TOAST */
    .toast {
      position: fixed; bottom: 28px; left: 50%;
      transform: translateX(-50%) translateY(16px);
      background: #1a1a1a; color: #fff;
      padding: 9px 20px; border-radius: 20px;
      font-size: 12px; font-weight: 600;
      opacity: 0; pointer-events: none;
      transition: opacity 0.2s, transform 0.2s;
      z-index: 9999; white-space: nowrap;
    }
    .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

    
.container{
    max-width:1400px;
    margin:auto;
}

.section-title{
    font-size:36px;
    font-weight:700;
    color:#111;
    margin-bottom:20px;
    margin-top: 40px;
}

.products-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.product-card{
    text-decoration:none;
    color:#111;
    display:block;
    transition:.4s ease;
}

.product-image{
    position:relative;
    overflow:hidden;
    border-radius:16px;
    background:#f4f4f4;
}

.product-image img{
    width:100%;
    display:block;
    aspect-ratio:434/585;
    object-fit:cover;
    transition:.6s ease;
}

.product-info{
    padding:10px 4px 0;
    border-top:1px solid #ddd;
    margin-top:8px;
}

.product-info h3{
    font-size:28px;
    font-weight:500;
    margin-bottom:4px;
}

.product-info p{
    font-size:28px;
    font-weight:400;
}



.product-card:hover{
    transform:translateY(-8px);
}

.product-card:hover img{
    transform:scale(1.08);
}

.product-card:hover .product-image{
    box-shadow:0 15px 35px rgba(0,0,0,.15);
}

.product-image::after{
    content:'';
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.5),
    transparent);
    transition:.8s;
}

.product-card:hover .product-image::after{
    left:130%;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.product-card{
    animation:fadeUp .8s ease forwards;
}

.product-card:nth-child(2){
    animation-delay:.15s;
}

.product-card:nth-child(3){
    animation-delay:.3s;
}

.product-card:nth-child(4){
    animation-delay:.45s;
}

@media(max-width:991px){

.products-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.section-title{
    font-size:28px;
}

.product-info h3{
    font-size:18px;
}

.product-info p{
    font-size:18px;
}

}

@media(max-width:576px){

.products-grid{
    grid-template-columns:1fr;
}

}





/* Wishlist — slides in from RIGHT */
#wishlistSheet {
  position: fixed;
  top: 0;
  right: -100%;
  left: auto;
  bottom: auto;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: right .35s ease;
  z-index: 1001;
}

#wishlistSheet.active {
  right: 0;
  bottom: auto;
}

#wishlistSheet .sheet-bar { display: none; }

/* Header */
.wl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.wl-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #111;
  text-align: center;
  flex: 1;
}

.wl-close-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: #333;
  padding: 4px;
  line-height: 1;
}

.wl-spacer { width: 26px; }

/* Login bar */
.wl-login-bar {
  font-size: 11.5px;
  color: #555;
  text-align: center;
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  line-height: 1.5;
}

.wl-link {
  color: #111;
  font-weight: 700;
  text-decoration: underline;
}

/* Toolbar */
.wl-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.wl-search-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ddd;
  border-radius: 24px;
  padding: 7px 14px;
  background: #fff;
}

.wl-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 12px;
  color: #333;
  background: transparent;
}

.wl-search-input::placeholder { color: #bbb; }

.wl-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.wl-clear-btn {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 7px 12px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  white-space: nowrap;
}

.wl-settings-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* View bar */
.wl-view-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-bottom: 1px solid #eee;
  background: #fff;
}

.wl-view-label {
  font-size: 11px;
  color: #555;
  margin-right: 2px;
}

.wl-view-btn {
  background: none;
  border: 1px solid #ddd;
  border-radius: 3px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #999;
}

.wl-active-view {
  border-color: #111;
  color: #111;
}

.wl-share-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 11px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Empty state */
.wl-empty-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 16px;
  overflow-y: auto;
}

.wl-empty-text {
  font-size: 14px;
  color: #666;
}

.wl-continue-btn {
  background: #111;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 13px 32px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background .2s;
}

.wl-continue-btn:hover { background: #333; }



/* ══ Quick View Modal — blur backdrop ══ */
.na-modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 10000;
  align-items: center;
  justify-content: center;
  animation: naFadeIn .2s ease;
}
.na-modal-overlay.na-open { display: flex; }

@keyframes naFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ══ White card — 362×413 ══ */
.na-modal-box {
  width: 362px;
  height: 413px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}

.na-modal-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
  display: block;
}

/* ══ Close button — top-right of screen ══ */
.na-modal-close {
  position: absolute;
  top: 14px; right: 16px;
  background: rgba(255, 255, 255, 0.2);
  border: none; border-radius: 50%;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff; font-size: 18px;
  transition: background .15s;
  z-index: 2;
}
.na-modal-close:hover { background: rgba(255, 255, 255, 0.35); }

.product-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.4);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:99999;
}

.product-popup.active{
  display:flex;
}

.product-popup-content{
  width:90%;
  max-width:380px;
  background:#fff;
  border-radius:12px;
  padding:20px;
  position:relative;
}

.product-popup-content img{
  width:100%;
  display:block;
}

.popup-close{
  position:absolute;
  top:10px;
  right:15px;
  font-size:22px;
  cursor:pointer;
}

.popup-price{
  font-size:18px;
  font-weight:700;
  margin:15px 0;
}

.popup-price span{
  text-decoration:line-through;
  color:#999;
  margin-left:8px;
}

.popup-cart-btn,
.popup-buy-btn{
  width:100%;
  height:42px;
  border:none;
  cursor:pointer;
  margin-top:10px;
}

.popup-cart-btn{
  background:#000;
  color:#fff;
}

.popup-buy-btn{
  background:#f5f5f5;
}

ul li a{
    text-decoration:none;
    color:inherit;
    display:block;
    width:100%;
}

ul li a:hover{
    color:#000;
}

/* ══ PRODUCT DETAIL SHEET ══ */
.pd-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:500;}
.pd-backdrop.open{display:block;}
.pd-sheet{position:fixed;bottom:0;left:0;right:0;background:#fff;border-radius:20px 20px 0 0;z-index:501;max-height:92vh;overflow-y:auto;transform:translateY(100%);transition:transform .35s cubic-bezier(.32,1,.55,1);scrollbar-width:none;}
.pd-sheet::-webkit-scrollbar{display:none;}
.pd-sheet.open{transform:translateY(0);}
.pd-handle{width:40px;height:4px;background:#ddd;border-radius:2px;margin:12px auto 0;}
.pd-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;background:#f2f2f2;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#555;transition:background .15s;z-index:2;}
.pd-close:hover{background:#e5e5e5;}
.pd-img-wrap{position:relative;}
.pd-img-main{width:100%;height:220px;object-fit:contain;padding:16px;background:#f8f8f8;display:block;cursor:zoom-in;transition:opacity .15s,transform .15s;}
.pd-img-main:hover{transform:scale(1.02);}
.pd-thumbs{display:flex;flex-direction:column;gap:6px;position:absolute;right:12px;top:60px;}
.pd-thumb{width:44px;height:44px;border-radius:8px;border:1.5px solid #e8e8e8;background:#f5f5f5;overflow:hidden;cursor:pointer;transition:border-color .15s;}
.pd-thumb img{width:100%;height:100%;object-fit:contain;padding:4px;}
.pd-thumb.active{border-color:#372D3B;}
.pd-content{padding:14px 16px 0;}
.pd-title{font-size:17px;font-weight:800;color:#111;line-height:1.25;margin-bottom:4px;letter-spacing:-.3px;}
.pd-price-row{display:flex;align-items:center;gap:8px;margin-bottom:2px;}
.pd-price{font-size:16px;font-weight:700;color:#111;}
.pd-old{font-size:12px;color:#aaa;text-decoration:line-through;}
.pd-discount-tag{font-size:10px;font-weight:700;color:#fff;background:#e53935;padding:2px 7px;border-radius:4px;}
.pd-tax{font-size:10px;color:#686363;margin-bottom:12px;}
.pd-section-label{font-size:11px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.pd-color-row{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex-wrap:wrap;}
.pd-color-chip{width:26px;height:26px;border-radius:50%;border:2.5px solid transparent;cursor:pointer;transition:transform .15s,border-color .15s;box-shadow:0 1px 4px rgba(0,0,0,.18);position:relative;}
.pd-color-chip:hover{transform:scale(1.15);}
.pd-color-chip.active{border-color:#111;transform:scale(1.1);}
.pd-color-chip.active::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid #111;}
.pd-attrs{background:#f8f8f8;border-radius:10px;padding:10px 12px;margin-bottom:14px;display:flex;flex-direction:column;gap:6px;}
.pd-attr{display:flex;justify-content:space-between;align-items:center;}
.pd-attr-label{font-size:11px;color:#686363;}
.pd-attr-val{font-size:11px;font-weight:600;color:#111;}
.pd-size-guide{font-size:11px;color:#372D3B;font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px;}
.pd-qty-row{display:flex;align-items:center;gap:12px;margin-bottom:16px;}
.pd-qty-label{font-size:11px;font-weight:700;color:#555;text-transform:uppercase;letter-spacing:.5px;}
.pd-qty-ctrl{display:flex;align-items:center;border:1.5px solid #e8e8e8;border-radius:8px;overflow:hidden;}
.pd-qty-btn{width:32px;height:32px;border:none;background:#fff;font-size:18px;font-weight:300;color:#333;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.pd-qty-btn:hover{background:#f5f5f5;}
.pd-qty-num{min-width:32px;text-align:center;font-size:13px;font-weight:600;color:#111;border-left:1.5px solid #e8e8e8;border-right:1.5px solid #e8e8e8;height:32px;line-height:32px;}
.pd-cta-wrap{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;}
.pd-add-cart{width:100%;height:48px;background:#fff;border:1.5px solid #111;border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.6px;color:#111;cursor:pointer;transition:all .18s;}
.pd-add-cart:hover{background:#111;color:#fff;}
.pd-buy-now{width:100%;height:48px;background:#111;border:1.5px solid #111;border-radius:10px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;letter-spacing:.6px;color:#fff;cursor:pointer;transition:background .18s;}
.pd-buy-now:hover{background:#333;}
.pd-ymal-section{padding:0 16px 30px;}
.pd-ymal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.pd-ymal-title{font-size:13px;font-weight:800;color:#111;}
.pd-ymal-all{font-size:11px;font-weight:600;color:#372D3B;cursor:pointer;text-decoration:none;}
.pd-ymal-scroll{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;}
.pd-ymal-scroll::-webkit-scrollbar{display:none;}
.pd-ymal-card{flex-shrink:0;width:130px;background:#fff;border:1px solid #e8e8e8;border-radius:10px;overflow:hidden;cursor:pointer;transition:box-shadow .18s,transform .18s;}
.pd-ymal-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.12);transform:translateY(-2px);}
.pd-ymal-img{width:100%;height:90px;object-fit:contain;padding:8px;background:#f8f8f8;display:block;}
.pd-ymal-body{padding:6px 8px 8px;}
.pd-ymal-name{font-size:9.5px;font-weight:600;color:#111;line-height:1.3;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.pd-ymal-price{font-size:10px;font-weight:700;color:#111;}
.pd-ymal-old{font-size:9px;color:#aaa;text-decoration:line-through;margin-left:4px;}
.pd-ymal-wish{float:right;margin-top:-2px;background:none;border:none;cursor:pointer;padding:0;}
.pd-ymal-wish svg{width:13px;height:13px;fill:none;stroke:#bbb;stroke-width:2;}
.pd-ymal-wish.active svg{fill:#e53935;stroke:#e53935;}
.pd-ymal-shop{width:100%;height:25px;background:rgba(217,217,217,.2);border:1px solid #d9d9d9;border-radius:5px;font-family:'Inter',sans-serif;font-size:8.5px;font-weight:700;letter-spacing:.4px;cursor:pointer;margin-top:6px;transition:background .15s,color .15s;}
.pd-ymal-shop:hover{background:#111;border-color:#111;color:#fff;}
.sp-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#111;color:#fff;font-size:12px;font-weight:500;padding:9px 18px;border-radius:20px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;z-index:9999;}
.sp-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.img-lightbox{display:none;position:fixed;inset:0;z-index:9000;background:rgba(255,255,255,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);align-items:center;justify-content:center;cursor:zoom-out;}
.img-lightbox.open{display:flex;animation:lbFadeIn .25s ease;}
@keyframes lbFadeIn{from{opacity:0}to{opacity:1}}
.img-lightbox img{width:100vw;height:80vh;object-fit:contain;transform:scale(.92);transition:transform .28s cubic-bezier(.32,1,.55,1);cursor:default;}
.img-lightbox.open img{transform:scale(1);}
.img-lightbox-close{position:fixed;top:16px;right:18px;width:36px;height:36px;background:rgba(0,0,0,.12);border:1.5px solid rgba(0,0,0,.15);color:#111;font-size:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s;}
.img-lightbox-close:hover{background:rgba(0,0,0,.2);}


.sl__variants {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-bottom: 6px;
}
.sl__swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  box-sizing: border-box;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .15s;
}
.sl__swatch.active,
.sl__swatch:hover { border-color: #555; }

.sl__swatch-more {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 0.5px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1;
}

.sl__swatch-black  { background: #1a1a1a; }
.sl__swatch-brown  { background: #8B6347; }
.sl__swatch-silver { background: #C0C0C0; }
.sl__swatch-gold   { background: #C9A84C; }
.sl__swatch-blue   { background: #3A7BD5; }
.sl__swatch-red    { background: #C0392B; }



.na-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.8);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.na-modal-content{
  position:relative;
  max-width:90%;
  max-height:90%;
}

.na-modal-content img{
  max-width:100%;
  max-height:90vh;
  border-radius:12px;
  display:block;
}

.na-close{
  position:absolute;
  top:-40px;
  right:0;
  color:#fff;
  font-size:35px;
  cursor:pointer;
  line-height:1;
}

.sl__wish{
  transition:all .3s ease;
}

.sl__wish svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:#666;
  stroke-width:2;
  transition:all .3s ease;
}

.sl__wish.active svg{
  fill:#ff2d55;
  stroke:#ff2d55;
}

.ftr92_row1 {
    display: flex;
    align-items: flex-end;  /* logo bottom-aligns with socials */
}

.ftr92_socials {
    padding-top: 18px;  /* pushes socials down a bit */
}

.wl-title {
    font-weight: 700;
}

.sl__swatch-red      { background-color: #E63946; }
.sl__swatch-lightpink { background-color: #FFB3C6; }
.sl__swatch-purple   { background-color: #7B2D8B; }

.sl__swatch-pearl  { background-color: #F0EAD6; }
.sl__swatch-pearl2 { background-color: #EAE0C8; }
.sl__swatch-pearl3 { background-color: #E8DCCA; }
/* ═══════════════════════════════════════
   MOBILE HEADER — always on top (mobile only)
   ═══════════════════════════════════════ */
@media (max-width: 768px) {
  .mobile-section > header.header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08);
  }
}
/* Desktop: hide mobile header absolutely */
@media (min-width: 769px) {
  .mobile-section > header.header {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
    position: static !important;
  }
}

/* Drawers/sheets above page content, below header */
.mobile-section .menu-drawer,
.mobile-section .bottom-sheet,
.mobile-section #accountSheet,
.mobile-section #wishlistSheet,
.mobile-section #bagSheet {
    z-index: 350010 !important;
}

.mobile-section .overlay {
    z-index: 350005 !important;
}

.mobile-section .search-panel {
    z-index: 350010 !important;
    top: 71px !important;
}

/* ── Wear the Vibe header desktop fix ── */
@media (min-width: 769px) {
}

/* ═══════════════════════════════════════════════════════════════════
   DESKTOP RESPONSIVE — all shared sections (min-width: 769px)
   Mobile section is UNTOUCHED. Only shared/desktop sections get fixes.
   ═══════════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {

  /* ── Max-width wrapper for all shared sections ── */
  .na-products,
  .sun-protection-banner,
  .td__section,
  .sl__section,
  .sv-section,
  .tb__section,
  .faq83_section,
  .ftr92_footer,
  .tk-ticker-wrap {
    width: 100%;
    max-width: 100%;
  }

  /* ─────────────────────────────────────────────
     NEW ARRIVALS (na-products)
     Mobile: 50vw scroll cards → Desktop: 4-up grid
  ─────────────────────────────────────────────── */
  .na-products {
    padding: 20px 60px 24px;
  }

  .na-slider {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    overflow: visible;
    padding-bottom: 0;
  }

  .na-card {
    width: 100%;
    min-width: 0;
    border-radius: 10px;
  }

  .na-img-wrap {
    height: 260px;
  }

  .na-title {
    font-size: 12px;
  }

  .na-price {
    font-size: 13px;
  }

  /* ─────────────────────────────────────────────
     NEW ARRIVALS HEADING (inside desktop-section — just padding)
  ─────────────────────────────────────────────── */
  .new-arrivals-heading-section {
    padding: 28px 60px 4px;
  }

  .new-arrivals-heading {
    font-size: 26px;
  }

  /* ─────────────────────────────────────────────
     SUN PROTECTION BANNER
  ─────────────────────────────────────────────── */
  .sun-protection-banner {
    padding: 16px 60px 0;
  }

  .sun-protection-card {
    height: 400px;
    border-radius: 16px;
  }

  /* ─────────────────────────────────────────────
     OUTSIDE THE BOX (td__section)
     Keeps the 2×2 portrait grid — centred on desktop
  ─────────────────────────────────────────────── */
  .td__section {
    padding: 32px 60px 40px;
  }

  .td__heading {
    font-size: 26px;
    margin-bottom: 20px;
  }

  /* Centre the 2×2 grid and cap its width so it doesn't stretch too wide */
  .td__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    max-width: 700px;
    margin: 0 auto;
  }

  .td__card {
    aspect-ratio: 182 / 280;   /* taller portrait — matches the screenshot */
    border-radius: 12px;
  }

  .td__btn {
    width: 90px;
    height: 26px;
    font-size: 9px;
    bottom: 14px;
    left: 14px;
  }

  /* ─────────────────────────────────────────────
     WEAR THE VIBE — already has desktop fix in CSS,
     just ensure it stays centred with max-width
  ─────────────────────────────────────────────── */

  /* ─────────────────────────────────────────────
     SHADE LAB / OPTICAL / ACCESSORIES (sl__section)
     Mobile: 2 cards scrollable → Desktop: 4-up grid or row
  ─────────────────────────────────────────────── */
  .sl__section {
    padding: 28px 60px 32px;
  }

  .sl__header {
    margin-bottom: 18px;
  }

  .sl__header-left {
    width: auto;
    height: auto;
  }

  .sl__title {
    font-size: 28px;
  }

  .sl__view-all {
    font-size: 14px;
    margin-top: 6px;
  }

  /* Slider becomes a flex row (shows all cards, no scroll needed with 2) */
  .sl__slider {
    display: flex;
    flex-wrap: nowrap;
    gap: 20px;
    overflow: visible;
  }

  .sl__card {
    width: calc(50% - 10px);
    min-width: 0;
    min-height: 320px;
    border-radius: 12px;
  }

  .sl__img-wrap {
    height: 260px;
  }

  .sl__name {
    font-size: 13px;
  }

  .sl__price {
    font-size: 14px;
  }

  .sl__shop {
    width: 120px;
    height: 32px;
    font-size: 10px;
  }

  /* ─────────────────────────────────────────────
     SV-SECTION (wraps accessories sl__section)
  ─────────────────────────────────────────────── */
  .sv-section {
    padding: 0;
  }

  /* ─────────────────────────────────────────────
     TESTIMONIALS (tb__section)
     Already scrolling — just add comfortable side padding
  ─────────────────────────────────────────────── */
  .tb__section {
    padding: 28px 0 28px;
  }

  .tb__card {
    width: 360px;
    height: 130px;
  }

  /* ─────────────────────────────────────────────
     TICKER
  ─────────────────────────────────────────────── */
  .tk-ticker-wrap {
    height: 44px;
  }

  .tk-item {
    font-size: 13px;
  }

  .tk-dot {
    width: 36px;
    height: 36px;
  }

  /* ─────────────────────────────────────────────
     FAQ
  ─────────────────────────────────────────────── */
  .faq83_section {
    padding: 40px 60px 48px;
    margin-top: 0;
  }

  .faq83_container {
    max-width: 860px;
  }

  .faq83_title {
    font-size: 26px;
    margin-bottom: 20px;
  }

  .faq83_question span {
    font-size: 14px;
  }

  .faq83_answer p {
    font-size: 13px;
  }

  /* ─────────────────────────────────────────────
     FOOTER
  ─────────────────────────────────────────────── */
  .ftr92_footer {
    padding: 24px 60px 28px;
  }

  .ftr92_inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    flex-wrap: wrap;
    max-width: 1280px;
  }

  .ftr92_row1 {
    flex: 1;
    min-width: 200px;
  }

  .ftr92_divider {
    width: 100%;
    order: 3;
    margin: 10px 0;
  }

  .ftr92_nav {
    order: 4;
    width: 100%;
    justify-content: flex-end;
    gap: 24px;
  }

  .ftr92_nav-link {
    font-size: 11px;
  }

  .ftr92_logo {
    height: 40px;
    max-height: 40px;
  }

  .ftr92_social-link {
    width: 22px;
    height: 22px;
  }

  /* ─────────────────────────────────────────────
     DESKTOP SECTION hero — ensure it fills well
  ─────────────────────────────────────────────── */
  .desktop-section .hero {
    width: 100%;
    overflow: hidden;
  }

  .desktop-section .hero img {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: cover;
    object-position: center top;
  }

}

/* ── Extra-large screens: cap max content width ── */
@media (min-width: 1280px) {

  .na-products,
  .sun-protection-banner,
  .td__section,
  .sl__section,
  .faq83_section {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .na-slider {
    grid-template-columns: repeat(4, 1fr);
  }

}

/* ── Desktop-only header wrapper ── */
.t2-desktop-only {
  display: none;
}
@media (min-width: 769px) {
  .t2-desktop-only {
    display: block;
  }
}


/* ══════════════════════════════════════════════════════
   DESKTOP HEADER — canonical styles (≥769px)
   Mobile (.mobile-section header) is untouched.
   ══════════════════════════════════════════════════════ */

/* Outer header element */
.desktop-section > header,
.t2-desktop-only > header {
  position: sticky;
  top: 0;
  z-index: 9999;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ececec;
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inner pill wrapper */
.desktop-section > header .header-inner,
.t2-desktop-only > header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1400px;
  height: 62px;
  padding: 0 32px;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  position: relative;
}

/* LEFT NAV */
.desktop-section .nav-left,
.t2-desktop-only .nav-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.desktop-section .nav-left a,
.t2-desktop-only .nav-left a {
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #111;
  padding: 0 10px;
  height: 62px;
  display: flex;
  align-items: center;
  transition: color 0.15s;
}

.desktop-section .nav-left a:hover,
.t2-desktop-only .nav-left a:hover { color: #555; }

/* Dropdown */
.desktop-section .nav-item,
.t2-desktop-only .nav-item { position: relative; }

.desktop-section .caret,
.t2-desktop-only .caret { font-size: 7px; margin-left: 3px; transition: transform 0.2s; }

.desktop-section .nav-item:hover .caret,
.t2-desktop-only .nav-item:hover .caret { transform: rotate(180deg); }

.desktop-section .dropdown,
.t2-desktop-only .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  min-width: 160px;
  z-index: 9999;
  padding: 4px 0;
}

.desktop-section .nav-item:hover .dropdown,
.t2-desktop-only .nav-item:hover .dropdown { display: block; }

.desktop-section .dropdown a,
.t2-desktop-only .dropdown a {
  display: block;
  padding: 10px 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #333;
  text-decoration: none;
  transition: background 0.12s;
  height: auto;
}

.desktop-section .dropdown a:hover,
.t2-desktop-only .dropdown a:hover { background: #f5f5f5; color: #111; }

/* CENTER LOGO */
.desktop-section .logo-wrap,
.t2-desktop-only .logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-decoration: none;
}

.desktop-section .logo-text,
.t2-desktop-only .logo-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 2px;
  color: #111;
  font-family: inherit;
}

/* RIGHT NAV */
.desktop-section .nav-right,
.t2-desktop-only .nav-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: flex-end;
}

/* Search pill */
.desktop-section .search-wrap,
.t2-desktop-only .search-wrap {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 5px 14px;
  gap: 8px;
  background: #fafafa;
}

.desktop-section .search-wrap input,
.t2-desktop-only .search-wrap input {
  border: none;
  outline: none;
  font-size: 11px;
  color: #333;
  background: transparent;
  width: 160px;
}

.desktop-section .search-btn,
.t2-desktop-only .search-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  color: #777;
}

/* Icon buttons (account, wishlist, bag) */
.desktop-section .icon-btn,
.t2-desktop-only .icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
}

.desktop-section .icon-btn img,
.t2-desktop-only .icon-btn img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

/* Badge counts */
.desktop-section .t2b,
.t2-desktop-only .t2b {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #e53935;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
}

/* Desktop-only header on non desktop-section pages */
.t2-desktop-only {
  display: none;
}

@media (min-width: 769px) {
  .t2-desktop-only {
    display: block;
  }
}


/* ══════════════════════════════════════════════════════
   DESKTOP LAYOUT FIX
   On ≥769px: show mobile-section content but hide mobile-only UI
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* Show the mobile-section body content on desktop */
  .mobile-section {
    display: block !important;
  }

  /* Hide the mobile-only header bar (hamburger, icons bar) */
  .mobile-section > header.header {
    display: none !important;
  }

  /* Hide mobile-only drawers and overlay (not sheets — those are used by desktop too) */
  .mobile-section .menu-drawer,
  .mobile-section #menuDrawer,
  .mobile-section .search-panel,
  .mobile-section #searchPanel,
  .mobile-section #accountSheet {
    display: none !important;
  }

  /* Push content below the sticky desktop header (62px tall) */
  .mobile-section .hero-section,
  .mobile-section .offer-banner,
  .mobile-section .hero-card {
    margin-top: 0;
  }

  /* Ensure desktop-section header stays on top of everything */
  .desktop-section {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
  }

  .desktop-section > header {
    position: sticky;
    top: 0;
    z-index: 9999;
  }

  /* Wishlist and bag bottom-sheets — reposition for desktop */
  .mobile-section .bottom-sheet,
  #wishlistSheet,
  #bagSheet {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 400px !important;
    max-width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    transform: translateX(100%) !important;
    transition: transform 0.3s ease !important;
  }

  .mobile-section .bottom-sheet.active,
  #wishlistSheet.active,
  #bagSheet.active {
    transform: translateX(0) !important;
  }

  /* Overlay stays full-screen — below sheets */
  .mobile-section .overlay,
  #overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 350005 !important;
  }

  /* Allproduct.html: mobile-nav-wrap content area needs top margin for fixed desktop header */
  .mobile-nav-wrap {
    padding-top: 0;
  }

  .sp-tabs {
    position: sticky;
    top: 62px !important;
    z-index: 9000;
  }

  /* Scale up product grids for desktop */
  .sp-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 0 32px !important;
  }
}

@media (min-width: 1200px) {
  .sp-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ══════════════════════════════════════════════════════
   DESKTOP FULL LAYOUT — Final alignment rules
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* === SECTION STACKING ===
     desktop-section = header only (sticky bar on top)
     mobile-section = all the content, displayed below
  */

  /* Desktop-section: only shows its header, collapses after */
  .desktop-section {
    position: sticky;
    top: 0;
    z-index: 9999;
    background: #fff;
    /* height collapses to header height since hero is moved out */
  }

  /* Hide the desktop-section HERO on index — 
     show mobile hero-section instead (it has the same image) */
  .desktop-section .hero {
    display: none;
  }

  /* Mobile-section: shows as main content area below desktop header */
  .mobile-section {
    display: block !important;
  }

  /* Hide ONLY the mobile header bar — everything else in mobile-section shows */
  .mobile-section > header.header {
    display: none !important;
  }

  /* Also hide other mobile-only UI elements */
  .mobile-section .menu-drawer,
  .mobile-section #menuDrawer,
  .mobile-section #searchPanel,
  .mobile-section #accountSheet,
  #menuDrawer,
  #searchPanel,
  #accountSheet {
    display: none !important;
  }

  /* === CONTENT SPACING ===
     Since desktop-section (sticky) sits above mobile-section,
     no extra margin-top needed — they stack naturally.
     But mobile-section has padding for mobile header (e.g. margin-top:71px on hero)
     Override that for desktop.
  */
  .mobile-section .hero-section {
    margin-top: 0 !important;
  }

  .mobile-section .hero-card img {
    max-height: 85vh;
    object-fit: cover;
    object-position: center top;
    width: 100%;
    display: block;
  }

  /* === HERO BANNER — desktop sizing === */
  .hero-section {
    width: 100%;
    overflow: hidden;
  }

  /* === OFFER BANNER === */
  .offer-banner {
    padding: 0 60px;
    margin-top: 0;
  }

  /* === SEARCH PANEL — hide mobile floating search panel === */
  .wl-search-wrap {
    display: none !important;
  }

  /* === ALLPRODUCT.HTML SPECIFIC ===
     mobile-nav-wrap content area - no top padding needed since
     desktop-nav-header is position:fixed and sp-tabs handles its own sticky
  */
  .mobile-nav-wrap {
    padding-top: 0 !important;
  }

  /* === SHEETS — slide in from RIGHT on desktop === */
  #wishlistSheet,
  #bagSheet {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 380px !important;
    max-width: 90vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
    border-radius: 0 !important;
    /* Override mobile bottom-slide with right-slide */
    transform: translateX(110%) !important;
    transition: transform 0.3s ease !important;
  }

  #wishlistSheet.active,
  #bagSheet.active {
    transform: translateX(0) !important;
  }

  /* Overlay full-screen on desktop — BELOW sheets */
  #overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 350005 !important;
    background: rgba(0,0,0,0.35) !important;
  }

  /* Sheets z-index above overlay */
  #wishlistSheet,
  #bagSheet {
    z-index: 350010 !important;
  }

  /* === FOOTER === */
  .ftr92_footer {
    padding: 40px 60px !important;
  }

  /* === ALLPRODUCT product grid — 3 columns on desktop === */
  #gridSunglasses,
  #gridOptical,
  #gridAccessories {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    padding: 0 32px 24px !important;
  }

  /* === SP-TABS sticky below desktop header === */
  .sp-tabs {
    top: 62px !important;
  }
}

@media (min-width: 1200px) {
  #gridSunglasses,
  #gridOptical,
  #gridAccessories {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}


/* ══════════════════════════════════════════════════════
   DESKTOP SECTION-SPECIFIC FIXES  (≥769px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* ── 1. LATEST FLEX (na-products) — 2 cards, full width cover ── */
  .na-products {
    padding: 24px 60px 32px;
  }

  .na-slider {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;  /* exactly 2 columns for 2 cards */
    gap: 24px !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  .na-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 12px !important;
  }

  .na-img-wrap {
    height: 380px !important;   /* tall cover image */
  }

  .na-img {
    object-fit: cover !important;
    object-position: top center !important;
  }

  .na-title  { font-size: 14px !important; font-weight: 600 !important; }
  .na-price  { font-size: 15px !important; }

  .na-shop {
    width: 130px !important;
    height: 34px !important;
    font-size: 10px !important;
    letter-spacing: 0.8px !important;
  }

  /* ── 2. OUTSIDE THE BOX (td__grid) — 4 cards in 1 row ── */
  .td__section {
    padding: 32px 60px 40px !important;
  }

  .td__heading {
    font-size: 26px !important;
    margin-bottom: 20px !important;
  }

  .td__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;  /* ALL 4 in one row */
    gap: 16px !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  .td__card {
    aspect-ratio: 3 / 4 !important;   /* portrait cards */
    border-radius: 12px !important;
  }

  .td__btn {
    width: 100px !important;
    height: 30px !important;
    font-size: 9px !important;
    bottom: 14px !important;
    left: 14px !important;
  }

  /* ── 3. WEAR THE VIBE — logo centered above, title centered below ── */
  .wv-section {
    padding: 40px 0 48px !important;
    overflow: hidden !important;
  }

  .wv-header {
    display: flex !important;
    flex-direction: column !important;   /* stack vertically */
    align-items: center !important;      /* center both */
    justify-content: center !important;
    margin-bottom: 32px !important;
    gap: 6px !important;
  }

  .wv-brand-img {
    width: 90px !important;
    height: auto !important;
    transform: scale(1) !important;
    display: block !important;
  }

  .wv-title-img {
    width: 280px !important;
    height: auto !important;
    display: block !important;
  }

  /* ── 4. WEAR THE VIBE slider — center active card, bigger, same JS behavior ── */
  .wv-slider {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;       /* vertically center all cards */
    justify-content: center !important;   /* horizontally center the group */
    gap: 16px !important;
    overflow: visible !important;
    padding: 20px 0 !important;
    position: relative !important;
  }

  /* Non-active cards: smaller, slightly faded */
  .wv-card {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex-shrink: 0 !important;
    width: 200px !important;           /* inactive card width */
    aspect-ratio: 9 / 16 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    opacity: 0.65 !important;
    transform: scale(0.88) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
  }

  /* Active (playing) card: bigger, centered, full opacity */
  .wv-card.wv-active {
    width: 280px !important;           /* active card is bigger */
    opacity: 1 !important;
    transform: scale(1) !important;
    box-shadow: 0 12px 40px rgba(0,0,0,0.35) !important;
    z-index: 2 !important;
  }

  .wv-card:hover:not(.wv-active) {
    opacity: 0.85 !important;
    transform: scale(0.92) !important;
  }

  .wv-card-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

}


/* ══════════════════════════════════════════════════════
   DESKTOP HEADER — INTERACTION & DROPDOWN FIXES
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* === ACCOUNT DROPDOWN (click to open) === */

  /* t2-dd-open class added by JS when logged in and account icon clicked */
  #desktopAccountDropdown.t2-dd-open {
    display: block !important;
  }

  /* Account dropdown positioning */
  #desktopAccountWrap .dropdown,
  .t2-desktop-only #desktopAccountWrap .dropdown {
    right: 0;
    left: auto;
    top: calc(100% + 6px);
    min-width: 180px;
  }

  /* When not logged in: show hover dropdown too */
  #desktopAccountWrap:hover .dropdown {
    display: block;
  }

  /* === HIDE MOBILE-ONLY ACCOUNT SHEET ON DESKTOP === */
  /* The accountSheet (HOME/SIGN IN/CREATE ACCOUNT) is mobile-only */
  #accountSheet {
    display: none !important;
  }

  /* === HERO IMAGE — proper full-width, good height === */
  .hero-section {
    width: 100%;
    overflow: hidden;
    margin-top: 0 !important;
  }

  .hero-card {
    width: 100%;
    border-radius: 0 !important;
    margin: 0;
  }

  .hero-card img {
    width: 100%;
    height: 70vh;
    max-height: 640px;
    min-height: 320px;
    object-fit: cover;
    object-position: center top;
    display: block;
    border-radius: 0 !important;
  }

  /* === DESKTOP SHEETS — slide from right === */
  #wishlistSheet,
  #bagSheet {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 400px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
    transform: translateX(110%) !important;
    transition: transform 0.3s ease !important;
    border-left: 1px solid #eee !important;
  }

  #wishlistSheet.active,
  #bagSheet.active {
    transform: translateX(0) !important;
  }

  /* Sheet header styling on desktop */
  #wishlistSheet .sheet-header,
  #bagSheet .sheet-header,
  #wishlistSheet .wl-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #eee !important;
  }

  /* Overlay on desktop */
  #overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4998 !important;
    background: rgba(0,0,0,0.3) !important;
  }

  #wishlistSheet,
  #bagSheet {
    z-index: 5000 !important;
  }

  /* === OFFER BANNER — proper width === */
  .offer-banner-card {
    border-radius: 12px !important;
    overflow: hidden;
    margin: 0 60px;
  }

  .offer-banner-card img {
    width: 100%;
    display: block;
    max-height: 120px;
    object-fit: cover;
  }

}


/* ══════════════════════════════════════════════════════
   DESKTOP CORE LAYOUT — header sticky + content flow
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* desktop-section = sticky header bar only (62px) */
  .desktop-section {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    background: #fff !important;
  }

  /* mobile-section content flows after desktop-section naturally */
  .mobile-section {
    display: block !important;
    /* No extra padding-top — desktop-section is sticky, not fixed */
  }

  /* mobile header HIDDEN on desktop */
  .mobile-section > header.header {
    display: none !important;
  }

  /* mobile drawers HIDDEN on desktop */
  .mobile-section .menu-drawer,
  .mobile-section #menuDrawer,
  .mobile-section #searchPanel,
  #accountSheet {
    display: none !important;
  }

  /* allproduct.html: mobile-nav-wrap shows but its header is hidden */
  .mobile-nav-wrap {
    display: block !important;
  }
  .mobile-nav-wrap > header.header {
    display: none !important;
  }

  /* sp-tabs sticky below desktop header (62px header height) */
  .sp-tabs {
    position: sticky !important;
    top: 62px !important;
    z-index: 9000 !important;
    background: #fff !important;
  }

  /* Offer banner on desktop */
  .offer-banner {
    padding: 12px 60px !important;
  }

}


/* ══════════════════════════════════════════════════════
   DESKTOP FINAL OVERRIDE — highest priority
   Placed at end of stylesheet to win all specificity battles
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {

  /* === HIDE ALL MOBILE-ONLY ELEMENTS === */
  .mobile-section > header.header,
  .mobile-section > header.header.active,
  .mobile-section .menu-drawer,
  .mobile-section #menuDrawer,
  .mobile-section #searchPanel,
  #accountSheet,
  #accountSheet.active {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: fixed !important;
    top: -9999px !important;
    left: -9999px !important;
  }

  /* === DESKTOP HEADER — single source of truth === */
  .desktop-section {
    position: sticky !important;
    top: 0 !important;
    z-index: 10000 !important;
    background: #fff !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
  }

  /* === ACCOUNT DROPDOWN === */
  #desktopAccountDropdown.t2-dd-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
  }

  /* === WISHLIST & BAG SHEETS — slide from right, compact height === */
  #wishlistSheet,
  #bagSheet {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: auto !important;
    width: 400px !important;
    max-width: 90vw !important;
    height: auto !important;
    min-height: fit-content !important;
    max-height: 85vh !important;
    transform: translateX(110%) !important;
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
    border-radius: 0 !important;
    z-index: 5000 !important;
    overflow: hidden !important;
  }

  #wishlistSheet.active,
  #bagSheet.active {
    transform: translateX(0) !important;
  }

  /* Overlay */
  #overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 4998 !important;
  }

  /* Mobile header in allproduct.html */
  .mobile-nav-wrap > header.header {
    display: none !important;
    visibility: hidden !important;
  }

}

/* ═══════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS — appended
   ═══════════════════════════════════════════ */

/* Reduce layout shift: reserve space for images before they load */
.na-img-wrap, .sl__img-wrap, .td__card {
  overflow: hidden;
}
.na-img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.sl__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.td__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Prevent CLS from images without explicit dimensions */
img:not(.na-img):not(.sl__img):not(.td__img):not(.pd-carousel-slide img) { max-width: 100%; height: auto; }

/* GPU-accelerate only the elements that actually animate */
.tk-ticker         { will-change: transform; }
.tb__track         { will-change: transform; }
.menu-drawer       { will-change: transform; }
.bottom-sheet      { will-change: transform; }
.pd-sheet          { will-change: transform; }
.co-sheet          { will-change: transform; }

/* Remove will-change from static elements — saves GPU memory */
.desktop-section > header { will-change: auto; transform: translateZ(0); }
.mobile-section > header  { will-change: auto; transform: translateZ(0); }

/* Content-visibility for off-screen heavy sections */
.tb__section       { content-visibility: auto; contain-intrinsic-size: 0 400px; }
.faq83_section     { content-visibility: auto; contain-intrinsic-size: 0 300px; }
.wv-section        { contain-intrinsic-size: 0 500px; }

/* Improve touch responsiveness */
a, button { touch-action: manipulation; }

/* Reduce font render blocking */
* { font-display: swap; }

/* ══════════════════════════════════════════════════════
   GLOBAL HEADER — clickable on every page (all breakpoints)
   ══════════════════════════════════════════════════════ */

#overlay:not(.active),
.overlay:not(.active) {
  pointer-events: none !important;
}

.menu-drawer:not(.active),
.bottom-sheet:not(.active),
#accountSheet:not(.active) {
  pointer-events: none !important;
}

/* Dim overlay — BELOW drawers/sheets so buttons inside stay clickable */
#overlay.active,
.overlay.active,
.mobile-nav-wrap #overlay.active {
  z-index: 350005 !important;
  pointer-events: auto !important;
}

/* Drawers & sheets — ABOVE the dim overlay */
.menu-drawer.active,
.search-panel.active,
.bottom-sheet.active,
#accountSheet.active,
#wishlistSheet.active,
#bagSheet.active,
.mobile-nav-wrap .menu-drawer.active,
.mobile-nav-wrap .search-panel.active {
  z-index: 350010 !important;
  pointer-events: auto !important;
}

.desktop-section > header,
.t2-desktop-only > header,
.desktop-nav-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 350020 !important;
  pointer-events: auto !important;
  background: #fff !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.08) !important;
}

.desktop-section,
.t2-desktop-only {
  position: relative !important;
  z-index: 350020 !important;
  pointer-events: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.desktop-section > header *,
.t2-desktop-only > header *,
.desktop-nav-header * {
  pointer-events: auto;
}

.desktop-section .nav-left a,
.desktop-section .nav-right a,
.t2-desktop-only .nav-left a,
.t2-desktop-only .nav-right a,
.desktop-nav-header a,
.desktop-nav-header button,
.desktop-nav-header input {
  cursor: pointer;
}

@media (max-width: 768px) {
  .mobile-section > header.header,
  .mobile-nav-wrap > header.header,
  section.mobile-section > header {
    position: fixed !important;
    z-index: 350020 !important;
    pointer-events: auto !important;
  }

  .mobile-section .left-icons,
  .mobile-section .right-icons,
  .mobile-nav-wrap .left-icons,
  .mobile-nav-wrap .right-icons {
    pointer-events: auto !important;
  }

  #menuBtn, #searchBtn, #accountBtn, #wishlistBtn, #bagBtn {
    cursor: pointer !important;
    pointer-events: auto !important;
  }
}

@media (min-width: 769px) {
  .mobile-section,
  .mobile-nav-wrap {
    pointer-events: none !important;
  }

  .mobile-section .overlay.active,
  .mobile-nav-wrap .overlay.active,
  #overlay.active,
  .menu-drawer.active,
  .mobile-section .bottom-sheet.active,
  #wishlistSheet.active,
  #bagSheet.active,
  .search-panel.active {
    pointer-events: auto !important;
  }
}

/* ══════════════════════════════════════════════════════
   PAGE LOADER — branded splash while each page loads
   ══════════════════════════════════════════════════════ */
html.t2-is-loading { overflow: hidden; }

.t2-page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999998;
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s;
}

.t2-page-loader.active {
  opacity: 1;
  visibility: visible;
}

.t2-page-loader.t2-pl-out {
  opacity: 0;
  visibility: hidden;
}

.t2-pl-inner {
  width: 100%;
  max-width: 320px;
  text-align: center;
  color: #fff;
}

.t2-pl-logo {
  width: 72px;
  height: 72px;
  object-fit: contain;
  margin: 0 auto 14px;
  display: block;
  border-radius: 12px;
  animation: t2PlPulse 1.6s ease-in-out infinite;
}

.t2-pl-brand {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 0.16em;
  margin-bottom: 18px;
}

.t2-pl-tip {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  min-height: 38px;
  margin-bottom: 18px;
  animation: t2PlFade 0.4s ease;
}

.t2-pl-bar {
  height: 3px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  overflow: hidden;
}

.t2-pl-bar-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #f5d300, #fff);
  border-radius: 3px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes t2PlPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.82; transform: scale(0.97); }
}

@keyframes t2PlFade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Mobile search — submit button */
.search-box .t2-search-go {
  border: none;
  background: #111;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 7px 12px;
  border-radius: 20px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.search-box .t2-search-go:hover { background: #333; }