/* Client-approved ODEAL header: mobile menu / centered logo / shopping badges. */
.client-header.storefront-header{position:sticky;top:0;z-index:80;background:#fff;isolation:isolate}
.client-header .announcement{width:100%;box-sizing:border-box}
.client-header.storefront-header .header-main{display:grid;grid-template-columns:142px minmax(0,1fr) auto;height:auto;min-height:81px;gap:18px}
.client-header .client-menu-toggle{display:none}
.client-header.storefront-header .main-nav{display:flex;flex-wrap:wrap;gap:0;min-width:0;max-width:100%;overflow:visible;justify-content:center}
.client-header.storefront-header .main-nav>a{display:flex;align-items:center;justify-content:center;padding:11px 9px;font-size:12px;line-height:1.8;min-width:0}
.client-header.storefront-header .header-actions{gap:14px;min-width:0}
.client-header .cart-icon b{min-width:17px;height:17px;box-sizing:border-box;padding-inline:3px;white-space:nowrap}
.client-header-brands{width:100%;max-width:100%;min-width:0;order:3;border-top:1px solid #f1f1f1;overflow:hidden}
.client-header-brands:empty{display:none}
.client-header-brands .store-brand-section{width:min(1560px,calc(100% - 24px));margin-inline:auto;padding-block:6px;border:0}
.client-header-brands .brands-rail{width:100%;max-width:100%;min-width:0;overflow:hidden}
.client-header-brands .brands-track a{height:52px;width:110px;min-width:110px}
.client-header-brands .brands-track img{width:96px;height:44px;object-fit:contain}
body.client-menu-open{overflow:hidden}
.client-menu-dialog{inset:0 0 0 auto;margin:0;border:0;border-inline-end:1px solid #e5e9e5;width:min(360px,calc(100vw - 28px));max-width:calc(100vw - 28px);height:100dvh;max-height:100dvh;padding:0;background:#fff;color:#333;box-shadow:-10px 0 40px #0002;box-sizing:border-box;font-family:'Noto Kufi Arabic',OdealArabic,Tahoma,Arial,sans-serif}
.client-menu-dialog::backdrop{background:#0006}
.client-menu-sheet{padding:18px 20px max(28px,env(safe-area-inset-bottom));overflow-y:auto;overflow-x:hidden;min-height:100%;box-sizing:border-box}
.client-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;border-bottom:1px solid #e9ece8;padding-bottom:12px;margin-bottom:10px}
.client-menu-heading h2{font-size:21px;font-weight:700;line-height:1.7}
.client-menu-heading button{display:grid;place-items:center;width:44px;height:44px;min-width:44px;border:1px solid #e4e9e3;border-radius:5px;font-size:28px;color:#365b4e;background:#fff}
.client-menu-dialog nav{display:grid;gap:0}
.client-menu-dialog nav a{display:flex;align-items:center;min-height:46px;padding:10px 4px;border-bottom:1px solid #f0f1ee;font-size:15px;line-height:1.9;overflow-wrap:anywhere}
.client-menu-dialog nav a:hover{color:#138b69;background:#f3f8f4}
.client-menu-dialog h3{margin-block:24px 8px;font-size:14px;line-height:1.8;color:#658071}
.client-menu-dialog .client-menu-subcategories{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.client-menu-dialog .client-menu-subcategories a{font-size:13px}
.client-menu-toggle:focus-visible,.client-menu-dialog a:focus-visible,.client-menu-dialog button:focus-visible{outline:2px solid #138b69;outline-offset:3px}
.client-mobile-nav{display:none}
.client-header .nav-articles{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:5px 12px;border:1px solid #c5ddcf;border-radius:7px;color:#11694b;background:#f0f7f2;line-height:1.7;white-space:normal;text-align:center}
.client-header .nav-articles svg{width:21px;height:21px;flex:0 0 21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.client-header .nav-articles:hover{background:#e3f0e8;border-color:#138b69}
.client-header .nav-articles:focus-visible{outline:2px solid #138b69;outline-offset:3px}
.client-header .client-mobile-articles{display:none}
.client-menu-dialog nav a.client-menu-articles{color:#11694b;font-weight:700;background:#f0f7f2;padding-inline:10px;border-radius:5px;margin-block:5px}
@media(max-width:900px){.client-header .header-utility .nav-articles{display:none}.client-header .client-mobile-articles{display:flex;order:2;width:calc(100% - 24px);min-width:0;max-width:calc(100% - 24px);margin:0 auto 8px;box-sizing:border-box;font-size:14px;font-weight:700}}
@media(min-width:901px) and (max-width:1199px){.client-header.storefront-header .header-main{grid-template-columns:125px minmax(0,1fr) auto;gap:12px}.client-header.storefront-header .main-nav>a{font-size:11px;padding:8px 7px}.client-header.storefront-header .header-actions{gap:10px}.client-header .header-cart-label{display:none}}
@media(max-width:900px){
  .client-header.storefront-header{position:relative;top:auto;display:flex;flex-direction:column}
  .client-header .announcement{order:0;height:auto;min-height:32px;padding:6px 10px;font-size:clamp(11px,3vw,14px);line-height:1.8}
  .client-header.storefront-header .header-main{order:1;display:grid;grid-template-areas:'menu logo actions';grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr);width:calc(100% - 24px);height:68px;min-height:68px;padding:0;gap:4px;align-items:center}
  .client-header.storefront-header .brand{grid-area:logo;justify-self:center;width:118px;height:60px;margin:0}
  .client-header.storefront-header .brand img{display:block;width:118px;height:60px;object-fit:contain}
  .client-header.client-header--compact:after{content:'';display:block;order:1;height:68px;min-height:68px;width:100%}
  .client-header.storefront-header.client-header--compact .header-main{position:fixed;inset:0 0 auto;width:100%;height:68px;min-height:68px;box-sizing:border-box;padding-inline:12px;background:#fff;border-bottom:1px solid #edf0eb;box-shadow:0 2px 9px #0000000d;z-index:80}
  .client-header .client-menu-toggle{grid-area:menu;display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:44px;max-width:100%;width:max-content;padding:0;border:0;background:transparent;color:#333;font:inherit;font-size:14px;font-weight:700;line-height:1.6;white-space:nowrap}
  .client-menu-toggle svg{width:25px;height:25px;flex:0 0 25px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:square}
  .client-header.storefront-header .header-actions{grid-area:actions;display:flex;align-items:center;justify-content:flex-start;direction:ltr;gap:10px;min-width:0;margin:0;width:100%}
  .client-header.storefront-header .header-action{display:flex;align-items:center;justify-content:center;min-width:32px;width:32px;height:44px;min-height:44px;padding:0;gap:0}
  .client-header.storefront-header .header-action .icon{width:26px;height:26px;stroke-width:1.5}
  .client-header.storefront-header .header-actions .client-secondary-action,.client-header .header-cart-label{display:none}
  .client-header .cart-icon b{top:-6px;right:auto;left:-6px;background:#138b69;color:#fff;font:10px/17px Arial,sans-serif}
  .client-header.storefront-header .main-nav{display:none}
  .client-header.storefront-header .header-search-row{order:2;display:flex;flex-direction:row-reverse;align-items:center;flex-wrap:nowrap;gap:10px;width:calc(100% - 24px);height:62px;min-height:62px;padding:8px 0;border-top:1px solid #f0f0f0;border-bottom:0}
  .client-header.storefront-header .header-search{order:0;display:flex;flex:1;min-width:0;height:44px;padding:0 9px;gap:6px;border:1px solid #e3e3e3;background:#fff}
  .client-header.storefront-header .header-search input{min-width:0;width:100%;font-size:14px;line-height:1.8;padding:7px 0}
  .client-header.storefront-header .header-search button{display:flex;align-items:center;justify-content:center;flex:0 0 26px;min-width:26px;min-height:42px;padding:0}
  .client-header .header-search [data-client-desktop-search-category],.client-desktop-search-category-label{display:none}
  .client-header .header-utility{order:1;display:flex;flex:0 0 auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:auto;max-width:45%;min-width:0;font-size:11px;line-height:1.6;white-space:nowrap}
  .client-header .header-actions .client-compare-link{order:0}.client-header .header-actions .cart-link{order:1}
  .client-header .header-utility>span{font-size:11px;letter-spacing:0}
  .client-header .header-utility .nav-wholesale{display:flex;align-items:center;min-height:44px;margin:0;padding:0;font-size:13px;line-height:1.8;font-weight:700;white-space:nowrap}
  .client-header .search-suggestions{z-index:90;max-width:100%;left:-1px;right:-1px}
  .client-header-brands .store-brand-section{width:calc(100% - 24px);padding-block:4px}
  .client-header-brands .brands-track a{width:90px;min-width:90px;height:44px}
  .client-header-brands .brands-track img{width:78px;height:38px}
  body:not(.admin-mode){padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .client-mobile-nav{position:fixed;inset:auto 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;width:100%;max-width:100%;box-sizing:border-box;padding:4px 6px calc(4px + env(safe-area-inset-bottom));min-height:64px;background:#fff;border-top:1px solid #e4e9e2;box-shadow:0 -3px 14px #143b2810;z-index:85;font-family:'Noto Kufi Arabic',OdealArabic,Tahoma,Arial,sans-serif}
  .client-mobile-nav>a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:52px;padding:5px 2px;color:#5c7062;font-size:10px;line-height:1.5;text-align:center}
  .client-mobile-nav>a>svg,.client-mobile-nav-icon>svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
  .client-mobile-nav>a[aria-current=page]{color:#138b69;background:#f1f7f2;border-radius:5px;font-weight:700}
  .client-mobile-nav-icon{position:relative;display:flex}
  .client-mobile-nav-icon>b{position:absolute;top:-6px;left:-9px;min-width:15px;height:15px;padding-inline:2px;border-radius:50%;font:9px/15px Arial,sans-serif;background:#138b69;color:#fff;box-sizing:border-box}
  .admin-mode>.client-mobile-nav{display:none}
  .client-mobile-nav>a:focus-visible{outline:2px solid #138b69;outline-offset:-2px}
  .whatsapp-float{bottom:calc(80px + env(safe-area-inset-bottom))!important}
  #assistant-root .zrz.zrz--perched:not(.zrz--open){bottom:calc(68px + env(safe-area-inset-bottom))!important}.transaction-mode #assistant-root .zrz.zrz--perched:not(.zrz--open){bottom:calc(80px + env(safe-area-inset-bottom))!important}
  .toast-region{bottom:calc(80px + env(safe-area-inset-bottom))}
}
@media(max-width:350px){.client-header.storefront-header .header-main{grid-template-columns:minmax(0,1fr) 106px minmax(0,1fr)}.client-header.storefront-header .brand,.client-header.storefront-header .brand img{width:106px}.client-header .client-menu-toggle{font-size:13px;gap:4px}.client-menu-toggle svg{width:23px;height:23px;flex-basis:23px}.client-header .header-utility{gap:7px;max-width:47%}.client-header .header-utility>span{font-size:10px}.client-header .header-utility .nav-wholesale{font-size:12px}.client-header.storefront-header .header-search-row{gap:7px}.client-header.storefront-header .header-search input{font-size:13px}}
.footer-social{display:flex;flex-direction:column;align-items:flex-start;gap:18px;max-width:100%;box-sizing:border-box;padding-block:24px;border-top:1px solid #ffffff26}.footer-social h3{font-size:22px;line-height:1.8;font-weight:750;margin:0;color:#fff}.footer-social-icons{display:flex;flex-direction:row;align-items:center;gap:16px;max-width:100%;direction:rtl}.footer-social .footer-social-link{display:inline-flex;align-items:center;justify-content:center;flex:0 0 56px;width:56px;min-width:56px;height:56px;min-height:56px;margin:0;padding:0;box-sizing:border-box;border-radius:5px;color:#fff;text-decoration:none;line-height:1}.footer-social .social-facebook{background:#1877f2}.footer-social .social-instagram{background:radial-gradient(circle at 30% 110%,#ffdc80 0%,#fcaf45 28%,#f77737 40%,#e1306c 58%,#c13584 70%,#833ab4 100%)}.footer-social .social-youtube{background:#ff0000}.footer-social .footer-social-link>svg{display:block;width:38px;height:38px;fill:currentColor;flex:0 0 38px}.footer-social .footer-social-link[aria-disabled=true]{cursor:default;opacity:1}.footer-social .footer-social-link[href]:hover{filter:brightness(1.1)}.footer-social .footer-social-link[href]:focus-visible{outline:3px solid #e8bc51;outline-offset:5px;border-radius:5px}
/* Keep footer links in their own readable columns at every viewport width. */
.site-footer .footer-top{grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr))}
.site-footer .footer-top>div{min-width:0;max-width:100%;overflow-wrap:anywhere}
.site-footer .footer-top>div:last-child{display:block;grid-column:auto}
.site-footer .footer-top>div:last-child h3{margin-bottom:15px}
.site-footer .footer-top>div>a,.site-footer .footer-privacy{max-width:100%;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.8;margin-top:7px}
@media(max-width:1000px){.site-footer .footer-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px}.site-footer .footer-brand{grid-column:auto;display:block}}
@media(max-width:900px){.site-footer .footer-privacy{display:none}}
@media(max-width:700px){
  .studio-workspace .product-grid{grid-template-columns:minmax(0,1fr)}
  .studio-workspace .product-card{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0;width:100%;max-width:100%}
  .studio-workspace .product-picture{width:100%;height:200px;aspect-ratio:auto}
  .studio-workspace .product-body{min-width:0;width:100%;overflow-wrap:anywhere}
}
@media(max-width:600px){
  .client-header.storefront-header .header-search-row{position:relative}
  .client-header.storefront-header .header-search{position:static}
  .client-header .search-suggestions{top:100%;left:0;right:0;width:auto;max-width:100%;max-height:min(60dvh,480px);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
  .client-header .search-suggestions>a{display:grid;grid-template-columns:40px minmax(0,1fr);align-items:center;gap:3px 10px;padding:10px;min-width:0;min-height:44px;font-size:15px;line-height:1.7}
  .client-header .search-suggestions>a>img{grid-column:1;grid-row:1 / span 2;width:40px;height:40px;object-fit:contain}
  .client-header .search-suggestions>a>span{grid-column:2;min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .client-header .search-suggestions .suggestion-price{grid-column:2;margin-inline-start:0;font-size:14px;line-height:1.7;white-space:normal;overflow-wrap:anywhere}
  .client-header .search-suggestions>a:last-child{display:flex;flex-wrap:wrap;gap:10px;white-space:normal;overflow-wrap:anywhere}
  .site-footer .footer-top{grid-template-columns:minmax(0,1fr);gap:28px}
  .site-footer .footer-top>div>a{display:flex;align-items:center;min-height:44px}
  .detail-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-width:100%;min-width:0;overflow:visible;padding-bottom:4px}
  .detail-tabs button{min-width:0;width:100%;min-height:50px;white-space:normal;overflow-wrap:anywhere;line-height:1.7;padding:10px 8px}
  .studio-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;max-width:100%;overflow:visible;white-space:normal}
  .studio-nav a{display:flex;align-items:center;min-width:0;min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;line-height:1.8;padding:10px}
  .account-menu,.market-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;max-width:100%;overflow:visible;white-space:normal}
  .account-menu button,.account-menu a,.market-nav a{min-width:0;width:100%;max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.8;padding:10px}
}
/* Intermediate mobile/tablet widths retain visible navigation instead of nowrap rails. */
@media(min-width:601px) and (max-width:900px){
  .studio-nav,.market-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;min-width:0;max-width:100%;overflow:visible;white-space:normal}
  .studio-nav a,.market-nav a{display:flex;align-items:center;min-width:0;width:100%;max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.8;padding:10px}
}
@media(min-width:601px) and (max-width:700px){
  .account-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;max-width:100%;overflow:visible;white-space:normal}
  .account-menu button,.account-menu a{min-width:0;width:100%;max-width:100%;min-height:44px;white-space:normal;overflow-wrap:anywhere;line-height:1.8;padding:10px}
}
/* Long administrative totals must not enlarge their grid tracks. */
.admin-stats,.admin-stats .stat-card{min-width:0;max-width:100%}
.admin-stats .stat-card strong{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
@media(max-width:1100px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Reserve the chat's flexible space for messages; keep its composer reachable. */
#assistant-root .zrz-panel{min-width:0;min-height:0;max-width:calc(100vw - 16px)}
#assistant-root .zrz-panel>.zrz-header,#assistant-root .zrz-panel>.zrz-shortcuts,#assistant-root .zrz-panel>.zrz-form,#assistant-root .zrz-panel>.zrz-footer{flex:0 0 auto}
#assistant-root .zrz-panel .zrz-log{flex:1 1 0;min-width:0;min-height:0}
#assistant-root .zrz-panel .zrz-log>.zrz-message{flex-shrink:0}
/* Once conversation starts, retain a compact human handoff instead of repeat prompts. */
@supports selector(:has(*)){
  #assistant-root .zrz-panel:has(.zrz-log .zrz-message)>.zrz-shortcuts{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:0;padding:0 10px 4px}
  #assistant-root .zrz-panel:has(.zrz-log .zrz-message)>.zrz-shortcuts>button{display:none}
  #assistant-root .zrz-panel:has(.zrz-log .zrz-message)>.zrz-shortcuts>.zrz-human-link{display:inline-flex;align-items:center;min-height:44px;padding:6px 10px;font-size:13px;line-height:1.5}
}
@media(max-height:680px){
  #assistant-root .zrz-panel{position:fixed;inset:8px auto calc(8px + env(safe-area-inset-bottom)) 8px;width:calc(100% - 16px);max-width:440px;height:calc(100dvh - 16px - env(safe-area-inset-bottom));max-height:calc(100dvh - 16px - env(safe-area-inset-bottom))}
  #assistant-root .zrz-panel .zrz-header{display:grid;grid-template-columns:32px minmax(0,1fr) auto 44px;gap:6px;align-items:center;min-height:56px;padding:5px 8px!important}
  #assistant-root .zrz-panel .zrz-mini{grid-column:1;grid-row:1;width:32px;height:32px}
  #assistant-root .zrz-panel .zrz-heading{grid-column:2;grid-row:1;min-width:0}
  #assistant-root .zrz-panel .zrz-heading h2{font-size:16px!important;line-height:1.4;margin:0}
  #assistant-root .zrz-panel .zrz-heading h2 span,#assistant-root .zrz-panel .zrz-heading p{display:none}
  #assistant-root .zrz-panel .zrz-call-from-chat{grid-column:3;grid-row:1;justify-self:start;min-height:44px;padding:6px 8px;font-size:12px!important}
  #assistant-root .zrz-panel .zrz-close{grid-column:4;grid-row:1;width:44px;height:44px;min-width:44px}
  #assistant-root .zrz-panel .zrz-shortcuts button,#assistant-root .zrz-panel .zrz-human-link{min-height:44px}
  #assistant-root .zrz-panel .zrz-log{padding:10px 12px;gap:12px}
  #assistant-root .zrz-panel .zrz-form{min-width:0;gap:4px;padding:6px;margin:4px 10px 6px}
  #assistant-root .zrz-panel .zrz-form textarea{min-height:44px;max-height:min(110px,20dvh);padding:6px;line-height:1.5}
  #assistant-root .zrz-panel .zrz-footer{gap:8px;padding:4px 12px;line-height:1.5}
  #assistant-root .zrz-panel .zrz-footer label{min-height:44px}
}

/* Administrative workspaces must keep customer overlays out of editing controls. */
body.admin-mode>.site-header.client-header,body.admin-mode>.site-footer,body.admin-mode>.client-mobile-nav,body.admin-mode>.whatsapp-float,body.admin-mode>#assistant-root{display:none!important}
body.admin-mode{padding-bottom:0}