/* ==========================================================================
   POLISH LAYER — buttons, banner alignment, motion. Loaded after theme.css.
   ========================================================================== */
:root { --ease-out:cubic-bezier(.22,1,.36,1); --ease-spring:cubic-bezier(.34,1.56,.64,1); --ok-bg:#16a34a; }

/* ── Universal button feel ───────────────────────────────────────────────── */
.btn-brand, .btn-dark, .btn-ghost, .btn-accent, .pc-add, .btn-cart, .btn-buy, .pd-wish, .hsearch button {
  position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; user-select:none;
}
.btn-brand:active, .btn-dark:active, .btn-ghost:active, .pc-add:active, .btn-cart:active, .btn-buy:active, .pd-wish:active { transform:scale(.97); }
.ripple { position:absolute; border-radius:50%; background:currentColor; opacity:.22; transform:scale(0); animation:ripple .6s var(--ease-out) forwards; pointer-events:none; }
@keyframes ripple { to { transform:scale(1); opacity:0; } }
.btn-brand::after, .btn-cart::after, .place-btn::after {
  content:''; position:absolute; top:0; left:-75%; width:50%; height:100%; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);
}
.btn-brand:hover::after, .btn-cart:hover::after, .place-btn:hover::after { animation:shine .8s var(--ease-out); }
@keyframes shine { to { left:130%; } }
.spin { width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; animation:spin .7s linear infinite; display:inline-block; }

/* ── Product card: always-visible, perfectly aligned cart button ─────────── */
.pc { container-type:inline-size; container-name:pc; }
.pc-body { flex:1 1 auto; }
.pc .pc-add, .pc:hover .pc-add {
  position:relative; inset:auto; opacity:1; transform:none;
  margin:auto 10px 10px; height:38px; padding:0 12px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--brand-pale); color:var(--brand-darker); border:1.5px solid rgba(var(--brand-rgb),.35);
  font-weight:700; font-size:13px; letter-spacing:.01em; white-space:nowrap; text-decoration:none;
  transition:background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
}
.pc .pc-add::after { content:none !important; }
.pc-add .pa-ico { display:inline-flex !important; transition:transform .25s var(--ease-spring); }
.pc-add .pa-long { display:inline !important; }
.pc-add .pa-short { display:none !important; }
@container pc (max-width:165px) {
  .pc-add .pa-long { display:none !important; }
  .pc-add .pa-short { display:inline !important; }
}
.pc .pc-add:hover { background:var(--brand); color:#fff; border-color:var(--brand); box-shadow:0 8px 18px -8px rgba(var(--brand-rgb),.7); }
.pc .pc-add:hover .pa-ico { transform:translateX(-2px) rotate(-8deg) scale(1.08); }
.pc-add.pc-add-off { background:#f3f4f6; color:#4b5563; border-color:#e5e7eb; }
.pc-add.is-loading, .btn-cart.is-loading { pointer-events:none; }
.pc-add.is-added, .pc .pc-add.is-added:hover, .btn-cart.is-added { background:var(--ok-bg) !important; border-color:var(--ok-bg) !important; color:#fff !important; }
.pc-add.is-added .pa-ico, .btn-cart.is-added .bc-ico { animation:pop .45s var(--ease-spring); }
@keyframes pop { 0% { transform:scale(.4); } 100% { transform:scale(1); } }
.pc { transition:box-shadow .25s var(--ease-out), transform .25s var(--ease-out), border-color .25s; }
.pc:hover { transform:translateY(-4px); box-shadow:0 18px 34px -16px rgba(16,24,40,.28); }
.pc-img img { transition:transform .6s var(--ease-out), opacity .4s; }
.pc:hover .pc-img img { transform:scale(1.06); }
.pc-wish { opacity:.95; transition:transform .2s var(--ease-spring), color .2s, background .2s; }
.pc-wish.on svg { animation:heart .45s var(--ease-spring); }
@keyframes heart { 0% { transform:scale(.6); } 60% { transform:scale(1.25); } 100% { transform:scale(1); } }

/* image skeleton shimmer until loaded */
.pc-img, .hero-slider, .sb-item, .promo { background-color:#eef0f3; }
.pc-img::before, .sb-item::before, .promo::before {
  content:''; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%) #eef0f3;
  background-size:200% 100%; animation:shimmer 1.3s linear infinite;
}
.pc-img.loaded::before, .sb-item.loaded::before, .promo.loaded::before { display:none; }
.pc-img img, .sb-item img, .promo img { position:relative; z-index:1; }
.pc-img img[data-fade], .sb-item img[data-fade], .promo img[data-fade], .hs-img[data-fade] { opacity:0; }
.loaded > img[data-fade], .hs-img.ready { opacity:1 !important; }
@keyframes shimmer { to { background-position:-200% 0; } }
.pc-badge, .pc-wish, .pc-soldout { z-index:2; }

/* ── Product page buy box ────────────────────────────────────────────────── */
.pd-qty-row { display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap; }
.pd-qty-label { font-size:13px; font-weight:700; color:#374151; }
.qstep { display:inline-flex; align-items:center; height:44px; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; background:#fff; }
.qstep button { width:42px; height:100%; border:0; background:#fff; color:#111827; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.qstep button:hover { background:var(--brand-pale); color:var(--brand-dark); }
.qstep .rot180 { transform:rotate(180deg); }
.qstep span { min-width:44px; text-align:center; font-weight:800; font-size:15px; font-variant-numeric:tabular-nums; }
.pd-stock { font-size:13px; font-weight:600; }
.pd-stock i { display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; vertical-align:middle; }
.pd-stock .in { color:#15803d; } .pd-stock .in i { background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.18); animation:pulse 2s infinite; }
.pd-stock .out { color:#b91c1c; } .pd-stock .out i { background:#ef4444; }
.pd-actions { display:grid; grid-template-columns:52px 1fr 1fr; gap:10px; margin-top:16px; align-items:stretch; }
.btn-cart, .btn-buy, .pd-wish { height:52px; border-radius:14px; border:0; cursor:pointer; font-family:inherit; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; gap:10px; transition:transform .12s, box-shadow .2s, background .2s, filter .2s; }
.btn-cart { background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; box-shadow:0 12px 24px -12px rgba(var(--brand-rgb),.9); }
.btn-cart:hover { filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 16px 28px -12px rgba(var(--brand-rgb),.95); }
.btn-cart .bc-ico { display:inline-flex; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,.18); align-items:center; justify-content:center; }
.btn-cart[disabled] { filter:grayscale(.6); opacity:.7; cursor:not-allowed; transform:none; }
.btn-buy { background:var(--ink); color:#fff; }
.btn-buy:hover { background:#000; transform:translateY(-1px); box-shadow:0 14px 26px -14px rgba(0,0,0,.6); }
.pd-wish { position:static !important; width:52px; background:#fff; border:1.5px solid #e5e7eb; color:#6b7280; }
.pd-wish:hover { border-color:var(--accent); color:var(--accent); }
.pd-wish.on { color:var(--accent); border-color:#fecdd3; background:#fff1f2; } .pd-wish.on svg { fill:currentColor; animation:heart .45s var(--ease-spring); }

/* ── Hero / banners: one ratio everywhere, perfect alignment ─────────────── */
.hero3 { align-items:stretch; }
.hero-slider { aspect-ratio:16/7; min-height:0; height:auto; isolation:isolate; }
.hero-slider.is-default { aspect-ratio:16/7; }
.hero-cats, .hero-side { contain:size; height:100%; min-height:0; max-height:none; }
.hero-cats { overflow:auto; scrollbar-width:thin; }
.hero-side { overflow:hidden; }
.hs-slide { background:none; transition:opacity .9s var(--ease-out), visibility .9s; visibility:hidden; }
.hs-slide.on { visibility:visible; }
.hs-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:scale(1.001); }
.hs-slide.on .hs-img { animation:kenburns 7s var(--ease-out) both; }
@keyframes kenburns { from { transform:scale(1.08); } to { transform:scale(1.001); } }
.hs-slide.has-cap::before { z-index:1; background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.25) 45%,rgba(0,0,0,0) 70%); }
.hs-cap { position:absolute; left:0; top:0; bottom:0; display:flex; flex-direction:column; justify-content:center; padding:24px clamp(20px,4vw,48px); max-width:60%; z-index:2; }
.hs-cap h2 { font-size:clamp(20px,2.8vw,38px); text-shadow:0 2px 14px rgba(0,0,0,.25); }
.hs-slide.on .hs-cap > * { animation:capIn .8s var(--ease-out) both; }
.hs-slide.on .hs-cap > *:nth-child(2) { animation-delay:.12s; } .hs-slide.on .hs-cap > *:nth-child(3) { animation-delay:.24s; }
@keyframes capIn { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.hs-cap .btn-brand { align-self:flex-start; }
.hs-link { z-index:1; }
.hs-dots { z-index:4; bottom:14px; }
.hs-dot { position:relative; overflow:hidden; height:6px; width:6px; background:rgba(255,255,255,.5); }
.hs-dot.on { width:28px; background:rgba(255,255,255,.35); }
.hs-dot.on::after { content:''; position:absolute; inset:0; background:#fff; transform-origin:left; animation:dotfill 5s linear forwards; }
@keyframes dotfill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
.hs-prev, .hs-next { z-index:4; backdrop-filter:blur(6px); background:rgba(255,255,255,.75); transition:opacity .2s, transform .2s; }
.hs-prev:hover, .hs-next:hover { transform:translateY(-50%) scale(1.08); }
.hero-default { animation:fadeIn .8s var(--ease-out) both; }
.hero-default h1 { font-size:clamp(24px,3.4vw,42px); }
.hero-default::after { animation:float 9s ease-in-out infinite; }
.hero-default::before { animation:float 11s ease-in-out infinite reverse; }
@keyframes float { 50% { transform:translate(-18px,14px) scale(1.06); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* banners beside the slider */
.side-banners { flex:1; display:flex; flex-direction:column; gap:14px; min-height:0; }
.sb-item { position:relative; flex:1; min-height:0; border-radius:var(--r-lg); overflow:hidden; display:block; box-shadow:var(--sh-1); }
.sb-item img { position:absolute !important; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease-out); }
.sb-item:hover img { transform:scale(1.06); }
.sb-item span { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px 12px 10px; color:#fff; font-weight:800; font-size:13px; background:linear-gradient(0deg,rgba(0,0,0,.6),transparent); }

/* promo strip */
.promo-row { display:grid; gap:14px; margin-bottom:16px; }
.promo-row.n1 { grid-template-columns:1fr; } .promo-row.n2 { grid-template-columns:1fr 1fr; } .promo-row.n3 { grid-template-columns:repeat(3,1fr); }
.promo { position:relative; aspect-ratio:2/1; border-radius:var(--r-lg); overflow:hidden; display:block; box-shadow:var(--sh-1); }
.promo-row.n1 .promo { aspect-ratio:4/1; }
.promo img { position:absolute !important; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out); }
.promo:hover img { transform:scale(1.05); }
.promo-cap { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 16px 14px; color:#fff; display:flex; flex-direction:column; background:linear-gradient(0deg,rgba(0,0,0,.65),transparent); }
.promo-cap b { font-size:16px; font-weight:800; } .promo-cap small { opacity:.9; }

/* ── Scroll reveal ───────────────────────────────────────────────────────── */
.rv { opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay:var(--d,0s); }
.rv.in { opacity:1; transform:none; }

/* countdown digit tick */
.cd-box { transition:transform .3s var(--ease-out); }
.cd-box.tick { animation:tick .45s var(--ease-out); }
@keyframes tick { 0% { transform:translateY(-35%); opacity:.2; } 100% { transform:none; opacity:1; } }
.flash-head { background-size:200% 100%; animation:flashbg 8s ease-in-out infinite alternate; }
@keyframes flashbg { to { background-position:100% 0; } }
.pc-flashbar-fill { position:relative; overflow:hidden; }
.pc-flashbar-fill::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:translateX(-100%); animation:barshine 2.2s ease-in-out infinite; }
@keyframes barshine { to { transform:translateX(100%); } }

/* fly-to-cart */
.fly-dot { position:fixed; z-index:5000; width:46px; height:46px; border-radius:50%; overflow:hidden; pointer-events:none; box-shadow:0 10px 25px rgba(0,0,0,.25); border:3px solid #fff; background:var(--brand); }
.fly-dot img { width:100%; height:100%; object-fit:cover; }
.hact-cart.shake .hact-ico, .mnav .shake { animation:cartshake .6s var(--ease-out); }
@keyframes cartshake { 20% { transform:rotate(-14deg) scale(1.1); } 45% { transform:rotate(10deg) scale(1.1); } 70% { transform:rotate(-5deg); } 100% { transform:none; } }

/* header niceties */
.hsearch { transition:box-shadow .25s, border-color .25s; }
.hsearch:focus-within { box-shadow:0 0 0 5px rgba(var(--brand-rgb),.16); }
.hact-btn .ic { transition:transform .25s var(--ease-spring); }
.hact-btn:hover .ic { transform:translateY(-2px); }
.catnav-links a { position:relative; border-bottom:0; }
.catnav-links a::after { content:''; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px; background:var(--brand); transform:scaleX(0); transition:transform .25s var(--ease-out); }
.catnav-links a:hover::after { transform:scaleX(1); }
.cb-ico { transition:transform .3s var(--ease-spring), box-shadow .3s; }
.cb:hover .cb-ico { transform:translateY(-4px) scale(1.06); box-shadow:0 10px 18px -10px rgba(0,0,0,.35); }
.tile { transition:transform .3s var(--ease-out), box-shadow .3s; }
.tile:hover { transform:translateY(-4px); box-shadow:0 18px 30px -16px rgba(0,0,0,.45); }
.tile .go { transition:background .2s, padding .2s; }
.tile:hover .go { background:rgba(255,255,255,.3); padding-right:16px; }
.store-card { transition:transform .25s var(--ease-out), box-shadow .25s; }
.store-card:hover { transform:translateY(-3px); }
.toast { transition:opacity .3s var(--ease-out), transform .35s var(--ease-spring), visibility .3s; }

/* cart & checkout */
.qty { height:36px; border-radius:11px; }
.qty button { height:100%; width:34px; font-weight:700; transition:background .15s, color .15s; }
.qty button:hover { background:var(--brand-pale); color:var(--brand-dark); }
.qty input { height:100%; }
.linkbtn { padding:6px 8px; border-radius:8px; transition:background .15s, color .15s; }
.linkbtn:hover { background:#fef2f2; }
.cart-line { transition:background .2s; border-radius:10px; }
.place-btn { position:relative; overflow:hidden; height:56px; font-size:16px; }
.pm { transition:border-color .2s, background .2s, box-shadow .2s, transform .15s; }
.pm:hover { transform:translateY(-1px); }

/* footer credit */
.dev-credit { display:inline-flex; align-items:center; gap:6px; color:rgba(255,255,255,.6); }
.dev-credit a { color:#fff; font-weight:700; background:linear-gradient(90deg,var(--brand),#fbbf24); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; position:relative; }
.dev-credit a::after { content:''; position:absolute; left:0; right:0; bottom:-2px; height:1.5px; background:linear-gradient(90deg,var(--brand),#fbbf24); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease-out); }
.dev-credit a:hover::after { transform:scaleX(1); }
.fbottom .container { align-items:center; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width:1200px) { .hero-side { display:none; } }
@media (max-width:860px) {
  .hero-slider { aspect-ratio:16/7; }
  .hero-slider.is-default { aspect-ratio:auto; min-height:230px; }
  .hs-cap { max-width:78%; padding:16px 18px; }
  .hs-cap p { display:none; }
  .hs-cap .btn-brand { margin-top:10px; padding:8px 14px; font-size:13px; }
  .promo-row.n3 { grid-template-columns:1fr 1fr; } .promo-row.n3 .promo:first-child { grid-column:1/-1; aspect-ratio:2.6/1; }
}
@media (max-width:768px) {
  .pc .pc-add, .pc:hover .pc-add { margin:auto 8px 8px; height:36px; font-size:12.5px; gap:6px; border-radius:9px; }
  .pc:hover { transform:none; }
  .hs-prev, .hs-next { display:none; }
  .hs-dots { bottom:8px; }
  .promo-row { gap:10px; margin-bottom:10px; } .promo-row.n2 { grid-template-columns:1fr 1fr; }
  .promo-cap { padding:20px 10px 8px; } .promo-cap b { font-size:13px; } .promo-cap small { display:none; }
  /* product page: sticky action bar like native shopping apps */
  body.page-product .mnav, body.page-product .wa-float { display:none; }
  body.page-product { padding-bottom:calc(80px + env(safe-area-inset-bottom)); }
  body.page-product .pd-actions {
    position:fixed; left:0; right:0; bottom:0; z-index:600; margin:0; gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.96);
    backdrop-filter:blur(10px); box-shadow:0 -8px 24px rgba(16,24,40,.1); grid-template-columns:48px 1fr 1fr;
  }
  .btn-cart, .btn-buy, .pd-wish { height:48px; font-size:14px; border-radius:12px; }
  .pd-wish { width:48px; }
  .btn-cart .bc-ico { width:26px; height:26px; }
  .fbottom .container { flex-direction:column; text-align:center; gap:6px; }
  .toast { bottom:96px; }
}
@media (max-width:360px) { .btn-cart .bc-ico { display:none; } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .rv { opacity:1; transform:none; }
}
.pc-img:has(.pc-noimg)::before { display:none; }
/* rails: room for hover lift + shadow; button never overflows card */
.rail { padding:8px 4px 16px; margin:-8px -4px -12px; scroll-padding-left:4px; }
.pc .pc-add, .pc:hover .pc-add { width:auto !important; align-self:stretch; box-sizing:border-box; max-width:calc(100% - 20px); }
@media (max-width:768px) { .pc .pc-add, .pc:hover .pc-add { max-width:calc(100% - 16px); } }
.rail-btn { z-index:5; transition:transform .2s var(--ease-spring), box-shadow .2s; }
.rail-btn:hover { transform:scale(1.1); box-shadow:0 10px 20px -8px rgba(0,0,0,.35); }