/* MCHILS Retail universal premium personalization — accessible across all Retail demos. */
:root{--ux-font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;--ux-text-mult:1;--ux-pad:1}
html[data-ux-font="editorial"]{--ux-font:Georgia,Cambria,"Times New Roman",serif}
html[data-ux-font="rounded"]{--ux-font:"Trebuchet MS",Verdana,"Segoe UI",sans-serif}
html[data-ux-font="technical"]{--ux-font:"Segoe UI",Arial,"Helvetica Neue",sans-serif}
html[data-ux-density="compact"]{--ux-pad:.7}
html[data-ux-scale="large"]{--ux-text-mult:1.12}
html[data-ux-scale="extra"]{--ux-text-mult:1.27}
html:not([data-ux-font="modern"]) body,
html:not([data-ux-font="modern"]) button,
html:not([data-ux-font="modern"]) input,
html:not([data-ux-font="modern"]) select,
html:not([data-ux-font="modern"]) textarea{font-family:var(--ux-font)!important}
html[data-ux-font="editorial"] h1,html[data-ux-font="editorial"] h2,
html[data-ux-font="editorial"] h3,html[data-ux-font="editorial"] .hero h1,
html[data-ux-font="editorial"] .ep-photo-hero h2,
html[data-ux-font="editorial"] .cs-hero h1{font-family:var(--ux-font)!important;letter-spacing:-.055em!important}
html[data-ux-font="technical"] h1,html[data-ux-font="technical"] h2{letter-spacing:-.075em}
html[data-ux-font="rounded"] button,html[data-ux-font="rounded"] .ep-photo-tile{border-radius:22px!important}
html[data-ux-theme="obsidian"]{--bg:#0a101b!important;--card:#161d28!important;--panel:#121a26!important;--panel2:#1f2936!important;--ink:#f4f0e7!important;--muted:#afb7bb!important;--line:#384154!important;--accent:#eac58b!important;--accent2:#f0d8a4!important;--sub:#b2b9c0!important;--edge:#354052!important;--header:#0b1018!important;--headink:#fbf4e8!important;--hero:#2a3036!important;color-scheme:dark}
html[data-ux-theme="sapphire"]{--bg:#08182b!important;--card:#12283d!important;--panel:#101f33!important;--panel2:#192f48!important;--ink:#f0f8ff!important;--muted:#9cb5cf!important;--line:#34516a!important;--accent:#65dafa!important;--accent2:#b7efff!important;--sub:#a1b5cc!important;--edge:#33536d!important;--header:#06182b!important;--headink:#fff!important;--hero:#193c5e!important;color-scheme:dark}
html[data-ux-theme="emerald"]{--bg:#0b1c17!important;--card:#142a23!important;--panel:#10281e!important;--panel2:#1b382f!important;--ink:#effcf5!important;--muted:#9dc1b0!important;--line:#2c5646!important;--accent:#a5e1b4!important;--accent2:#d1f3d9!important;--sub:#a2c4b4!important;--edge:#2d5646!important;--header:#0d211a!important;--headink:#f2fff8!important;--hero:#244b3b!important;color-scheme:dark}
html[data-ux-theme="rose"]{--bg:#241721!important;--card:#332331!important;--panel:#30202f!important;--panel2:#402b3e!important;--ink:#fff4f8!important;--muted:#dab5c8!important;--line:#63475a!important;--accent:#f2acca!important;--accent2:#f9d5e8!important;--sub:#dab5c8!important;--edge:#62485c!important;--header:#281a27!important;--headink:#fff3f8!important;--hero:#503444!important;color-scheme:dark}
html[data-ux-theme="pearl"]{--bg:#f9f6ef!important;--card:#ffffff!important;--panel:#ffffff!important;--panel2:#f1ede6!important;--ink:#2e2a25!important;--muted:#82796c!important;--line:#dfd4c6!important;--accent:#9d7250!important;--accent2:#c69d68!important;--sub:#857b70!important;--edge:#e2d6c6!important;--header:#f2eadf!important;--headink:#28221a!important;--hero:#eee2d4!important;color-scheme:light}
html[data-ux-theme]:not([data-ux-theme="original"]) body{background:var(--bg)!important;color:var(--ink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .sidebar{background:var(--panel)!important;border-color:var(--line)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .topbar{background:color-mix(in srgb,var(--panel) 96%,transparent)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .shop-head{background:var(--header)!important;color:var(--headink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .head-links a{color:var(--headink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .announcement{background:var(--accent)!important;color:var(--bg)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .hero-box{background:var(--hero)!important;color:var(--ink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .tile{background:var(--card)!important;border-color:var(--edge)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .tile-name{color:var(--ink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .filter:not(.active){background:var(--card)!important;color:var(--ink)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .filter.active{background:var(--accent)!important;color:var(--bg)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .tile-add{background:var(--accent)!important;color:var(--bg)!important}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-hub{--rb:var(--accent);--soft:var(--panel2);color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-heading p{color:var(--muted)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-pick{background:var(--card);border-color:var(--line)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-cat{color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-promise{color:var(--muted)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-explore,
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-pickbottom button{background:var(--accent);color:var(--bg)}
html[data-ux-theme]:not([data-ux-theme="original"]) .rb-promo{background:var(--panel2);color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-hero{background:var(--hero)!important;color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-hero p{color:var(--muted)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-header{background:color-mix(in srgb,var(--card) 95%,transparent);color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) body.cs-pharmacy,
html[data-ux-theme]:not([data-ux-theme="original"]) body.cs-shopping{--dark:var(--header);--outline:var(--line);--surface:var(--panel2);--on:var(--headink);--ink:var(--ink);--hero:var(--hero);--accent2:var(--accent)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-cat,
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-product,
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-translate,
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-sheet{background:var(--card);color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-product{border-color:var(--line)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-browse,.cs-discover{color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-cat.selected{background:var(--panel2);border-color:var(--accent)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-bag,
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-checkout,
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-productfoot button{background:var(--accent);color:var(--bg)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-search{background:var(--card);border-color:var(--line)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-search input{color:var(--ink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-topline{background:var(--header);color:var(--headink)}
html[data-ux-theme]:not([data-ux-theme="original"]) .cs-footer{background:var(--header);color:var(--headink)}
html[data-ux-scale="large"] :is(.nav,.ep-nav-label,.pro-table,.ep-table,.cs-links,.filter,.tile-name,.cs-productbody>strong,.rb-pick>div:last-child>strong){font-size:calc(13px*var(--ux-text-mult))!important}
html[data-ux-scale="extra"] :is(.nav,.ep-nav-label,.pro-table,.ep-table,.cs-links,.filter,.tile-name,.cs-productbody>strong,.rb-pick>div:last-child>strong){font-size:17px!important}
html[data-ux-scale="large"] :is(.page-title,.ep-sectionhead h3,.ep-kpi>strong,.section h2,.cs-browse h2,.rb-heading h2){font-size:clamp(26px,4.2vw,65px)!important}
html[data-ux-scale="extra"] :is(.page-title,.ep-sectionhead h3,.ep-kpi>strong,.section h2,.cs-browse h2,.rb-heading h2){font-size:clamp(30px,4.7vw,70px)!important}
html[data-ux-scale="large"] :is(.cs-productbody>small,.ep-notice-item small,.ep-module-content small,.tile-variant){font-size:12px!important}
html[data-ux-scale="extra"] :is(.cs-productbody>small,.ep-notice-item small,.ep-module-content small,.tile-variant){font-size:14px!important}
html[data-ux-density="compact"] :is(.ep-shell,.pro-shell){gap:9px!important}
html[data-ux-density="compact"] :is(.ep-kpi,.ep-boxhead,.ep-form,.pro-panel){padding:12px!important}
html[data-ux-density="compact"] .ep-photo-tile{min-height:200px;padding:15px!important}
html[data-ux-density="compact"] .ep-photo-grid{gap:9px!important}
html[data-ux-density="compact"] .cs-discover{padding-top:28px}
html[data-ux-density="compact"] .cs-cat{min-height:100px}
html[data-ux-density="compact"] :is(.rb-hub,.cs-wrapper){margin-top:9px}
html[data-ux-layout="focused"] .ep-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html[data-ux-layout="focused"] .ep-photo-tile{min-height:190px;padding:16px!important}
html[data-ux-layout="focused"] .ep-photo-hero{min-height:155px!important}
html[data-ux-layout="focused"] .ep-feature-strip{height:140px!important;min-height:140px!important}
html[data-ux-layout="dashboard"] .ep-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
html[data-ux-layout="dashboard"] .ep-kpi{min-height:170px!important;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line))!important;box-shadow:0 10px 26px #0002}
html[data-ux-layout="dashboard"] .ep-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
html[data-ux-layout="dashboard"] .ep-sectionhead h3{font-size:clamp(35px,4vw,55px)!important}
html[data-ux-layout="dashboard"] .ep-photo-tile{min-height:245px}
html.ux-reduced *,html.ux-reduced *:before,html.ux-reduced *:after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
/* Floating quick access launcher: intentionally above demo menus but below modals. */
.ux-dock{position:fixed;z-index:95;bottom:15px;left:50%;transform:translateX(-50%);border:1px solid #ffffff60;border-radius:60px;padding:6px;background:#101820f3;color:#fff;box-shadow:0 12px 45px #0007;display:flex;align-items:center;gap:4px;max-width:calc(100vw - 28px);backdrop-filter:blur(12px)}
.ux-dock button,.ux-dock a{display:flex;align-items:center;justify-content:center;gap:9px;background:transparent;border:0;color:#e7e8eb;min-height:44px;padding:9px 14px;border-radius:45px;font-size:11px;font-weight:850;white-space:nowrap;cursor:pointer}
.ux-dock button:hover,.ux-dock a:hover{background:#ffffff23;color:white}
.ux-dock [data-ux-launch]{background:#ddc797;color:#10151d}
.ux-dock [data-ux-launch]:hover{background:#ffe6ad;color:#10151d}
.ux-header-control{border:1px solid color-mix(in srgb,var(--accent) 55%,var(--line));background:var(--panel2);color:var(--ink);font-weight:850;font-size:11px;display:inline-flex;align-items:center;gap:7px;border-radius:10px;padding:9px 13px;white-space:nowrap}
.ux-panel{position:fixed;z-index:205;bottom:75px;right:22px;width:min(455px,calc(100vw - 30px));max-height:min(82vh,730px);overflow:auto;border-radius:22px;background:#f9f9f7;color:#16202a;box-shadow:0 30px 90px #0008;border:1px solid #e2e1db;padding:clamp(16px,3vw,26px);font-family:system-ui,Arial,sans-serif!important}
.ux-panel-head{display:flex;justify-content:space-between;gap:10px;align-items:start}
.ux-panel-head>div span{font-size:10px;font-weight:950;letter-spacing:.16em;color:#896948}
.ux-panel-head h2{font-size:31px;letter-spacing:-.065em;margin:7px 0 0;line-height:1.08;color:#152027;font-family:system-ui,Arial,sans-serif!important}
.ux-panel-head button{width:38px;height:38px;display:grid;place-items:center;border:1px solid #ddd;background:white;border-radius:10px}
.ux-intro{font-size:11px;line-height:1.6;color:#6e7880;margin:14px 0 19px}
.ux-sectionlabel{font-size:10px;font-weight:950;letter-spacing:.11em;color:#6f7780;margin:18px 0 9px}
.ux-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ux-theme{min-width:0;display:flex;flex-direction:column;gap:5px;align-items:start;justify-content:start;text-align:left;border:1px solid #e0ded8;background:white;border-radius:10px;padding:7px 8px;color:#29313c}
.ux-theme.selected{border:2px solid #ba975a;padding:6px 7px;box-shadow:0 0 0 2px #dfbb7833}
.ux-theme strong{font-size:10px;font-weight:900;line-height:1.2;overflow-wrap:anywhere}
.ux-swatch{width:100%;height:37px;border-radius:6px}
.ux-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.ux-option{min-width:0;background:white;color:#2d3742;border:1px solid #dcdfe1;padding:11px 5px;border-radius:9px;font-size:10px;font-weight:800;line-height:1.3}
.ux-option.selected{background:#1f2d3a;color:#fff;border-color:#1f2d3a}
.ux-check{display:flex;gap:9px;align-items:center;margin:19px 0;color:#273441;font-size:11px;font-weight:850}
.ux-check input{accent-color:#8b6d3b}
.ux-footer{display:flex;justify-content:space-between;gap:10px;padding-top:16px;border-top:1px solid #e4e6e8}
.ux-footer button{padding:12px 17px;border-radius:9px;border:1px solid #dadbdd;background:white;color:#293443;font-size:11px;font-weight:850}
.ux-footer .ux-save{background:#182636;color:white;border-color:#182636}
.ux-command{position:fixed;inset:0;z-index:220;background:#07101cbe;backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:flex-start;padding:12vh 15px 20px}
.ux-command-body{width:min(610px,100%);max-height:70vh;overflow:auto;background:#fcfcfa;color:#1b2835;border:1px solid #ffffffba;border-radius:19px;box-shadow:0 30px 90px #0008}
.ux-command-field{display:flex;align-items:center;gap:11px;padding:19px;border-bottom:1px solid #e7e8ea}
.ux-command-field input{background:none;border:0;box-shadow:none;outline:none;flex:1;min-width:0;color:#182330;font-size:17px}
.ux-command-field button{border:0;background:none;color:#64707b;padding:5px}
#ux-results{padding:9px;max-height:45vh;overflow:auto}
#ux-results>button{display:flex;align-items:center;gap:13px;width:100%;border:0;background:none;color:#263344;border-radius:11px;padding:12px 14px;min-height:49px;text-align:left}
#ux-results>button:hover,#ux-results>button:focus-visible{background:#eff1f4}
#ux-results>button>span{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#f1f3f5;color:#586775}
#ux-results>button>strong{font-size:13px;flex:1;font-weight:850}
#ux-results>button>small{font-size:14px;color:#83909e}
.ux-command-hint{font-size:10px;text-align:center;color:#7a8793;border-top:1px solid #e6e9ea;padding:13px}
.ux-noresult{padding:25px;color:#87919c;font-size:12px;text-align:center}
@media(max-width:1100px){html[data-ux-layout="focused"] .ep-photo-grid,html[data-ux-layout="dashboard"] .ep-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:650px){
 .ux-dock{bottom:9px}.ux-dock button,.ux-dock a{padding:10px 12px;min-height:43px}
 .ux-dock button span,.ux-dock a span{font-size:9px}
 .ux-panel{right:9px;bottom:69px;max-height:77vh;padding:18px}
 .ux-header-control>span{display:none}
 html[data-ux-layout="focused"] .ep-photo-grid,html[data-ux-layout="dashboard"] .ep-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html[data-ux-layout="dashboard"] .ep-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 html[data-ux-layout="focused"] .ep-photo-tile,html[data-ux-layout="dashboard"] .ep-photo-tile{min-height:170px!important}
 .ux-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 body{padding-bottom:65px}
}
@media(max-width:380px){.ux-dock button,.ux-dock a{gap:4px;padding:9px 9px}.ux-dock button span,.ux-dock a span{font-size:9px}.ux-themes{grid-template-columns:repeat(2,minmax(0,1fr))}}
