/* =========================================================
   My Store — shared UI layer (store-ui.css + store-ui.js)

   1) Cart drawer + Checkout button, redesigned (all pages that have a cart)
   2) Mobile bottom navigation bar (product listing + product pages)
   3) Sticky "Add to Cart / Buy Now" bar on product pages (mobile)

   Uses the page's own CSS variables (--bg, --surface, --border, --ink ...)
   so light / dark mode and every page keep working. The orange is written
   as a hex on purpose: in dark mode the site flips --accent to white, but
   the checkout / active states should stay brand-orange.
   ========================================================= */

:root{
  --ui-orange:#E8590C;
  --ui-orange-light:#FF7A2F;
  --ui-glow:rgba(232,89,12,.55);
}

/* ---------------------------------------------------------
   1) CART DRAWER
   --------------------------------------------------------- */
.cart-drawer{
  width:420px;
  border-left:none;
}
/* shadow only while open — a closed drawer sits just off-screen and its shadow would bleed onto the page */
.cart-drawer.active{ box-shadow:-26px 0 60px -28px rgba(0,0,0,.4); }
.cart-drawer .cart-drawer-head{
  padding:20px 22px;
}
.cart-drawer .cart-drawer-head h3{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-size:21px; font-weight:600; letter-spacing:-.2px;
}
.cart-head-count{
  min-width:26px; height:26px; padding:0 9px; border-radius:100px;
  background:var(--ui-orange); color:#fff;
  font-family:'Inter',sans-serif; font-size:12px; font-weight:700; line-height:26px; text-align:center;
}
.cart-drawer .close-btn{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-soft); color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, color .2s;
}
.cart-drawer .close-btn:hover{ background:var(--ink); color:var(--bg); }

/* items */
.cart-drawer .cart-items{
  padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.cart-drawer .cart-item{
  align-items:center; gap:14px; padding:12px;
  border:1px solid var(--border); border-radius:18px;
  background:var(--surface);
  transition:border-color .2s, box-shadow .2s;
}
.cart-drawer .cart-item:hover{ border-color:var(--ink-dim); box-shadow:0 12px 26px -20px rgba(0,0,0,.35); }
.cart-drawer .cart-item-thumb{
  width:76px; height:76px; border-radius:14px; background:var(--bg-soft);
}
.cart-drawer .cart-item-thumb img{ object-fit:cover; }
.cart-drawer .cart-item-info h4{
  font-size:13.5px; line-height:1.35; margin-bottom:2px;
  white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.cart-drawer .cart-item-price{
  font-family:'Fraunces',serif; font-size:16px; font-weight:700; color:var(--ink);
}
.cart-drawer .cart-item-actions{ margin-top:10px; gap:0; }
.cart-drawer .qty-btn{
  width:28px; height:28px; border-radius:50%; font-size:15px; line-height:1;
  background:var(--bg-soft); border:1px solid transparent; color:var(--ink);
  transition:background .15s, color .15s, transform .12s;
}
.cart-drawer .qty-btn:hover{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.cart-drawer .qty-btn:active{ transform:scale(.92); }
.cart-drawer .qty-val{ min-width:32px; font-size:13.5px; font-weight:700; }
.cart-drawer .remove-item{
  margin-inline-start:auto; margin-left:auto;
  font-size:12px; font-weight:500; text-decoration:none; color:var(--ink-dim);
  padding:5px 10px; border-radius:100px; transition:background .15s, color .15s;
}
.cart-drawer .remove-item:hover{ background:var(--bg-soft); color:#D6336C; }

.cart-drawer .cart-empty{ padding:72px 20px; font-size:14px; }
.cart-drawer .cart-empty::before{
  content:"🛍️"; display:block; font-size:44px; margin-bottom:14px; opacity:.85;
}

/* footer / summary */
.cart-drawer .cart-drawer-foot{
  padding:16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -16px 32px -26px rgba(0,0,0,.3);
}
.cart-drawer .free-ship-bar{
  margin-bottom:14px; padding:12px 14px; border-radius:14px; background:var(--bg-soft);
}
.cart-drawer .free-ship-text{ font-size:12.5px; margin-bottom:9px; }
.cart-drawer .free-ship-track{ height:8px; background:var(--border); }
.cart-drawer .free-ship-fill{ background:linear-gradient(90deg,#1E9E5B,#3BC57E); }
.cart-drawer .cart-subtotal{
  align-items:baseline; margin-bottom:14px;
  font-size:13.5px; font-weight:600; color:var(--ink-soft);
}
.cart-drawer .cart-subtotal #cartSubtotal{
  font-family:'Fraunces',serif; font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-.3px;
}

/* the checkout button */
html .cart-drawer .cart-checkout-btn{
  position:relative; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; gap:12px;
  width:100%; height:58px; padding-block:0; padding-inline:20px 8px;
  border:none; border-radius:18px;
  background:linear-gradient(135deg,var(--ui-orange-light) 0%,var(--ui-orange) 100%);
  color:#fff; text-align:start;
  font-family:'Inter',sans-serif; font-size:15px; font-weight:700; letter-spacing:.1px;
  cursor:pointer;
  box-shadow:0 16px 30px -14px var(--ui-glow), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
html .cart-drawer .cart-checkout-btn::after{ /* soft shine sweep */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%); transition:transform .7s ease;
}
html .cart-drawer .cart-checkout-btn:hover:not(:disabled){
  background:linear-gradient(135deg,var(--ui-orange-light) 0%,var(--ui-orange) 100%);
  transform:translateY(-2px);
  box-shadow:0 22px 34px -14px var(--ui-glow), inset 0 1px 0 rgba(255,255,255,.3);
}
html .cart-drawer .cart-checkout-btn:hover:not(:disabled)::after{ transform:translateX(120%); }
html .cart-drawer .cart-checkout-btn:active:not(:disabled){ transform:translateY(0) scale(.99); filter:brightness(.96); }
html .cart-drawer .cart-checkout-btn:focus-visible{ outline:3px solid rgba(232,89,12,.35); outline-offset:3px; }
html .cart-drawer .cart-checkout-btn .cco-lock{ display:flex; flex-shrink:0; }
html .cart-drawer .cart-checkout-btn .cco-lock svg{ width:19px; height:19px; }
html .cart-drawer .cart-checkout-btn > span:not(.cco-lock):not(.cco-amount){ flex:1; min-width:0; }
html .cart-drawer .cart-checkout-btn .cco-amount{
  flex-shrink:0; height:42px; padding:0 16px; border-radius:13px;
  display:flex; align-items:center;
  background:rgba(0,0,0,.22); color:#fff;
  font-family:'Fraunces',serif; font-size:16px; font-weight:700; letter-spacing:.2px;
}
html .cart-drawer .cart-checkout-btn:disabled{
  background:var(--bg-soft); color:var(--ink-dim); box-shadow:none; cursor:not-allowed;
  border:1px dashed var(--border);
}
html .cart-drawer .cart-checkout-btn:disabled::after{ display:none; }
html .cart-drawer .cart-checkout-btn:disabled .cco-amount{ display:none; }

/* trust row under the button */
.co-trust{ margin-top:14px; }
.co-trust-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.co-secure{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; color:var(--ink-soft);
}
.co-secure svg{ width:14px; height:14px; color:#1E9E5B; }
.co-badges{ display:flex; align-items:center; gap:6px; }
.co-badge{
  display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 8px;
  border:1px solid var(--border); border-radius:6px; background:var(--bg);
}
.co-badge .pp{ font-family:'Fraunces',serif; font-weight:800; font-style:italic; font-size:12px; line-height:1; }
.co-badge .pp i{ font-style:italic; }
.co-badge .pp .a{ color:#003087; }
.co-badge .pp .b{ color:#0098DE; }
.co-badge .visa{ font-family:'Fraunces',serif; font-weight:800; font-style:italic; font-size:11.5px; letter-spacing:.4px; color:#1434CB; line-height:1; }
.co-badge svg{ display:block; }
[data-theme="dark"] .co-badge{ background:#fff; border-color:#fff; }
.co-note{
  margin:10px 0 0; text-align:center; font-size:11.5px; line-height:1.5; color:var(--ink-dim);
}

@media (max-width:480px){
  .cart-drawer{ width:100%; max-width:100vw; }
}

/* ---------------------------------------------------------
   2) + 3) BOTTOM NAV + BUY BAR  (mobile / small tablet only)
   --------------------------------------------------------- */
.bn, .bb{ display:none; }

/* the round back-to-top button must never float over the open cart drawer / overlays */
.back-to-top{ z-index:118; }


@media (max-width:900px){
  body.has-bottom-nav footer{ padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav.bb-on footer{ padding-bottom:calc(178px + env(safe-area-inset-bottom, 0px)); }

  /* keep the site's other fixed helpers clear of the bar */
  body.has-bottom-nav .back-to-top{ bottom:calc(92px + env(safe-area-inset-bottom, 0px)); right:16px; }
  body.has-bottom-nav.bb-on .back-to-top{ bottom:calc(166px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav .ms-compare-bar{ bottom:calc(88px + env(safe-area-inset-bottom, 0px)); }
  /* it is parked just below the screen when idle — with the bar lifted, park it further down and make sure it can't swallow taps meant for the nav */
  body.has-bottom-nav .ms-compare-bar:not(.active){ transform:translateY(calc(100% + 160px)); pointer-events:none; }
  body.has-bottom-nav .ms-toast{ bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav.bb-on .ms-toast{ bottom:calc(170px + env(safe-area-inset-bottom, 0px)); }

  /* ---- bottom nav ---- */
  .bn{
    position:fixed; z-index:120;
    left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom, 0px));
    max-width:440px; height:66px; margin:0 auto; padding:8px;
    display:flex; align-items:center; justify-content:space-between; gap:4px;
    /* frosted glass: see-through with a soft blur, like the reference design */
    background:rgba(255,255,255,.62);
    -webkit-backdrop-filter:blur(18px) saturate(190%); backdrop-filter:blur(18px) saturate(190%);
    border-radius:100px;
    box-shadow:0 18px 40px -16px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.55) inset, 0 0 0 1px rgba(0,0,0,.05);
    transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .25s;
  }
  body.bn-hide .bn{ transform:translateY(140%); opacity:0; pointer-events:none; }

  .bn-item{
    position:relative; flex:0 0 auto;
    min-width:50px; height:50px; padding:0 14px;
    display:flex; align-items:center; justify-content:center; gap:0;
    border:none; border-radius:100px; background:none; cursor:pointer;
    color:rgba(13,13,13,.68); text-decoration:none;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600; -webkit-tap-highlight-color:transparent;
    transition:background .25s, color .2s, padding .3s cubic-bezier(.22,1,.36,1), gap .3s;
  }
  .bn-item svg{ width:22px; height:22px; flex-shrink:0; }
  .bn-item:active{ transform:scale(.94); }
  .bn-item:hover{ color:#0D0D0D; }
  .bn-item:focus-visible{ outline:2px solid var(--ui-orange); outline-offset:-3px; }

  /* labels: only the active item shows one; the rest stay readable for screen readers */
  .bn-label{
    max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
    transition:max-width .3s cubic-bezier(.22,1,.36,1), opacity .2s;
  }
  .bn-item.active{ background:var(--ui-orange); color:#fff; padding:0 18px; gap:8px; box-shadow:0 8px 18px -8px var(--ui-glow); }
  .bn-item.active .bn-label{ max-width:110px; opacity:1; }

  .bn-badge{
    position:absolute; top:3px; inset-inline-end:5px;
    min-width:18px; height:18px; padding:0 5px; border-radius:100px;
    background:var(--ui-orange); color:#fff; border:2px solid rgba(255,255,255,.9);
    font-size:10px; font-weight:800; line-height:14px; text-align:center;
  }
  .bn-badge.hidden{ display:none; }
  .bn-badge.bump{ animation:bnBump .35s cubic-bezier(.3,1.4,.4,1); }
  @keyframes bnBump{ 0%{transform:scale(1)} 40%{transform:scale(1.5)} 100%{transform:scale(1)} }

  /* ---- sticky buy bar (product pages) ---- */
  .bb{
    position:fixed; z-index:119;
    left:12px; right:12px; bottom:calc(12px + 66px + 10px + env(safe-area-inset-bottom, 0px));
    max-width:440px; margin:0 auto; padding:10px 10px 10px 16px;
    display:flex; align-items:center; gap:10px;
    background:rgba(255,255,255,.8); border:1px solid rgba(255,255,255,.75); border-radius:22px;
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.05);
    transform:translateY(24px); opacity:0; pointer-events:none;
    transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .25s;
  }
  body.bb-on .bb{ transform:translateY(0); opacity:1; pointer-events:auto; }
  body.bn-hide .bb{ bottom:calc(12px + env(safe-area-inset-bottom, 0px)); }

  .bb-price{ display:flex; flex-direction:column; justify-content:center; min-width:0; padding-inline-end:2px; }
  .bb-price small{ font-size:10.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-dim); line-height:1.2; }
  .bb-price b{ font-family:'Fraunces',serif; font-size:19px; font-weight:700; color:var(--ink); line-height:1.2; white-space:nowrap; }

  .bb-btn{
    flex:1 1 0; min-width:0; height:46px; padding:0 10px;
    display:flex; align-items:center; justify-content:center; gap:7px;
    border-radius:15px; cursor:pointer; white-space:nowrap;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:700; -webkit-tap-highlight-color:transparent;
    transition:transform .15s, filter .15s, background .2s;
  }
  .bb-btn svg{ width:17px; height:17px; flex-shrink:0; }
  .bb-btn:active{ transform:scale(.96); }
  .bb-add{ background:rgba(13,13,13,.06); color:var(--ink); border:1.5px solid rgba(13,13,13,.14); }
  .bb-add:hover{ border-color:var(--ink); }
  .bb-buy{
    color:#fff; border:none;
    background:linear-gradient(135deg,var(--ui-orange-light),var(--ui-orange));
    box-shadow:0 12px 22px -12px var(--ui-glow), inset 0 1px 0 rgba(255,255,255,.28);
  }
  .bb-buy:hover{ filter:brightness(1.05); }
}

@media (max-width:370px){
  .bb-price small{ display:none; }
  .bb-btn{ font-size:12px; padding:0 6px; }
  .bb-btn svg{ display:none; }
}



/* ---------------------------------------------------------
   4) HOME PAGE — glass touches   (index.html: <body data-glass="home">)
   The glass layer lives on header::before, NOT on the header itself: a
   backdrop-filter on the header would make it a "backdrop root" and the
   mobile dropdown menu (a child) could no longer blur the page behind it.
   --------------------------------------------------------- */
body[data-glass="home"] header{
  background:transparent;
  border-bottom-color:rgba(255,255,255,.09);
  transition:box-shadow .4s ease, border-color .4s ease;
}
body[data-glass="home"] header::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:rgba(13,13,13,.9);
  -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
  transition:background-color .4s ease;
}
/* once the visitor scrolls, the bar turns properly see-through */
body[data-glass="home"] header.scrolled::before{ background:rgba(13,13,13,.62); }
body[data-glass="home"] header.scrolled{ box-shadow:0 14px 34px -16px rgba(0,0,0,.5); }
[data-theme="dark"] body[data-glass="home"] header::before{ background:rgba(8,8,8,.82); }
[data-theme="dark"] body[data-glass="home"] header.scrolled::before{ background:rgba(8,8,8,.56); }
/* dark mode gave the desktop nav its own solid box — invisible on a solid bar, obvious on glass */
[data-theme="dark"] body[data-glass="home"] header nav{ background:transparent !important; }

/* header buttons: glass chips instead of solid white circles */
body[data-glass="home"] header .ms-icon-btn,
body[data-glass="home"] header .theme-toggle,
body[data-glass="home"] header .cart-btn{
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:background .2s, border-color .2s, transform .2s;
}
body[data-glass="home"] header .ms-icon-btn:hover,
body[data-glass="home"] header .theme-toggle:hover,
body[data-glass="home"] header .cart-btn:hover{
  background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.5);
}
body[data-glass="home"] header .lang-switch{
  background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.22);
}
body[data-glass="home"] header .lang-switch .lang-btn{ color:rgba(255,255,255,.78); }
body[data-glass="home"] header .lang-switch .lang-btn:hover{ color:#fff; }
body[data-glass="home"] header .lang-switch .lang-btn.active{ color:#fff; }
[data-theme="dark"] body[data-glass="home"] header .lang-switch .lang-btn.active{ color:#0D0D0D; }

/* the header search field + Settings link were dark-on-dark; make them glass/white like the rest */
body[data-glass="home"] header .nav-search{
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
body[data-glass="home"] header .nav-search input{ color:#fff; }
body[data-glass="home"] header .nav-search input::placeholder{ color:rgba(255,255,255,.62); }
body[data-glass="home"] header .settings-trigger{ color:rgba(255,255,255,.82); transition:color .2s; }
body[data-glass="home"] header .settings-trigger:hover{ color:#fff; }

/* floating badges on the hero picture: smoked glass */
body[data-glass="home"] .hero-badge{
  background:rgba(13,13,13,.6);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 18px 34px -14px rgba(0,0,0,.5);
}
body[data-glass="home"] .hero-deal-badge{
  background:rgba(17,18,20,.6);
  -webkit-backdrop-filter:blur(14px) saturate(170%); backdrop-filter:blur(14px) saturate(170%);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:0 22px 40px -16px rgba(0,0,0,.55);
}

/* mobile dropdown menu of the home header */
@media (max-width:960px){
  body[data-glass="home"] nav.mobile-open{
    background:rgba(13,13,13,.78);
    -webkit-backdrop-filter:blur(18px) saturate(180%); backdrop-filter:blur(18px) saturate(180%);
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 22px 40px -20px rgba(0,0,0,.6);
  }
  [data-theme="dark"] body[data-glass="home"] header nav.mobile-open{ background:rgba(8,8,8,.74) !important; }
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  body[data-glass="home"] header::before,
  body[data-glass="home"] header.scrolled::before{ background:rgba(13,13,13,.96); }
  body[data-glass="home"] .hero-badge, body[data-glass="home"] .hero-deal-badge{ background:rgba(13,13,13,.92); }
}

/* dark mode: smoked glass instead of white glass */
@media (max-width:900px){
  [data-theme="dark"] .bn{
    background:rgba(24,24,24,.6);
    box-shadow:0 18px 40px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12);
  }
  [data-theme="dark"] .bn-item{ color:rgba(255,255,255,.72); }
  [data-theme="dark"] .bn-item:hover{ color:#fff; }
  [data-theme="dark"] .bn-item.active{ color:#fff; }
  [data-theme="dark"] .bn-badge{ border-color:rgba(24,24,24,.9); }
  [data-theme="dark"] .bb{
    background:rgba(24,24,24,.74); border-color:rgba(255,255,255,.12);
    box-shadow:0 20px 40px -20px rgba(0,0,0,.7);
  }
  [data-theme="dark"] .bb-add{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); color:#fff; }
}

/* very old browsers without backdrop-filter: fall back to a mostly-solid bar so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:900px){
    .bn, .bb{ background:rgba(255,255,255,.95); }
    [data-theme="dark"] .bn, [data-theme="dark"] .bb{ background:rgba(24,24,24,.95); }
  }
}

@media (prefers-reduced-motion:reduce){
  .bn, .bn-item, .bn-label, .bb, html .cart-drawer .cart-checkout-btn, html .cart-drawer .cart-checkout-btn::after{ transition:none !important; }
}