/* MCHILS Retail: Image-Led Grand UI / 2026-10-14
   Visual only; no modifications to transactions, authentication, privacy, or live POS.
   Uses locally hosted demonstration photography from each edition. */

/* Company: more breathing room, photography, larger text, clear luxury tiles. */
html[data-app="company"] .content{max-width:1800px;padding:clamp(15px,2.2vw,37px)}
html[data-app="company"] .page-title{font-size:clamp(19px,2.1vw,28px);letter-spacing:-.055em;font-weight:950}
html[data-app="company"] .sidebar .logo{gap:12px}
html[data-app="company"] .sidebar .logo-mark{width:43px;height:43px}
html[data-app="company"] .nav{min-height:43px;font-size:12px}
html[data-app="company"] .nav svg{width:21px;height:21px}

.ep-photo-hero{min-height:clamp(220px,26vw,340px);position:relative;isolation:isolate;padding:clamp(26px,3.8vw,55px);background:#151a1b;overflow:hidden;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 18px 48px #0000001a}
.ep-hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 35%;z-index:-2;filter:saturate(.9) contrast(1.04)}
.ep-hero-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#0d1020eb 0%,#0c1020c9 48%,#080b12a5 75%,#080b1266 100%)}
.ep-hero-content{position:relative;max-width:770px;z-index:2}
.ep-photo-hero .ep-eyebrow{color:#ddffeb;letter-spacing:.24em}
.ep-photo-hero h2{font-size:clamp(36px,4.4vw,70px);line-height:.99;letter-spacing:-.08em;color:#fff;max-width:760px;text-wrap:balance;margin:15px 0}
.ep-photo-hero p{font-size:clamp(13px,1.05vw,16px);max-width:630px;color:#e9edef;line-height:1.6}
.ep-photo-hero .ep-hero-symbol{position:relative;color:#fff;opacity:.3}
.ep-sectionhead{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:8px 2px 3px}
.ep-sectionhead h3{font-size:clamp(26px,3vw,43px);font-weight:1000;line-height:1.08;letter-spacing:-.065em;margin:10px 0 0;text-wrap:balance}
.ep-sectionhead>small{color:var(--muted);font-size:10px;letter-spacing:.13em;font-weight:900;padding-bottom:5px;white-space:nowrap}
.ep-kpi{min-height:145px;padding:22px 20px;box-shadow:0 6px 20px #0000000b}
.ep-kpi-top{font-size:12px}.ep-kpi-top svg{width:24px;height:24px}
.ep-kpi>strong{font-size:clamp(23px,2.3vw,37px);margin:16px 0 6px}
.ep-kpi>small{font-size:11px}
.ep-feature-strip{min-height:240px;height:clamp(220px,23vw,280px);border-radius:22px;box-shadow:0 10px 32px #00000019}
.ep-feature-strip h3{font-size:clamp(30px,3.8vw,56px);max-width:560px}
.ep-feature-strip p{font-size:13px}
.ep-feature-strip img{object-position:center 36%;mask-image:linear-gradient(90deg,transparent 0%,#000 27%)}
.ep-feature-strip>div{padding:clamp(22px,3vw,45px)}

.ep-grid.ep-photo-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.ep-photo-tile{isolation:isolate;min-height:clamp(235px,24vw,330px);height:auto;padding:24px;border-radius:20px;background:#172029;overflow:hidden;color:white;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;box-shadow:0 12px 24px #0000001e;border:1px solid #ffffff35;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.ep-photo-tile:hover{transform:translateY(-5px);box-shadow:0 22px 54px #00000041;border-color:var(--accent)}
.ep-module-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .4s ease;filter:saturate(.8) contrast(1.05)}
.ep-photo-tile:hover .ep-module-photo{transform:scale(1.08)}
.ep-module-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#0b142f66 0%,#111d2b2e 27%,#07111f9e 58%,#06101cef 100%)}
.ep-module-top{display:flex;align-items:start;justify-content:space-between;width:100%;gap:8px}
.ep-photo-tile .ep-module-icon{background:#1016228f;color:#fff;border:1px solid #ffffff5b;width:53px;height:53px;backdrop-filter:blur(10px);border-radius:14px}
.ep-module-index{font-size:12px;font-weight:900;letter-spacing:.12em;color:#fff9;padding:8px 0}
.ep-module-content{display:flex;flex-direction:column;gap:7px;max-width:92%;margin-top:auto}
.ep-photo-tile .ep-module-content strong{font-size:clamp(21px,2.2vw,32px);font-weight:950;line-height:1.08;color:#fff;letter-spacing:-.065em;text-wrap:balance;text-shadow:0 2px 9px #0009}
.ep-photo-tile .ep-module-content small{font-size:12px;line-height:1.4;color:#e1e9ec;font-weight:650;max-width:260px}
.ep-photo-tile .ep-module-go{position:absolute;right:19px;bottom:24px;top:auto;color:#fff;opacity:.85}
.ep-photo-tile .ep-module-go svg{width:21px;height:21px}
.ep-product-card{grid-template-columns:45% 1fr;min-height:350px;border-radius:20px}
.ep-product-card>img{min-height:350px;object-position:center}
.ep-product-card h3{font-size:clamp(17px,1.45vw,23px)}
.ep-product-card>div{padding:24px 20px 24px 4px}
.ep-product-facts{gap:10px}
.ep-product-foot>strong{font-size:20px}
.ep-box{border-radius:18px}
.ep-boxhead{padding:21px 24px}
.ep-boxhead h3{font-size:19px}
.ep-form{padding:23px}.ep-form input,.ep-form select{min-height:45px}
.ep-button,.ep-smallbtn{min-height:40px}
.ep-hero:not(.ep-photo-hero) h2{font-size:clamp(35px,4vw,58px)}

/* Brand-specific image treatment */
html[data-edition="fashion"] .ep-module-photo{filter:saturate(.68) contrast(1.14)}
html[data-edition="fashion"] .ep-module-shade{background:linear-gradient(180deg,#16151a66,#18131723 27%,#101012c4 69%,#0d0c10fa)}
html[data-edition="electronics"] .ep-module-shade{background:linear-gradient(180deg,#06182c66,#04132644 22%,#061427d4 73%,#03101cf4)}
html[data-edition="beauty"] .ep-module-shade{background:linear-gradient(180deg,#5a21393b,#6829423b 24%,#482337ce 75%,#30202af5)}
html[data-edition="grocery"] .ep-module-shade{background:linear-gradient(180deg,#092b1b59,#0c362a48 28%,#0a3022d4 70%,#071a14f6)}

/* Customer: enormous photographs, bold editorial typography, interactive image-backed experiences */
html[data-app="customer"] .hero{max-width:1700px;padding:0 clamp(12px,3.5vw,52px);margin-top:18px}
html[data-app="customer"] .hero-box{min-height:clamp(440px,42vw,650px);grid-template-columns:1.04fr .96fr;border-radius:4px;box-shadow:0 22px 55px #00000014}
html[data-app="customer"] .hero-content{padding:clamp(30px,5vw,83px)}
html[data-app="customer"] .hero h1{font-size:clamp(60px,7.8vw,123px);letter-spacing:-.075em;line-height:.91;text-wrap:balance}
html[data-app="customer"] .hero p{font-size:clamp(14px,1.25vw,19px);line-height:1.65;max-width:480px}
html[data-app="customer"] .hero-art{min-height:420px}
html[data-app="customer"] .hero-art .hero-photo{width:100%;height:100%;object-fit:cover;object-position:center}
html[data-app="customer"] .hero-eyebrow{font-size:11px}
html[data-app="customer"] .action{min-height:51px;padding:16px 28px;font-size:12px}
html[data-app="customer"] .section{max-width:1700px;padding:clamp(42px,5vw,75px) clamp(12px,3.5vw,52px)}
html[data-app="customer"] .section h2{font-size:clamp(36px,4.7vw,72px);line-height:.99;letter-spacing:-.075em}
html[data-app="customer"] .catalog{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(13px,1.7vw,25px)}
html[data-app="customer"] .tile{border-radius:8px;box-shadow:0 7px 26px #0000000c;transition:transform .2s ease,box-shadow .2s}
html[data-app="customer"] .tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px #00000020}
html[data-app="customer"] .tile-visual{height:clamp(255px,26vw,385px)}
html[data-app="customer"] .tile-photo{object-fit:cover}
html[data-edition="grocery"][data-app="customer"] .tile-photo{object-fit:contain;background:#f8fbf6}
html[data-app="customer"] .tile-main{padding:clamp(15px,1.7vw,25px)}
html[data-app="customer"] .tile-name{font-size:clamp(16px,1.35vw,20px);line-height:1.25;min-height:49px;letter-spacing:-.025em}
html[data-app="customer"] .tile-price{font-size:clamp(18px,1.6vw,25px)}
html[data-app="customer"] .tile-add{width:48px;height:46px;font-size:23px}
html[data-app="customer"] .wish{width:42px;height:42px;font-size:21px}
html[data-app="customer"] .tile-tag{font-size:10px;padding:8px 12px}
html[data-app="customer"] .trust-bar{max-width:1570px;padding:25px 20px;font-size:11px}

/* Illustrated interactive benefit cards */
html[data-app="customer"] .rx-features{max-width:1700px;padding:clamp(22px,2.8vw,44px) clamp(12px,3.5vw,52px) 0;gap:18px;grid-template-columns:repeat(3,minmax(0,1fr))}
html[data-app="customer"] .rx-feature.rx-photo-feature{isolation:isolate;min-height:clamp(250px,22vw,340px);height:auto;background:#1c2830;color:white;border-color:#ffffff44;border-radius:14px;padding:clamp(20px,2.5vw,34px);box-shadow:0 12px 33px #00000023;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end}
.rx-photo-feature .rx-feature-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.8)}
.rx-photo-feature .rx-feature-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#09141b3d,#0b17272d 30%,#071321d9 75%,#06111af2)}
.rx-photo-feature .rx-feature-label{display:block;font-size:10px;font-weight:950;letter-spacing:.15em;color:#d1f5ef;margin-bottom:11px}
.rx-feature.rx-photo-feature strong{font-size:clamp(28px,3vw,46px);line-height:1.02;letter-spacing:-.065em;font-weight:1000;color:#fff;text-shadow:0 3px 16px #0009}
.rx-feature.rx-photo-feature em{color:#e9f0f1;font-size:12px;margin-top:13px;font-weight:800}
html[data-edition="beauty"] .rx-photo-feature .rx-feature-shade{background:linear-gradient(180deg,#7a315245,#6a32452e 30%,#51223ddb 74%,#301b2be8)}
html[data-edition="grocery"] .rx-photo-feature .rx-feature-shade{background:linear-gradient(180deg,#114e3f3b,#092c2952 35%,#09291be6 77%,#071f14fa)}
html[data-app="customer"] .filter{font-size:12px;padding:12px 18px;border-radius:5px}
html[data-app="customer"] .search{font-size:13px;min-height:48px}
html[data-app="customer"] .brand b{font-size:clamp(20px,2vw,29px)}
html[data-app="customer"] .round-button{min-height:43px}
html[data-app="customer"] .drawer{width:min(510px,100%)}

@media(max-width:1350px){
 .ep-grid.ep-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
 html[data-app="customer"] .catalog{grid-template-columns:repeat(3,minmax(0,1fr))}
 html[data-app="customer"] .tile-visual{height:300px}
}
@media(max-width:950px){
 .ep-grid.ep-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ep-photo-tile{min-height:275px}
 .ep-photo-tile .ep-module-content strong{font-size:clamp(22px,3.5vw,29px)}
 .ep-sectionhead>small{display:none}
 .ep-product-card{grid-template-columns:40% 1fr;min-height:280px}
 .ep-product-card>img{min-height:280px}
 html[data-app="customer"] .hero-box{grid-template-columns:1fr .85fr;min-height:470px}
 html[data-app="customer"] .hero h1{font-size:clamp(53px,7vw,83px)}
 html[data-app="customer"] .hero-art{min-height:370px}
 html[data-app="customer"] .rx-features{grid-template-columns:repeat(2,minmax(0,1fr))}
 html[data-app="customer"] .rx-feature.rx-photo-feature:last-child{grid-column:1/-1}
}
@media(max-width:730px){
 .ep-photo-hero{min-height:260px;padding:24px;align-items:flex-end}
 .ep-photo-hero h2{font-size:clamp(36px,7vw,51px)}
 .ep-photo-hero .ep-hero-symbol{display:none}
 .ep-feature-strip{height:auto;min-height:170px}
 .ep-feature-strip>div{padding:22px}
 .ep-kpi{min-height:130px;padding:17px}
 .ep-kpi>strong{font-size:clamp(20px,4.1vw,28px)}
 html[data-app="customer"] .hero-box{grid-template-columns:1fr;min-height:0}
 html[data-app="customer"] .hero-content{padding:clamp(25px,6vw,43px)}
 html[data-app="customer"] .hero h1{font-size:clamp(51px,11vw,80px)}
 html[data-app="customer"] .hero p{font-size:14px}
 html[data-app="customer"] .hero-art{height:290px!important;min-height:290px!important}
 html[data-app="customer"] .catalog{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 html[data-app="customer"] .tile-visual{height:clamp(175px,47vw,275px)}
 html[data-app="customer"] .tile-main{padding:14px}
 html[data-app="customer"] .tile-name{font-size:14px;min-height:38px}
 html[data-app="customer"] .tile-price{font-size:16px}
 html[data-app="customer"] .rx-feature.rx-photo-feature{min-height:245px}
}
@media(max-width:520px){
 .ep-grid.ep-photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
 .ep-photo-tile{min-height:205px;padding:12px;border-radius:13px}
 .ep-photo-tile .ep-module-icon{width:38px;height:38px}
 .ep-photo-tile .ep-module-icon svg{width:21px;height:21px}
 .ep-module-index{font-size:10px}
 .ep-photo-tile .ep-module-content strong{font-size:clamp(17px,4.1vw,22px);letter-spacing:-.05em}
 .ep-photo-tile .ep-module-content small{font-size:10px;line-height:1.35}
 .ep-photo-tile .ep-module-go{right:11px;bottom:11px}
 .ep-photo-tile .ep-module-go svg{width:16px;height:16px}
 .ep-sectionhead h3{font-size:28px}
 .ep-photo-hero{min-height:225px}
 .ep-photo-hero h2{font-size:clamp(34px,8.2vw,44px)}
 .ep-photo-hero p{font-size:11px}
 .ep-product-card{grid-template-columns:40% 1fr;min-height:260px}
 .ep-product-card>img{min-height:260px}
 .ep-feature-strip{min-height:157px}
 .ep-feature-strip h3{font-size:29px}
 html[data-app="customer"] .hero{padding:0 10px}
 html[data-app="customer"] .hero h1{font-size:clamp(51px,12vw,68px)}
 html[data-app="customer"] .hero-art{height:260px!important;min-height:260px!important}
 html[data-app="customer"] .rx-features{grid-template-columns:1fr;gap:11px;padding:16px 10px 0}
 html[data-app="customer"] .rx-feature.rx-photo-feature,.rx-feature.rx-photo-feature:last-child{grid-column:auto;min-height:193px;padding:19px}
 .rx-feature.rx-photo-feature strong{font-size:33px}
 html[data-app="customer"] .tile-visual{height:clamp(170px,43vw,210px)}
 html[data-app="customer"] .tile-main{padding:12px}
 html[data-app="customer"] .tile-price{font-size:14px}
 html[data-app="customer"] .tile-add{height:37px;width:37px}
 html[data-app="customer"] .tile-tag{font-size:8px;padding:5px 7px}
 html[data-app="customer"] .section{padding:35px 10px}
 html[data-app="customer"] .section h2{font-size:clamp(36px,9vw,51px)}
}
@media(prefers-reduced-motion:reduce){
 .ep-photo-tile,.ep-module-photo,.rx-photo-feature,.tile,.tile-photo{transition:none!important}
}