#hp-shop{padding-bottom:clamp(28px,4vw,56px)}
.hp-cover-banner{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;margin:22px 0 16px;box-shadow:0 12px 35px #0004}
.hp-shop-intro,.hp-shop-small{text-align:center;max-width:800px;margin:18px auto 28px;color:#fff;line-height:1.7}
.hp-shop-small{font-size:12px;opacity:.75;margin-bottom:0}
.hp-shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,3vw,28px)}
.hp-shop-product{padding:clamp(22px,3vw,38px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;min-width:0;border:1px solid #fff4;background:#ffffff13;border-radius:18px;box-shadow:0 9px 32px #0002}
.hp-shop-label{font-size:11px;letter-spacing:.13em;opacity:.7}.hp-shop-product h3{font-family:var(--f-head);font-size:clamp(19px,2.6vw,28px);margin:0}
.hp-shop-product p{margin:0;opacity:.8}.hp-shop-product strong{font-size:clamp(24px,3vw,34px);color:#ffff70;margin:10px 0}
.hp-shop-buy{border:2px solid #00ffff;background:#fff;color:#173f63;font-family:var(--f-head);font-weight:800;border-radius:30px;padding:13px 28px;min-height:48px;cursor:pointer;transition:transform .2s,background .2s;max-width:100%}
.hp-shop-buy:hover{background:#fffa99;transform:translateY(-3px)}.hp-shop-buy:focus-visible{outline:3px solid #ff0;outline-offset:4px}
@media(max-width:720px){.hp-shop-grid{grid-template-columns:1fr}.hp-cover-banner{border-radius:11px}}

/* Harry Potter: Black & White + Yellow use dark type on light backgrounds.
   Keep original white/yellow typography in Blue Neighborhood and Mystic. */
html[data-tone="ink"] #hp-shop .hp-shop-intro,
html[data-tone="ink"] #hp-shop .hp-shop-small{color:#171717}
html[data-tone="ink"] #hp-shop .hp-shop-small{opacity:.86}
html[data-tone="ink"] #hp-shop .hp-shop-product strong{color:#171717}