/* === DR SKNN — Header (Island mobile; Back left of logo on tablet/desktop) === */

#drsknn-explorer .drsknn-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px clamp(12px,2.5vw,24px);
  background:#fffdf8; border-bottom:1px solid #efe3c5;
  position:sticky; top:0; z-index:9999;
  width:100%; box-sizing:border-box;
  gap:clamp(6px,1.5vw,16px);
  box-shadow:0 6px 20px rgba(200,167,74,.08);
}

/* Zones */
#drsknn-explorer .drsknn-topbar .hdr-left,
#drsknn-explorer .drsknn-topbar .hdr-center,
#drsknn-explorer .drsknn-topbar .hdr-right{
  display:flex; align-items:center; min-width:0;
}
#drsknn-explorer .drsknn-topbar .hdr-left{ gap:10px; }
#drsknn-explorer .drsknn-topbar .hdr-right{ justify-content:flex-end; flex:1 1 auto; gap:10px; }

/* Logo */
#drsknn-explorer .drsknn-topbar .hdr-center{
  flex:0 0 auto; justify-content:center; text-align:center;
  min-width:160px; max-width:280px;
}
#drsknn-explorer .drsknn-topbar .logo{ display:inline-flex; align-items:center; gap:10px; font-weight:800; color:#1a1a1a; }
#drsknn-explorer .drsknn-topbar .logo img{ height:40px; width:auto; object-fit:contain; filter:drop-shadow(0 0 6px rgba(200,167,74,.25)); }

/* Tabs (desktop/tablet) */
#drsknn-explorer .drsknn-topbar .tabs{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:flex-end; }
#drsknn-explorer .drsknn-topbar .tabs .tab-btn{
  background:linear-gradient(180deg,#fffef6,#f8f1d8);
  color:#1a1a1a; font-weight:700; border:1px solid #e8ddb8; border-radius:999px;
  padding:6px 12px; font-size:14px; box-shadow:0 3px 10px rgba(0,0,0,.04); white-space:nowrap;
}
#drsknn-explorer .drsknn-topbar .tabs .tab-btn:hover{
  background:linear-gradient(180deg,#fdf6c9,#e8cd7c);
  transform:translateY(-1px);
  box-shadow:0 6px 16px rgba(200,167,74,.2);
}

/* Rectangular header buttons (Menu / Back / Basket) */
#drsknn-explorer .btn-rect{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:14px;
  border:1px solid #e8ddb8; background:#fffef6; color:#1a1a1a; text-decoration:none; font-weight:800;
  box-shadow:0 3px 10px rgba(0,0,0,.04);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  line-height:1;
}
#drsknn-explorer .btn-rect:hover{ transform:translateY(-1px); box-shadow:0 6px 16px rgba(200,167,74,.2); }
#drsknn-explorer .btn-rect .ico{ font-size:18px; display:block; }
#drsknn-explorer .btn-rect .badge{
  margin-left:6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  background:#2a2a2a; color:#fff; font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
}

#drsknn-explorer .btn-menu{ background:#fff7df; }
#drsknn-explorer .btn-back{ background:linear-gradient(180deg,#ffefb8,#e8cd7c); border-color:#e3c67a; }
#drsknn-explorer .btn-basket{ background:#ffffff; border-color:#eadfbf; }

/* Visibility groups */
#drsknn-explorer .mobile-left,
#drsknn-explorer .mobile-right{ display:none; }
#drsknn-explorer .desk-left{ display:none; }

/* ---------- Breakpoints ---------- */
@media (min-width:768px) and (max-width:1024px){
  /* Tablet: bigger logo; Back to left of logo; tabs on right */
  #drsknn-explorer .drsknn-topbar .logo img{ height:54px; }
  #drsknn-explorer .drsknn-topbar .tabs{ display:flex !important; }
  #drsknn-explorer .desk-left{ display:inline-flex !important; }
  #drsknn-explorer .mobile-left, #drsknn-explorer .mobile-right{ display:none !important; }
}

@media (min-width:1025px){
  /* Desktop */
  #drsknn-explorer .drsknn-topbar .tabs{ display:flex !important; }
  #drsknn-explorer .desk-left{ display:inline-flex !important; }
  #drsknn-explorer .mobile-left, #drsknn-explorer .mobile-right{ display:none !important; }
}

/* Mobile: iPhone-island header — Menu (L) | Logo (C) | Back + Basket (R) */
@media (max-width:767.98px){
  #drsknn-explorer .drsknn-topbar{
    display:grid !important;
    grid-template-columns:auto 1fr auto;
    align-items:center; gap:10px;
  }

  /* Hide tabs on phones */
  #drsknn-explorer .drsknn-topbar .tabs{ display:none !important; }

  /* Left: Menu */
  #drsknn-explorer .mobile-left{ display:inline-flex !important; }
  #drsknn-explorer .mobile-left .btn-rect{ padding:12px 16px; font-size:13px; }

  /* Center: larger island logo */
  #drsknn-explorer .drsknn-topbar .hdr-center{ grid-column:2; justify-content:center; }
  #drsknn-explorer .drsknn-topbar .logo img{ height:52px; }

  /* Right: Back + Basket (even spacing, tight to right) */
  #drsknn-explorer .drsknn-topbar .hdr-right{ grid-column:3; justify-content:flex-end; }
  #drsknn-explorer .mobile-right{ display:grid !important; grid-auto-flow:column; gap:10px; }
  #drsknn-explorer .mobile-right .btn-rect{ padding:12px 14px; font-size:13px; }
}


#drsknn-mobile-sheet{
  position:fixed; left:8px; right:8px; top:calc(64px + env(safe-area-inset-top,0));
  background:#fffdf8; border:1px solid #efe3c5; border-radius:18px;
  box-shadow:0 24px 64px rgba(200,167,74,.22), 0 8px 24px rgba(0,0,0,.08);
  z-index:2147482000; transform-origin:50% 0;
  transform:translateY(-8px) scale(.98); opacity:0; pointer-events:none;
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease;
}
#drsknn-mobile-sheet.open{ transform:none; opacity:1; pointer-events:auto; }
#drsknn-mobile-mask.open{ opacity:1; pointer-events:auto; }

#drsknn-mobile-sheet .sheet-inner{
  padding:16px; display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
#drsknn-mobile-sheet .sheet-item{
  display:flex; align-items:center; justify-content:center;
  padding:12px 14px; border-radius:14px; font-weight:800;
  background:linear-gradient(180deg,#fffef6,#f8f1d8); border:1px solid #e8ddb8;
  box-shadow:0 4px 12px rgba(0,0,0,.05);
}
#drsknn-mobile-sheet .sheet-item:active{ transform:scale(.98); }

/* Full-width bottom row for Reset & Basket on mobile menu */
#drsknn-mobile-sheet .sheet-row{
  grid-column:1/-1; display:flex; gap:10px; margin-top:6px;
}
#drsknn-mobile-sheet .sheet-row .sheet-item{ flex:1; }

/* Hide dropdown on tablet/desktop completely */
@media (min-width:768px){
  #drsknn-mobile-sheet, #drsknn-mobile-mask{ display:none !important; }
}

/* Split "Learn About Treatments" into two lines (mobile menu) */
#drsknn-mobile-sheet .tab-btn[data-tab="learn"]{
  white-space: normal !important;
  line-height: 1.15;
}

#drsknn-mobile-sheet .tab-btn[data-tab="learn"] .lbl-line{
  display: block;          /* each piece on its own line */
}

/* (optional) slightly tighten the card so two lines look centred */
#drsknn-mobile-sheet .tab-btn[data-tab="learn"]{
  padding-top: 12px;
  padding-bottom: 12px;
}

/* ===== PATCH B — Header click safety ===== */
body:not(.learn-viewer-open) #drsknn-explorer .topbar,
body:not(.learn-viewer-open) #drsknn-explorer .drsknn-topbar {
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 9999 !important;
}
#drsknn-explorer .drsknn-topbar .tabs .tab-btn {
  pointer-events: auto !important;
}


/* === PHASE INFINITY: HOLO MENU™ — DR SKNN MOBILE MENU (NO-BLUR + RECT BUTTONS) === */

/* === BACKDROP OVERLAY (no blur) === */
#drsknn-menu-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(255,250,235,0.35);   /* subtle tint only */
  transition: opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}
/* Show the backdrop when menu is open */
body.menu-open #drsknn-menu-backdrop{
  opacity: 1;
  pointer-events: auto;
}

/* === MOBILE SHEET (crisp) === */
#drsknn-mobile-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;

  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 24px 16px 36px;

  background: #fffdf8;                     /* solid */
  border-top: 1px solid #e9dec4;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.08);
  animation: menuFadeIn 0.35s ease-out;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transform: translateZ(0);
}

@media (min-width: 420px) {
  #drsknn-mobile-sheet {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Prevent page scroll when menu is open */
body.menu-open { overflow: hidden; }

/* === Shared Tab Style — rectangular, smooth corners === */
#drsknn-mobile-sheet .tab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;                     /* <- was 999px */
  font-weight: 700;
  font-size: 14.5px;
  text-align: center;
  white-space: nowrap;
  background: linear-gradient(180deg, #fffef6, #f8f1d8);
  color: #1a1a1a;
  border: 1px solid #e8ddb8;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  will-change: transform, box-shadow;
  opacity: 0;
  transform: translateY(12px);
  animation: popIn 0.4s ease-out forwards;
}

/* Staggered Animation */
#drsknn-mobile-sheet .tab-btn:nth-child(1) { animation-delay: 0.05s; }
#drsknn-mobile-sheet .tab-btn:nth-child(2) { animation-delay: 0.1s; }
#drsknn-mobile-sheet .tab-btn:nth-child(3) { animation-delay: 0.15s; }
#drsknn-mobile-sheet .tab-btn:nth-child(4) { animation-delay: 0.2s; }
#drsknn-mobile-sheet .tab-btn:nth-child(5) { animation-delay: 0.25s; }
#drsknn-mobile-sheet .tab-btn:nth-child(6) { animation-delay: 0.3s; }
#drsknn-mobile-sheet .tab-btn:nth-child(7) { animation-delay: 0.35s; }
#drsknn-mobile-sheet .tab-btn:nth-child(8) { animation-delay: 0.4s; }

/* Tap effect */
#drsknn-mobile-sheet .tab-btn:active {
  transform: scale(0.96);
  box-shadow: 0 6px 20px rgba(200, 167, 74, 0.25);
  background: linear-gradient(180deg, #fdf6c9, #e8cd7c);
}

/* === BASKET + RESET — Full-width === */
#drsknn-mobile-sheet .tab-btn[data-tab="basket"],
#drsknn-mobile-sheet .tab-btn[data-action="reset"] {
  grid-column: 1 / -1;
  font-size: 15px;
  padding: 16px 18px;
  border-radius: 16px;                     /* slightly larger radius for big CTA */
  background: linear-gradient(180deg, #fffaf0, #f3e6c6);
  border: 1.5px solid #dac89b;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
  animation: popIn 0.45s ease-out forwards;
}

/* Basket hover pulse */
#drsknn-mobile-sheet .tab-btn[data-tab="basket"]:hover {
  animation: pulseBasket 1.2s ease-in-out infinite;
}

/* Divider for Menu Sections */
.drsknn-menu-divider {
  grid-column: 1 / -1;
  height: 1px;
  border-top: 1px solid #e5d6a2;
  margin: 12px 0;
  position: relative;
  overflow: hidden;
}
.drsknn-menu-divider::before {
  content: '';
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  height: 1px;
  background: linear-gradient(90deg, transparent, gold, transparent);
  animation: dividerGlow 3s linear infinite;
}

/* Cleanup old styles */
#drsknn-mobile-sheet .sheet-inner { display: contents !important; }
#drsknn-mobile-sheet .sheet-item { all: unset; }

/* === Animations === */
@keyframes popIn {
  0% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

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

@keyframes dividerGlow {
  0% { left: -50%; }
  50% { left: 50%; }
  100% { left: 150%; }
}

@keyframes pulseBasket {
  0%, 100% { box-shadow: 0 0 0 0 rgba(213, 181, 80, 0.4); }
  50% { box-shadow: 0 0 0 8px rgba(213, 181, 80, 0); }
}

/* ===========================
   Mobile menu — CSS close button
   (no JS; clicks the backdrop)
   =========================== */

/* Show a floating "× Close" pill in the top-right
   of the backdrop, aligned with the sheet */
#drsknn-mobile-mask::after{
  content: "×";
  position: fixed;
  /* align near the top-right of the sheet */
  top: calc(64px + env(safe-area-inset-top, 0) + 4px);
  right: 14px;

  width: 38px; height: 38px;
  display: grid; place-items: center;
  font-weight: 900; font-size: 18px; line-height: 1;
  color: #1a1a1a;

  background: linear-gradient(180deg, #fffef6, #f8f1d8);
  border: 1px solid #e8ddb8;
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10), 0 1px 0 rgba(255,255,255,.8) inset;

  opacity: 0;            /* hidden until mask is open */
  pointer-events: none;  /* disabled until mask is open */
  transition: opacity .2s ease;
  z-index: 2147482001;   /* above the sheet */
}

/* Activate the button only when the mask is open */
#drsknn-mobile-mask.open::after{
  opacity: 1;
  pointer-events: auto;  /* clicking this hits the mask (closes) */
}

/* Touch feedback */
#drsknn-mobile-mask.open::after:active{
  transform: scale(.98);
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}

/* Optional: label variant ("Close") next to the × on larger phones */
@media (min-width: 420px){
  #drsknn-mobile-mask.open::after{
    content: "× Close";
    padding: 0 12px;
    width: auto; min-width: 38px; height: 38px;
    border-radius: 999px;
    font-size: 15px;
  }
}

/* === DR SKNN — Mobile header compact icons (Back & Basket) === */
@media (max-width: 767.98px){
  /* Right cluster spacing a touch tighter */
  #drsknn-explorer .mobile-right{
    display:grid !important;
    grid-auto-flow:column;
    gap:8px;                    /* was 10px */
    align-items:center;
  }

  /* Turn Back & Basket into compact icon pills */
  #drsknn-explorer .mobile-right .btn-rect{
    position: relative;
    padding:10px !important;    /* compact padding */
    width:40px;                 /* WCAG touch target */
    height:40px;                /* WCAG touch target */
    min-width:40px;
    border-radius:12px !important;
    justify-content:center;
    overflow:visible;
  }
  /* Hide text label, keep the icon */
  #drsknn-explorer .mobile-right .btn-rect > span:not(.ico):not(.badge){
    display:none !important;
  }
  /* Icon size tuned for the smaller pill */
  #drsknn-explorer .mobile-right .btn-rect .ico{
    font-size:16px !important;
    line-height:1;
    display:block;
  }

  /* Basket badge: small, pinned to corner */
  #drsknn-explorer .mobile-right .btn-basket .badge{
    position:absolute;
    top:-4px; right:-4px;
    min-width:16px; height:16px;
    font-size:10px; line-height:16px;
    padding:0 4px;
    box-shadow:0 0 0 2px #fffdf8; /* halo so it reads over the header */
  }

  /* Ensure these buttons never crowd the logo */
  #drsknn-explorer .drsknn-topbar .hdr-right{
    max-width:38vw;             /* prevents overrun into the logo island */
    justify-content:flex-end;
  }
  #drsknn-explorer .drsknn-topbar .hdr-center{
    min-width:0;                /* let center flex naturally */
  }
  /* (Optional) Slightly smaller logo on very narrow phones */
  @media (max-width: 380px){
    #drsknn-explorer .drsknn-topbar .logo img{ height:48px !important; }
  }
}