*{
    box-sizing:border-box
}
 html,body{
     height:100%;
     margin:0;
    font-family: "Urbanist", Inter, sans-serif;
     background:#f6f7f8;
     color:#111;
     overflow-x:hidden;
     overscroll-behavior-y:none;
}
 :root{
     --rail-w:68px;
     --panel-radius:14px;
}
 .shell{
     display:flex;
     gap:16px;
     min-height:100vh;
     padding:16px;
     max-width:1600px;
     margin-inline:auto;
}
/* ===== Desktop Left rail ===== */
 .t-rail{
     width:var(--rail-w);
     background:#111;
     color:#fff;
     border-radius:var(--panel-radius);
     padding:10px;
     display:flex;
     flex-direction:column;
     gap:10px;
     flex:0 0 auto;
     transition:width .25s;
     position:relative;
    /* for advisor toast */
}
 .t-rail:hover{
    width:220px
}
 .rail-item{
     position:relative;
     display:flex;
     align-items:center;
     gap:12px;
     color:#eaeaea;
     text-decoration:none;
     padding:10px 12px;
     border-radius:10px;
     background:#1f1f1f;
}
 .icon{
     width:26px;
     height:26px;
     display:grid;
     place-items:center;
     border-radius:8px;
     background:#2a2a2a 
}
 .label{
    opacity:0;
    white-space:nowrap;
    transition:.15s
}
 .t-rail:hover .label{
    opacity:1
}
 .badge{
     position:absolute;
     right:8px;
     top:8px;
     background:#ff3b30;
     color:#fff;
     border-radius:999px;
     font-size:11px;
     line-height:1;
     padding:3px 6px;
     min-width:18px;
     text-align:center;
}
/* Beauty advisor toast */
 .advisor-toast{
     position:absolute;
     left:80px;
     bottom:40px;
     background:#26272b;
     color:#fff;
     padding:10px 14px;
     border-radius:14px;
     font-size:13px;
     box-shadow:0 10px 25px rgba(0,0,0,.35);
     opacity:0;
     pointer-events:none;
     transform:translateY(6px);
     transition:opacity .18s ease, transform .18s ease;
     min-width:160px;
}
 .advisor-toast::before{
     content:"";
     position:absolute;
     left:-6px;
     top:50%;
     transform:translateY(-50%);
     border-width:6px;
     border-style:solid;
     border-color:transparent #26272b transparent transparent;
}
 .advisor-toast.show{
     opacity:1;
     pointer-events:auto;
     transform:translateY(0);
}
/* ===== Products panel ===== */
 .sidebar{
     flex:1;
     background:#fff;
     border-radius:var(--panel-radius);
     overflow:hidden;
     box-shadow:0 2px 12px rgba(0,0,0,.06);
     display:flex;
     flex-direction:column;
     min-width:420px 
}
 .catbar{
     position:sticky;
     top:0;
     z-index:20;
     padding:12px 14px;
     border-bottom:1px solid #eee;
     background:#fff 
}
 .catwrap{
     display:flex;
     gap:8px;
     padding: 13px;
     overflow-x:auto;
     overflow-y:hidden;
     scrollbar-width:none;
     -webkit-overflow-scrolling:touch;
     scroll-snap-type:x proximity 
}
 .catwrap::-webkit-scrollbar{
    display:none
}
/* Category slider arrows */
 .catnav-btn{
     border:0;
     background:#f3f4f6;
     width:36px;
     height:36px;
     border-radius:999px;
     display:flex;
     align-items:center;
     justify-content:center;
     cursor:pointer;
     font-size:16px;
     color:#111;
     flex:0 0 auto;
     transition:background .15s ease, opacity .15s ease, transform .15s ease;
}
 .catnav-btn:hover:not(:disabled){
     background:#000;
     color: white;
     transform:translateY(-1px);
}
 .catnav-btn:disabled{
     opacity:.35;
     cursor:default;
}
/* ==== category buttons ==== */
 .catbtn{
     border:0;
     background:#eef0f2;
     padding:8px 18px;
     border-radius:18px;
     cursor:pointer;
     white-space:nowrap;
     scroll-snap-align:start;
     font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
     font-size:14px;
     font-weight:500;
     letter-spacing:0.2px;
     color:#222;
     transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
 .catbtn:hover{
     background:#e2e4e8;
     transform:translateY(-1px);
     box-shadow:0 4px 10px rgba(15,23,42,.08);
}
 .catbtn.active{
     background:#111;
     color:#fff;
     font-weight:600;
     box-shadow:0 6px 14px rgba(15,23,42,.25);
}
 .grid{
     padding:16px;
     display:grid;
     grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
     gap:18px;
}
 .card{
     background:#fff;
     border:1px solid #eee;
     border-radius:14px;
     padding:12px;
     cursor:pointer;
     position:relative;
     transition:box-shadow .16s,border-color .16s,transform .16s;
     width:100%;
     height:200px;
     box-sizing:border-box;
}
 .card:hover{
     transform:translateY(-2px);
     box-shadow:0 6px 14px rgba(0,0,0,.1);
     border-color:#e6e6e6;
}
 .card img{
     width:100%;
     height:150px;
     border-radius:10px;
     object-fit:cover;
     background:#fafafa;
     display:block;
}
.name{
    font-family: "Nunito", sans-serif;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    color: #222;
}

 .applied-badge{
     position:absolute;
     top:10px;
     right:10px;
     background:#000;
     color:#fff;
     font-size:12px;
     font-weight:600;
     padding:4px 10px;
     border-radius:14px;
     display:none;
     pointer-events:none;
}
 .card.applied .applied-badge{
     display:inline-block;
}
 .card.applied{
     border-color:#111;
     box-shadow:0 0 0 2px #1111;
     transform:none;
     width:180px;
     height:210px;
}
/* ===== Camera + CTA + Applied (desktop) ===== */
 .stage{
     flex:0 0 auto;
     display:flex;
     flex-direction:column;
     gap:12px;
     align-items:flex-start 
}
 .frame-wrap{
     aspect-ratio:4/3;
     width:min(520px,38vw);
     max-height:380px;
     border-radius:18px;
     overflow:hidden;
     background:#000;
     box-shadow:0 12px 28px rgba(0,0,0,.16) 
}
 iframe{
    width:100%;
    height:100%;
    border:0;
    display:block
}
 .cta-bar{
     width:min(520px,38vw);
     background:#fff;
     border-radius:14px;
     padding:10px 12px;
     display:flex;
     align-items:center;
     gap:12px;
     box-shadow:0 8px 24px rgba(0,0,0,.08) 
}
 .cta-thumb{
     width:44px;
     height:44px;
     border-radius:10px;
     object-fit:cover;
     background:#f0f2f4;
     border:1px solid #eee 
}
 .cta-title{
     flex:1;
     font-weight:600;
     font-size:14px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis 
}
 .btn{
    border:0;
    border-radius:12px;
    padding:10px 14px;
    cursor:pointer;
    font-weight:700
}
 .btn-dark{
    background:#111;
    color:#fff
}
 .btn-light{
    background:#eef0f2;
    color:#111
}
 .applied{
     width:min(520px,38vw);
     background:#fff;
     border-radius:14px;
     padding:14px 12px;
     box-shadow:0 12px 28px rgba(0,0,0,.08) 
}
 .applied .hdr{
     display:flex;
     align-items:center;
     justify-content:space-between;
     margin-bottom:8px 
}
 .applied .hdr .ttl{
    font-weight:800
}
 .applied .hdr .clear{
    cursor:pointer;
    color:#666;
    font-weight:700
}
 .applied-list{
     display:flex;
     flex-direction:column;
     gap:10px;
     margin-bottom:10px 
}
 .applied-item{
     display:flex;
     align-items:center;
     gap:10px;
     padding:8px 10px;
     border:1px solid #eee;
     border-radius:12px;
     position:relative 
}
 .applied-thumb{
     width:38px;
     height:38px;
     border-radius:8px;
     object-fit:cover;
     background:#f0f2f4;
     border:1px solid #eee 
}
 .applied-name{
     font-weight:600;
     font-size:14px;
     white-space:nowrap;
     overflow:hidden;
     text-overflow:ellipsis;
     flex:1 
}
 .applied-remove{
     position:absolute;
     left:8px;
     top:8px;
     width:22px;
     height:22px;
     border-radius:50%;
     display:grid;
     place-items:center;
     border:0;
     background:#111;
     color:#fff;
     opacity:0;
     transition:.15s;
     cursor:pointer 
}
 .applied-item:hover .applied-remove{
    opacity:1
}
 .applied-actions{
    display:flex;
    gap:12px
}
 .btn-wide{
    flex:1
}
/* ===== Mobile header + Drawer (Tint style) ===== */
 .m-header{
     display:none;
     position:sticky;
     top:0;
     z-index:60;
     background:#111;
     color:#fff;
     padding:10px 12px;
     align-items:center;
     gap:10px 
}
 .hambtn{
     width:40px;
     height:40px;
     border-radius:10px;
     border:0;
     background:#222;
     color:#fff;
     display:grid;
     place-items:center 
}
 .brand{
    font-weight:800;
    letter-spacing:.2px
}
 .drawer-bg{
     position:fixed;
     inset:0;
     background:rgba(0,0,0,.45);
     opacity:0;
     pointer-events:none;
     transition:.25s;
     z-index:99 
}
 .drawer-bg.show{
    opacity:1;
    pointer-events:auto
}
 .drawer{
     position:fixed;
     right:0;
     top:0;
     bottom:0;
     width:min(86vw,360px);
     background:#141414;
     color:#fff;
     transform:translateX(100%);
     transition:.25s;
     z-index:100;
     display:flex;
     flex-direction:column;
     border-radius:16px 0 0 16px;
     overflow:hidden 
}
 .drawer.show{
    transform:translateX(0)
}
 .drawer header{
     display:flex;
     align-items:center;
     justify-content:space-between;
     padding:16px 14px;
     border-bottom:1px solid #2a2a2a 
}
 .drawer a{
     display:flex;
     align-items:center;
     gap:12px;
     padding:14px 16px;
     color:#eaeaea;
     text-decoration:none 
}
 .drawer a:hover{
    background:#1f1f1f
}
/* ===== Footer ===== */
 .foot{
     display:flex;
     justify-content:center;
     align-items:center;
     gap:8px;
     color:#6b7280;
     font-size:13px;
     padding:12px 16px;
     margin:6px 16px 16px;
     border-top:1px solid #e9eaee;
}
 .foot a{
    color:#111;
    text-decoration:none;
    font-weight:700
}
 .foot .dot{
    opacity:.35
}
/* ===== Mobile layout ===== */
 @media (max-width:1024px){
     .shell{
        flex-direction:column;
        gap:25px;
        padding:0 0 12px
    }
     .t-rail{
        display:none
    }
     .m-header{
        display:flex
    }
     .stage{
        order:1;
        align-items:stretch;
        gap:8px
    }
     .frame-wrap{
         width:100%;
         border-radius:0;
         max-height:none;
         height:70vh;
    }
     .cta-bar,.applied{
        width:100%;
        border-radius:0
    }
     .sidebar{
        order:2;
        width:100%;
        border-radius:0
    }
     .grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
        padding:12px
    }
     .catbar{
        position:sticky;
        top:0;
        padding:12px
    }
     .foot{
        margin:6px 12px 12px
    }
}

/* === OTHER DROPDOWN (Premium UI) — DESKTOP + MOBILE === */
/* === Modern Glass Dropdown === */
.other-menu {
  position: absolute;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  border-radius: 16px;
  padding: 8px 0;
  width: 220px;
  box-shadow: 0 10px 32px rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.45);
  
  animation: dropFade 0.2s ease;
  transform-origin: top right;
}

/* Dropdown Items */
.other-item {
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 15px;
  color: #2b2b2b;
  cursor: pointer;
  transition: 0.18s ease;
  border-radius: 10px;

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

/* Elegant hover */
.other-item:hover {
  background: rgba(0,0,0,0.85);
  color: white;
  transform: translateX(6px);
}

/* Modern Gradient Badge */
.other-item .soon {
  background: linear-gradient(90deg, #f8d694, #f1c46b);
  color: #4f3510;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 600;
  white-space: nowrap;
  margin-left: 8px;
  box-shadow: inset 0 0 4px rgba(255,255,255,0.4);
}

/* Badge on hover */
.other-item:hover .soon {
  background: #fff;
  color: #000;
}

/* Animation */
@keyframes dropFade {
  from { opacity: 0; transform: translateY(8px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}


/* === MOBILE FIX === */
@media (max-width: 768px) {
  .other-menu {
    position: fixed;
    top: 70px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 94vw;
    border-radius: 18px;
  }
  
  .other-item {
    padding: 16px 20px;
    font-size: 17px;
  }

  .other-item:hover {
    transform: none;
  }
}
.available {
  background: linear-gradient(90deg, #b2f2bb, #40c057);
  color: #0b4a14;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

#ctaBar { 
    display: none !important; 
}