/* REVIEW ONLY: palette options and the palette switcher. Remove this file and js/review.js before launch,
   after copying the chosen palette values into :root in site.css. */
/* ================= PALETTES (review) =================
   Each palette maps the same roles: page, block, cards, text, accent.
   The default (no data-palette) is Cobalt & Signal. */
html[data-palette="oxblood"]{--ink:#1C1113;--ink-rgb:28,17,19;--cobalt:#3A1F23;--cobalt-2:#2A181B;--cobalt-3:#221416;--cream:#F1E7DC;--cream-dim:#BCA9A3;--signal:#C9A47E;--signal-dk:#A8845F;--line:rgba(241,231,220,.13)}
html[data-palette="forest"]{--ink:#111B16;--ink-rgb:17,27,22;--cobalt:#22382D;--cobalt-2:#192920;--cobalt-3:#14211A;--cream:#EDE6DA;--cream-dim:#A9B3A8;--signal:#C47F5E;--signal-dk:#A2644A;--line:rgba(237,230,218,.13)}
html[data-palette="graphite"]{--ink:#15181A;--ink-rgb:21,24,26;--cobalt:#25303A;--cobalt-2:#1E2327;--cobalt-3:#191D20;--cream:#EAE6E0;--cream-dim:#A7ABAE;--signal:#4F9E96;--signal-dk:#3C7F78;--line:rgba(234,230,224,.13)}
html[data-palette="espresso"]{--ink:#1B1613;--ink-rgb:27,22,19;--cobalt:#2F3A31;--cobalt-2:#271F1A;--cobalt-3:#211A16;--cream:#EFE6DA;--cream-dim:#B4A89B;--signal:#9DB39A;--signal-dk:#7E957B;--line:rgba(239,230,218,.13)}
html[data-palette="plum"]{--ink:#191420;--ink-rgb:25,20,32;--cobalt:#33284A;--cobalt-2:#241D2D;--cobalt-3:#1F1927;--cream:#F0E8E4;--cream-dim:#B7AAB8;--signal:#D9967A;--signal-dk:#BC7C61;--line:rgba(240,232,228,.13)}
html[data-palette="lagoon"]{--ink:#0E1C1E;--ink-rgb:14,28,30;--cobalt:#173A3D;--cobalt-2:#152A2D;--cobalt-3:#112326;--cream:#ECE7DF;--cream-dim:#A5B5B2;--signal:#D58670;--signal-dk:#B66C57;--line:rgba(236,231,223,.13)}
html[data-palette] .btn--solid{color:var(--ink)}
html[data-palette] .btn--solid:hover{color:var(--ink)}
html[data-palette] .truck__letter{color:var(--ink)}
html[data-palette] .faq summary::after{color:var(--ink)}
html[data-palette] .actionbar a:first-child{color:var(--ink)}
html[data-palette] .award:first-child b,html[data-palette] .award:first-child span{color:var(--ink)}
html[data-palette] .slide__badge{color:var(--ink)}
html[data-palette] .slide__badge b{color:var(--cream)}
html[data-palette] .special__text h2 em{color:var(--cream)}



/* BTW Sign palette: taken from the storefront sign (black panel, white letters, red accent) */
html[data-palette="sign"]{--ink:#16181B;--ink-rgb:22,24,27;--cobalt:#2A2D31;--cobalt-2:#202326;--cobalt-3:#1B1D20;--cream:#F4F1EB;--cream-dim:#ABAAA6;--signal:#B5403A;--signal-dk:#93322D;--line:rgba(244,241,235,.12)}
html[data-palette="sign"] .btn--solid,html[data-palette="sign"] .btn--solid:hover{color:var(--cream)}
html[data-palette="sign"] .btn--solid:hover{background:var(--signal-dk);border-color:var(--signal-dk)}
html[data-palette="sign"] .truck__letter,html[data-palette="sign"] .faq summary::after,html[data-palette="sign"] .actionbar a:first-child,
html[data-palette="sign"] .award:first-child b,html[data-palette="sign"] .award:first-child span,html[data-palette="sign"] .slide__badge,
html[data-palette="sign"] .titlebar{color:var(--cream)}
html[data-palette="sign"] .special__text,html[data-palette="sign"] .special__text h2{color:var(--cream)}
html[data-palette="sign"] .special__text h2 em{color:var(--ink)}

/* Vivid palettes */
html[data-palette="crimson"]{--ink:#0E0B0C;--ink-rgb:14,11,12;--cobalt:#3A0E16;--cobalt-2:#1C1416;--cobalt-3:#161012;--cream:#F7F2EE;--cream-dim:#B9AEAD;--signal:#E1243C;--signal-dk:#B81B30;--line:rgba(255,255,255,.12)}
html[data-palette="emerald"]{--ink:#06170F;--ink-rgb:6,23,15;--cobalt:#0D4A33;--cobalt-2:#0D261B;--cobalt-3:#0A1E15;--cream:#F2F5EF;--cream-dim:#A9C2B4;--signal:#FF5E4D;--signal-dk:#E0453A;--line:rgba(255,255,255,.12)}
html[data-palette="teal"]{--ink:#071419;--ink-rgb:7,20,25;--cobalt:#0B3A44;--cobalt-2:#0E2329;--cobalt-3:#0B1C21;--cream:#EEF6F6;--cream-dim:#A5BFC2;--signal:#13C7B5;--signal-dk:#0FA394;--line:rgba(255,255,255,.12)}
html[data-palette="violet"]{--ink:#120A22;--ink-rgb:18,10,34;--cobalt:#34186B;--cobalt-2:#1E1335;--cobalt-3:#180F2B;--cream:#F4F0FA;--cream-dim:#B9AFCB;--signal:#B8F23C;--signal-dk:#9AD21F;--line:rgba(255,255,255,.12)}
html[data-palette="ember"]{--ink:#141110;--ink-rgb:20,17,16;--cobalt:#3D1A0B;--cobalt-2:#221C19;--cobalt-3:#1C1715;--cream:#F6F0EA;--cream-dim:#B8ADA6;--signal:#FF7A1C;--signal-dk:#E0630B;--line:rgba(255,255,255,.12)}
html[data-palette="crimson"] .btn--solid,html[data-palette="crimson"] .btn--solid:hover{color:var(--cream)}
html[data-palette="crimson"] .btn--solid:hover{background:var(--signal-dk);border-color:var(--signal-dk)}
html[data-palette="crimson"] .truck__letter,html[data-palette="crimson"] .faq summary::after,html[data-palette="crimson"] .actionbar a:first-child,html[data-palette="crimson"] .award:first-child b,html[data-palette="crimson"] .award:first-child span,html[data-palette="crimson"] .slide__badge,html[data-palette="crimson"] .titlebar{color:var(--cream)}
html[data-palette="crimson"] .special__text,html[data-palette="crimson"] .special__text h2{color:var(--cream)}
html[data-palette="crimson"] .special__text h2 em{color:var(--ink)}


/* Palette dropdown (review only): compact control in the nav bar; full width at the top of the mobile menu */
.palsel{display:flex;align-items:center;gap:8px;cursor:pointer;margin-left:6px}
.palsel__label{font:600 13px/1 var(--body);color:var(--cream-dim)}
/* The select fills the whole pill, so a click anywhere (text, color chip, or arrow) opens it; chip and arrow are drawn on top and let clicks pass through */
.palsel__box{position:relative;display:flex;align-items:center;background:var(--cobalt-2);border:1px solid var(--line);border-radius:999px;height:40px}
.palsel__box::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;border-right:2px solid var(--cream-dim);border-bottom:2px solid var(--cream-dim);transform:translateY(-70%) rotate(45deg);pointer-events:none}
.palsel__sw{position:absolute;left:9px;top:50%;transform:translateY(-50%);display:flex;width:30px;height:16px;border-radius:999px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none}
.palsel__sw i{flex:1}
.palsel select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:var(--cream);font:600 14px/1 var(--body);cursor:pointer;height:100%;padding:0 34px 0 47px;border-radius:999px;max-width:250px}
.palsel select:focus{outline:none}
.palsel__box:focus-within{outline:3px solid var(--signal);outline-offset:2px}
.palsel select option,.palsel select optgroup{color:#111;background:#fff}
.palsel--mob{margin:0 0 18px;padding-bottom:18px;border-bottom:1px solid var(--line);justify-content:space-between}
.palsel--mob .palsel__label{font-size:15px}
.palsel--mob .palsel__box{height:48px;flex:1;max-width:320px}
.palsel--mob select{max-width:none;width:100%;font-size:16px}
@media (max-width:1180px) and (min-width:901px){.palsel__label{display:none}.palsel{margin-left:2px}.palsel select{max-width:200px}}

html[data-palette]:not([data-palette="sign"]):not([data-palette="crimson"]) .notice__call{color:var(--ink)}
html:not([data-palette]) .notice__call{color:var(--ink)}
