/*
 * Public gift cards. A tidy stack of real cards beside the value range, one button and three short steps;
 * the designs as a compact carousel. Themes: cream (panel, default), light (no panel), dark.
 */
.epic-public-gifts { --epg-ink:#24221f; --epg-muted:#5c5750; --epg-line:#ddd3c4; --epg-bronze:#6d5539; --epg-focus:#326800; --epg-cta-bg:#79b928; --epg-cta-text:#ffffff; --epg-arrow-bg:#fff;
 --epg-display:"degular",sans-serif; --epg-body:"Inter",sans-serif;
 container:epg / inline-size; box-sizing:border-box; width:100%; min-width:0; color:var(--epg-ink); font:16px/1.55 var(--epg-body); }
.epic-public-gifts[data-theme="cream"] { background:#f3eee6; padding:clamp(22px,4vw,56px); border-radius:5px; }
.epic-public-gifts[data-theme="dark"] { --epg-ink:#f3eee6; --epg-muted:#cdc6bb; --epg-line:#3f3a34; --epg-bronze:#c9a97c; --epg-focus:#b4e77e; --epg-arrow-bg:#2b2824; background:#151413; padding:clamp(22px,4vw,56px); border-radius:5px; }
.epic-public-gifts * { box-sizing:border-box; }
.epic-public-gifts :is(h2,p,ol,figure) { margin:0; color:inherit; overflow-wrap:anywhere; }
.epic-public-gifts .screen-reader-text { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.epic-public-gifts h2 { font:600 clamp(32px,4vw,48px)/1.05 var(--epg-display); letter-spacing:-.025em; }
.epic-public-gifts > h2 { margin-bottom:24px; }

/* Stage: stack of cards + copy */
.epg-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center; }
.epg-stage:not(:has(.epg-fan)) { grid-template-columns:minmax(0,1fr); }
.epg-fan { position:relative; aspect-ratio:10 / 7; }
.epg-fan .epic-gc { position:absolute; width:76%; filter:drop-shadow(0 12px 22px rgba(36,34,31,.18)) drop-shadow(0 2px 4px rgba(36,34,31,.08)); }
.epg-fan .epic-gc:nth-child(1) { left:0; top:0; transform:rotate(-6deg); }
.epg-fan .epic-gc:nth-child(2) { left:11%; top:13%; transform:rotate(-1.5deg); }
.epg-fan .epic-gc:nth-child(3) { left:22%; top:26%; transform:rotate(3deg); }
.epg-fan .epic-gc:only-child { left:12%; top:14%; transform:rotate(-2deg); }

.epg-copy h2 { margin-bottom:18px; }
.epg-range { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; }
.epg-range b { font:600 clamp(54px,6vw,84px)/1 var(--epg-display); letter-spacing:-.035em; color:var(--epg-bronze); font-variant-numeric:tabular-nums; }
.epg-range i { font:400 20px/1 var(--epg-display); font-style:normal; color:var(--epg-muted); }
.epg-caption { margin-top:10px !important; font-size:14px; color:var(--epg-muted); }

/* Button: the theme component at its natural width. :is(body,#epic-gift-cards) matches the page wrapper's ID
   specificity, so page-level button rules cannot stretch it; the green is set here, never by an unbuilt utility. White text, as the theme component. */
:is(body,#epic-gift-cards) .epic-public-gifts .btn-primary { width:fit-content; max-width:100%; min-height:48px; justify-content:center; white-space:normal; text-align:center; background:var(--epg-cta-bg); color:var(--epg-cta-text); font-weight:600; }
:is(body,#epic-gift-cards) .epg-copy .btn-primary { margin-top:26px; }
.epic-public-gifts :is(a,button,.epg-track):focus-visible { outline:3px solid var(--epg-focus); outline-offset:3px; }

/* Three short steps, one per row */
.epg-steps { list-style:none !important; padding:0 !important; margin-top:30px !important; counter-reset:epgs; }
.epg-steps li { counter-increment:epgs; display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:baseline; padding:11px 0; border-top:1px solid var(--epg-line); font-size:15px; line-height:1.4; }
.epg-steps li::before { content:"0" counter(epgs); font:600 17px/1 var(--epg-display); color:var(--epg-bronze); }

/* Designs: compact carousel. Cards stay small; `columns` sets their size (2 large, 3 medium, 4 small). */
.epg-stage + .epg-occasions { margin-top:52px; }
.epg-carousel { position:relative; }
.epg-track { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:2px; padding:6px 2px 10px; scrollbar-width:none; overscroll-behavior-x:contain; }
.epg-track::-webkit-scrollbar { display:none; }
.epg-slide { flex:0 0 clamp(150px, 42%, calc(720px / var(--epg-columns))); scroll-snap-align:start; display:grid; gap:10px; min-width:0; }
.epg-slide .epic-gc { filter:drop-shadow(0 6px 14px rgba(36,34,31,.12)); transition:transform .2s ease; }
.epg-slide:hover .epic-gc { transform:translateY(-3px); }
.epg-slide figcaption { font:500 14px/1.3 var(--epg-body); color:var(--epg-ink); }
.epg-btn { position:absolute; z-index:2; top:calc(6px + var(--epg-art-h, 130px) / 2 - 20px); display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:var(--epg-arrow-bg); color:var(--epg-ink); box-shadow:0 4px 14px rgba(36,34,31,.2); cursor:pointer; transition:opacity .15s; }
.epg-prev { left:8px; } .epg-next { right:8px; }
.epg-btn svg { width:18px; height:18px; }
.epg-btn:disabled { opacity:0; pointer-events:none; }
.epg-carousel.is-static .epg-btn { display:none; }
.epg-foot { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; margin-top:14px; }
.epg-note { font-size:13px; color:var(--epg-muted); }

@container epg (max-width:760px) {
 .epg-stage { grid-template-columns:minmax(0,1fr); }
 .epg-fan { max-width:440px; width:100%; margin:0 auto; }
}
@container epg (max-width:520px) { :is(body,#epic-gift-cards) .epic-public-gifts .btn-primary { width:100%; } .epg-foot { align-items:stretch; } }
@media (prefers-reduced-motion:reduce) { .epic-public-gifts * { scroll-behavior:auto; transition:none; } .epg-slide:hover .epic-gc { transform:none; } }
