/* Home page "Shop Specials" panel (Oct 28 2026), between Halloween Flash and Romantasy. Filled by home-specials.js from data/specials.json.
   Oct 29 2026 "make it pop": "Limited Time" ember ribbon, live countdown, swipeable row (featured design first, larger), shimmer on the button,
   soft ember glow on the border. All motion stops with prefers-reduced-motion. */
.hs{padding:var(--pn-gap,18px) 0 0}
.hs-box{--emb:255,106,26;position:relative;padding:18px 12px 16px;border:1px solid rgba(255,190,90,.62);border-radius:12px;text-align:center;
  background:radial-gradient(120% 80% at 50% 0,rgba(255,201,40,.10),transparent 60%),radial-gradient(70% 60% at 0 0,rgba(var(--emb),.10),transparent 70%),linear-gradient(135deg,rgba(6,30,33,.96),rgba(10,5,8,.96));
  box-shadow:0 0 0 1px rgba(var(--emb),.18),0 0 18px rgba(var(--emb),.22),0 10px 26px rgba(0,0,0,.45);animation:hsGlow 5.5s ease-in-out infinite}
@keyframes hsGlow{0%,62%,100%{box-shadow:0 0 0 1px rgba(var(--emb),.18),0 0 18px rgba(var(--emb),.20),0 10px 26px rgba(0,0,0,.45)}
  80%{box-shadow:0 0 0 1px rgba(var(--emb),.45),0 0 30px rgba(var(--emb),.42),0 10px 26px rgba(0,0,0,.45)}}

/* corner ribbon */
.hs-ribw{position:absolute;top:0;left:0;width:118px;height:118px;overflow:hidden;border-top-left-radius:12px;pointer-events:none;z-index:2}
.hs-rib{position:absolute;top:29px;left:-58px;width:200px;padding:5px 0 4px;transform:rotate(-45deg);text-align:center;
  font:700 .62rem/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:#fff7ea;text-shadow:0 1px 1px rgba(80,20,0,.55);
  background:linear-gradient(180deg,#ff8f3a,#f25d12 55%,#c9420a);box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,220,170,.55),inset 0 -1px 0 rgba(110,30,0,.5)}

.hs-t{margin:0;font:700 clamp(1.45rem,6.4vw,2.2rem)/1.1 var(--caps);letter-spacing:.06em;color:#f6d77e;text-shadow:0 0 14px rgba(255,201,40,.28)}
.hs-t::after{content:"";display:block;width:90px;height:1px;margin:10px auto 0;background:linear-gradient(90deg,transparent,#d9b06a,#ffd23f,#d9b06a,transparent)}
.hs-sub{margin:6px 0 0;font:600 .72rem/1.3 var(--caps);letter-spacing:.16em;text-transform:uppercase;color:#e3c088}
.hs-cd{display:inline-flex;align-items:center;gap:6px;margin:8px 0 0;padding:3px 11px 3px;border:1px solid rgba(var(--emb),.45);border-radius:99px;
  background:rgba(var(--emb),.10);font:600 .7rem/1.3 var(--caps);letter-spacing:.1em;text-transform:uppercase;color:#ffc48f}
.hs-cd[hidden]{display:none}
.hs-cdx{font-variant-numeric:tabular-nums;color:#ffe2bf;letter-spacing:.06em}

/* swipeable row */
.hs-sc{position:relative;margin:14px -12px 12px}
.hs-sc{--fl:0px;--fr:0px}.hs-sc.hs-l{--fl:34px}.hs-sc.hs-r{--fr:34px}
.hs-sc .hs-row{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--fl),#000 calc(100% - var(--fr)),transparent 100%)}
.hs-row{list-style:none;display:flex;align-items:flex-end;gap:10px;margin:0;padding:2px 12px 4px;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding:0 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hs-row::-webkit-scrollbar{display:none}
.hs-row.hs-ns{scroll-snap-type:none}
.hs-row li{flex:0 0 28%;min-width:0;scroll-snap-align:start}
.hs-row li.hs-hero{flex-basis:41%}
.hs-it{display:flex;flex-direction:column;align-items:center;gap:5px;min-height:44px;padding:5px 4px 8px;border:1px solid rgba(217,176,106,.35);border-radius:9px;
  background:rgba(3,11,11,.55);color:#f3ead7;text-decoration:none;transition:border-color .2s,transform .2s}
.hs-it:hover,.hs-it:focus-visible{border-color:#ffd23f;transform:translateY(-2px)}
.hs-im{position:relative;display:block;width:100%;aspect-ratio:1;border-radius:6px;overflow:hidden;background:#c4a273}
.hs-im img{display:block;width:100%;height:100%;object-fit:cover}
.hs-ft{border-color:rgba(255,210,63,.75);background:linear-gradient(180deg,rgba(255,201,40,.10),rgba(3,11,11,.6))}
.hs-ft .hs-im{box-shadow:0 0 0 1px #ffd23f,0 0 14px rgba(255,201,40,.25)}
.hs-n{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;width:100%;min-height:2.4em;font:600 .66rem/1.2 var(--caps);letter-spacing:.03em;overflow:hidden;overflow-wrap:anywhere;text-align:center}
.hs-ft .hs-n{font-size:.78rem}
.hs-p{font:600 .74rem/1 var(--caps);color:#ffd23f}
.hs-ft .hs-p{font-size:.92rem}

/* button: same gold sweep as the Pay & book buttons */
.hs-cta{width:100%;max-width:420px;position:relative;overflow:hidden;isolation:isolate}
.hs-cta::after{content:"";position:absolute;top:-10%;bottom:-10%;left:0;width:38%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,252,240,0) 0%,rgba(255,252,240,.55) 50%,rgba(255,252,240,0) 100%);transform:translate3d(-150%,0,0) skewX(-20deg);
  animation:hsShine 4.2s cubic-bezier(.45,.05,.35,1) 1.4s infinite}
@keyframes hsShine{0%{transform:translate3d(-150%,0,0) skewX(-20deg)}32%,100%{transform:translate3d(320%,0,0) skewX(-20deg)}}
.hs-fb{margin:12px 0}

/* picks bar steps aside while the section's button is under it */
.pk-bar{transition:opacity .2s}
.pk-bar.hs-dodge{opacity:0;pointer-events:none}

@media (min-width:700px){.hs-box{padding:24px 20px 20px}.hs-sc{margin:18px -20px 16px}.hs-row{gap:14px;padding:2px 20px 4px;scroll-padding:0 20px}
  .hs-row li{flex-basis:150px}.hs-row li.hs-hero{flex-basis:230px}
  .hs-n{font-size:.78rem}.hs-p{font-size:.85rem}.hs-ft .hs-n{font-size:.9rem}.hs-ft .hs-p{font-size:1.05rem}
  .hs-sc.hs-l{--fl:56px}.hs-sc.hs-r{--fr:56px}.hs-rib{font-size:.68rem}}
@media (prefers-reduced-motion:reduce){.hs-box{animation:none}.hs-cta::after{animation:none;content:none}.hs-row{scroll-behavior:auto}.hs-it{transition:none}}
/* Explore More now has two tiles (Shop Specials moved up into this panel) */
.hd-ex .hd-explore{grid-template-columns:repeat(2,minmax(0,1fr))}