/* ===== Home page framed panels (Oct 25 2026): Romantasy strip, "Explore More at Steam & Ink" tiles and Birth Flowers
   all sit in the same kind of framed block with the same spacing between them. Wording, prices and links unchanged. ===== */
:root{--pn-gap:18px}
@media (min-width:768px){:root{--pn-gap:26px}}
.hd-rm{padding:var(--pn-gap) 0 0}

/* --- Explore More: titled panel around the three tiles --- */
.hd-ex{padding:var(--pn-gap) 0 0}
.hd-ex-box{padding:12px 12px 14px;border:1px solid rgba(217,176,106,.55);border-radius:10px;
  background:linear-gradient(135deg,rgba(6,30,33,.94),rgba(10,5,8,.94));box-shadow:0 0 22px rgba(46,160,150,.22);min-width:0}
.hd-ex-t{margin:2px 0 12px;text-align:center;text-wrap:balance;font:600 clamp(1rem,2.6vw,1.2rem)/1.25 var(--caps);letter-spacing:.06em;color:#f1d79d;
  text-shadow:0 0 12px rgba(46,230,214,.25)}
.hd-ex-t::after{content:"";display:block;width:90px;height:1px;margin:8px auto 0;background:linear-gradient(90deg,transparent,#2b8f8a,#d9b06a,#2b8f8a,transparent)}
.hd-ex .hd-explore{max-width:none;margin:0;padding:0!important;gap:8px;align-items:stretch}
@media (min-width:768px){.hd-ex-box{padding:18px 18px 20px}.hd-ex .hd-explore{gap:16px}.hd-ex-t{margin-bottom:16px}}
/* same size and shape for all three tiles: Shop Specials keeps its gold border + glow, loses the notched corners */
.hd-ex .st-inner{clip-path:none;border-radius:10px;box-shadow:0 0 16px rgba(255,201,40,.3),0 8px 20px rgba(0,0,0,.45)}
.hd-ex .st-inner,.hd-ex .lt-inner,.hd-ex .gt-inner{border-width:2px;border-style:solid}
.hd-ex .st-aura{display:none!important}
/* icons in one equal-height slot so the titles start on the same line */
.hd-ex .st-inner img,.hd-ex .lt-inner img.lt-med,.hd-ex .gt-ico{flex:none;height:68px}
.hd-ex .st-inner img{width:68px}
.hd-ex .gt-ico{width:68px}
@media (min-width:768px){.hd-ex .st-inner img,.hd-ex .lt-inner img.lt-med,.hd-ex .gt-ico{height:86px}.hd-ex .st-inner img,.hd-ex .gt-ico{width:86px}}
.hd-ex .btn{margin-top:auto}

/* --- Halloween Themed Birth Flowers: the whole section in one framed panel --- */
#birth-flowers.birth-flowers{padding:var(--pn-gap) 0 calc(var(--pn-gap) + 8px)}
#birth-flowers::before{display:none}
.bf-box{padding:18px 12px 14px;border:1px solid rgba(217,176,106,.55);border-radius:10px;
  background:linear-gradient(135deg,rgba(28,12,8,.94),rgba(10,5,8,.94));box-shadow:0 0 22px rgba(110,26,46,.3);min-width:0}
#birth-flowers .bf-box .section-head{margin:0 auto 14px}
#birth-flowers .bf-box .flash-sheet{margin-left:0;margin-right:0}
@media (min-width:768px){.bf-box{padding:28px 24px 22px}#birth-flowers .bf-box .section-head{margin-bottom:22px}}
/* while Halloween is on: ember edge glow + the menu's spooky ember title + DAYS / HRS / MIN / SEC tiles (assets/seasonal/halloween.js) */
html:not(.hw-over) .bf-box{border-color:rgba(255,128,44,.7);box-shadow:0 0 0 1px rgba(255,110,30,.18),0 0 24px rgba(255,110,30,.38),inset 0 0 30px rgba(255,110,30,.08);
  background:radial-gradient(120% 70% at 50% 0%,rgba(255,110,30,.12),rgba(255,110,30,0) 60%),linear-gradient(135deg,rgba(28,12,8,.94),rgba(10,5,8,.94))}
html:not(.hw-over) #birth-flowers h2.bf-h{font-family:var(--deco);font-weight:700;letter-spacing:.05em;text-wrap:balance;
  background:linear-gradient(180deg,#ffd9a0 0%,#ffa03c 42%,#f0641a 72%,#b8380c 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 0 6px rgba(255,112,28,.5))}
html:not(.hw-over) #birth-flowers h2.bf-h::after{filter:hue-rotate(-12deg) saturate(1.4)}
.bf-hw{white-space:normal}
.bf-cd{display:inline-flex;gap:5px;margin:12px auto 2px;justify-content:center}
.bf-cd>span{display:inline-flex;flex-direction:column;align-items:center;min-width:40px;padding:5px 4px 4px;border-radius:6px;
  background:rgba(4,22,26,.85);border:1px solid rgba(227,192,136,.45);box-shadow:0 0 10px rgba(255,110,30,.18)}
.bf-cd b{font:700 1.05rem/1 var(--caps);color:#ffe7b8;font-variant-numeric:tabular-nums}
.bf-cd small{font:600 .52rem/1.3 var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:3px}
#birth-flowers .section-head .bf-cd + p{margin-top:.7em}
@media (min-width:768px){.bf-cd>span{min-width:52px;padding:7px 6px 5px}.bf-cd b{font-size:1.3rem}.bf-cd small{font-size:.6rem}}
#birth-flowers.birth-flowers{background:none}
/* two balanced heading lines: "Halloween Themed" / "Birth Flowers" */
html:not(.hw-over) .bf-hw{display:block;white-space:nowrap}
@media (max-width:639px){html:not(.hw-over) #birth-flowers h2.bf-h{font-size:clamp(20px,6.2vw,34px);letter-spacing:.03em;line-height:1.14}
}