.announcement-ribbon{background:var(--orange);color:var(--on-orange);font-size:12px;font-weight:600;line-height:1.5;border-bottom:4px solid #000}
.announcement-ribbon .shell{display:flex;justify-content:center;align-items:center;gap:24px;padding-block:9px}
.announcement-ribbon .shipping-note,.announcement-ribbon .discount-note{display:flex;align-items:center;gap:8px;padding-left:24px;border-left:1px solid rgba(29,29,31,.3)}
.announcement-ribbon svg{width:17px;height:17px}
.announcement-ribbon .ribbon-short{display:none}
.session-pending{visibility:hidden}
.logout-button{font-size:12px;white-space:nowrap}
.session-error{position:fixed;inset:0;background:white;z-index:100;display:grid;place-content:center;padding:30px;text-align:center;gap:18px;visibility:visible}
.session-error p{line-height:1.7;max-width:45ch}
.banner-slide{height:320px;padding:28px 32px;grid-template-columns:1fr 43%;gap:24px}
.banner-slide>div{padding-bottom:26px}
.banner-slide h2{font-size:34px;max-width:16ch}
.banner-slide p{font-size:14px;margin:15px 0 17px}
.banner-link{font-size:13px}
.banner-image{height:264px;align-self:center}
.advertisements>.motion-controls{left:32px;bottom:16px}
@media(max-width:1120px){.banner-slide{height:285px;padding:25px 26px;gap:16px}.banner-slide h2{font-size:29px}.banner-image{height:230px}.advertisements>.motion-controls{left:26px}.announcement-ribbon .shell{gap:16px}.announcement-ribbon .shipping-note,.announcement-ribbon .discount-note{padding-left:16px}}
@media(max-width:800px){.announcement-ribbon{font-size:11px}.announcement-ribbon .shell{gap:12px}.announcement-ribbon .shipping-note,.announcement-ribbon .discount-note{padding-left:12px}.header-actions{gap:12px}.banner-slide{height:285px}.banner-image{height:230px}}
@media(max-width:620px){.announcement-ribbon .shell{flex-wrap:wrap;column-gap:12px;row-gap:3px;text-align:center;padding-block:8px}.announcement-ribbon .shell>span:first-child{flex-basis:100%}.announcement-ribbon .shipping-note,.announcement-ribbon .discount-note{border:0;padding:0;font-size:11px;font-weight:600}.announcement-ribbon .discount-note{border-left:1px solid rgba(29,29,31,.3);padding-left:12px}.announcement-ribbon .ribbon-long{display:none}.announcement-ribbon .ribbon-short{display:inline}.announcement-ribbon svg{width:14px;height:14px}.header-actions{gap:12px}.logout-button{font-size:11px}.banner-slide{height:255px;padding:24px 18px 44px;grid-template-columns:1.1fr 1fr;gap:10px;align-items:center}.banner-slide h2{font-size:24px;max-width:12ch}.banner-slide p{font-size:12px;line-height:1.65;margin:11px 0 13px}.banner-slide>div{padding:0}.banner-link{font-size:11px}.banner-image{height:177px;margin:0}.advertisements>.motion-controls{left:18px;right:auto;bottom:10px}}
/* The smallest phones (320 to 374 px): the two offers keep their one line (the owner, 2 October 2026: "do one line for phone") by
   setting their icons aside and drawing a little closer together; from 375 px they fit as they are. */
@media(max-width:374px){.announcement-ribbon .shell{column-gap:10px}.announcement-ribbon .shipping-note svg,.announcement-ribbon .discount-note svg{display:none}.announcement-ribbon .shipping-note,.announcement-ribbon .discount-note{font-size:10.5px}.announcement-ribbon .discount-note{padding-left:10px}}

/* Age verification popup, matching the live AgeRestriction component (popups.module.scss .container/.modal/.enterbtn). */
.age-gate{width:min(90%,550px);max-width:none;border:0;border-radius:0;padding:48px 32px;margin:auto;background:#fff;color:#374957;text-align:center;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.age-gate::backdrop{background:rgba(0,0,0,.5)}
.age-gate-card{display:flex;flex-direction:column;align-items:center}
.age-gate img{display:block;height:104px;width:auto;transition:transform .5s}
.age-gate img:hover{transform:scale(1.05)}
.age-gate h2{font-size:24px;font-weight:600;letter-spacing:1px;text-transform:capitalize;color:#000;width:min(95%,500px);line-height:1.33;margin:15px 0;padding-bottom:10px;border-bottom:1px solid #ccc}
.age-gate p{font-size:14px;line-height:20px;color:#000;width:min(95%,465px);margin:0 0 5px}
.age-gate-actions{display:flex;flex-direction:column;margin:6px auto 0}
.age-gate-actions button,.age-gate-actions a{display:inline-flex;align-items:center;justify-content:center;min-width:200px;min-height:36px;margin:8px;padding:6px 10px;border:1px solid var(--orange);border-radius:4px;background:var(--orange);color:var(--on-orange);font:inherit;font-size:13px;font-weight:800;letter-spacing:.2rem;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s}
.age-gate-actions button:hover,.age-gate-actions a:hover{transform:scale(1.1)}
.age-gate-actions button:focus-visible,.age-gate-actions a:focus-visible{outline:2px solid #000;outline-offset:3px}
@media(min-width:768px){.age-gate-actions{flex-direction:row}.age-gate h2{margin:38px 0 16px}}
body:has(.age-gate[open]){overflow:hidden}
.account-badge{display:inline-flex;align-items:center;gap:10px;background:var(--soft);border:1px solid var(--line);border-radius:999px;padding:5px 14px 5px 5px;margin-right:6px;max-width:260px;text-decoration:none;color:inherit}
.account-badge:hover{border-color:var(--orange)}
.account-badge .badge-avatar{width:32px;height:32px;border-radius:50%;background:var(--orange);color:var(--on-orange);font-weight:800;font-size:12px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.account-badge .badge-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.account-badge .badge-name{font-size:13px;font-weight:700;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.account-badge .badge-credit{font-size:12px;color:#059669;font-weight:700;white-space:nowrap}
.account-badge .badge-credit.is-zero{color:var(--faint);font-weight:600}
@media(max-width:800px){.account-badge{padding:3px;gap:0;margin-right:2px}.account-badge .badge-text{display:none}}

@media(max-width:820px),(pointer:coarse){.header-actions .plain-button,.header-actions .logout-button{min-width:44px;min-height:44px}}

/* Keep every header control reachable on narrow screens, including larger cart totals. */
@media(max-width:620px){.header-actions{max-width:100%;flex-wrap:wrap;justify-content:flex-end;row-gap:4px}}
@media(max-width:360px){.header-actions{column-gap:4px}}