.opening-promotion{padding:0;border:1px solid #20201c;color:#20201c;background:#f3eee4;width:min(830px,calc(100vw - 32px));max-height:90svh;overflow:auto;box-shadow:9px 9px 0 #f26b24}
.opening-promotion[open]{display:grid;grid-template-columns:1fr 1fr;animation:promotion-arrive .5s cubic-bezier(.22,1,.36,1) both}
.opening-promotion::backdrop{background:#15151199;backdrop-filter:blur(5px)}
.promotion-close{position:absolute;right:14px;top:10px;z-index:3;display:grid;place-items:center;width:40px;height:40px;border:1px solid #20201c;background:#f3eee4;border-radius:50%;font-size:27px;line-height:1;color:#20201c;cursor:pointer}
.promotion-art{background:#f26b24;position:relative;min-height:480px;overflow:hidden;display:grid;place-items:center}
.promotion-art>img:first-child{width:116%;height:auto;max-width:none;transform:rotate(-12deg);filter:drop-shadow(0 18px 18px #20201c33)}
.promotion-seal{position:absolute;top:28px;left:25px;border:1px solid #20201c;border-radius:50%;width:105px;height:105px;display:grid;place-items:center;text-align:center;padding:20px;background:#f3eee4;font:700 25px/1 Khand,sans-serif;transform:rotate(-12deg)}
.promotion-art .promotion-wordmark{position:absolute;left:8%;bottom:26px;width:84%;height:auto}
.promotion-copy{padding:65px 35px 38px;display:flex;flex-direction:column;justify-content:center;font-family:Manrope,Arial,sans-serif}
.promotion-eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;margin:0 0 19px}
.promotion-copy h2{font:700 clamp(42px,5vw,64px)/.98 Khand,sans-serif;margin:0 0 20px;text-transform:uppercase;overflow-wrap:anywhere}
.promotion-copy>p:not(.promotion-eyebrow){font-size:16px;line-height:1.6;margin:0 0 20px}
.promotion-copy .promotion-terms{font-size:12px!important;line-height:1.5!important;margin-top:12px!important}
.promotion-code{border:1px dashed #20201c;padding:14px 16px;display:flex;justify-content:space-between;gap:12px;align-items:center;background:#f26b2410}
.promotion-code>span{font-size:11px;letter-spacing:.06em}.promotion-code strong{font-size:20px;overflow-wrap:anywhere}
.promotion-cta{display:flex;justify-content:space-between;gap:10px;padding:16px 19px;background:#20201c;color:#f3eee4!important;text-decoration:none;font-size:14px;font-weight:600;margin-top:10px}
.promotion-dismiss{border:0;background:none;text-decoration:underline;text-underline-offset:4px;margin-top:20px;padding:6px;font-size:13px;color:#20201c;cursor:pointer}
@keyframes promotion-arrive{from{opacity:0;transform:translateY(25px) rotate(-2deg)}to{opacity:1;transform:none}}
@media(max-width:600px){.opening-promotion{width:calc(100vw - 24px);max-height:88svh;box-shadow:5px 5px 0 #f26b24}.opening-promotion[open]{grid-template-columns:1fr}.promotion-art{min-height:0;height:210px;padding:14px;place-items:center}.promotion-art>img:first-child{position:static;width:auto;height:auto;max-width:82%;max-height:180px;object-fit:contain;transform:none;filter:drop-shadow(0 8px 12px #20201c33)}.promotion-seal{width:64px;height:64px;left:12px;top:12px;font-size:14px;padding:8px;line-height:1.05}.promotion-art .promotion-wordmark{display:none}.promotion-close{width:32px;height:32px;font-size:21px;right:10px;top:10px}.promotion-copy{padding:22px 20px 24px}.promotion-eyebrow{margin-bottom:10px;font-size:11px}.promotion-copy h2{font-size:clamp(32px,9vw,42px);margin-bottom:12px}.promotion-copy>p:not(.promotion-eyebrow){font-size:14px;line-height:1.5;margin-bottom:14px}.promotion-cta{padding:14px 16px;font-size:13px}.promotion-dismiss{margin-top:12px}.promotion-code{padding:11px 13px}.promotion-code strong{font-size:17px}}
@media(prefers-reduced-motion:reduce){.opening-promotion[open]{animation:none}}

@media(max-width:600px) and (max-height:700px){.promotion-art{height:168px}.promotion-art>img:first-child{max-height:140px}.promotion-copy h2{font-size:30px}}

/* ------------------------------------------------- mobile: make it fit
   Measured on four phones with a fuller campaign -- a longer headline, a full
   paragraph, a promo code and terms, all of which the admin can write. The
   popup overflowed on three of them (71-95px hidden below the fold) and took
   88% of the screen on all four.

   The art panel was a fixed 210px of mostly empty orange, which is the easiest
   height to give back, so it is now tied to the viewport rather than fixed.
   Everything else is a small trim. Desktop is untouched. */
@media(max-width:600px){
 .opening-promotion{max-height:92svh}
 .promotion-art{--art-h:clamp(140px,22svh,200px);height:var(--art-h);padding:10px}
 /* Never crop: this is a product advert and the admin can upload any image.
    The cap has to be a definite length, not a percentage -- the panel is a grid
    with place-items:center, so a percentage height on the item has no definite
    containing block, resolves to auto, and rendered a 330px image inside a
    143px panel that overflow:hidden then cut in half. */
 .promotion-art>img:first-child{width:auto;height:auto;max-width:100%;max-height:calc(var(--art-h) - 20px);object-fit:contain}
 .promotion-seal{width:54px;height:54px;left:10px;top:10px;font-size:12px;padding:6px}
 .promotion-copy{padding:18px 18px 20px}
 .promotion-eyebrow{margin-bottom:7px}
 .promotion-copy h2{font-size:clamp(27px,7.6vw,34px);margin-bottom:9px}
 .promotion-copy>p:not(.promotion-eyebrow){font-size:14px;line-height:1.45;margin-bottom:11px}
 .promotion-code{padding:9px 12px;margin-bottom:2px}
 .promotion-code strong{font-size:16px}
 .promotion-cta{padding:12px 15px;margin-top:8px}
 .promotion-dismiss{margin-top:9px;padding:4px}
 .promotion-copy .promotion-terms{margin-top:8px!important;line-height:1.4!important}
}
/* Short phones give up the picture rather than the button. */
@media(max-width:600px) and (max-height:680px){
 .promotion-art{--art-h:clamp(110px,16svh,140px)}
 .promotion-copy h2{font-size:26px}
}

/* ------------------------------------------- mobile: centred, compact, square
   On a real iPhone the popup rendered about 700px tall with a wide blank band
   between the picture and the copy, which headless Chrome never reproduced at
   the same viewport. The mechanism that allows it, whatever makes the dialog
   taller than its content on that browser, is this: the grid's rows are auto
   and align-content is normal, so a taller dialog stretches the copy's row,
   and .promotion-copy is a flex column with justify-content:center, which then
   pushes its content into the middle and leaves the space above and below.

   Rows that never stretch and copy that starts at the top make the band
   impossible regardless of how the dialog is sized. */
@media(max-width:600px){
 /* fit-content, not auto: measured on this dialog, the used height came out
    at exactly max-height while its two rows totalled 396px, leaving a third of
    the card empty. fit-content makes it shrink-wrap its rows and still honour
    max-height when a longer campaign needs to scroll. */
 .opening-promotion{width:min(90vw,382px);max-height:86svh;height:fit-content;margin:auto}
 .opening-promotion[open]{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start}
 .promotion-copy{justify-content:flex-start;padding:20px 20px 22px}
 /* A little squarer: roughly the card's own width across the picture. */
 .promotion-art{--art-h:clamp(132px,19svh,178px)}
 .promotion-copy h2{font-size:clamp(26px,7.2vw,33px);margin-bottom:8px}
 .promotion-copy>p:not(.promotion-eyebrow){margin-bottom:10px}
 .promotion-cta{margin-top:6px}
 .promotion-dismiss{margin-top:8px}
}
@media(max-width:600px) and (max-height:680px){
 .promotion-art{--art-h:clamp(104px,14svh,132px)}
}