/* Go-live P2c (spec R1): the consent banner, in the shop's own colours. Reject and Accept share one style (R1).
   It sits above the Top door (60) and the preview's help box (85), which covered its buttons on the preview, and below
   the showcase and review tours (10000 and up). */
.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:90;display:flex;gap:16px;align-items:center;justify-content:space-between;max-width:960px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow-y:auto;margin:0 auto;padding:16px 20px;background:#fff;color:#17152B;border:1px solid #DDD9E5;border-radius:8px;box-shadow:0 8px 28px rgba(23,21,43,.14);font:400 15px/1.5 'Open Sans',Arial,sans-serif}
.consent-banner__text{margin:0}
.consent-banner__text a{color:#332483;text-decoration:underline;white-space:nowrap}
/* Slice 7, the isolated critic: emphasis no heavier than the choose view's heading (S4). */
.consent-banner strong{font-weight:600}
.consent-banner__actions{display:flex;gap:8px;flex:none}
/* Slice 7 (critic M1, M2): the bar's button height (rule 14, 48-52px), and one filled button per view (rule 13): an
   outlined button is the hero's "Design your own" treatment. Reject all and Accept all always share one style (R1). */
.consent-banner__button{min-height:48px;padding:0 18px;border:1px solid #332483;border-radius:6px;background:#332483;color:#fff;font:600 15px/1 'Open Sans',Arial,sans-serif;cursor:pointer}
.consent-banner__button--secondary{background:#fff;color:#332483}
.consent-banner__button:focus-visible{outline:3px solid #332483;outline-offset:2px}
@media (max-width:760px){.consent-banner{flex-direction:column;align-items:stretch;left:8px;right:8px;bottom:8px;max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);font-size:16px}.consent-banner__actions{flex-direction:row}.consent-banner__button{flex:1}}
/* Reject all is never smaller than Accept all: on computers every button takes one width (phones share the row). */
@media (min-width:761px){.consent-banner__button{min-width:8.5em}}
/* Slice 5: the choose view. One column; the switches are the shop's own checkboxes, large enough to tap. Slice 7: no
   wider than its words need on computers (S2), and scrollable where a short screen cannot show it whole (S1, above). */
.consent-banner--choosing{flex-direction:column;align-items:stretch}
@media (min-width:761px){.consent-banner--choosing{max-width:720px}}
.consent-banner__choices{margin:0;padding:0;border:0;display:grid;gap:10px}
.consent-banner__choices legend{font-weight:600;margin-bottom:6px;padding:0}
.consent-banner__always{margin:0;color:#4A4760}
.consent-banner__choice{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
/* Slice 7 (S6): drawn by the shop, so the unticked edge reads in Safari too (WebKit's own box edge is under 3:1). */
.consent-banner__choice input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:22px;height:22px;margin:2px 0 0;border:2px solid #4A4760;border-radius:4px;background:#fff;flex:none;cursor:pointer}
.consent-banner__choice input:checked{background:#332483;border-color:#332483}
.consent-banner__choice input:checked::before{content:'';width:10px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-1px) rotate(-45deg)}
.consent-banner__choice input:focus-visible{outline:3px solid #332483;outline-offset:2px}
.consent-banner__choice strong{display:block}
.consent-banner--choosing .consent-banner__actions{justify-content:flex-end}
@media (max-width:760px){.consent-banner--choosing .consent-banner__actions{flex-direction:column}}
/* Slice 7 (S7): the preview's help box (preview hosts only) steps aside while the banner asks, rather than showing a
   clipped edge beside it. */
html.has-consent-banner .preview-navigation{display:none}