/* JTM Holiday Themes (2026-10-14).  Loaded only while a theme is live (or previewed).
   Per-theme colours arrive as --hol-* custom properties from server/holidayArt.ts.
   Selectors start with "html body.hol-on" so they outrank each page's own rules
   (including the layout-v2 header rules) without touching the store's brand colours. */

.hol-bar {
    position: relative; z-index: 101;
    background: var(--hol-announce-bg); color: var(--hol-announce-fg);
    border-bottom: 3px solid var(--hol-announce-border);
    box-shadow: 0 2px 10px rgba(0,0,0,.25);
    padding: 11px 16px 10px; text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}
.hol-bar__head { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 16px; font-weight: 800; letter-spacing: .2px; line-height: 1.35; }
.hol-bar__head svg { flex: 0 0 auto; }
.hol-bar__story { font-size: 12.5px; font-weight: 600; opacity: .92; margin-top: 3px; line-height: 1.5; }
.hol-bar__when { white-space: nowrap; }
.hol-bar__preview { margin-top: 6px; display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.18); font-size: 12px; font-weight: 700; }

/* Header: theme colours behind the store's own logo and name. */
html body.hol-on .store-header,
html body.hol-on .mall-header { background: var(--hol-header-bg) !important; border-bottom: 3px solid var(--hol-header-border) !important; }
html body.hol-on.layout-v2 .v2-store-id { background: rgba(255,255,255,.14); padding: 5px 12px; border-radius: 9px; }
html body.hol-on.layout-v2 .v2-store-id b { color: #fff !important; }
html body.hol-on .store-header .header-nav > a { color: rgba(255,255,255,.88) !important; }

/* Garland, kind 1: its own band under the header. */
.hol-garland {
    width: 100%; height: 56px; box-sizing: border-box; overflow: hidden; padding: 0 8px;
    display: flex; align-items: center; justify-content: space-evenly;
    background: var(--hol-garland-bg);
    border-top: 2px solid var(--hol-garland-border); border-bottom: 2px solid var(--hol-garland-border);
}
.hol-garland__tile { display: inline-flex; flex: 0 0 auto; }

/* Garland, kind 2: draped over the header's bottom edge (lights, pennants, bunting). */
.hol-drape { position: relative; height: 0; z-index: 99; pointer-events: none; }
.hol-drape__inner { position: absolute; left: 0; right: 0; top: var(--hol-drape-top, 0px); height: var(--hol-drape-h, 40px); overflow: hidden; }
.hol-drape__inner > svg { width: 100%; height: 100%; }

/* Hero */
html body.hol-on section.hero { background: var(--hol-hero-bg) !important; position: relative !important; overflow: hidden !important; }
html body.hol-on section.hero h1 { color: var(--hol-hero-fg) !important; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
html body.hol-on section.hero .tagline,
html body.hol-on section.hero .hero-desc,
html body.hol-on section.hero > p { color: var(--hol-hero-sub) !important; text-shadow: 0 1px 4px rgba(0,0,0,.5); opacity: 1; }
html body.hol-on section.hero > *:not(.hol-art):not(.hol-row) { position: relative; z-index: 6; }
html body.hol-on:not(.hol-mall) section.hero .hero-logo {
    display: inline-block; background: rgba(255,255,255,.95); padding: 8px 16px; border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,.35);
}
html body.hol-on:not(.hol-mall) section.hero .hero-logo img { margin-bottom: 0; display: block; }
html body.hol-on:not(.hol-mall) section.hero .hero-logo + h1 { margin-top: 12px; }

.hol-art { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hol-art svg { width: 100%; height: 100%; }
.hol-art .hol-corner > svg, .hol-art .hol-corner > div > svg { display: block; }

/* Scene row: front and centre along the bottom of the hero, in its own room. */
html body.hol-has-row section.hero { padding-bottom: var(--hol-pad) !important; }
.hol-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; align-items: flex-end; z-index: 5; pointer-events: none; }
.hol-row--static { position: static; margin-top: 22px; }
.hol-row--phone { display: none; }

/* Room above and below the text for corner art (St. Patrick's, Opening Day, ...). */
html body.hol-pad-y.layout-v2 section.hero { padding-top: calc(22px + var(--hol-pad-y)) !important; padding-bottom: calc(18px + var(--hol-pad-y)) !important; }
html body.hol-pad-y:not(.layout-v2) section.hero { padding-top: max(80px, var(--hol-pad-y)) !important; padding-bottom: max(80px, var(--hol-pad-y)) !important; }

/* Normal-flow additions (they grow the hero). */
.hol-flow { display: flex; justify-content: center; align-items: flex-end; flex-wrap: nowrap; pointer-events: none; }
.hol-flow--phone { display: none; }
.hol-pill {
    display: inline-block; margin: 18px auto 0; padding: 10px 20px; border-radius: 999px;
    background: rgba(255,255,255,.16); color: var(--hol-hero-fg); font-weight: 800; font-size: 16px;
    box-shadow: 0 4px 18px rgba(0,0,0,.3); max-width: 92%;
}
.hol-pill--mall { font-size: 17px; margin-top: 28px; }

/* Stage: a fixed 1440px canvas of full-size art under the hero text, scaled down on smaller screens. */
html body.hol-has-stage section.hero { padding-bottom: 0 !important; }
.hol-stage { position: relative; height: var(--hol-stage-h); margin-top: 14px; }
.hol-stage__canvas { position: absolute; top: 0; left: 50%; width: 1440px; height: var(--hol-stage-h); transform: translateX(-50%); transform-origin: top center; }
@media (max-width: 1300px) { .hol-stage { height: calc(var(--hol-stage-h) * .88); } .hol-stage__canvas { transform: translateX(-50%) scale(.88); } }
@media (max-width: 1100px) { .hol-stage { height: calc(var(--hol-stage-h) * .74); } .hol-stage__canvas { transform: translateX(-50%) scale(.74); } }
@media (max-width: 900px)  { .hol-stage { height: calc(var(--hol-stage-h) * .6); }  .hol-stage__canvas { transform: translateX(-50%) scale(.6); } }
@media (max-width: 700px)  { .hol-stage { height: calc(var(--hol-stage-h) * .46); } .hol-stage__canvas { transform: translateX(-50%) scale(.46); } }
@media (max-width: 480px)  { .hol-stage { height: calc(var(--hol-stage-h) * .27); } .hol-stage__canvas { transform: translateX(-50%) scale(.27); } }

/* Hanging garlands need a little room above the logo. */
html body.hol-has-drape.layout-v2:not(.hol-pad-y) section.hero { padding-top: 48px !important; }

/* Product-card ribbon */
.hol-badge {
    position: absolute; top: 8px; right: 8px; z-index: 20; pointer-events: none;
    background: var(--hol-badge-bg); color: var(--hol-badge-fg);
    font: 800 10.5px/1.3 -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; letter-spacing: .2px;
    padding: 4px 9px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3);
    max-width: 140px; text-align: center;
}

.product-image .hol-badge img { position: static !important; inset: auto !important; display: inline-block !important; width: 14px !important; height: 14px !important; object-fit: contain; vertical-align: -2px; margin-right: 4px; }
.hol-credit { font-size: 11px; color: #777; text-align: center; margin: 10px auto 0; padding: 0 16px; }
.hol-credit a { color: inherit; text-decoration: underline; }
.hol-preview-note { position: fixed; left: 12px; bottom: 12px; z-index: 2000; background: #111827; color: #fff; padding: 8px 14px; border-radius: 999px; font: 700 13px -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.35); }

/* Tablet: corner art only where there is room beside the text. */
@media (max-width: 700px) {
    .hol-corner { display: none !important; }
    html body.hol-pad-y.layout-v2 section.hero { padding-top: 22px !important; padding-bottom: 18px !important; }
    html body.hol-pad-y:not(.layout-v2) section.hero { padding-top: 60px !important; padding-bottom: 40px !important; }
    .hol-flow--desktop { display: none; }
    .hol-flow--phone { display: flex; }
}

/* Phone */
@media (max-width: 480px) {
    .hol-bar { padding: 9px 12px 8px; }
    .hol-bar__head { font-size: 15px; }
    .hol-bar__story { font-size: 12px; }
    .hol-garland { height: 34px; }
    .hol-garland__tile svg, .hol-garland__tile img { width: 24px !important; height: 24px !important; }
    .hol-row--desktop { display: none; }
    .hol-row--phone { display: flex; }
    html body.hol-has-row section.hero { padding-bottom: var(--hol-pad-phone) !important; }
    .hol-pill { font-size: 13.5px; padding: 8px 14px; }
    .hol-badge { font-size: 10px; padding: 3px 7px; max-width: 120px; }
}