/* =============================
   HolyLoop — Global Styles
   Cleaned & organized (drop‑in)
   ============================= */

/* ========== 0) Design tokens / base reset ========== */
:root{
  --ink:#1d1c1c; --paper:#fffdfa; --paper-2:#fffcf4; --accent:#6b60ff; --line:#e7e4f6; --chip:#f7f6ff;
  --muted:#616161; --radius:14px; --shadow:0 8px 24px rgba(0,0,0,.06);
  --announce-h:38px;               /* running bar height */
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font:15px/1.5 Verdana, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect width='26' height='26' fill='%23fffdfa'/%3E%3Cpath d='M0 25.5h26M25.5 0v26' stroke='%23f2efff'/%3E%3C/svg%3E");
  background: var(--paper) top left/26px 26px var(--tile);
}
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
}
a{color:var(--accent); text-decoration:underline dotted 1px}
a:hover{color:#453bff; text-underline-offset:3px}
.hide{display:none !important}

/* ========== 1) Header / announcement / primary nav ========== */
header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(160%) blur(6px); -webkit-backdrop-filter:saturate(160%) blur(6px)}
.bar{background:rgba(255,255,255,.85); border-bottom:1px solid var(--line); box-shadow:0 1px 0 #fff inset}
.inner{max-width:1120px;margin:0 auto;padding:10px 16px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.brand{display:flex;gap:10px;align-items:center}
.sticker{position:relative; display:grid; place-items:center; width:44px; height:44px; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.sticker::after{content:""; position:absolute; inset:0; border-radius:10px; pointer-events:none; background:repeating-linear-gradient(135deg, transparent 0 6px, rgba(0,0,0,.04) 6px 7px); opacity:.25; mix-blend-mode:multiply}
.brand h1{margin:0; font:700 18px/1 "Courier New", ui-monospace, monospace; letter-spacing:.6px}
.cart {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;        /* fully pill-shaped */
  background: #fff;
  box-shadow: var(--shadow);
  cursor: pointer;
}

.cart .count {
  background: #111;            /* black pill badge */
  color: #fff;
  border-radius: 999px;
  font-weight: 800;
  padding: 2px 7px;
  font-size: 12px;
}


/* Running bar */
.ticker{border-top:1px dashed var(--line); border-bottom:1px dashed var(--line); background:#fff}
.ticker .row{max-width:1120px;margin:0 auto; overflow:hidden; white-space:nowrap}
.ticker .row span{display:inline-block; padding:8px 12px; animation:scroll 26s linear infinite; font-weight:700; color:#544f7a}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-100%)}}

/* Primary nav chips */
.primary-nav{max-width:1120px; margin:8px auto 0; padding:10px 16px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.chip{padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:#fff; font-weight:700; cursor:pointer}
.chip[aria-pressed="true"]{background:var(--chip); box-shadow:inset 0 0 0 1px #e4e1ff}

/* ========== 2) Page framing / windows ========== */
.wrap{max-width:1120px; margin:22px auto 90px; padding:0 16px}
.window{background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); position:relative}
.window::before{content:""; position:absolute; left:0; right:0; top:-12px; height:12px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='12'%3E%3Cpath d='M0 8Q50 3 100 8t100 0t100 6t100 -2t100 4t100 -6t100 2t100 -2t100 6t100 -4t100 8' fill='%23fff' stroke='%23e7e4f6'/%3E%3C/svg%3E") center/1200px 12px no-repeat}
.titlebar{display:flex; align-items:center; gap:10px; padding:10px 12px; background:linear-gradient(180deg,#fbfaff,#fff); border-bottom:1px solid var(--line)}
.dots{display:flex; gap:6px}
.dot{width:10px; height:10px; border-radius:50%; border:1px solid #d7d2ff}
.dot.r{background:#ffd0d0}.dot.y{background:#fff1c2}.dot.g{background:#d8ffd5}
.titlebar h2{margin:0; font:700 18px Verdana}
.pill{margin-left:auto; font:700 11px/1 Verdana; padding:6px 10px; border:1px dashed var(--line); border-radius:999px; background:#fff}
.content img{ max-width:100%; height:auto; display:block; }


/* ========== 3) Shop controls / grid / cards / pager ========== */
.controls{display:grid; grid-template-columns:1fr auto; gap:12px; padding:12px; border-bottom:1px solid var(--line)}
.field input, .field select{height:38px; border:1px solid var(--line); border-radius:10px; padding:0 12px; background:#fff; font-weight:600}
.subchips{display:flex; gap:8px; flex-wrap:wrap}
#sort {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231d1c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 28px;
}
#sort:hover,
#sort:focus {
  background-color: #fff;
  outline: none;
}



.grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; padding:14px}
@media(max-width:1024px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.grid{grid-template-columns:1fr}}
.card{background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; position:relative; transition:transform .12s ease}
.card:hover{transform:translateY(-2px)}
.badge{position:absolute; top:10px; left:10px; font-size:11px; font-weight:900; padding:5px 8px; border-radius:999px; border:1px solid var(--line); background:#fff}
.badge.sale{background:#ecfdf5; color:#065f46}
.badge.sold{background:#fef2f2; color:#7f1d1d}
.media{aspect-ratio:1/1; background:#faf9ff; display:grid; place-items:center; position:relative}
.media img{width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; user-select:none}
.info{padding:12px; display:grid; gap:6px}
.title{font-weight:900; letter-spacing:.2px}
.price{display:flex; gap:8px; align-items:baseline}
.now{font-weight:900}
.actions{display:grid; grid-template-columns:1fr auto; gap:8px; margin-top:6px}
.btn{border:1px solid var(--line); background:#fff; border-radius:10px; padding:9px 12px; font-weight:800; cursor:pointer; min-height:42px}

.pager{display:flex; gap:8px; justify-content:center; padding:10px 12px; border-top:1px solid var(--line)}
.pager button{border:1px solid var(--line); background:#fff; border-radius:10px; padding:8px 11px; font-weight:800; cursor:pointer}
.pager .current{background:var(--chip); box-shadow:inset 0 0 0 1px #e4e1ff}

/* ========== 4) Content / About / Picks ========== */
.content{padding:16px; line-height:1.7}
h3{margin:8px 0 6px}
.kicker{display:inline-block;font:700 15px/1.2 Verdana;padding:8px 14px;border:1px dashed var(--line);border-radius:999px;background:#fff;margin-bottom:10px}
ul{margin:8px 0 16px}
.note{font-size:13px; color:#555}

/* Picks */
.picks{margin:0 0 20px}
.pick-banner{display:flex; align-items:center; gap:10px; padding:14px 16px; border:1px dashed var(--line); border-radius:14px; background:#fff; font-weight:700; font-size:14px}
.pick-grid{display:grid; grid-template-columns:repeat(5, minmax(160px,1fr)); gap:14px; margin-top:14px}
.pick{background:#fff; border:1px solid var(--line); border-radius:14px; padding:16px; box-shadow:var(--shadow)}
.pick h4{ margin:0 0 8px; font:900 15px Verdana; display:flex; align-items:center; gap:8px }
.pick p{ margin:0; font-size:13.5px; color:#444; line-height:1.5 }
.pick-icon{width:18px; height:18px; image-rendering:pixelated}

/* About */
.about-grid{ display:grid; grid-template-columns:340px 1fr; gap:18px; align-items:start }
.about-card{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:var(--shadow) }
.about-photo{ position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:#faf9ff; box-shadow:var(--shadow) }
.about-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.about-meta{ display:grid; gap:10px; margin-top:12px }
.about-chip{ display:inline-flex; align-items:center; gap:8px; padding:7px 10px; border:1px dashed var(--line); border-radius:999px; background:#fff; font-weight:800 }
.about-body{ display:grid; gap:12px }
.about-body .lead{ font:600 16px/1.9 Verdana }
.about-cta{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px }
.about-cta .btn{ padding:10px 14px; border-radius:12px; font-weight:900 }

/* ========== 5) Cart drawer / backdrop / toast ========== */
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.35); display:none}
.drawer{position:fixed; top:0; right:0; width:380px; max-width:92vw; height:100%; background:#fff; border-left:1px solid var(--line); box-shadow:-8px 0 24px rgba(0,0,0,.1); transform:translateX(100%); transition:transform .2s ease; display:flex; flex-direction:column}
.drawer.open{transform:translateX(0)}
.backdrop.show{display:block}
.cart-head{display:flex; align-items:center; gap:10px; padding:12px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#fbfaff,#fff)}
.cart-title{font:700 16px Verdana; margin:0}
.cart-body{flex:1; overflow:auto; padding:8px 12px}
.cart-empty{padding:16px; color:#666}
.cart-row{display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px dashed var(--line)}
.cart-thumb{width:52px; height:52px; border:1px solid var(--line); border-radius:10px; overflow:hidden; display:grid; place-items:center; background:#faf9ff}
.cart-title-line{font-weight:800}
.cart-meta{font-size:12px; color:#666}
.qty{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.qty button{width:28px; height:28px; border:0; background:#fff; cursor:pointer}
.qty input{width:36px; height:28px; text-align:center; border:0; font-weight:700}
.row-actions{display:flex; gap:6px; align-items:center; justify-content:flex-end}
.remove{border:1px solid var(--line); background:#fff; border-radius:8px; padding:4px 8px; font-weight:800; cursor:pointer}
.cart-foot{border-top:1px solid var(--line); padding:12px; display:grid; gap:10px}
.line{display:flex; justify-content:space-between; font-weight:800}
.note-free{font-size:12px; color:#444}
.checkout{border:1px solid var(--line); background:#111; color:#fff; border-radius:12px; padding:12px; font-weight:900; cursor:pointer;  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;}
.close{margin-left:auto; border:1px solid var(--line); background:#fff; border-radius:10px; padding:6px 10px; font-weight:800; cursor:pointer}

/* Disabled buttons look clearly disabled */
.btn[disabled],
.btn[aria-disabled="true"]{
  opacity: .55;
  cursor: not-allowed;
  filter: saturate(0.6);
  pointer-events: none; /* belt & suspenders */
}

/* Toast (single canonical set) */
.toast{position:fixed; z-index:4000; bottom:max(18px, var(--safe-bottom)); left:50%; transform:translateX(-50%); display:flex; gap:10px; align-items:center; background:#111; box-shadow:0 0 0 2px #fff, 0 10px 24px rgba(0,0,0,.25); color:#fff; border:1px solid #000; border-radius:999px; padding:10px 14px; font-weight:800; box-shadow:0 10px 24px rgba(0,0,0,.25); 
  max-width:calc(100vw - 24px); font-size:14px; line-height:1.2; opacity:0; translate:0 16px; transition:opacity .2s ease, translate .2s ease}
.toast.show{opacity:1; translate:0 0}
.toast .link{background:#fff;color:#111;border-radius:999px;padding:6px 10px;border:1px solid var(--line);cursor:pointer}
#toastMsg{display:inline-block; max-width:60vw; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

main, .page, #shop, .content, .products-wrap{ padding-top: var(--announce-h) }

body.cart-open{ overflow:hidden }
body.cart-open .ticker{ display:none !important }


/* ========== 6) Lightbox 2.0 (single source of truth) ========== */
.lb{position:fixed; inset:0; display:grid; place-items:center; padding:16px; z-index:99; opacity:0; pointer-events:none; transition:opacity .15s ease}
.lb.show{opacity:1; pointer-events:auto}
.lb-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(2px); z-index:98}

.lb-shell{
  position:relative; width:min(1100px,96vw); height:min(88vh,900px);
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0;
  background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
}
.lb-x{position:absolute; top:10px; right:10px; border:1px solid var(--line); background:#fff; border-radius:12px; padding:8px 12px; font-weight:900; cursor:pointer; z-index:3}

.lb-media{position:relative; background:#faf9ff; display:grid; place-items:center; padding:16px}
/* --- Lightbox image containment (desktop + mobile) --- */
.lb-media img{
  max-width:100%;
  max-height:min(72vh,740px);
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:12px;
  background:#fff;
  display:block;
}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); border:1px solid var(--line); background:#fff; border-radius:999px; padding:10px 14px; font-weight:900; cursor:pointer; z-index:2}
.lb-prev{left:10px} .lb-next{right:10px}

.lb-meta{border-left:0; padding:16px; display:grid; gap:12px; background:#fff; overflow:auto; align-content:unset; grid-template-rows:auto auto 1fr auto}
.lb-head{display:flex; align-items:center; justify-content:space-between; gap:10px; position:sticky; top:0; background:#fff; padding-bottom:8px; z-index:1; flex-wrap: nowrap; 
flex-direction: column;}
.lb-title{font:900 16px Verdana}
.lb-price{font:900 16px Verdana}
.lb-desc ul{padding-left:18px; margin:8px 0 0; list-style:disc}
.lb-desc img{ max-width:100%; height:auto; display:block }
.lb-thumbs{display:flex; gap:8px; padding:4px 0; -webkit-overflow-scrolling:touch;}
.lb-thumbs button{flex:0 0 auto; width:64px; height:64px; padding:0; cursor:pointer; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)}
.lb-thumbs img{width:100%; height:100%; object-fit:cover; border-radius:10px; display:block}
.lb-thumbs .is-active{outline:2px solid var(--accent); outline-offset:2px}
.lb-actions{display:flex; gap:8px; margin-top:auto}
.lb-actions .btn{width:100%; padding:10px 14px; font-weight:900}

/* ========== 7) Footer ========== */
footer{border-top:1px solid var(--line); padding:18px; background:#fff}
.foot{max-width:1120px;margin:0 auto;display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted)}
.b88{width:88px;height:31px;border:1px solid var(--line);display:grid;place-items:center;font-weight:900;font-size:10px;text-transform:uppercase;background:#111;color:#fff;border-radius:6px}
.b88[style]{background:#111; color:#fff;}

/* Variant options in lightbox */
.lb-opts { display:grid; gap:10px; }
.opts { margin:0; padding:0; border:0; }
.opts-legend { font-weight:900; font-size:14px; margin-bottom:6px; }
.opt {
  display:flex; align-items:center; gap:10px;
  padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff;
}
.opt input { accent-color: var(--accent); }

/* ========== 8) Mobile & touch refinements ========== */
@media (max-width:480px){
  .inner{grid-template-columns:1fr auto; gap:8px; padding:8px 12px}
  .brand h1{font-size:16px}
  .sticker{width:38px; height:38px; border-radius:9px}
  .grid{gap:18px; padding:10px}
  .card{border-radius:12px}
  .media{aspect-ratio:1/1; border-bottom:1px solid var(--line)}
  .info{padding:10px}
  .actions{grid-template-columns:1fr 1fr; gap:8px}
  .btn{padding:10px 12px; font-size:14px}
}
@media (max-width:560px){
  .primary-nav{justify-content:flex-start; gap:8px; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding:8px 8px 10px; flex-wrap:nowrap; scroll-snap-type:x proximity}
  .primary-nav .chip{scroll-snap-align:start; white-space:nowrap; padding:10px 12px; min-height:44px; flex:0 0 auto}
  .ticker .row span{ font-size:13px; padding:6px 10px }
}
@media (max-width:520px){ .foot{ justify-content:center; gap:10px; text-align:center } }
@media (max-width:600px){
  .controls{grid-template-columns:1fr; gap:10px; padding:10px}
  .field input, .field select{font-size:16px; height:42px; border-radius:12px}
  .pick-grid{ grid-template-columns:repeat(2,1fr) }
  .pick{padding:14px}
  .pick h4{font-size:14px}
  .pick p{font-size:13px}
  .pick-banner{font-size:13.5px; padding:12px}
}
@media (max-width:420px){
  .pick-grid{ grid-template-columns:1fr }
  .toast{ max-width:calc(100vw - 16px) }
}

/* This is the new fix for the 'about' page */
@media (max-width: 720px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Mobile cart as side-drawer */
@media (max-width:768px){
  :root{ --cartW: min(86vw, 400px) }
  #cartDrawer{ position:fixed !important; top:0; right:0; bottom:0; width:var(--cartW) !important; max-width:none !important; height:100dvh; border-left:1px solid var(--line); border-radius:16px 0 0 16px; box-shadow:-8px 0 24px rgba(0,0,0,.25); background:#fff; z-index:1001; display:flex; flex-direction:column }
  #cartDrawer .cart-body{ flex:1 1 auto; min-height:0; overflow:auto }
  #backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:1000 }
}

/* ========== Lightbox 2.0 (MODIFIED FOR MOBILE) ========== */
@media (max-width: 720px) {
  .lb-shell {
    grid-template-columns: 1fr;
    height: 96vh;
    overflow-y: auto;
  }
  .lb-media {
    padding: 12px;
  }
  .lb-media img {
    max-height: none;
    height: auto;
    width: 100%;
    object-fit: contain;
  }
  .lb-thumbs {
    padding: 8px 0;
    justify-content: center;
  }
  .lb-thumbs button {
    width: 72px;
    height: 72px;
  }
  .lb-thumbs .is-active {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  .lb-meta {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .lb-head {
    position: static;
    display: block;
    text-align: center;
    padding-bottom: 0;
  }
  .lb-title {
    font-size: 18px;
    margin-bottom: 4px;
  }
  .lb-price {
    font-size: 16px;
    color: var(--muted);
  }
  .lb-desc {
    font-size: 15px;
    line-height: 1.6;
  }
  .lb-actions {
    flex-direction: column;
    margin-top: unset;
  }
}


/* Sticky Add-to-Cart inside lightbox */
.lb-meta{
  /* already scrollable in your CSS; keep it */
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.lb-actions{
  position: sticky;
  bottom: 0;
  z-index: 3;                 /* sit above content */
  background: linear-gradient(to bottom, rgba(255,255,255,.85), #fff);
  border-top: 1px solid var(--line);
  padding: 10px 0;            /* breathing room around the button */
  backdrop-filter: saturate(140%) blur(4px);
  -webkit-backdrop-filter: saturate(140%) blur(4px);
}

.lb-actions .btn{
  width: 100%;
  min-height: 48px;           /* comfy tap target */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 600px) {
  .primary-nav button.chip[aria-pressed="true"] {
    color: var(--ink) !important;
  }
}

/* --- iOS Safari: stop buttons/links from turning system-blue --- */
.primary-nav .chip,
.primary-nav .chip:visited,
.primary-nav .chip:active,
.primary-nav .chip:focus,
.primary-nav .chip[aria-pressed="true"],

.chip.subchip,
.chip.subchip:visited,
.chip.subchip:active,
.chip.subchip:focus,

.btn.add,
.btn.view,
.btn.add:visited,
.btn.view:visited,
.btn.add:active,
.btn.view:active,
.btn.add:focus,
.btn.view:focus,

.pager button,
#clearFilters,
#sort,

.lb-actions .btn,
.lb-actions .btn:visited,
.lb-actions .btn:active,
.lb-actions .btn:focus,

.lb-thumbs .is-active,   /* active image border in lightbox */


.about-cta .btn,
.about-cta .btn:visited,
.about-cta .btn:active,
.about-cta .btn:focus,

.remove,
.remove:visited,
.remove:active,
.remove:focus {
  color: var(--ink) !important;          /* force black text */
  -webkit-text-fill-color: var(--ink);   /* iOS-specific text tint */
  -webkit-appearance: none;              /* neutralize iOS button styling */
  appearance: none;
  text-decoration: none;
}

/* Force outline color on lightbox active thumb */
.lb-thumbs .is-active {
  outline-color: var(--accent) !important;
  -webkit-text-fill-color: initial; /* prevents Safari from tinting outline */
}

/* ⚡ mobile perf: disable heavy effects */
@media (max-width: 600px){
  header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  body::after{ display:none !important; } /* remove SVG turbulence layer */
  .window, .card, .drawer{ box-shadow: none !important; } /* cheaper paint */
}

  .lb-actions{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:#fff; /* keep it readable */
  }


  /* --- Perf: lighten sticky actions bar on mobile --- */
@media (max-width: 720px) {
  .lb-actions{
    /* remove the expensive blur on Mobile Safari */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff;                 /* solid bg instead of translucent */
    box-shadow: 0 -1px 0 var(--line); /* light separator */
  }
}

/* --- Perf: promote to its own layer (smoother taps/scroll) --- */
.lb-shell, .lb-meta, .lb-actions {
  will-change: transform;
  transform: translateZ(0);
}

/* Optional: trim shadows on option rows for cheaper repaints */
.lb-opts .opt {
  box-shadow: none;
}

/* --- LIGHTBOX: mobile stability --- */
.lb,
.lb-shell,
.lb-media,
.lb-meta {
  overscroll-behavior: contain;   /* prevent scroll from bubbling to page/backdrop */
}

.lb-backdrop {
  touch-action: none;             /* don't turn vertical swipes into "clicks" */
}

.lb-actions {
  -webkit-user-select: none;      /* avoid long-press highlighting = ghost clicks */
  user-select: none;
}


/* ===== Mobile perf boosts (no visual/logic change) ===== */

/* a) iOS blur is pricey — disable backdrop-filter on small screens */
@media (max-width: 720px){
  header{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* b) Touch devices don't need hover elevation (saves repaints) */
@media (hover: none){
  .card:hover{ transform: none !important; }
}

/* c) Virtualize off-screen blocks to cut layout/paint cost */
.card,
.window .content,
.lb-meta,
.cart-body{
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}

/* d) Help image layout: reserve space & let browser skip decoding offscreen */
.media img{
  content-visibility: auto;
  contain-intrinsic-size: 600px 600px; /* fallback box for fast layout */
}





/* --- Performance: pause animations while lightbox is open --- */
body.lb-open * {
  animation-play-state: paused !important;
}
body.lb-open .ticker { 
  display: none !important; 
}

/* --- Performance: drop blur filters on small screens --- */
@media (max-width: 720px) {
  .lb-backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .lb-actions {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff; /* solid fallback */
  }
}

/* --- Toast: final overrides --- */
/* 1) When hidden, don't block taps */
.toast{
  visibility: hidden;
  pointer-events: none;
}

/* When shown, restore interactivity */
.toast.show{
  visibility: visible;
  pointer-events: auto;
}

/* 2) On small screens, keep toast clear of the lightbox CTA */
@media (max-width: 720px){
  body.lb-open .toast{
    bottom: calc(80px + env(safe-area-inset-bottom)); /* ~48px button + padding */
  }
}


/* --- Lightbox mobile perf: stop expensive blur on option taps --- */
@media (max-width: 720px){
  .lb-actions{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #fff;                 /* keep the soft gradient feel if you want: 
                                          background: linear-gradient(to bottom, rgba(255,255,255,.92), #fff); */
  }
}

/* Promote lightbox surfaces so they animate/paint on their own layers */
.lb, .lb-backdrop, .lb-shell, .lb-meta, .lb-actions{
  will-change: transform, opacity;
  transform: translateZ(0);
  contain: paint;    /* isolates paints in these regions */
}

/* ========== Meet the Dolls ========== */
.meet-wrap { padding: 16px; }

@media (max-width: 840px){  }

.doll-card {
  background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  display:grid; }
@media (max-width: 840px){ .doll-card { } }

.doll-photo{ background:#faf9ff; border-right:1px solid var(--line); display:grid; place-items:center; padding:12px }
.doll-photo img{ max-width:100%; height:auto; border-radius:12px; display:block }

.doll-body{ padding:16px; display:grid; gap:12px }
.doll-name{ font:900 20px Verdana }
.doll-story{ line-height:1.7 }

.meta{ display:grid; gap:8px; background:#fff; border:1px dashed var(--line); border-radius:12px; padding:12px }
.meta h4{ margin:0; font:800 13px Verdana; letter-spacing:.3px; text-transform:uppercase; color:#544f7a }
.meta-list{ margin:0; padding-left:18px }
.swatches{ display:flex; gap:8px; align-items:center }
.swatch{ width:18px; height:18px; border-radius:50%; border:1px solid var(--line); box-shadow:var(--shadow) }


/* --- Meet the Dolls: desktop readability polish --- */
@media (min-width: 840px){
  .doll-name{ font-size:22px; }
  .doll-story{ max-width: 62ch; }
}


/* === Meet the Dolls: keep mobile original, refine desktop only === */
@media (max-width: 899px){
  /* Make sure doll cards stack cleanly on small screens */
  .doll-card{ grid-template-columns: 1fr !important; display: grid; gap: 12px; }
  .doll-photo{ max-width: 520px; margin: 0 auto; }
}

@media (min-width: 900px){
  .meet-grid{ display:grid; grid-template-columns: 1fr; gap:18px; max-width: 980px; margin: 0 auto; }
  .doll-card{
    display:grid;
    grid-template-columns: clamp(280px, 38%, 420px) 1fr;
    gap:16px;
    align-items: stretch;      /* <-- fill full row height */
  }
  .doll-photo{ align-self: stretch; } /* ensure the left pane stretches */
}


/* Scrollable story panel (desktop + mobile) */
.doll-story{
  max-height: 150px;           /* desktop height */
  overflow: auto;
  padding-right: 8px;          /* room for scrollbar */
  background: #fff;
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  line-height: 1.6;
  -webkit-overflow-scrolling: touch; /* smooth iOS scroll */
  scrollbar-width: thin;       /* Firefox */
  overscroll-behavior: contain;
}

/* Optional: slim, unobtrusive scrollbar (WebKit) */
.doll-story::-webkit-scrollbar{ width: 8px; }
.doll-story::-webkit-scrollbar-track{ background: transparent; }
.doll-story::-webkit-scrollbar-thumb{
  background: #ddd;
  border-radius: 999px;
  border: 2px solid #fff;
}

/* Mobile: slightly shorter so layout stays tidy */
@media (max-width: 720px){
  .doll-story{ max-height: 160px; }
}

/* Optional: focus ring for keyboard users */
.doll-story:focus{ outline: 2px solid var(--accent); outline-offset: 2px; }

/* Body: crisp Win98/XP feel */
body{
  font-family: Tahoma, Verdana, Arial, sans-serif;
  line-height: 1.55;
}

/* Window titles & doll names: classic Georgia */
.titlebar h2,
.doll-name,
h3{
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: 700;
}

/* UI elements: friendly Trebuchet MS */
.btn,
.chip,
.about-chip,
.pager button,
.cart-title,
.qty input,
.remove{
  font-family: "Trebuchet MS", "Segoe UI", Tahoma, sans-serif;
  font-weight: 800;
}

/* Keep the logo’s retro monospace (optional) */
.brand h1{
  font-family: "Courier New", Courier, ui-monospace, monospace;
  font-weight: 700;
  letter-spacing: .2px;
}

/* Meet the Dolls – add mobile spacing */
.meet-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;            /* space between the two doll cards */
}

/* Optional: nicer border when stacked on mobile */
@media (max-width: 899px){
  .doll-photo{ border-right: 0; border-bottom: 1px solid var(--line); }
}

/* --- Meet the Dolls: inline mini-gallery --- */
.doll-gallery{ display:grid; gap:10px }
.doll-main{ position:relative; background:#faf9ff; border:1px solid var(--line); border-radius:12px; padding:8px; display:grid; place-items:center }
.doll-main img{ max-width:100%; height:auto; object-fit:contain; border-radius:10px; display:block }
.doll-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  border:1px solid var(--line); background:#fff; border-radius:999px;
  padding:6px 10px; font-weight:900; cursor:pointer; user-select:none
}
.doll-nav.prev{ left:8px } .doll-nav.next{ right:8px }

.doll-thumbs button{
  flex:0 0 auto; width:64px; height:64px; padding:0; cursor:pointer;
  background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow)
}
.doll-thumbs img{ width:100%; height:100%; object-fit:cover; border-radius:10px; display:block }
.doll-thumbs .is-active{ outline:2px solid var(--accent); outline-offset:2px }

/* Desktop tidy */
@media (min-width:900px){
  .doll-photo{ padding:12px 12px 2px }  /* breathing room */
  .doll-gallery{ align-content:start }
}

/* Mobile: keep cards separated & readable */
@media (max-width:899px){
  .meet-grid{ gap:16px }                 /* space between doll cards */
  .doll-thumbs button{ width:72px; height:72px }
}