/* Modernist redesign — base tokens + resets taken verbatim from the Claude
   Design handoff's own <style> block. Everything else on the pages this
   stylesheet serves uses INLINE styles copied directly from the template
   (inline always wins over style.css, so nothing from the old theme can
   bleed through), matching how the source .dc.html itself is authored. */

:root{
  --ink:#201e1d; --ground:#f3f2f2; --paper:#ffffff; --acc:#ec3013; --mut:#605d5d; --line:#201e1d;
}
[data-theme="dark"]{
  --ink:#f8f4f4; --ground:#201e1d; --paper:#2d2b2b; --acc:#ff563c; --mut:#9b9797; --line:#605d5d;
}

body{margin:0;background:var(--ground);font-family:"Archivo",system-ui,sans-serif;color:var(--ink)}
[dir="rtl"] body{font-family:"Noto Kufi Arabic","Archivo",system-ui,sans-serif}
a{color:var(--acc);text-decoration:none}
a:hover{color:#ae1800}
.mn *{box-sizing:border-box}
.mn button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;text-align:inherit;border-radius:0}
.mn input{font-family:inherit}
.mn img{max-width:100%}
.mn .sc::-webkit-scrollbar{height:0}
@keyframes mo-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Page root wrapper, exactly the mockup's outer <div> */
.mn{width:100%;background:var(--ground);color:var(--ink);display:flex;flex-direction:column}

/* ===== Drawers / overlays: JS-driven (.open toggling), and the cart drawer's
   item rows are injected by main.js using these class names — CSS is
   unavoidable here since there's no server-rendered markup to inline-style. ===== */
.main-nav, .search-bar, .cart-sidebar{transition:none}
.main-nav:not(.open), .search-bar:not(.open){display:none}
.cart-sidebar{position:fixed;inset:0;z-index:30;transform:translateX(100%);transition:transform .16s ease-out}
.cart-sidebar.open{transform:translateX(0)}
.cart-overlay{position:fixed;inset:0;z-index:29;background:rgba(32,30,29,.5);display:none}
.cart-overlay.open{display:block}
.main-nav.open, .search-bar.open{position:fixed;inset:0;z-index:35;background:var(--ground);display:flex;flex-direction:column;animation:mo-in .16s ease-out}

/* Mobile category accordion rows: collapsed unless the parent row is .open (JS-toggled).
   These class names are reused from the pre-redesign stylesheet purely as main.js hooks
   (toggle/open state, department filter) — style.css still has real rules attached to
   them (old desktop hover-dropdown positioning, Montserrat font, spacing), so every
   property it sets must be neutralized here rather than relying on breakpoint luck. */
.main-nav-dropdown{display:none;position:static;transform:none;background:none;border:none;box-shadow:none;border-radius:0;padding:0;margin:0;min-width:0}
.main-nav-item:hover .main-nav-dropdown{display:none}
.main-nav-item.open .main-nav-dropdown{display:flex}
.main-nav-item{position:static;padding:0;margin:0}
.main-nav-dept{font-family:inherit}
.main-nav-toggle{padding:0;height:auto;font-size:inherit}
/* main.js filters department rows via the `hidden` property; the rows also carry an
   inline display:flex for their own layout, which otherwise always wins over `hidden`. */
.main-nav-item[hidden]{display:none !important}
/* main.js toggles .active on click, but the buttons' initial colors are server-rendered
   inline (hardcoded to the default department) — let the JS-driven class win instead. */
.main-nav-dept.active{background:var(--ink,#201e1d) !important;color:var(--ground,#f3f2f2) !important}
.main-nav-dept:not(.active){background:none !important;color:var(--ink,#201e1d) !important}
.main-nav-item.open .main-nav-toggle i{transform:rotate(180deg)}
.main-nav-toggle i{transition:transform .15s}

.cart-sidebar{width:min(440px,94vw);margin-left:auto;background:var(--ground);border-left:2px solid var(--line);display:flex;flex-direction:column;box-shadow:-14px 0 34px rgba(32,30,29,.28)}
@media (max-width:1023px){ .cart-sidebar{width:100%;border-left:0} }
.cart-sidebar-header{flex:none;display:flex;justify-content:space-between;align-items:center;gap:14px;padding:22px clamp(14px,3vw,26px);border-bottom:2px solid var(--line)}
.cart-sidebar-header h3{font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:-.01em;margin:0}
.cart-sidebar-items{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.cart-sidebar-empty{padding:40px 26px;font-weight:800;font-size:18px}
.cart-sidebar-item{display:flex;gap:14px;padding:18px clamp(14px,3vw,26px);border-bottom:2px solid var(--line)}
.cart-sidebar-item-img{width:82px;height:110px;flex:none;background:var(--paper);object-fit:cover;border:2px solid var(--line)}
.cart-sidebar-item-info{flex:1;display:flex;flex-direction:column;gap:7px}
.cart-sidebar-item-name{font-weight:600;font-size:13px;line-height:1.3;color:var(--ink)}
.cart-sidebar-item-variant{font:500 9px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.cart-sidebar-item-price{font-weight:800;font-size:15px}
.cart-sidebar-item-controls{display:flex;align-items:center;gap:10px;margin-top:auto}
.cart-sidebar-footer{flex:none;padding:20px 26px 24px;border-top:2px solid var(--line);display:flex;flex-direction:column;gap:12px}
.cart-sidebar-footer .cart-total{display:flex;justify-content:space-between;font-weight:900;font-size:22px;margin:0}
.cart-sidebar-footer .btn-primary{background:var(--acc);color:#fff;padding:17px 20px;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.cart-sidebar-footer .section-link{border:2px solid var(--line);padding:14px 20px;font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);display:block;text-align:center}

@media (max-width:1023px){
  body{padding-bottom:64px}
  .whatsapp-float-btn{bottom:78px !important}
}