/* MCHILS Retail customer concept demos: original brand designs, independent fictional data */
:root{font-family:Inter,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:#15231e;background:#fff}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:0;background:#fff;color:var(--ink);font-size:14px}
button,input{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}
body.cs-pharmacy{--accent:#097d55;--accent2:#0bb77e;--surface:#ecf9f3;--dark:#063f2b;--ink:#16382c;--muted:#698478;--outline:#cce8da;--hero:#def6ea;--on:#fff}
body.cs-shopping{--accent:#242f13;--accent2:#c4ef49;--surface:#f5fadf;--dark:#16220d;--ink:#202519;--muted:#73776c;--outline:#dce7bf;--hero:#dafa75;--on:#fff}
.cs-wrapper{width:min(1470px,calc(100% - 64px));margin:auto}
.cs-topline{background:var(--dark);color:white;display:flex;justify-content:space-between;gap:12px;padding:9px max(30px,calc((100vw - 1470px)/2));font-size:10px;letter-spacing:.08em;font-weight:750}
.cs-topline span:first-child{color:var(--accent2)}
.cs-header{position:sticky;top:0;z-index:25;box-shadow:0 3px 18px #0000000c;background:#fffffff2;backdrop-filter:blur(20px);border-bottom:1px solid var(--outline)}
.cs-header-inner{width:min(1470px,calc(100% - 64px));margin:auto;display:flex;align-items:center;gap:35px;justify-content:space-between;min-height:82px}
.cs-logo{display:flex;gap:10px;align-items:center;flex-shrink:0}
.cs-logomark{width:44px;height:44px;background:var(--dark);color:#fff;border-radius:12px;display:grid;place-items:center;font-size:21px;font-weight:950}
.cs-shopping .cs-logomark{color:#d9ff72}
.cs-logo strong{display:block;font-size:19px;font-weight:950;line-height:1.1;letter-spacing:-.05em}
.cs-logo small{display:block;color:var(--muted);font-size:9px;font-weight:850;letter-spacing:.08em;margin-top:5px}
.cs-links{display:flex;align-items:center;gap:25px;margin-left:auto;font-size:12px;font-weight:780}.cs-links a:hover,.cs-links button:hover{color:var(--accent)}
.cs-links button{border:0;background:none;color:inherit;font-size:inherit;font-weight:inherit}
.cs-navright{display:flex;gap:9px;align-items:center}.cs-translate{background:#fff;border:1px solid var(--outline);border-radius:10px;font-weight:800;padding:11px}
.cs-bag{background:var(--dark);border:0;color:white;border-radius:12px;padding:11px 17px;font-weight:900;white-space:nowrap}.cs-shopping .cs-bag{color:#d8fd7d}
.cs-bag span{display:inline-block;background:var(--accent2);color:var(--dark);padding:1px 7px;border-radius:50px;margin-left:8px}
.cs-hero{margin:28px 0 19px;border-radius:25px;min-height:470px;overflow:hidden;background:var(--hero);display:grid;grid-template-columns:1.1fr .9fr;position:relative}
.cs-hero-text{padding:clamp(28px,5vw,78px);align-self:center;position:relative;z-index:1}
.cs-kicker{font-size:10px;font-weight:950;letter-spacing:.17em;text-transform:uppercase;color:var(--accent)}
.cs-hero h1{font-weight:1000;font-size:clamp(54px,5.9vw,94px);line-height:.99;letter-spacing:-.082em;margin:18px 0 22px;max-width:750px;text-wrap:balance}
.cs-hero p{font-size:clamp(13px,1.4vw,18px);line-height:1.75;color:#405648;max-width:580px;margin:0 0 27px}
.cs-heroactions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cs-mainbtn,.cs-secondary{padding:14px 21px;border-radius:10px;font-size:12px;font-weight:950;min-height:51px;display:inline-flex;align-items:center;justify-content:center}
.cs-mainbtn{background:var(--dark);color:white}.cs-shopping .cs-mainbtn{color:#d6ff72}
.cs-secondary{background:#ffffff9f;color:var(--dark);border:1px solid #ffffffde}
.cs-safe{font-size:10px;color:#6a8677;margin-top:25px}
.cs-hero-visual{overflow:hidden;position:relative;min-height:400px;background:#cce4df}
.cs-hero-visual:before{position:absolute;inset:0;z-index:1;content:"";background:linear-gradient(90deg,var(--hero),#ffffff00 25%,#00000015 100%)}
.cs-hero-visual img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85)}
.cs-imagebadge{position:absolute;right:22px;bottom:22px;z-index:2;color:#fff;background:#0d2521db;backdrop-filter:blur(6px);border:1px solid #ffffff3b;padding:11px 15px;border-radius:100px;font-size:10px;font-weight:850;letter-spacing:.1em}
.cs-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--outline);border-radius:16px;overflow:hidden;background:white}
.cs-benefits>div{display:flex;align-items:center;gap:16px;padding:21px 23px;border-right:1px solid var(--outline)}
.cs-benefits>div:last-child{border:0}.cs-benefits>div>span{display:grid;place-items:center;flex:none;width:50px;height:50px;background:var(--surface);font-size:24px;border-radius:12px}.cs-benefits strong{display:block;font-size:14px;font-weight:900}.cs-benefits small{display:block;font-size:11px;color:var(--muted);margin-top:4px}
.cs-discover{padding:67px 0 52px}.cs-discover h2,.cs-browse h2{font-size:clamp(35px,4vw,58px);letter-spacing:-.067em;line-height:1.05;margin:9px 0 27px;font-weight:970}
.cs-cats{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:11px}
.cs-cat{min-height:155px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:13px;border:1px solid var(--outline);border-radius:14px;background:white;color:var(--ink);transition:background .15s,transform .15s}
.cs-cat:hover{transform:translateY(-3px);border-color:var(--accent)}
.cs-cat.selected{background:var(--surface);border-color:var(--accent)}
.cs-catemoji{display:grid;place-items:center;width:70px;height:70px;background:var(--surface);border-radius:22px;font-size:34px}
.cs-cat b{font-size:11px;font-weight:850;text-align:center}
.cs-browse{padding:25px 0 70px}.cs-browsehead{display:flex;gap:30px;align-items:end;justify-content:space-between}.cs-browsehead h2{margin-bottom:25px}
.cs-search{background:white;border:1px solid var(--outline);border-radius:11px;padding:12px 15px;display:flex;align-items:center;gap:9px;width:min(370px,100%);font-size:23px;margin-bottom:25px;color:var(--accent)}
.cs-search input{outline:none;border:0;background:none;color:var(--ink);width:100%;min-width:0;font-size:12px}
.cs-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.cs-product{border:1px solid var(--outline);border-radius:16px;background:white;overflow:hidden;min-width:0;transition:transform .17s,box-shadow .17s}.cs-product:hover{transform:translateY(-3px);box-shadow:0 16px 37px #102e2116}
.cs-itemmedia{height:clamp(175px,18vw,260px);position:relative;overflow:hidden;background:#ecf6f0}.cs-art{width:100%;height:100%;background:var(--art,#e6f2ef);display:flex;align-items:center;justify-content:center}
.cs-art>span{font-size:clamp(80px,10vw,139px);filter:drop-shadow(0 14px 14px #0002)}.cs-art img{width:100%;height:100%;object-fit:cover;display:block}
.cs-heart{position:absolute;top:15px;right:15px;z-index:2;border:1px solid #ffffffbc;background:#ffffffd9;width:35px;height:35px;border-radius:50%;font-size:20px;display:grid;place-items:center;color:#18271e}.cs-heart.chosen{color:#e84669}
.cs-smalltag{position:absolute;bottom:11px;left:13px;background:#fffd;color:#233629;padding:5px 11px;border-radius:60px;font-size:10px;font-weight:900}
.cs-productbody{padding:19px}.cs-productbody>small{display:block;font-size:10px;color:var(--muted);margin-bottom:7px}.cs-productbody>strong{font-size:17px;display:block;letter-spacing:-.035em;font-weight:950;min-height:49px;line-height:1.35}
.cs-productfoot{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-top:16px}.cs-productfoot b{font-size:15px;font-weight:950}.cs-productfoot button{width:42px;height:42px;border-radius:12px;color:white;background:var(--dark);font-size:25px;border:0;flex:none}
.cs-shopping .cs-productfoot button{color:#dafa75}
.cs-bottombanner{background:var(--dark);border-radius:22px;color:#fff;display:flex;align-items:center;gap:25px;padding:35px;margin:2px 0 70px}.cs-bottombanner>span{font-size:54px;color:var(--accent2)}.cs-bottombanner>div{flex:1}.cs-bottombanner strong{font-size:clamp(18px,2.5vw,28px);letter-spacing:-.04em}.cs-bottombanner p{font-size:11px;color:#cbded5;max-width:740px;line-height:1.55}.cs-bottombanner>a{background:#ffffff18;border:1px solid #ffffff38;padding:12px 17px;border-radius:9px;font-size:11px;font-weight:900;white-space:nowrap}
.cs-footer{background:#121f1a;color:#fff}.cs-footer .cs-wrapper{padding:23px 0;display:flex;justify-content:space-between;gap:19px;align-items:center;font-size:11px}.cs-footer strong{font-size:14px}.cs-footer span{color:#bcc8be}
.cs-overlay{position:fixed;inset:0;z-index:200;background:#08140eb3;display:flex;align-items:stretch;justify-content:flex-end}.cs-sheet{position:relative;width:min(490px,100%);background:#fff;overflow-y:auto;min-height:100vh;padding:clamp(20px,3vw,40px);box-shadow:0 0 70px #0005;color:var(--ink)}
.cs-close{position:absolute;right:20px;top:19px;width:40px;height:40px;border:1px solid var(--outline);background:white;border-radius:11px;font-size:26px}
.cs-sheet h2{font-size:clamp(30px,4vw,44px);letter-spacing:-.06em;line-height:1;margin:37px 0 10px}.cs-paneltext{color:var(--muted);font-size:12px;margin-bottom:27px}
.cs-cartrow{display:grid;grid-template-columns:75px minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--outline)}
.cs-cartrow .cs-art{width:75px;height:75px;border-radius:11px;overflow:hidden}.cs-cartrow .cs-art>span{font-size:36px}.cs-cartrow strong{font-size:12px;display:block}.cs-cartrow small{color:var(--muted);font-size:11px;display:block;margin:5px 0}.cs-cartrow>b{font-size:11px;white-space:nowrap}
.cs-qty{display:flex;align-items:center;gap:8px}.cs-qty button{border:1px solid var(--outline);background:#fff;width:27px;height:27px;border-radius:7px;font-size:17px}.cs-qty b{font-size:11px}
.cs-totals{margin:25px 0 18px;padding-top:9px}.cs-totals>div{display:flex;justify-content:space-between;margin-bottom:13px;font-size:12px}.cs-totals .cs-grand{border-top:1px solid var(--outline);padding-top:15px;font-size:16px}
.cs-checkout{width:100%;border:0;background:var(--dark);color:white;padding:16px;border-radius:10px;font-size:13px;font-weight:950}.cs-checkout:disabled{opacity:.4;cursor:not-allowed}.cs-shopping .cs-checkout{color:#c4ef49}
.cs-smallprint{font-size:10px;color:var(--muted);line-height:1.6}.cs-empty{grid-column:1/-1;background:var(--surface);color:var(--muted);border-radius:13px;padding:32px;text-align:center;font-size:13px}
.cs-order{border:1px solid var(--outline);background:var(--surface);border-radius:13px;padding:22px;margin:23px 0}.cs-order>span{font-size:10px;font-weight:900;color:var(--accent)}.cs-order h3{font-size:28px;margin:8px 0}.cs-order small{color:var(--muted)}
.cs-timeline{border-left:2px solid var(--outline);padding-left:23px;margin:30px 0}.cs-timeline>div{padding:11px;font-size:12px;color:var(--ink);font-weight:750}
.cs-toast{position:fixed;z-index:300;bottom:23px;left:50%;transform:translateX(-50%);background:#102b21;color:white;border-radius:12px;padding:15px 25px;box-shadow:0 8px 40px #0003;font-size:12px;font-weight:800;max-width:95vw}
@media(max-width:1100px){.cs-hero{grid-template-columns:1fr 1fr;min-height:430px}.cs-hero h1{font-size:clamp(49px,5.5vw,73px)}.cs-cats{grid-template-columns:repeat(4,minmax(0,1fr))}.cs-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-links{gap:13px}}
@media(max-width:750px){.cs-wrapper,.cs-header-inner{width:calc(100% - 30px)}.cs-topline{padding:8px 14px;font-size:8px}.cs-header-inner{min-height:70px;gap:7px}.cs-links{display:none}.cs-logo strong{font-size:15px}.cs-logo small{font-size:8px}.cs-logomark{width:37px;height:37px}.cs-translate{padding:8px;font-size:10px}.cs-bag{padding:9px 11px}.cs-hero{grid-template-columns:1fr;min-height:0;margin-top:13px}.cs-hero-text{padding:35px 23px}.cs-hero h1{font-size:clamp(48px,11vw,72px)}.cs-hero-visual{height:245px;min-height:0}.cs-hero-visual:before{background:linear-gradient(180deg,var(--hero),transparent 20%)}.cs-benefits>div{padding:15px;gap:7px}.cs-benefits>div>span{font-size:18px;width:39px;height:39px}.cs-benefits strong{font-size:10px}.cs-benefits small{font-size:9px}.cs-discover{padding:48px 0 25px}.cs-cats{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.cs-cat{min-height:115px;gap:7px}.cs-catemoji{width:48px;height:48px;font-size:26px}.cs-cat b{font-size:9px}.cs-browsehead{display:block}.cs-search{width:100%;margin-bottom:20px}.cs-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.cs-itemmedia{height:180px}.cs-productbody{padding:12px}.cs-productbody>strong{font-size:13px;min-height:52px}.cs-productfoot b{font-size:12px}.cs-productfoot button{width:35px;height:35px}.cs-bottombanner{padding:23px;flex-wrap:wrap}.cs-bottombanner>span{font-size:35px}.cs-bottombanner>a{width:100%;text-align:center}.cs-footer .cs-wrapper{flex-direction:column;align-items:flex-start}}
@media(max-width:430px){.cs-benefits{grid-template-columns:1fr 1fr}.cs-benefits>div:nth-child(3){grid-column:span 2;border-top:1px solid var(--outline)}.cs-cats{grid-template-columns:repeat(3,minmax(0,1fr))}.cs-itemmedia{height:145px}.cs-art>span{font-size:73px}.cs-topline span:first-child{display:none}.cs-hero h1{font-size:49px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.cs-product,.cs-cat{transition:none}}