/* style.css - Christmas blue/gold theme with animations */
:root{
  --bg1: #0a1f3f;
  --bg2: #1a3a6b;
  --card: rgba(255,255,255,0.06);
  --accent: #ffd166;
  --glass: rgba(255,255,255,0.04);
  --muted: rgba(255,255,255,0.8);
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Prompt',system-ui,Segoe UI,Arial,sans-serif}
/* Global rice (paper) background */
html{background:#ffffff}
a{color:var(--accent)}
.snow{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:0}
/* soft aurora background overlay */
/* Disable aurora overlay for rice theme; keep only when not bookstore */
/* Override: disable colored aurora overlays for plain white background */
body:not(.bookstore)::before, body:not(.bookstore)::after{
  content:none !important; background:none !important; animation:none !important; display:none !important;
}
@keyframes auroraMove{0%{transform:translate3d(-2%, -1%, 0) scale(1)}100%{transform:translate3d(2%, 2%, 0) scale(1.05)}}
@keyframes auroraMove2{0%{transform:translate3d(1%, 2%, 0) scale(1)}100%{transform:translate3d(-2%, -2%, 0) scale(1.04)}}
header{position:sticky;top:0;background:linear-gradient(90deg,rgba(0,0,0,0.25),transparent);backdrop-filter:blur(4px);padding:12px 20px;z-index:20}
.header-inner{display:flex;justify-content:space-between;align-items:center;gap:16px}
.header-left h1{margin:0;font-size:20px}
.header-actions{display:flex;align-items:center;gap:10px}
.btn{background:linear-gradient(90deg,#4a90e2,#7b68ee);border:none;padding:8px 12px;border-radius:10px;color:#fff;cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,0.4);transition:transform .18s ease;position:relative;overflow:hidden}
.btn:hover{transform:translateY(-3px)}
.container{display:flex;gap:18px;padding:18px;max-width:1200px;margin:18px auto;position:relative;z-index:5}
.sidebar{width:1050px;padding:16px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.02));border:1px solid var(--glass)}
.content{flex:1}
.hero{width:100%;padding:12px 0 6px;display:flex;justify-content:center;align-items:center;position:relative;z-index:6}
.hero-inner{max-width:1200px;width:100%;display:flex;gap:24px;align-items:center;justify-content:flex-start;flex-wrap:wrap}
.tree-wrap{margin-right:24px}
.tree-wrap{flex:0 0 300px;display:flex;justify-content:center;align-items:center}
.tree{width:280px;height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,0.6));transform-origin:center bottom;animation:treePop .8s cubic-bezier(.2,.9,.3,1)}
.hero-text{color:#fff;max-width:1000px;width:min(95vw,1000px);margin:0 auto}
.hero-text h2{margin:0 0 8px 0;font-size:28px;letter-spacing:0.3px}
.hero-text .lead{margin:0 0 12px 0;opacity:0.95}
.hero-ctas{display:flex;gap:10px}
/* glass card look for hero text */
.hero-text{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:16px;
  box-shadow: 0 18px 50px rgba(0,0,0,0.45);
  position:relative;
}
/* subtle animated shimmer along the glass card border */
.hero-text::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding:1px; opacity:.0;
  animation: heroShine 5.5s ease-in-out infinite;
}
@keyframes heroShine{0%,100%{opacity:.0; transform:translateX(-10%)}50%{opacity:.7; transform:translateX(10%)}}

/* centered search bar under hero text */
.search-bar-center{
  width:min(95vw, 860px);
  margin:12px auto 14px;
  padding:0; /* เธเธฃเธญเธšเธˆเธฒเธ‡เน„เธ›เธœเธนเธเธเธฑเธšเน€เธกเน‡เธ”เนเธ„เธ›เธ‹เธนเธฅเนเธ—เธ™ เน€เธžเธทเนˆเธญเนƒเธซเน‰เธขเธฒเธงเน€เธ—เนˆเธฒเธเธฑเธ™เน€เธ›เนŠเธฐ */
  border-radius:16px;
  background: transparent;
  box-shadow: none;
}

/* tree twinkle & ornament animations */
.orn{animation:ornBlink 3s infinite alternate ease-in-out;transform-origin:center}
.orn:nth-of-type(1){animation-delay:0.1s}
.orn:nth-of-type(2){animation-delay:0.4s}
.orn:nth-of-type(3){animation-delay:0.7s}
.orn:nth-of-type(4){animation-delay:1.0s}
.orn:nth-of-type(5){animation-delay:1.3s}
.orn:nth-of-type(6){animation-delay:1.6s}
.star{filter:drop-shadow(0 6px 10px rgba(255,210,90,0.15));animation:starPulse 2s infinite ease-in-out}

@keyframes ornBlink{from{transform:scale(0.9);opacity:0.7}to{transform:scale(1.12);opacity:1}}
@keyframes starPulse{0%{transform:scale(.92);opacity:.9}50%{transform:scale(1.08);opacity:1}100%{transform:scale(.92);opacity:.9}}
@keyframes treePop{0%{transform:scale(.82) translateY(8px);opacity:0}60%{transform:scale(1.03) translateY(-4px);opacity:1}100%{transform:scale(1) translateY(0);opacity:1}}

/* center snow density over hero (visual) */
.hero + .container{margin-top:6px}
.map-box{height:320px;border-radius:12px;border:1px solid var(--glass);overflow:hidden;background:linear-gradient(180deg,rgba(0,0,0,0.15),transparent)}
.store-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-top:6px}
.store-card{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.04);position:relative;overflow:hidden;box-shadow:0 6px 20px rgba(0,0,0,0.45);transform:translateY(12px);opacity:0;animation:fadeInUp .6s ease forwards}
.store-card h3{margin:0 0 6px 0;font-size:16px}
.store-card .meta{font-size:12px;opacity:0.9;margin-bottom:8px;color:var(--muted)}
.store-card .address{font-size:13px;margin:6px 0;color:#fff}
.store-card .phone,.store-card .hours{font-size:13px;margin:3px 0;opacity:0.95}
.store-card .tags{font-size:12px;margin-top:8px;padding:6px;border-radius:8px;background:linear-gradient(90deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));display:inline-block}
.store-card .rating{position:absolute;right:10px;top:10px;background:rgba(0,0,0,0.25);padding:6px 8px;border-radius:8px;font-weight:600}
.store-card:hover{transform:translateY(-6px) scale(1.01);transition:transform .22s cubic-bezier(.2,.9,.3,1)}
/* sheen on hover */
.store-card::after{
  content:""; position:absolute; top:0; left:-30%; width:30%; height:100%;
  background: linear-gradient(90deg, rgba(255,255,255,0.00), rgba(255,255,255,0.10), rgba(255,255,255,0.00));
  transform:skewX(-20deg); filter:blur(1px); opacity:0; transition:opacity .25s, left .6s; pointer-events:none;
}
.store-card:hover::after{opacity:1; left:110%}

/* make card fully clickable with subtle press animation */
.store-card.clickable{cursor:pointer; transition:transform .18s ease, box-shadow .22s ease}
.store-card.clickable:active{transform:translateY(-2px) scale(.995)}

/* Sponsor highlight styles */
.store-card.sponsor{
  border:1px solid rgba(255,230,120,0.55);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)),
              radial-gradient(120% 100% at 0% 0%, rgba(255,215,110,0.15), transparent 50%);
  box-shadow: 0 14px 40px rgba(255,210,90,0.18), 0 10px 30px rgba(0,0,0,0.55);
  animation: sponsorPulse 3.6s ease-in-out infinite;
}
.store-card.sponsor .rating{background:linear-gradient(90deg,#ffdd66,#ffb347); color:#2a1a00}
.sponsor-ribbon{
  position:absolute; left:-10px; top:10px; padding:6px 14px 6px 18px; color:#2a1a00; font-weight:700;
  background: linear-gradient(90deg,#ffe38a,#ffc35b);
  border:1px solid rgba(255,215,110,0.6); border-top-right-radius:999px; border-bottom-right-radius:999px;
  box-shadow: 0 8px 20px rgba(255,195,90,0.35);
}
.store-card.sponsor .store-img{height:160px !important}
@keyframes sponsorPulse{0%{filter:drop-shadow(0 0 0 rgba(255,210,90,0.0))}50%{filter:drop-shadow(0 0 16px rgba(255,210,90,0.35))}100%{filter:drop-shadow(0 0 0 rgba(255,210,90,0.0))}}

/* Sponsor hero banner */
.sponsor-hero{position:relative; display:flex; align-items:center; justify-content:center; padding:18px 0 6px; z-index:8}
.sponsor-hero .hero-box{
  width:min(1200px,95vw); display:grid; grid-template-columns: 340px 1fr; gap:18px; align-items:center;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.1); border-radius:18px; padding:14px; position:relative; overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,0.5);
}
.sponsor-hero .img-wrap{position:relative; border-radius:14px; overflow:hidden; height:220px;}
.sponsor-hero img{width:100%; height:100%; object-fit:cover; display:block}
.sponsor-hero .badge{position:absolute; top:10px; left:10px; background:linear-gradient(90deg,#ffe38a,#ffc35b); color:#2a1a00; padding:6px 10px; border-radius:999px; font-weight:700; border:1px solid rgba(255,215,110,0.6)}
.sponsor-hero .txt h3{margin:0 0 6px 0; font-size:22px}
.sponsor-hero .txt .meta{opacity:0.9}
.sponsor-hero .cta{display:flex; gap:8px; margin-top:10px}
.sponsor-hero::before{
  content:""; position:absolute; inset:-10%; pointer-events:none; border-radius:20px; z-index:-1;
  background: radial-gradient(40% 40% at 10% 30%, rgba(255,215,110,0.22), transparent 60%),
              radial-gradient(40% 40% at 90% 30%, rgba(0,200,255,0.18), transparent 60%);
  animation: auroraSponsor 16s ease-in-out infinite alternate;
}
@keyframes auroraSponsor{0%{transform:translateY(0)}100%{transform:translateY(10px)}}

/* lightweight modal (CSS classes) */
.overlay-sheet{position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(2px);z-index:999;animation:fadeIn .18s ease}
.modal-panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);opacity:0;width:min(680px,95vw);max-height:85vh;overflow:auto;background:#ffffff;border:1px solid rgba(0,0,0,0.08);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.35);z-index:1000;animation:popIn .22s cubic-bezier(.2,.9,.3,1) forwards}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(0,0,0,0.06)}
.modal-body{padding:14px;color:#222}
.modal-close{background:none;border:0;color:#fff;font-size:22px;cursor:pointer;width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.modal-actions{display:flex;gap:8px;margin-top:10px}
@keyframes popIn{to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* animated gradient head + store detail image */
.color-animate{
  background: linear-gradient(120deg,#ff758c,#ff7eb3,#7aa2ff,#00d4ff);
  background-size:300% 300%;
  animation: gradientShift 9s ease-in-out infinite;
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
.store-detail-img-wrap{width:100%;height:180px;border-radius:12px;overflow:hidden;margin:0 0 12px;position:relative;background:linear-gradient(120deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));}
.store-detail-img{width:100%;height:100%;object-fit:cover;display:block;animation:fadeImg .6s ease}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes fadeImg{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* staggered entrance */
.store-card:nth-child(1){animation-delay:0.05s}
.store-card:nth-child(2){animation-delay:0.10s}
.store-card:nth-child(3){animation-delay:0.15s}
.store-card:nth-child(4){animation-delay:0.20s}
.store-card:nth-child(5){animation-delay:0.25s}
.store-card:nth-child(6){animation-delay:0.30s}
.store-card:nth-child(7){animation-delay:0.35s}
.store-card:nth-child(8){animation-delay:0.40s}
.store-card:nth-child(9){animation-delay:0.45s}
.store-card:nth-child(10){animation-delay:0.50s}
.store-card:nth-child(11){animation-delay:0.55s}
.store-card:nth-child(12){animation-delay:0.60s}
.store-card:nth-child(13){animation-delay:0.65s}
.store-card:nth-child(14){animation-delay:0.70s}
.store-card:nth-child(15){animation-delay:0.75s}
.store-card:nth-child(16){animation-delay:0.80s}
.store-card:nth-child(17){animation-delay:0.85s}
.store-card:nth-child(18){animation-delay:0.90s}

@keyframes fadeInUp{to{transform:translateY(0);opacity:1}}

/* per-line slide-in animation for store details */
.store-card .meta, .store-card .address, .store-card .phone, .store-card .hours{
  transform:translateX(-8px);
  opacity:0;
  animation-name:slideInLeft;
  animation-duration:.45s;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.2,.9,.3,1);
}

@keyframes slideInLeft{
  from{transform:translateX(-8px);opacity:0}
  to{transform:translateX(0);opacity:1}
}

/* stagger per-card so lines appear after card entrance */
.store-card:nth-child(1)  .meta{animation-delay:0.15s}
.store-card:nth-child(1)  .address{animation-delay:0.25s}
.store-card:nth-child(1)  .phone{animation-delay:0.35s}
.store-card:nth-child(1)  .hours{animation-delay:0.45s}
.store-card:nth-child(2)  .meta{animation-delay:0.20s}
.store-card:nth-child(2)  .address{animation-delay:0.30s}
.store-card:nth-child(2)  .phone{animation-delay:0.40s}
.store-card:nth-child(2)  .hours{animation-delay:0.50s}
.store-card:nth-child(3)  .meta{animation-delay:0.25s}
.store-card:nth-child(3)  .address{animation-delay:0.35s}
.store-card:nth-child(3)  .phone{animation-delay:0.45s}
.store-card:nth-child(3)  .hours{animation-delay:0.55s}
.store-card:nth-child(4)  .meta{animation-delay:0.30s}
.store-card:nth-child(4)  .address{animation-delay:0.40s}
.store-card:nth-child(4)  .phone{animation-delay:0.50s}
.store-card:nth-child(4)  .hours{animation-delay:0.60s}
.store-card:nth-child(5)  .meta{animation-delay:0.35s}
.store-card:nth-child(5)  .address{animation-delay:0.45s}
.store-card:nth-child(5)  .phone{animation-delay:0.55s}
.store-card:nth-child(5)  .hours{animation-delay:0.65s}
.store-card:nth-child(6)  .meta{animation-delay:0.40s}
.store-card:nth-child(6)  .address{animation-delay:0.50s}
.store-card:nth-child(6)  .phone{animation-delay:0.60s}
.store-card:nth-child(6)  .hours{animation-delay:0.70s}
.store-card:nth-child(7)  .meta{animation-delay:0.45s}
.store-card:nth-child(7)  .address{animation-delay:0.55s}
.store-card:nth-child(7)  .phone{animation-delay:0.65s}
.store-card:nth-child(7)  .hours{animation-delay:0.75s}
.store-card:nth-child(8)  .meta{animation-delay:0.50s}
.store-card:nth-child(8)  .address{animation-delay:0.60s}
.store-card:nth-child(8)  .phone{animation-delay:0.70s}
.store-card:nth-child(8)  .hours{animation-delay:0.80s}
.store-card:nth-child(9)  .meta{animation-delay:0.55s}
.store-card:nth-child(9)  .address{animation-delay:0.65s}
.store-card:nth-child(9)  .phone{animation-delay:0.75s}
.store-card:nth-child(9)  .hours{animation-delay:0.85s}
.store-card:nth-child(10) .meta{animation-delay:0.60s}
.store-card:nth-child(10) .address{animation-delay:0.70s}
.store-card:nth-child(10) .phone{animation-delay:0.80s}
.store-card:nth-child(10) .hours{animation-delay:0.90s}
.store-card:nth-child(11) .meta{animation-delay:0.65s}
.store-card:nth-child(11) .address{animation-delay:0.75s}
.store-card:nth-child(11) .phone{animation-delay:0.85s}
.store-card:nth-child(11) .hours{animation-delay:0.95s}
.store-card:nth-child(12) .meta{animation-delay:0.70s}
.store-card:nth-child(12) .address{animation-delay:0.80s}
.store-card:nth-child(12) .phone{animation-delay:0.90s}
.store-card:nth-child(12) .hours{animation-delay:1.00s}
.store-card:nth-child(13) .meta{animation-delay:0.75s}
.store-card:nth-child(13) .address{animation-delay:0.85s}
.store-card:nth-child(13) .phone{animation-delay:0.95s}
.store-card:nth-child(13) .hours{animation-delay:1.05s}
.store-card:nth-child(14) .meta{animation-delay:0.80s}
.store-card:nth-child(14) .address{animation-delay:0.90s}
.store-card:nth-child(14) .phone{animation-delay:1.00s}
.store-card:nth-child(14) .hours{animation-delay:1.10s}
.store-card:nth-child(15) .meta{animation-delay:0.85s}
.store-card:nth-child(15) .address{animation-delay:0.95s}
.store-card:nth-child(15) .phone{animation-delay:1.05s}
.store-card:nth-child(15) .hours{animation-delay:1.15s}
.store-card:nth-child(16) .meta{animation-delay:0.90s}
.store-card:nth-child(16) .address{animation-delay:1.00s}
.store-card:nth-child(16) .phone{animation-delay:1.10s}
.store-card:nth-child(16) .hours{animation-delay:1.20s}
.store-card:nth-child(17) .meta{animation-delay:0.95s}
.store-card:nth-child(17) .address{animation-delay:1.05s}
.store-card:nth-child(17) .phone{animation-delay:1.15s}
.store-card:nth-child(17) .hours{animation-delay:1.25s}
.store-card:nth-child(18) .meta{animation-delay:1.00s}
.store-card:nth-child(18) .address{animation-delay:1.10s}
.store-card:nth-child(18) .phone{animation-delay:1.20s}
.store-card:nth-child(18) .hours{animation-delay:1.30s}

/* subtle header shimmer */
header h1{position:relative;overflow:hidden}
header h1::after{content:'';position:absolute;left:-40%;top:0;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);transform:skewX(-20deg);animation:shimmer 3.5s linear infinite}
@keyframes shimmer{to{left:120%}}

/* responsive */
@media (max-width:900px){.container{flex-direction:column;padding:12px}.sidebar{width:100%}.store-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
/* make hero card full-width on small screens and hide tree */
@media (max-width:900px){
  .tree-wrap{display:none}
  .hero-text{max-width:none;width:calc(100vw - 32px)}
  .search-bar-center{width:calc(100vw - 32px)}
}

/* button pulse for nearby */
.btn:active{transform:translateY(-1px) scale(.995)}
/* ripple effect on press */
.btn::after{content:""; position:absolute; inset:0; background:radial-gradient(120px 120px at center, rgba(255,255,255,0.18), transparent 70%); transform:scale(0); transition:transform .25s, opacity .35s; opacity:0}
.btn:active::after{transform:scale(1); opacity:1}

/* active state for category buttons */
.btn.active{
  background: rgba(255,255,255,0.16);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.18);
  outline: 2px solid rgba(255,255,255,0.25);
}

/* small count badge on buttons */
.btn .count-badge{
  display:inline-block;
  margin-left:6px;
  padding:1px 6px;
  border-radius:999px;
  font-size:12px;
  background:rgba(255,255,255,0.18);
}

/* subtle glow on map area when hovered */
.map-box:hover{box-shadow:0 10px 30px rgba(0,0,0,0.6)}

/* filter rows container glow */
.category-row, .type-row{
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:14px; padding:4px 6px; box-shadow:0 8px 22px rgba(0,0,0,0.40);
}
.category-row .btn, .type-row .btn{
  background: linear-gradient(90deg, #ff758c, #ff7eb3, #7aa2ff, #00d4ff);
  background-size: 300% 100%;
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 8px 20px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.06);
  animation: filterGradient 8s ease-in-out infinite;
}
.category-row .btn.active, .type-row .btn.active{
  outline: 2px solid rgba(255,255,255,0.35);
}
@keyframes filterGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* small snow particle styling */
.snow div{position:absolute;top:-10px;background:rgba(255,255,255,0.9);border-radius:50%;filter:blur(0.3px);animation:fall linear infinite}
@keyframes fall{to{transform:translateY(110vh);opacity:0}}

/* footer */
.footer{text-align:center;padding:14px 6px;color:rgba(255,255,255,0.8);font-size:13px}

/* utility */
.muted{opacity:0.8}

/* small accessibility improvement */
button:focus{outline:2px solid rgba(255,255,255,0.12);outline-offset:2px}
/* style.css - Christmas theme (red/green) with snow animation */
:root{
  --red1:#c72b2b;
  --red2:#ff6b6b;
  --green1:#0b6b3b;
  --bg1:#081021;
  --glass: rgba(255,255,255,0.04);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Prompt', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  background:#ffffff !important; /* Plain white background per request */
  color:#000; /* switch text to dark for readability on white */
  -webkit-font-smoothing:antialiased;
}
header{
  background: linear-gradient(90deg,var(--red1),var(--red2));
  padding:12px 12px; position:sticky; top:0; z-index:60; box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.header-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 12px;gap:12px}
.header-left h1{margin:0;font-size:20px}
.header-actions{display:flex;gap:10px;align-items:center}
.btn{background:rgba(255,255,255,0.08);border:0;padding:8px 12px;border-radius:10px;color:#fff;cursor:pointer}
.container{max-width:1200px;margin:12px auto;display:grid;grid-template-columns:minmax(420px,560px) 1fr;gap:12px;padding:0 12px;position:relative;z-index:10}


/* เธ–เน‰เธฒเธ•เน‰เธญเธ‡เธเธฒเธฃเนƒเธซเน‰เธเธฃเธญเธšเธžเธทเน‰เธ™เธซเธฅเธฑเธ‡เธ‚เธญเธ‡ sidebar เธขเธทเนˆเธ™เธŠเธดเธ”เธ‹เน‰เธฒเธขเธกเธฒเธเธ‚เธถเน‰เธ™เน‚เธ”เธขเน„เธกเนˆเธเธฃเธฐเธ—เธšเธ„เธงเธฒเธกเธชเธนเธ‡
   เนƒเธซเน‰เธขเธเน€เธฅเธดเธเธฃเธฐเธขเธฐ padding เธ‹เน‰เธฒเธขเธ‚เธญเธ‡เธ„เธญเธ™เน€เธ—เธ™เน€เธ™เธญเธฃเนŒเธ”เน‰เธงเธข margin เธฅเธš เนเธฅเน‰เธงเธŠเธ”เน€เธŠเธขเธ”เน‰เธงเธข padding-left เน€เธžเธดเนˆเธก
   เน€เธ›เธดเธ”เธšเธฃเธฃเธ—เธฑเธ”เน€เธซเธฅเนˆเธฒเธ™เธตเน‰เธ–เน‰เธฒเธ•เน‰เธญเธ‡เธเธฒเธฃเน€เธญเธŸเน€เธŸเธเธ•เนŒเธŠเธดเธ”เธ‹เน‰เธฒเธขเธˆเธฃเธดเธ‡เน† */
/*
.sidebar{
  margin-left:-18px;                 
  padding-left:calc(18px + 18px);   
}
*/
.content{min-height:70vh}
.store-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.card h3{margin:0 0 6px}
.badge{display:inline-block;padding:4px 8px;border-radius:20px;background:rgba(255,255,255,0.04);font-size:12px;margin-right:6px}
.comment-input, textarea{width:100%;min-height:64px;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:#fff}
.comment-list{list-style:none;padding:0;margin-top:8px}
.comment-item{padding:8px;border-radius:8px;background:rgba(0,0,0,0.2);margin-bottom:8px}
.map-box{height:420px;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.footer{padding:18px;text-align:center;color:rgba(255,255,255,0.7)}

/* snowflakes (CSS) */
.snow{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:40}
.snow div{position:absolute;top:-10vh;background:transparent;width:8px;height:8px;border-radius:50%;box-shadow:0 0 8px rgba(255,255,255,0.8);opacity:0.9;animation:fall linear infinite}
@keyframes fall{to{transform:translateY(120vh) rotate(360deg);opacity:0.3}}
.snow div:nth-child(1){left:5%;animation-duration:12s;animation-delay:0s;transform:scale(0.8)}
.snow div:nth-child(2){left:15%;animation-duration:9s;animation-delay:1s;transform:scale(0.6)}
.snow div:nth-child(3){left:25%;animation-duration:14s;animation-delay:2s;transform:scale(1.0)}
.snow div:nth-child(4){left:35%;animation-duration:10s;animation-delay:3s;transform:scale(0.5)}
.snow div:nth-child(5){left:45%;animation-duration:11s;animation-delay:4s;transform:scale(0.9)}
.snow div:nth-child(6){left:55%;animation-duration:13s;animation-delay:5s;transform:scale(0.7)}
.snow div:nth-child(7){left:65%;animation-duration:8s;animation-delay:1.2s;transform:scale(0.6)}
.snow div:nth-child(8){left:75%;animation-duration:15s;animation-delay:0.6s;transform:scale(1.1)}
.snow div:nth-child(9){left:85%;animation-duration:12s;animation-delay:2.1s;transform:scale(0.8)}
.snow div:nth-child(10){left:92%;animation-duration:9s;animation-delay:3.3s;transform:scale(0.5)}

/* responsive */
@media (max-width:900px){.container{grid-template-columns:1fr;padding:0 12px}.sidebar{position:sticky;top:72px}}

/* === Neon blue search pill (input inside button-like container) === */
.search-pill{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  border-radius:999px;
  padding:10px 12px;
  background: radial-gradient(120% 100% at 0% 0%, rgba(80,160,255,0.25), transparent 40%),
              linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border:1px solid rgba(80,160,255,0.35);
  box-shadow: 0 0 20px rgba(80,160,255,0.20), inset 0 0 10px rgba(30,90,180,0.25);
  transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
  position:relative;
}
.search-pill:hover{
  transform: translateY(-2px);
  box-shadow: 0 0 28px rgba(90,170,255,0.28), inset 0 0 12px rgba(30,100,200,0.35);
  border-color: rgba(110,190,255,0.55);
}
.search-pill:focus-within{
  border-color: rgba(130,210,255,0.85);
  box-shadow: 0 0 36px rgba(110,190,255,0.35), inset 0 0 14px rgba(30,110,220,0.45);
}
/* animated neon ring */
.search-pill::before{
  content:""; position:absolute; inset:-2px; border-radius:999px; padding:2px;
  background: linear-gradient(90deg, rgba(30,200,255,0.0), rgba(30,200,255,0.55), rgba(120,110,255,0.55), rgba(30,200,255,0.55), rgba(30,200,255,0.0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:.35; filter: blur(.5px);
  animation: ringShift 4.5s linear infinite;
  pointer-events:none;
}
@keyframes ringShift{from{background-position:0 0}to{background-position:200% 0}}
.search-pill::after{
  /* เธเธฃเธญเธšเธˆเธฒเธ‡เธ เธฒเธขเธ™เธญเธ เนƒเธซเน‰เธขเธฒเธงเน€เธ—เนˆเธฒเธเธฑเธšเธเธฃเธญเธšเธซเธฅเธฑเธเน€เธชเธกเธญ */
  content:""; position:absolute; inset:-10px; border-radius:inherit; pointer-events:none; z-index:-1;
  background: radial-gradient(100% 100% at 10% 0%, rgba(80,160,255,0.10), transparent 50%);
  box-shadow: inset 0 0 0 1px rgba(80,160,255,0.15), 0 10px 30px rgba(0,0,0,0.35);
}
.pill-icon{font-size:18px;filter: drop-shadow(0 0 8px rgba(90,170,255,0.6))}
.pill-input{
  flex:1;
  min-width:0;
  background: transparent;
  border: none;
  color: #eaf5ff;
  font-size: 14px;
  outline: none;
}
.pill-input::placeholder{color: rgba(220,240,255,0.6)}
.pill-go{
  background: linear-gradient(90deg, #2196f3, #00bcd4);
  color:#fff;
  border:none;
  padding:8px 12px;
  border-radius:999px;
  cursor:pointer;
  box-shadow: 0 6px 20px rgba(0, 150, 255, 0.35);
  transition: transform .18s ease, box-shadow .2s ease;
  border-left: 1px solid rgba(255,255,255,0.18);
}
.pill-go:hover{ transform: translateY(-2px); box-shadow:0 10px 28px rgba(0,160,255,0.45) }

/* subtle animated orbs behind hero */
.hero::before, .hero::after{
  content:""; position:absolute; z-index:0; border-radius:50%; filter: blur(40px); opacity:.25;
}
.hero::before{ width:260px; height:260px; left:55%; top:-40px; background: radial-gradient(closest-side, rgba(70,140,255,0.7), transparent); animation: floatOrb1 16s ease-in-out infinite; }
.hero::after{ width:200px; height:200px; left:78%; top:40px; background: radial-gradient(closest-side, rgba(0,200,255,0.6), transparent); animation: floatOrb2 18s ease-in-out infinite; }
@keyframes floatOrb1{ 0%{transform:translateY(0)} 50%{transform:translateY(18px)} 100%{transform:translateY(0)} }
@keyframes floatOrb2{ 0%{transform:translateY(0)} 50%{transform:translateY(-16px)} 100%{transform:translateY(0)} }

/* === Layout fixes & modern polish overrides === */
/* Ensure the sidebar doesn't stretch too wide from older rules */
.sidebar{
  width:100% !important;
  max-width:860px;
}
.container{
  max-width:1280px;
}
/* Consistent grid with comfortable minimum card width */
.store-grid{
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
/* Nicer buttons inside cards */
.store-card .btn{
  background: linear-gradient(90deg,#2196f3,#00bcd4);
  border:1px solid rgba(255,255,255,0.12);
  padding:6px 10px;
  border-radius:9px;
  font-size:12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
}

.status-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}
.status-pill{
  padding:6px 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  font-size:13px;
  color:#f7f7f7;
}
.status-pill.status-ok{background:rgba(56,177,120,0.2);color:#b6ffd9;}
.status-pill.status-warning{background:rgba(255,193,7,0.22);color:#ffe1a5;}
.sort-select{
  color:#fff;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:8px;
  padding:8px 14px;
  font-family:'Prompt',sans-serif;
}
.btn.ghost{
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.3);
}
.btn.ghost:hover{background:rgba(255,255,255,0.2);}
.image-warning{
  font-size:12px;
  color:#ffce83;
  margin:4px 0 6px;
}
.store-card .btn:hover{filter:brightness(1.06)}

/* === Skeleton loading for cards === */
.skeleton-card{position:relative; padding:14px; border-radius:12px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.03); overflow:hidden}
.skeleton-line{height:12px; margin:8px 0; border-radius:8px; background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14), rgba(255,255,255,0.08)); background-size:200% 100%; animation: shimmerMove 1.6s infinite}
.skeleton-badge{height:18px; width:80px; border-radius:999px; background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.14), rgba(255,255,255,0.08)); background-size:200% 100%; animation: shimmerMove 1.6s infinite}
@keyframes shimmerMove{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* Back-to-top button */
.to-top{position:fixed; right:18px; bottom:18px; z-index:50; opacity:0; transform:translateY(8px); transition:.25s ease;}
.to-top.show{opacity:1; transform:translateY(0)}

/* ===== Animated Christmas Lights Garland ===== */
header{position:sticky; top:0; z-index:70}
header{--light-size:14px; --light-gap:18px}
.xmas-lights{
  position:absolute; left:50%; top:-6px; transform:translateX(-50%);
  display:flex; gap:var(--light-gap); padding:0; margin:0; list-style:none;
  pointer-events:none; z-index:2;
}
.xmas-lights li{
  width:var(--light-size); height:calc(var(--light-size)*1.2);
  background:#ff5757; border-radius:40% 40% 60% 60%;
  position:relative; box-shadow:0 0 10px rgba(255,90,90,0.8), 0 0 18px rgba(255,90,90,0.6);
  transform-origin:top center; animation:bulbSway 3.5s ease-in-out infinite;
}
.xmas-lights li::before{ /* bulb cap */
  content:""; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:8px; height:6px; background:#333; border-radius:2px;
}
.xmas-lights li::after{ /* cable */
  content:""; position:absolute; top:-7px; left:-12px; right:-12px; height:8px;
  background: radial-gradient(circle at 10% 50%, rgba(0,0,0,0.7), transparent 60%),
              radial-gradient(circle at 90% 50%, rgba(0,0,0,0.7), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0);
}
/* color variety */
.xmas-lights li:nth-child(4n+1){ background:#ff5757; box-shadow:0 0 10px rgba(255,90,90,.9),0 0 20px rgba(255,90,90,.7) }
.xmas-lights li:nth-child(4n+2){ background:#4aff7a; box-shadow:0 0 10px rgba(80,255,150,.9),0 0 20px rgba(80,255,150,.7) }
.xmas-lights li:nth-child(4n+3){ background:#58a6ff; box-shadow:0 0 10px rgba(80,170,255,.9),0 0 20px rgba(80,170,255,.7) }
.xmas-lights li:nth-child(4n){   background:#ffd166; box-shadow:0 0 10px rgba(255,210,100,.95),0 0 20px rgba(255,210,100,.75) }

@keyframes bulbSway{
  0%,100%{ transform:translateY(0) rotate(0) }
  50%{ transform:translateY(1px) rotate(3deg) }
}
/* twinkle/flicker */
.xmas-lights li{ animation:bulbSway 3.4s ease-in-out infinite, bulbBlink 1.8s steps(2, jump-none) infinite; }
@keyframes bulbBlink{ 50%{ filter:brightness(1.4)} }

/* compact on small screens */
@media (max-width:900px){
  header{ --light-size:11px; --light-gap:12px }
  .xmas-lights{ top:-4px }
}

/* ===== Christmas Background Refresh (festive red, animated glow, subtle stripes) ===== */
body{
  /* Warm red gradient base with soft vignette */
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.06), transparent 60%),
    radial-gradient(120% 100% at 110% 0%, rgba(255,120,120,0.14), transparent 65%),
    radial-gradient(120% 100% at -10% 90%, rgba(255,215,110,0.10), transparent 65%),
    linear-gradient(180deg, #7d1d1d, #c63a3a 40%, #ff6f6f);
}
/* Replace old aurora with warm animated glow + candy stripes */
body::before{
  content:""; position:fixed; inset:-12%; pointer-events:none; z-index:1;
  background:
    radial-gradient(40% 35% at 18% 12%, rgba(255,215,110,0.24), transparent 60%),
    radial-gradient(38% 32% at 78% 18%, rgba(255,120,120,0.20), transparent 60%),
    radial-gradient(42% 36% at 58% 85%, rgba(0,210,150,0.16), transparent 60%);
  filter: blur(40px); opacity:.22; animation:xmasGlow1 26s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:-12%; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 14px, rgba(255,255,255,0.06) 14px 28px);
  opacity:.045; animation:stripeDrift 30s linear infinite;
}
@keyframes xmasGlow1{
  0%{ transform:translate3d(-2%, -1%, 0) }
  100%{ transform:translate3d(2%, 2%, 0) }
}
@keyframes stripeDrift{ from{ background-position:0 0 } to{ background-position:600px 0 } }

/* Retint hero bokeh orbs to gold/green for Christmas */
.hero::before{ background: radial-gradient(closest-side, rgba(255,215,110,0.65), transparent) !important; }
.hero::after{ background: radial-gradient(closest-side, rgba(0,210,150,0.55), transparent) !important; }

/* ===== Dark Christmas Night override (user request) ===== */
/* Cool, dark night with gentle glows; overrides previous festive red */
body{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,0.03), transparent 60%),
    radial-gradient(120% 110% at 110% 0%, rgba(90,160,255,0.10), transparent 65%),
    radial-gradient(120% 110% at -10% 100%, rgba(0,210,150,0.08), transparent 65%),
    linear-gradient(180deg, #050914, #0a1727 45%, #0d2035);
}
body::before{
  content:""; position:fixed; inset:-12%; pointer-events:none; z-index:1;
  background:
    radial-gradient(40% 35% at 18% 12%, rgba(120,190,255,0.18), transparent 60%),
    radial-gradient(38% 32% at 78% 18%, rgba(0,210,150,0.14), transparent 60%),
    radial-gradient(42% 36% at 58% 85%, rgba(255,215,110,0.12), transparent 60%);
  filter: blur(44px); opacity:.20; animation:xmasGlowNight 28s ease-in-out infinite alternate;
}
body::after{
  content:""; position:fixed; inset:-12%; pointer-events:none; z-index:1;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,0.02) 0 16px, rgba(255,255,255,0.04) 16px 32px);
  opacity:.035; animation:stripeDrift 38s linear infinite;
}
@keyframes xmasGlowNight{
  0%{ transform:translate3d(-1%, -1%, 0) }
  100%{ transform:translate3d(1%, 1%, 0) }
}
/* Light red header (user preference) */
header{
  background: linear-gradient(90deg, rgba(255,120,120,0.88), rgba(255,160,160,0.88)) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* Retint hero bokeh orbs to cool blue/teal for night */
.hero::before{ background: radial-gradient(closest-side, rgba(120,190,255,0.55), transparent) !important; }
.hero::after{ background: radial-gradient(closest-side, rgba(0,210,170,0.45), transparent) !important; }

/* Gentle snowfall look (visual tweaks) */
.snow div{
  box-shadow:none !important;
  background: rgba(255,255,255,0.92) !important;
  filter: blur(0.6px);
}
/* Override the 'fall' animation to be a straight, slow drift */
@keyframes fall{ to{ transform: translateY(120vh); opacity: 0.35 } }
/* === BLANK WHITE PAGE OVERRIDE (reapplied) ===

/* ================= Advanced Layout + Glass/Neumorphism Enhancements (Added) ================= */
/* Dense, overlapping capable grid */
.store-grid{grid-auto-flow:dense; position:relative;}
/* Decorative layered gradient shard behind the grid to add depth */
.store-grid::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:
    linear-gradient(140deg, rgba(120,190,255,0.10), transparent 60%),
    radial-gradient(60% 80% at 85% 20%, rgba(0,210,170,0.12), transparent 70%),
    radial-gradient(50% 60% at 15% 80%, rgba(255,215,110,0.10), transparent 70%);
  mask: linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.8));
  filter: blur(32px) saturate(140%);
  opacity:.55;
  mix-blend-mode: screen;
}

/* Card base upgrade: glassmorphism + subtle 3D neumorphic shadow */
.store-card{
  backdrop-filter: blur(14px) saturate(140%);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 10px 14px 28px -8px rgba(0,0,0,0.65), -6px -6px 12px -4px rgba(255,255,255,0.05);
  transition: transform .65s cubic-bezier(.2,.9,.3,1), box-shadow .6s ease, background .45s ease;
}
.store-card:hover{
  box-shadow: 0 18px 40px -10px rgba(0,0,0,0.75), 0 0 0 1px rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  transform: translateY(-10px) scale(1.03) rotateX(3deg);
}

/* Variation classes for dynamic, non-uniform layout */
.store-card.card--wide{grid-column:span 2;}
.store-card.card--tall{grid-row:span 2; display:flex; flex-direction:column;}
.store-card.card--featured{
  border:1px solid rgba(255,215,110,0.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)),
    radial-gradient(120% 100% at 0% 0%, rgba(255,215,110,0.18), transparent 60%);
  box-shadow: 0 18px 50px rgba(255,210,90,0.28), 0 10px 34px rgba(0,0,0,0.65);
  position:relative;
}
.store-card.card--featured::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(90deg, rgba(255,215,110,0.0), rgba(255,215,110,0.55), rgba(255,215,110,0.0));
  opacity:.0; animation: featuredShine 5.6s ease-in-out infinite;
}
@keyframes featuredShine{0%,100%{opacity:0; transform:translateX(-20%)}50%{opacity:.7; transform:translateX(20%)}}

/* Scroll/appear animation states (IntersectionObserver driven) */
.store-card.card-appear{opacity:0; transform:translateY(28px) scale(.94);}
.store-card.card-visible{opacity:1; transform:translateY(0) scale(1); transition:transform .85s cubic-bezier(.2,.85,.3,1), opacity .85s;}

/* Disable large spans on very narrow screens for stability */
@media (max-width:900px){
  .store-card.card--wide{grid-column:span 1;}
  .store-card.card--tall{grid-row:span 1;}
}

/* Animated gradient border utility (can be reused) */
.border-gradient{
  position:relative;
}
.border-gradient::after{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; pointer-events:none;
  background:linear-gradient(120deg,#58a6ff,#00d4ff,#ffd166,#58a6ff); background-size:300% 300%;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:borderFlow 9s linear infinite; opacity:.55;
}
@keyframes borderFlow{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* Button subtle neumorphism variant inside cards */
.store-card .btn{box-shadow:4px 6px 12px rgba(0,0,0,0.55), -4px -4px 10px rgba(255,255,255,0.04); transition:transform .25s ease, box-shadow .35s ease;}
.store-card .btn:hover{box-shadow:6px 10px 18px rgba(0,0,0,0.6), -4px -4px 10px rgba(255,255,255,0.05);}

/* Search pill live filter feedback highlight */
.pill-input.live-filtering{filter:drop-shadow(0 0 6px rgba(120,190,255,0.55));}

/* =========================================================
   Bookstore Light Theme (Parchment + Warm Accents)
   Apply with <body class="bookstore">. Designed to mimic
   clean product hero: big heading left, framed image right.
   ========================================================= */
body.bookstore{
  --paper1:#f8f5ee; --paper2:#f8f5ee; --paper3:#f1ece3;
  --ink:#2e2923; --accent:#c45508; --accent-soft:#ff9f43; --accent-alt:#8a5a2b;
  --border:#d6cebf; --muted:#6f665c;
  background:#f8f5ee;
  color:var(--ink);
}
body.bookstore::before, body.bookstore::after{display:none !important}
body.bookstore header{
  background:linear-gradient(90deg,var(--paper1),var(--paper2));
  box-shadow:0 2px 8px rgba(140,110,60,0.15);
  border-bottom:1px solid var(--border);
  color:var(--ink);
}
body.bookstore header h1{color:var(--ink)}
body.bookstore a{color:var(--accent-alt)}
body.bookstore .btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-soft));
  color:#fff; border:0; box-shadow:0 4px 14px rgba(180,90,20,0.28);
}
body.bookstore .btn:hover{filter:brightness(1.06)}
body.bookstore .btn.active{background:linear-gradient(90deg,var(--accent-alt),var(--accent)); box-shadow:0 6px 18px rgba(120,70,25,0.30)}
body.bookstore .category-row, body.bookstore .type-row{
  background:linear-gradient(180deg,#fff,#f6f1e7); border:1px solid var(--border); box-shadow:0 4px 16px rgba(140,110,60,0.15);
}
body.bookstore .category-row .btn, body.bookstore .type-row .btn{
  background:linear-gradient(90deg,var(--accent),var(--accent-soft)); border:1px solid rgba(196,85,8,0.35);
}
/* Simplified single filter bar */
body.bookstore .filter-bar{
  display:flex; flex-wrap:wrap; gap:6px; align-items:center;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:6px 10px; margin:10px auto 4px; max-width:1200px;
  box-shadow:0 3px 10px rgba(140,110,60,0.12);
}
body.bookstore .filter-bar .group-label{font-size:12px; font-weight:600; color:var(--muted); padding:4px 8px;}
body.bookstore .filter-bar .btn{
  background:linear-gradient(180deg,#faf7f1,#f1ebe2); color:var(--ink);
  border:1px solid var(--border); box-shadow:none; padding:6px 12px; font-size:12px;
  transition:background .2s, color .2s, border-color .2s;
}
body.bookstore .filter-bar .btn:hover{background:#fff; border-color:#c8bfae}
body.bookstore .filter-bar .btn.active{background:linear-gradient(90deg,var(--accent),var(--accent-soft)); color:#fff; border-color:rgba(196,85,8,0.6)}
body.bookstore .filter-divider{width:1px; height:22px; background:var(--border); margin:0 4px}
@media (max-width:700px){body.bookstore .filter-divider{display:none}}
body.bookstore .search-pill{background:linear-gradient(180deg,#fff,#f8f4ec); border:1px solid var(--border); box-shadow:0 0 0 1px rgba(196,85,8,0.25),0 4px 18px rgba(140,110,60,0.18);}
body.bookstore .search-pill::before{background:linear-gradient(90deg,var(--accent-alt),var(--accent),var(--accent-soft),var(--accent));opacity:.45}
body.bookstore .pill-input{color:var(--ink)}
body.bookstore .pill-input::placeholder{color:rgba(80,70,60,0.55)}
body.bookstore .pill-go{background:linear-gradient(90deg,var(--accent),var(--accent-soft));border-left:1px solid rgba(0,0,0,0.08)}
body.bookstore .hero-text{
  background:linear-gradient(180deg,#ffffff,#f6f2ea); border:1px solid var(--border); box-shadow:0 10px 30px rgba(140,110,60,0.18); color:var(--ink);
}
body.bookstore .hero-text::after{background:linear-gradient(90deg,transparent,rgba(196,85,8,0.25),transparent);opacity:.15}
body.bookstore .store-card{
  background:linear-gradient(180deg,#ffffff,#f9f6f0); border:1px solid var(--border); color:var(--ink); box-shadow:0 6px 22px rgba(140,110,60,0.18);
}
body.bookstore .store-card .meta,
body.bookstore .store-card .address,
body.bookstore .store-card .phone,
body.bookstore .store-card .hours{color:var(--muted)}
body.bookstore .store-card .rating{background:linear-gradient(90deg,var(--accent),var(--accent-alt)); color:#fff; box-shadow:0 2px 6px rgba(180,90,20,0.35)}
body.bookstore .store-card.sponsor{border:1px solid rgba(196,85,8,0.45);background:linear-gradient(180deg,#fff,#f5efe3);box-shadow:0 14px 40px rgba(180,90,20,0.25)}
body.bookstore .sponsor-ribbon{background:linear-gradient(90deg,var(--accent-soft),var(--accent));color:#fff;border:1px solid rgba(196,85,8,0.4)}

/* Hero layout variant */
.hero-bookstore{max-width:1200px;margin:40px auto 10px;padding:0 18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:48px;align-items:center}
.hero-bookstore .hero-left{order:1}
.hero-bookstore .hero-right{order:2;display:flex;justify-content:center}
@media (max-width:900px){.hero-bookstore{gap:28px}}

/* Large display heading */
.display-heading{font-size:clamp(34px,5vw,58px);line-height:1.05;font-weight:700;margin:0 0 10px;font-family:'Prompt',system-ui}
.display-heading .accent{color:var(--accent);position:relative}
.display-heading .accent::after{content:"";position:absolute;left:0;bottom:6px;width:100%;height:16px;background:linear-gradient(90deg,var(--accent-soft),var(--accent));opacity:.35;border-radius:6px;z-index:-1}

/* Framed image with tilt */
.image-frame{position:relative;display:inline-block;padding:14px;background:#fff;border-radius:16px;box-shadow:0 10px 34px rgba(140,110,60,0.25);transform:rotate(-3deg);}
.image-frame img{display:block;width:100%;height:auto;border-radius:12px}
.image-frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06)}

/* Optional subtle paper texture */
body.bookstore .paper-bg{background:repeating-linear-gradient(45deg,rgba(0,0,0,0.02) 0 8px,rgba(0,0,0,0.03) 8px 16px);border-radius:20px}


/* ==== GLOBAL TEXT COLOR OVERRIDE (user request) ==== */
body, body * { color:#000 !important; }

/* ===== Global mini profile widget ===== */
.profile-mini{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#ffffff;border:1px solid #d6cebf;box-shadow:0 4px 14px rgba(0,0,0,0.12);font-size:13px;font-weight:500;cursor:pointer;}
.profile-mini .pm-core{display:flex;align-items:center;gap:6px;background:transparent;border:0;padding:0;font:inherit;color:inherit;cursor:pointer}
.profile-mini .pm-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff9f43,#c45508);color:#fff;font-weight:700;font-size:14px;box-shadow:0 2px 6px rgba(0,0,0,0.25)}
.profile-mini .pm-avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 2px 6px rgba(0,0,0,0.25)}
.profile-mini .pm-name{max-width:120px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-mini .pm-menu{position:absolute;top:110%;right:0;background:#fff;border:1px solid #d6cebf;border-radius:12px;padding:6px 0;min-width:180px;box-shadow:0 10px 28px rgba(0,0,0,0.18);display:none;z-index:200}
.profile-mini .pm-menu.open{display:block;animation:pmPop .18s cubic-bezier(.2,.9,.3,1)}
.profile-mini .pm-menu-header{padding:6px 14px;font-weight:600;font-size:13px;border-bottom:1px solid #e2dbcd;background:#faf7f1}
.profile-mini .pm-menu-item{width:100%;text-align:left;background:transparent;border:0;padding:8px 14px;font-size:13px;font:inherit;cursor:pointer;display:flex;gap:6px;align-items:center;transition:background .15s}
.profile-mini .pm-menu-item:hover{background:#f2ece3}
@keyframes pmPop{0%{transform:translateY(6px);opacity:0}100%{transform:translateY(0);opacity:1}}
@media (max-width:700px){.profile-mini{padding:4px 6px}.profile-mini .pm-name{display:none}}