/* Souq Al Juma v0.24 — shared red identity and unified responsive storefront. */
:root,html,html[data-theme="light"],html[data-theme="dark"]{color-scheme:light!important;--orange:#d71932!important;--accent:#d71932!important;--primary:#d71932!important;--paper:#fff!important;--surface:#fff!important;--brand:#d71932;--brand-dark:#ad1227;--brand-tint:#fff0f2}
html,body{background:#fff!important}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #d71932;outline-offset:2px}
a:hover,.overline,.listingPrice,.textBtn,.catalogSectionHeading svg,.catalogMenuIcon,.mm-location svg{color:var(--brand)}
.btn.primary,.primary,.mm-add,.sj-sell{background:var(--brand)!important;color:white!important}
.heroCopy .eyebrow,.activeCategory{background:var(--brand-tint);color:var(--brand-dark)}
.mm-banner{background:linear-gradient(115deg,#a80f24 0%,#d71932 55%,#ea3148 100%)!important;color:#fff!important}
.mm-chip.active,.mm-category.selected,.tabs button.active{color:var(--brand)!important}
/* Every device sees the same storefront components; desktop uses a roomy version. */
@media (min-width:1025px){
 body:has(#mobileMarket)>.announcement,body:has(#mobileMarket)>.topbar,body:has(#mobileMarket)>main,body:has(#mobileMarket)>footer{display:none!important}
 #mobileMarket.mobileMarket{display:block!important;min-height:100vh;width:100%;font-family:inherit;direction:inherit;background:#fff;color:#121f36;font-size:14px;padding-bottom:60px}
 #mobileMarket button{cursor:pointer;font:inherit}
 #mobileMarket .mm-top{display:flex;align-items:center;gap:13px;max-width:1240px;margin:auto;padding:16px 22px 7px;background:white}
 #mobileMarket .mm-square{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid #e5e7ec;background:white;border-radius:12px}
 #mobileMarket .mm-search{display:flex;align-items:center;flex:1;min-width:0;height:46px;gap:10px;border:1px solid #e5e7ec;border-radius:12px;padding:0 14px}
 #mobileMarket .mm-search input{border:0;outline:0;background:transparent;width:100%;min-width:0;font-size:14px}
 #mobileMarket .mm-location{display:flex;align-items:center;gap:7px;background:transparent;border:0;padding:6px max(22px,calc((100vw - 1196px)/2)) 13px;font-size:13px}
 #mobileMarket .mm-banner{display:flex!important;align-items:center;justify-content:space-evenly;gap:50px;min-height:240px;height:240px;padding:25px max(30px,calc((100vw - 1150px)/2));border-radius:0;overflow:hidden;color:white}
 #mobileMarket .mm-banner img{max-width:42%;max-height:190px;object-fit:contain;filter:drop-shadow(0 8px 14px #0002)}
 #mobileMarket .mm-banner strong{font-size:clamp(23px,3vw,40px);line-height:1.4;color:#fff}
 #mobileMarket .mm-section{max-width:1240px;margin:0 auto;padding:26px 22px 6px}
 #mobileMarket .mm-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:17px;gap:10px}
 #mobileMarket .mm-heading h2{font-size:23px!important;line-height:1.4;margin:0}
 #mobileMarket .mm-cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(105px,1fr));gap:19px;overflow:visible;padding:5px 0 20px}
 #mobileMarket .mm-category{width:auto;min-width:0;padding:0;display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;background:transparent;border:0}
 #mobileMarket .mm-picture{width:100%;max-width:110px;height:106px;background:#f6f7f9;border-radius:15px;overflow:hidden;display:grid;place-items:center}
 #mobileMarket .mm-picture img{height:100%;width:100%;object-fit:cover}
 #mobileMarket .mm-category small{font-size:13px;line-height:1.4}
 #mobileMarket .mm-chips{display:flex;overflow-x:auto;gap:9px;padding:6px 0 15px}
 #mobileMarket .mm-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:15px;overflow:visible;min-height:0;padding:6px 0 24px}
 #mobileMarket .mm-item{min-width:0;width:auto;border:1px solid #eaedf0;background:white;border-radius:13px;overflow:hidden}
 #mobileMarket .mm-item-photo{height:148px;display:grid;place-items:center;background:#f4f5f7}
 #mobileMarket .mm-item-photo img{width:100%;height:100%;object-fit:cover}
 #mobileMarket .mm-bottom{display:none!important}
}
@media (min-width:1025px) and (max-width:1300px){#mobileMarket .mm-items{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:1024px){
 #mobileMarket .mm-banner{background:linear-gradient(115deg,#a80f24,#d71932 60%,#ea3148)!important}
 #mobileMarket .mm-top,#mobileMarket .mm-section{background:#fff}
 #mobileMarket .mm-category{scroll-snap-align:start}
 #mobileMarket .mm-picture{background:#f5f5f7}
 #mobileMarket .mm-bottom{background:#fff!important}
}

/* v0.27: desktop category image and text polish */
@media(min-width:1025px){#mobileMarket .mm-cats{grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:16px 20px;justify-content:start}#mobileMarket .mm-category{padding:4px 2px!important;gap:10px;align-self:start;min-height:0}#mobileMarket .mm-picture{width:clamp(84px,7vw,112px);height:clamp(84px,7vw,112px);max-width:100%;border-radius:16px}#mobileMarket .mm-picture img{object-fit:contain;padding:3px}#mobileMarket .mm-category small,#mobileMarket .mm-category>span:last-child{font-size:13px;line-height:1.5;max-width:140px;min-height:0;word-break:normal;overflow-wrap:break-word;text-align:center}#mobileMarket .mm-section{padding-block:23px 10px}}
@media(max-width:1024px){#mobileMarket .mm-category{width:86px;min-width:86px}#mobileMarket .mm-category>span:last-child{font-size:11px;max-width:86px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}#mobileMarket .mm-picture{width:72px;height:72px}}