:root{font-family:Tahoma,'Segoe UI',sans-serif;color:#17382d;background:#f7f7f0;line-height:1.9}*{box-sizing:border-box}body{margin:0}a{color:inherit}button,.button{border:0;border-radius:10px;background:#155e49;color:white;padding:11px 17px;font:inherit;cursor:pointer;text-decoration:none;display:inline-block}button:disabled{opacity:.5;cursor:not-allowed}input,select,textarea{font:inherit;border:1px solid #b8cec0;border-radius:8px;padding:10px;max-width:100%;background:white;color:#17382d}input:focus,button:focus,select:focus,textarea:focus{outline:3px solid #e7b763;outline-offset:3px}.banner{padding:9px 18px;background:#f7dca2;color:#533e18;text-align:center;font-size:13px}header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px max(20px,calc((100vw - 1100px)/2));background:white;border-bottom:1px solid #dce6da}.brand{font-size:25px;font-weight:bold;text-decoration:none}.brand small{display:block;font:11px 'Segoe UI',sans-serif;letter-spacing:3px}nav{display:flex;flex-wrap:wrap;gap:18px;font-size:14px}main{max-width:1100px;margin:auto;padding:0 20px}.hero{padding:65px 40px;background:#154b3d;color:#fff;border-radius:0 0 30px 30px}.hero h1{font-size:clamp(36px,6vw,58px);line-height:1.5;margin:12px 0}.hero p{max-width:650px;color:#dcebe1}.hero .button{background:#f0bc68;color:#253e30}section{margin-bottom:35px;scroll-margin-top:20px}h2{font-size:25px}.heading{display:flex;align-items:center;justify-content:space-between;gap:15px}.filters{display:flex;gap:12px}.filters input{flex:1;min-width:0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}.card,.panel{padding:24px;background:white;border:1px solid #dbe6dc;border-radius:16px}.card h3{margin:8px 0}.card p{font-size:13px}.card .symbol{font-size:45px;background:#edf4e9;border-radius:12px;text-align:center}.card button{width:100%}.panel label{display:flex;flex-direction:column;margin:12px 0;gap:5px}.panel label.check{flex-direction:row;align-items:center;font-size:13px}.line{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #e8eee5;padding:10px 0}.line input{width:80px}.contact{padding:25px;background:#e9f0e6;border-radius:15px}footer{padding:25px;text-align:center;background:#16392e;color:white;font-size:13px}.error{color:#a12725}.muted{color:#617368;font-size:13px}#trackingResult{white-space:pre-line;overflow-wrap:anywhere}table{width:100%;border-collapse:collapse}td,th{padding:10px;border-bottom:1px solid #e0e8df;text-align:right}.overflow{overflow:auto}pre{white-space:pre-wrap;overflow-wrap:anywhere}#orders .panel{margin:15px 0}button.secondary{background:#e5eee2;color:#17382d}.actions{display:flex;flex-wrap:wrap;gap:8px}.badge{background:#f4d18c;border-radius:20px;padding:2px 10px;color:#433819}.row{display:flex;gap:12px;flex-wrap:wrap}.row label{flex:1;min-width:160px}.notice{padding:14px;background:#fff3d8;border-radius:10px}body[hidden]{display:none}@media(max-width:700px){header{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero{padding:35px 23px}.heading{align-items:flex-start;flex-direction:column}.filters{flex-direction:column}}@media(max-width:420px){.grid{grid-template-columns:1fr}.panel,.card{padding:17px}main{padding:0 12px}nav{gap:12px;font-size:12px}button{font-size:13px}.line{flex-wrap:wrap}}

[hidden]{display:none!important}

.appIcon{border-radius:24px}.actions{margin:12px 0}main>p.notice{font-size:13px}body{padding-bottom:env(safe-area-inset-bottom)}

[hidden]{display:none!important}.product-info{white-space:pre-line}select,textarea,input{max-width:100%}.card button+button{margin-top:.5rem}


/* Mobile-first storefront refinement — preserves established Mahan palette and all existing controls. */
:root{--mahan-green:#155e49;--mahan-ink:#17382d;--mahan-border:#dbe6dc;--mahan-gold:#f0bc68}
html{scroll-behavior:smooth}
body{min-width:320px;-webkit-font-smoothing:antialiased}
header{position:sticky;top:0;z-index:20;box-shadow:0 3px 18px rgba(20,65,49,.06)}
nav a{text-decoration:none;padding:7px 2px;border-bottom:2px solid transparent}
nav a:hover,nav a:focus-visible{border-color:var(--mahan-green)}
.hero{position:relative;overflow:hidden;margin-top:12px;border-radius:24px;background:linear-gradient(120deg,#154b3d 0%,#206c54 100%)}
.hero:after{content:"";position:absolute;width:230px;height:230px;border:38px solid rgba(255,255,255,.05);border-radius:50%;left:-90px;bottom:-145px;pointer-events:none}
.hero>*{position:relative;z-index:1}
.hero>span{display:inline-block;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:3px 13px;font-size:13px}
.hero h1{font-weight:800;letter-spacing:-.6px}
.hero .button{font-weight:700;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.heading h2{margin-bottom:12px}
.filters{margin:12px 0 20px}
.filters input,.filters select{min-height:48px}
.card{display:flex;flex-direction:column;gap:6px;min-width:0;box-shadow:0 4px 16px rgba(20,65,49,.045);transition:box-shadow .18s ease,transform .18s ease}
.card:hover{box-shadow:0 10px 28px rgba(20,65,49,.1);transform:translateY(-2px)}
.card h3{font-size:16px;line-height:1.7;overflow-wrap:anywhere}
.card .symbol{min-height:112px;display:grid;place-items:center}
.card button{margin-top:auto;min-height:43px}
.panel{box-shadow:0 3px 14px rgba(20,65,49,.035)}
#basket,#tracking{scroll-margin-top:115px}
#checkout input,#checkout select,#checkout textarea{width:100%}
#checkout button[type=submit]{width:100%;min-height:49px}
button,.button{transition:filter .15s ease}
button:not(:disabled):hover,.button:hover{filter:brightness(1.07)}
:focus-visible{outline:3px solid var(--mahan-gold);outline-offset:3px}
@media(max-width:700px){
 header{padding:10px 16px;gap:7px}
 .brand{font-size:21px}
 .brand small{font-size:9px;letter-spacing:2px}
 nav{width:100%;justify-content:space-between;gap:6px;font-size:12px}
 nav a{padding:7px 3px}
 .hero{padding:31px 22px;margin-top:10px;border-radius:18px}
 .hero h1{font-size:clamp(29px,8vw,42px);line-height:1.45}
 .hero p{font-size:14px}
 .heading{flex-direction:row;align-items:center}
 .heading h2{font-size:20px;margin:0}
 .filters{flex-direction:column;gap:8px}
 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .card{padding:12px;border-radius:13px}
 .card h3{font-size:13px}
 .card p{font-size:12px}
 .card .symbol{font-size:35px;min-height:88px}
 .card button{padding:9px 5px;font-size:12px}
 .panel{padding:17px}
}
@media(max-width:420px){
 .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 main{padding:0 12px}
 nav{font-size:11px}
 .card{padding:10px}
 .card .symbol{min-height:75px}
 .heading{gap:8px}
 .heading button{font-size:11px;padding:8px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.card,button,.button{transition:none}.card:hover{transform:none}}


/* Accessible feedback, checkout and compact mobile basket */
.empty-state,.cart-empty{grid-column:1/-1;padding:30px 18px;text-align:center;background:#fff;border:1px dashed #b8cec0;border-radius:15px;color:#17382d}
.empty-state p,.cart-empty p{margin:6px 0 0;color:#617368;font-size:13px}
#catalogStatus{font-size:13px;color:#617368;line-height:1.8}
#cart .line{display:grid;grid-template-columns:minmax(0,1fr) 76px auto;gap:10px;align-items:center}
#cart .line span{overflow-wrap:anywhere}
#cart .line input{width:100%;min-width:0}
#cart .line button{white-space:nowrap}
#total{font-weight:700;font-size:18px}
#shippingQuote{padding:12px 14px;background:#edf4e9;border-radius:10px;font-size:13px}
#checkout{max-width:680px}
#checkout label{font-weight:600;font-size:13px}
#checkout input,#checkout select,#checkout textarea{font-weight:400}
#checkout label.check{font-weight:400;line-height:1.8}
#checkout label.check input{width:auto;flex:none}
#orderStatus:not(:empty),#trackingResult:not(:empty){padding:12px;background:#f4f7f2;border-radius:10px}
@media(max-width:420px){#cart .line{grid-template-columns:minmax(0,1fr) 65px auto;gap:6px;font-size:12px}#cart .line button{padding:8px;font-size:11px}#total{font-size:15px}}

/* Approved red Mahan Hyper visual direction — scoped to storefront only */
body:has(.mobile-bottom-nav){--mahan-red:#c90035;--mahan-dark:#980024;background:#f6f7fa;color:#262733;padding-bottom:74px}
body:has(.mobile-bottom-nav) .banner{background:#fff0f2;color:#8d1230;font-size:11px;padding:5px 10px}
body:has(.mobile-bottom-nav) header{background:linear-gradient(110deg,#a9002b,#e00037);color:white;border:0;box-shadow:0 4px 20px #8e003020}
body:has(.mobile-bottom-nav) .brand{font-size:26px;font-weight:900}
body:has(.mobile-bottom-nav) .brand small{letter-spacing:0;font-size:10px}
body:has(.mobile-bottom-nav) header nav a:hover,body:has(.mobile-bottom-nav) header nav a:focus-visible{border-color:white}
body:has(.mobile-bottom-nav) button:not(.secondary),body:has(.mobile-bottom-nav) .button{background:#d60036;color:white}
body:has(.mobile-bottom-nav) .hero{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:270px;background:linear-gradient(115deg,#a70029,#ed1646);border-radius:22px;color:white}
body:has(.mobile-bottom-nav) .hero-copy{flex:1;min-width:0}
body:has(.mobile-bottom-nav) .hero h1{font-size:clamp(32px,5vw,55px);line-height:1.35;margin:12px 0}
body:has(.mobile-bottom-nav) .hero p{color:#fff1f4;margin:8px 0 17px}
body:has(.mobile-bottom-nav) .hero .button{background:#fff;color:#aa002b}
body:has(.mobile-bottom-nav) .hero small{display:block;color:#ffe1e8;font-size:11px;margin-top:12px}
body:has(.mobile-bottom-nav) .hero-art{font-size:clamp(65px,10vw,130px);text-align:center;line-height:1;min-width:32%}
body:has(.mobile-bottom-nav) .hero-art span{display:block;font-size:clamp(20px,3vw,35px);margin-top:8px;white-space:nowrap}
body:has(.mobile-bottom-nav) .category-showcase{margin-top:25px}
body:has(.mobile-bottom-nav) .heading a{font-size:13px;color:#2563eb;text-decoration:none}
body:has(.mobile-bottom-nav) .category-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
body:has(.mobile-bottom-nav) .category-tile{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;min-height:116px;background:white;border:1px solid #e8e8ee;border-radius:15px;text-align:center;text-decoration:none;font-size:12px;font-weight:700;padding:10px 4px;box-shadow:0 3px 10px #12132b08}
body:has(.mobile-bottom-nav) .category-icon{font-size:40px;line-height:1.25}
body:has(.mobile-bottom-nav) .delivery-strip{display:flex;align-items:center;gap:18px;background:#e7f4ff;border-radius:16px;padding:18px;margin:18px 0 30px}
body:has(.mobile-bottom-nav) .delivery-strip>span{font-size:42px}
body:has(.mobile-bottom-nav) .delivery-strip strong,body:has(.mobile-bottom-nav) .delivery-strip small{display:block}
body:has(.mobile-bottom-nav) .delivery-strip small{font-size:12px;color:#4c6375}
body:has(.mobile-bottom-nav) .card{border:1px solid #e8e8ee;border-radius:16px}
body:has(.mobile-bottom-nav) .card .symbol{background:#fafafa;font-size:56px;min-height:135px}
body:has(.mobile-bottom-nav) .card strong{color:#c90035}
body:has(.mobile-bottom-nav) .card button{background:#d60036}
body:has(.mobile-bottom-nav) .card button.secondary{background:#f1f2f5;color:#424656}
body:has(.mobile-bottom-nav) .mobile-bottom-nav{display:none}
@media(max-width:700px){
 body:has(.mobile-bottom-nav) header{position:relative;align-items:center;gap:5px;padding:15px}
 body:has(.mobile-bottom-nav) header nav{display:none}
 body:has(.mobile-bottom-nav) .brand{font-size:23px}
 body:has(.mobile-bottom-nav) .hero{min-height:210px;padding:23px 17px}
 body:has(.mobile-bottom-nav) .hero h1{font-size:31px}
 body:has(.mobile-bottom-nav) .hero p{font-size:12px}
 body:has(.mobile-bottom-nav) .hero-art{font-size:65px;min-width:34%}
 body:has(.mobile-bottom-nav) .hero-art span{font-size:17px;white-space:normal}
 body:has(.mobile-bottom-nav) .category-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 body:has(.mobile-bottom-nav) .category-tile{min-height:90px;font-size:10px}
 body:has(.mobile-bottom-nav) .category-icon{font-size:29px}
 body:has(.mobile-bottom-nav) .card .symbol{min-height:110px;font-size:42px}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;bottom:0;left:0;right:0;z-index:60;background:white;border-top:1px solid #e9e9ef;padding:7px 5px calc(7px + env(safe-area-inset-bottom));box-shadow:0 -4px 15px #00000010}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:#5e6170;font-size:10px;line-height:1.4}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a span{font-size:22px}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a[aria-current=page]{color:#d60036}
 body:has(.mobile-bottom-nav) .mobile-bottom-nav a:focus-visible{outline:2px solid #d60036}
}
@media(max-width:390px){body:has(.mobile-bottom-nav) .hero-art{font-size:48px}body:has(.mobile-bottom-nav) .category-tile{font-size:9px}body:has(.mobile-bottom-nav) .category-icon{font-size:25px}}

/* Product detail treatment from the approved two-screen concept */
body:has(.mobile-bottom-nav) .product-detail{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(0,1.1fr);gap:25px;align-items:start;margin-top:22px;border-radius:22px}
body:has(.mobile-bottom-nav) .product-detail[hidden]{display:none}
body:has(.mobile-bottom-nav) .detail-visual{min-height:340px;background:linear-gradient(140deg,#f8f8fa,#f0f1f5);border-radius:18px;display:grid;place-items:center;font-size:125px}
body:has(.mobile-bottom-nav) .detail-eyebrow{font-size:12px;color:#bd0031}
body:has(.mobile-bottom-nav) .detail-copy h2{font-size:25px;line-height:1.6}
body:has(.mobile-bottom-nav) .detail-price{display:block;color:#c90035;font-size:25px;margin:15px 0}
body:has(.mobile-bottom-nav) .detail-actions{display:flex;flex-wrap:wrap;gap:10px}
body:has(.mobile-bottom-nav) .detail-actions button{min-height:48px}
body:has(.mobile-bottom-nav) .detail-benefits{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;color:#536271;font-size:12px}
body:has(.mobile-bottom-nav) .detail-benefits span{background:#f5f6f9;border-radius:10px;padding:8px}
@media(max-width:700px){body:has(.mobile-bottom-nav) .product-detail{grid-template-columns:1fr;gap:15px}body:has(.mobile-bottom-nav) .detail-visual{min-height:230px;font-size:95px}body:has(.mobile-bottom-nav) .detail-copy h2{font-size:21px}body:has(.mobile-bottom-nav) .detail-actions button:first-child{flex:1}}

/* Clear mobile basket feedback and navigation safe-area handling */
body:has(.mobile-bottom-nav) .mobile-cart-link>span{position:relative;display:inline-block}
body:has(.mobile-bottom-nav) #mobileCartCount{position:absolute;top:-5px;right:-12px;min-width:17px;height:17px;padding:0 3px;border-radius:12px;background:#d60036;color:white;font-size:10px;line-height:17px;text-align:center;font-weight:700}
body:has(.mobile-bottom-nav) #mobileCartCount[hidden]{display:none}
@media(max-width:700px){body:has(.mobile-bottom-nav){padding-bottom:calc(82px + env(safe-area-inset-bottom))}body:has(.mobile-bottom-nav) #basket,body:has(.mobile-bottom-nav) #catalog,body:has(.mobile-bottom-nav) #tracking{scroll-margin-top:16px}}

.product-photo{display:flex;align-items:center;justify-content:center;min-height:170px;background:#fff;border-radius:14px;overflow:hidden;padding:10px}.product-photo img{width:100%;height:170px;object-fit:contain;display:block}.photo-placeholder{color:#8b8e9a;font-size:12px;text-align:center;border:1px dashed #dfe1e7;background:#f7f8fb;border-radius:12px;padding:35px 12px;width:100%}.detail-visual{flex-direction:column}.detail-visual .product-photo{width:100%;height:300px}.detail-visual .product-photo img{height:280px;width:100%;object-fit:contain}.image-credit{font-size:11px;color:#666;display:block;text-align:center;padding:8px}.card .product-photo{margin-bottom:12px}@media(max-width:700px){.product-photo{min-height:135px}.product-photo img{height:135px}}


.product-photo{position:relative;padding-bottom:30px;background:#fffcf8}
.image-badge{position:absolute;bottom:7px;inset-inline:8px;text-align:center;color:#6b5760;font-size:11px;line-height:1.5;background:#fff9;border-radius:8px;padding:2px 5px}
.product-photo svg{width:100%;height:170px}
.photo-coverage{background:#fff4e7;border:1px solid #f0dfc8;padding:12px 16px;border-radius:12px;font-size:13px;margin-bottom:16px;line-height:1.9}
.detail-visual .product-photo{height:auto;min-height:300px}
@media(max-width:700px){.photo-coverage{font-size:12px}.product-photo svg{height:135px}}