/* =========================================================================
   Master New Design — Global stylesheet (header + footer, site-wide)
   Fonts: Cairo (display) + Tajawal (body), self-hosted, unicode-subset.
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
/* Cairo is a variable font: one file per subset covers all weights. */
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/cairo-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EFC-10EFF,U+1EE00-1EEFF;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/cairo-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url('../fonts/cairo-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tajawal-400-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+1EE00-1EEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/tajawal-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/tajawal-500-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+1EE00-1EEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/tajawal-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/tajawal-700-arabic.woff2') format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+08A0-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+1EE00-1EEFF;}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/tajawal-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

/* ---- Tokens ------------------------------------------------------------ */
:root{
  --mnd-dark:#2b211b; --mnd-darker:#241b15; --mnd-darkest:#221912;
  --mnd-gold:#b07b4a; --mnd-gold-light:#cda06a; --mnd-gold-dark:#8a5d34;
  --mnd-bg:#efece7; --mnd-cream:#f1e9df; --mnd-cream2:#f4ece2;
  --mnd-card:#fff; --mnd-card-bd:#ece4d9;
  --mnd-text:#2b211b; --mnd-muted:#9a8b78; --mnd-muted2:#7a6a59;
  --mnd-on-dark:#cbbfb2; --mnd-on-dark2:#9c8d7d; --mnd-on-dark3:#e4d9cc; --mnd-on-dark4:#f1e9df;
  --mnd-danger:#b34a3a; --mnd-line:#d6cabb;
  --mnd-wrap:1200px;
}

/* ---- Base -------------------------------------------------------------- */
.mnd-body{background:var(--mnd-bg);font-family:'Tajawal',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--mnd-text);margin:0;}
.mnd-body *{box-sizing:border-box;}
.mnd-cairo{font-family:'Cairo','Tajawal',sans-serif;}
.mnd-wrap{max-width:var(--mnd-wrap);margin:0 auto;padding-inline:20px;}
.mnd-body a{text-decoration:none;}
/* Buttons declare their own color per variant (gold/dark/light...) — without
   this exclusion, `color:inherit` above (needed for plain text links) has
   higher specificity than a single-class `.mnd-btn-light` rule and wins,
   so a button silently inherits its *ancestor's* text color instead of its
   own. On a white-background button sitting in a white-text section, that's
   invisible white-on-white text. */
.mnd-body a:not(.mnd-btn){color:inherit;}
.mnd-body img{max-width:100%;}
.mnd-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}
.mnd-svgicon{display:block;flex-shrink:0;}
.mnd-body ::-webkit-scrollbar{height:8px;width:8px;}
.mnd-body ::-webkit-scrollbar-thumb{background:#cdbfae;border-radius:8px;}

/* Woodmart draws every form field as a transparent box whose ONLY visible
   boundary is its border (--wd-form-bg is transparent on :root). The old rule
   here stripped that border (`border:none`) — leaving checkout, login,
   coupon, review and quantity fields completely invisible on the page
   background. Instead of fighting each element, restyle the fields by
   overriding Woodmart's own :root form variables (body-level declaration wins
   for all descendants): white face + soft 1px border + the 8px radius used
   across the new design + gold focus. This also covers select2 dropdowns
   (country/state on checkout), which read the same variables. */
.mnd-body{
  --wd-form-bg:#fff;
  --wd-form-brd-width:1px;
  --wd-form-brd-color:var(--mnd-line);
  --wd-form-brd-color-focus:var(--mnd-gold);
  --wd-form-brd-radius:8px;
  /* Woodmart's "accented" buttons (add to cart on cards & product page...)
     read these — align them with the design palette instead of the near-miss
     defaults Woodmart ships (#b57629 / dark-brown hover). */
  --btn-accented-bgcolor:var(--mnd-gold);
  --btn-accented-bgcolor-hover:var(--mnd-gold-dark);
  --btn-accented-color:#fff;
  --btn-accented-color-hover:#fff;
  --btn-accented-brd-radius:8px;
}
/* The header search input sits inside the white .mnd-search pill which is
   already the visible field — keep the inner input bare. Higher specificity
   than Woodmart's `input[type=search]{...}` base rule, which loads after
   this file on inner pages and ties with the plain `.mnd-search input` rule
   below (that's why color/placeholder are repeated here: Woodmart's
   `color:var(--wd-form-color)` resolves to `inherit` = the header's cream
   text — invisible on the white pill). */
.mnd-body .mnd-search input{border:none;background-color:transparent;border-radius:0;height:100%;color:var(--mnd-dark);}
.mnd-body .mnd-search input::placeholder{color:#8a8a8a;opacity:1;}

/* Woodmart's base `:is(ul,ol) li{margin-bottom:var(--li-mb)}` leaks into the
   header menus (it loads after this file): each nav <li> grows a bottom
   margin, pushing the link text off-center inside the 46px bar so the menu
   items no longer line up with "كل الأقسام". Kill it inside our components. */
.mnd-topbar li,
.mnd-nav li{margin-bottom:0;}

/* My Account dashboard: Woodmart renders the same 8 links twice — once as
   the sidebar nav (.woocommerce-MyAccount-navigation, kept) and again as an
   unstyled "quick links" list inline in the welcome text
   (.wd-my-account-links). With Woodmart's own card styling for the second
   list not loading here, it just looks like the same menu duplicated. */
.wd-my-account-links{display:none;}

/* Inner pages (shop, product, cart, checkout, account...) render with zero
   side padding and content running edge-to-edge. Woodmart normally supplies
   that spacing via its own `.container`/page-wrapper markup, output by
   functions tied to *its* header.php — since our header.php replaces it
   site-wide, that wrapper never gets opened. Matched to the exact same
   max-width as the header's `.mnd-wrap` so inner-page content lines up with
   the header above it instead of running wider than it on large screens.
   Not on the front page — it's fully custom-built with its own `.mnd-wrap`
   sections already spaced correctly, and its own margin-top via `.mnd-hero`. */
body:not(.home) #mnd-content{margin-top:25px;max-width:var(--mnd-wrap);margin-inline:auto;padding-inline:20px;}

/* =========================================================================
   HEADER
   ========================================================================= */

/* Promo strip — compact fixed height, up to 3 messages rotating with a
   fade/slide. Messages are absolutely stacked; nth-child delays stagger them
   across one animation cycle (12s for 3 messages, 8s for 2). A single
   message renders static in normal flow — no animation, no absolute. */
.mnd-promo{position:relative;overflow:hidden;height:30px;background:var(--mnd-gold);color:#fff;text-align:center;font-family:'Cairo',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.3px;}
.mnd-promo-msg{display:block;line-height:30px;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mnd-promo-n2 .mnd-promo-msg,
.mnd-promo-n3 .mnd-promo-msg{position:absolute;inset:0;opacity:0;}
.mnd-promo-n3 .mnd-promo-msg{animation:mnd-promo-3 12s linear infinite;}
.mnd-promo-n2 .mnd-promo-msg{animation:mnd-promo-2 8s linear infinite;}
.mnd-promo .mnd-promo-msg:nth-child(2){animation-delay:4s;}
.mnd-promo .mnd-promo-msg:nth-child(3){animation-delay:8s;}
/* visible ~1/3 of the 12s cycle, with a soft crossfade at each hand-off */
@keyframes mnd-promo-3{
  0%{opacity:0;transform:translateY(8px);}
  4%{opacity:1;transform:translateY(0);}
  33%{opacity:1;transform:translateY(0);}
  37%{opacity:0;transform:translateY(-8px);}
  100%{opacity:0;transform:translateY(-8px);}
}
/* visible ~1/2 of the 8s cycle */
@keyframes mnd-promo-2{
  0%{opacity:0;transform:translateY(8px);}
  4%{opacity:1;transform:translateY(0);}
  46%{opacity:1;transform:translateY(0);}
  50%{opacity:0;transform:translateY(-8px);}
  100%{opacity:0;transform:translateY(-8px);}
}
/* (No prefers-reduced-motion opt-out here by owner request: with it, any
   visitor/OS with "reduce animations" enabled saw the strip frozen on the
   first message and reported the rotation as broken.) */

/* Top bar */
.mnd-topbar{background:var(--mnd-darker);color:var(--mnd-on-dark);font-size:12px;}
.mnd-topbar .mnd-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-block:8px;}
.mnd-topbar-links{display:flex;align-items:center;gap:18px;}
.mnd-topbar-info{display:flex;align-items:center;gap:16px;}
.mnd-topbar-info .mnd-curr{color:var(--mnd-on-dark2);}
.mnd-status{display:flex;align-items:center;gap:6px;transition:color .2s;}
a.mnd-status:hover{color:var(--mnd-gold-light);}
.mnd-status-dot{width:7px;height:7px;border-radius:50%;background:#5fbb6a;display:inline-block;}
.mnd-lnk{cursor:pointer;transition:color .2s;}
.mnd-lnk:hover{color:var(--mnd-gold-light);}

/* Header main */
.mnd-header{background:var(--mnd-dark);color:var(--mnd-on-dark4);}
/* WooCommerce adds this body class on /cart/ automatically. */
.woocommerce-cart .mnd-header{padding-bottom:15px;}
.mnd-header-main{display:flex;align-items:center;gap:24px;padding-block:16px;}
.mnd-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;line-height:1.15;}
.mnd-logo svg{flex-shrink:0;}
.mnd-logo-img{max-height:54px;width:auto;max-width:170px;object-fit:contain;display:block;border-radius:0;}
.mnd-logo-txt-1{font-family:'Cairo',sans-serif;font-weight:800;font-size:18px;letter-spacing:3px;color:var(--mnd-on-dark4);}
.mnd-logo-txt-2{font-family:'Cairo',sans-serif;font-weight:600;font-size:13px;letter-spacing:7px;color:var(--mnd-gold-light);}

/* Search */
.mnd-search{flex:1;display:flex;align-items:center;background:#fff;border:none;border-radius:8px;overflow:hidden;height:44px;}
/* `border:none` + an explicit placeholder color — Woodmart's own global form
   styles put a border on every <input>/<form> and a very light placeholder
   color (tuned for its own search field elsewhere), both of which bled
   through here since we hadn't overridden them explicitly. */
.mnd-search input{flex:1;border:none;outline:none;padding:0 16px;font-family:'Tajawal',sans-serif;font-size:14px;color:var(--mnd-dark);background:transparent;min-width:0;}
.mnd-search input::placeholder{color:#8a8a8a;opacity:1;}
.mnd-search button{background:var(--mnd-gold);border:none;color:#fff;height:100%;padding:0 22px;cursor:pointer;font-family:'Tajawal',sans-serif;font-size:14px;font-weight:700;transition:background .2s;white-space:nowrap;}
.mnd-search button:hover{background:var(--mnd-gold-dark);}

/* Header actions */
.mnd-actions{display:flex;align-items:center;gap:22px;flex-shrink:0;font-size:13px;}
.mnd-action{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;transition:color .2s;position:relative;color:inherit;}
.mnd-action:hover{color:var(--mnd-gold-light);}
.mnd-action .mnd-ic{font-size:18px;line-height:1;}
.mnd-action.is-cart{color:var(--mnd-gold-light);}
.mnd-cart-count{position:absolute;top:-6px;left:-8px;background:var(--mnd-gold);color:#fff;border-radius:50%;min-width:18px;height:18px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 3px;}

/* Mobile toggles (hidden on desktop) */
.mnd-header .mnd-burger,.mnd-header .mnd-search-toggle{display:none;background:none;border:none;color:var(--mnd-on-dark4);font-size:22px;cursor:pointer;padding:4px;line-height:1;}

/* Nav — every direct child of the bar (the "كل الأقسام" label, each <li>, and
   each link inside) is stretched to the full 46px row and flex-centered, so
   nothing depends on text baselines or line-heights: the label and the menu
   items always sit on exactly the same line at the same height. */
.mnd-nav{background:var(--mnd-darkest);border-top:1px solid rgba(255,255,255,.06);}
.mnd-nav-inner{display:flex;flex-wrap:nowrap;align-items:stretch;gap:26px;min-height:46px;font-size:14px;font-weight:500;}
.mnd-nav-all{display:flex;align-items:center;gap:8px;color:var(--mnd-gold-light);font-weight:700;cursor:pointer;white-space:nowrap;}
.mnd-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:nowrap;align-items:stretch;gap:26px;}
.mnd-nav a,.mnd-navlnk{color:var(--mnd-on-dark3);cursor:pointer;transition:color .2s;white-space:nowrap;}
.mnd-nav a:hover,.mnd-navlnk:hover{color:var(--mnd-gold-light);}

/* Dropdown sub-menus (e.g. "الأقسام الرئيسية" → category list). Without the
   overrides below, a menu item with children renders its nested <ul> as a
   second always-visible horizontal row (it inherits `.mnd-nav ul{display:flex}`
   above), dumping every category inline next to the top-level links instead
   of as a dropdown. The <li> fills the full bar height, so `top:100%` on the
   dropdown anchors exactly where the dark bar ends. */
.mnd-nav-menu > li{position:relative;display:flex;align-items:stretch;}
.mnd-nav-menu > li > a{display:flex;align-items:center;}
.mnd-nav .sub-menu{display:none;position:absolute;top:100%;right:0;z-index:50;
  flex-direction:column;align-items:stretch;gap:0;min-width:220px;
  background:var(--mnd-darkest);border-radius:0 0 8px 8px;padding:8px 0;
  box-shadow:0 12px 28px rgba(0,0,0,.3);}
/* Hover dropdown is desktop-only: on touch, a tap "hovers"/focuses the
   parent and would fight the drawer's accordion toggle (theme.js). */
@media (min-width:861px){
  .mnd-nav-menu > li:hover > .sub-menu,
  .mnd-nav-menu > li:focus-within > .sub-menu{display:flex;}
}
.mnd-nav .sub-menu a{display:block;padding:9px 18px;}
.mnd-nav .sub-menu a:hover{background:rgba(255,255,255,.06);}

/* "كل الأقسام" dropdown (desktop) — a real WP menu (location mnd_categories,
   editable from المظهر ← القوائم) with the full category tree. Placed after
   the .mnd-nav .sub-menu rules above so its own sub-menu overrides win the
   same-specificity tie (flyout to the side instead of below). */
.mnd-nav-all-wrap{position:relative;display:flex;align-items:stretch;}
.mnd-catmenu{display:none;position:absolute;top:100%;right:0;z-index:60;min-width:262px;background:var(--mnd-darkest);border-radius:0 0 8px 8px;box-shadow:0 12px 28px rgba(0,0,0,.3);padding:6px 0;}
.mnd-nav-all-wrap:hover .mnd-catmenu,
.mnd-nav-all-wrap:focus-within .mnd-catmenu{display:block;}
.mnd-catmenu ul{list-style:none;margin:0;padding:0;display:block;}
.mnd-catmenu li{position:relative;display:block;}
.mnd-catmenu a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 18px;color:var(--mnd-on-dark3);font-size:13.5px;white-space:nowrap;transition:background .2s,color .2s;}
.mnd-catmenu a:hover{background:rgba(255,255,255,.06);color:var(--mnd-gold-light);}
/* (No ::after arrow on parent items by owner request — at this size it
   rendered like a stray bar after names such as "خزانة الملابس"; the flyout
   still opens on hover.) */
/* Flyout opens beside the panel (to its left — RTL site). Physical right:100%
   on purpose: the logical `inset-inline-start:100%` + `right:auto` pair maps
   to the SAME physical property here, so whichever is declared later cancels
   the other and the flyout collapses back on top of the parent list. */
.mnd-catmenu .sub-menu{display:none;position:absolute;top:-6px;right:100%;left:auto;min-width:232px;background:var(--mnd-darkest);border-radius:8px;box-shadow:0 12px 28px rgba(0,0,0,.3);padding:6px 0;}
.mnd-catmenu li:hover > .sub-menu,
.mnd-catmenu li:focus-within > .sub-menu{display:block;}

/* Drawer chrome (head + search + tabs + account links) — desktop never shows
   any of it; the open/close + panel rules live in the ≤860px block. */
.mnd-drawer-head,.mnd-drawer-search,.mnd-drawer-tabs,.mnd-drawer-actions{display:none;}
.mnd-drawer-backdrop{position:fixed;inset:0;z-index:10990;background:rgba(20,15,10,.55);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;}

/* =========================================================================
   FOOTER
   ========================================================================= */
.mnd-foot-features{background:var(--mnd-darker);margin-top:52px;}
.mnd-foot-features .mnd-wrap{padding-block:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.mnd-ff{display:flex;align-items:center;gap:14px;color:var(--mnd-on-dark3);}
.mnd-ff-ic{font-size:30px;color:var(--mnd-gold-light);line-height:1;display:flex;align-items:center;}
.mnd-ff-ic img{width:34px;height:34px;object-fit:contain;}
.mnd-ff h4{font-family:'Cairo',sans-serif;font-weight:800;font-size:15px;margin:0 0 3px;color:inherit;}
.mnd-ff p{font-size:12px;color:var(--mnd-on-dark2);margin:0;}

.mnd-footer{background:var(--mnd-dark);color:var(--mnd-on-dark);}
.mnd-footer-cols{padding-block:44px 30px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}
/* Brand col (logo + description + socials) is markup-last (it needs the
   description/socials rendered outside the column loop) but belongs in the
   wider 1.4fr first slot — it has the most content of any column. `order`
   moves it there instead of the shorter "ماستر روم" link list that was
   landing in the wide slot by default DOM order while brand-col got
   squeezed into a plain 1fr column at the far end. */
.mnd-footer-cols .mnd-brand-col{order:-1;}
.mnd-footer-cols h4{font-family:'Cairo',sans-serif;font-weight:800;font-size:16px;color:var(--mnd-on-dark4);margin:0 0 16px;}
.mnd-footer-cols ul{list-style:none;margin:0;padding:0;}
.mnd-footer-cols li,.mnd-foot-link{font-size:13px;margin-bottom:11px;cursor:pointer;transition:color .2s;}
.mnd-footer-cols a:hover{color:var(--mnd-gold-light);}
.mnd-brand-logo{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.mnd-brand-logo .mnd-logo-img{max-height:44px;}
.mnd-brand-desc{font-size:13px;line-height:1.7;margin:0 0 16px;}
.mnd-socials{display:flex;gap:10px;flex-wrap:wrap;}
.mnd-social{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.07);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;color:var(--mnd-on-dark3);transition:background .2s,color .2s;overflow:hidden;}
.mnd-social:hover{background:rgba(255,255,255,.16);color:var(--mnd-gold-light);}
.mnd-social img{width:20px;height:20px;object-fit:contain;}
.mnd-social .mnd-svgicon{width:16px;height:16px;}

.mnd-footer-bottom{border-top:1px solid rgba(255,255,255,.08);}
.mnd-footer-bottom .mnd-wrap{padding-block:18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;}
.mnd-copy{font-size:12px;color:var(--mnd-on-dark2);}
.mnd-pays{display:flex;align-items:center;}
/* One combined brand sheet (footer.php) instead of cropping each logo into
   its own pill — its own spacing/sizing between logos is already correct. */
.mnd-pays-img{height:70px;width:auto;border-radius:5px;display:block;}

/* Floating Chaty buttons: hidden (via theme.js IntersectionObserver on the
   footer bottom bar) once the visitor scrolls to the very end of the page,
   so they don't sit on top of the payment methods / copyright strip. */
.mnd-body .chaty-widget{transition:opacity .25s ease,visibility .25s ease;}
.mnd-chaty-hidden .chaty-widget{opacity:0;visibility:hidden;pointer-events:none;}

/* Checkout: the Stripe "Bank Card" gateway title (WooCommerce settings) has
   this same payments image embedded in its title text. WooCommerce sanitizes
   gateway titles down to `<img src>` only — style, width and height
   attributes all get stripped — so sizing has to come from CSS here, not
   from attributes on the tag itself, or the image renders at its full
   native 2050×383px size on the checkout form. */
.woocommerce-checkout .payment_methods img,
.wc_payment_methods img{height:15px;width:auto;vertical-align:middle;margin-inline-start:6px;border-radius:3px;}
.mnd-pay.mnd-pay-chip img{height:28px;max-width:none;}

/* =========================================================================
   MY ACCOUNT — Woodmart's account-page part styles don't load under our
   replaced header, leaving the sidebar as a browser-default bulleted list.
   Styled here to match the new design.
   ========================================================================= */
/* Woodmart renders the same 8 account links twice on the dashboard — the
   sidebar nav (kept) and an icon quick-links list inline in the welcome text.
   The old plain `.wd-my-account-links{display:none}` was overridden by
   Woodmart's `.wd-nav{display:flex}`, which loads after this file — hence the
   duplicated unstyled menu that was showing. */
.mnd-body ul.wd-my-account-links{display:none !important;}

.mnd-body .woocommerce-MyAccount-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:22px;margin:0 0 16px;color:var(--mnd-text);}
.mnd-body .woocommerce-MyAccount-navigation{background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;overflow:hidden;}
.mnd-body .woocommerce-MyAccount-navigation ul{list-style:none;margin:0;padding:6px 0;}
.mnd-body .woocommerce-MyAccount-navigation li{margin:0;}
.mnd-body .woocommerce-MyAccount-navigation li + li{border-top:1px solid #f1ebe2;}
.mnd-body .woocommerce-MyAccount-navigation li a{display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:14px;font-weight:500;color:var(--mnd-muted2);transition:background .2s,color .2s;}
/* Endpoint icons: stroke SVGs applied as a mask so the icon always follows
   the link's current text color (muted → gold on hover → white on active →
   red on logout) with a single set of shapes. Each endpoint <li> sets
   --mnd-acc-ic; unknown/plugin endpoints fall back to the chevron. */
.mnd-body .woocommerce-MyAccount-navigation li{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 6l-6 6 6 6'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation li a::before{content:"";width:17px;height:17px;flex-shrink:0;background-color:currentColor;-webkit-mask:var(--mnd-acc-ic) no-repeat center / contain;mask:var(--mnd-acc-ic) no-repeat center / contain;}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--dashboard{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5L12 3l9 7.5'/%3E%3Cpath d='M5 9.5V21h14V9.5'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--orders{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8l-9-5-9 5v8l9 5 9-5z'/%3E%3Cpath d='M3 8l9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--downloads{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M4 21h16'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-address{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-5.5-7-11a7 7 0 0 1 14 0c0 5.5-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--payment-methods{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2'/%3E%3Cpath d='M2.5 10h19'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--edit-account{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-3.5 4.5-5 8-5s6.5 1.5 8 5'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--wishlist{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20.5C7 16.5 3.5 13 3.5 9.3 3.5 6.4 5.7 4.5 8 4.5c1.6 0 3 .8 4 2.2 1-1.4 2.4-2.2 4-2.2 2.3 0 4.5 1.9 4.5 4.8 0 3.7-3.5 7.2-8.5 11.2z'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout{--mnd-acc-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='M16 17l5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");}
.mnd-body .woocommerce-MyAccount-navigation li a:hover{background:var(--mnd-cream);color:var(--mnd-gold-dark);}
.mnd-body .woocommerce-MyAccount-navigation li.is-active a{background:var(--mnd-gold);color:#fff;font-weight:700;}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a{color:var(--mnd-danger);}
.mnd-body .woocommerce-MyAccount-navigation .woocommerce-MyAccount-navigation-link--customer-logout a:hover{background:#f7ebe8;color:var(--mnd-danger);}

.mnd-body .woocommerce-MyAccount-content{font-size:14.5px;line-height:1.9;}
/* Welcome line ("مرحباً ...") shown as a soft intro card. */
.mnd-body .woocommerce-MyAccount-content > .woocommerce-notices-wrapper + p{background:var(--mnd-cream2);border:1px solid var(--mnd-card-bd);border-radius:12px;padding:14px 18px;}
.mnd-body .woocommerce-MyAccount-content p a:not(.button),
.mnd-body .woocommerce-MyAccount-content td a:not(.button){color:var(--mnd-gold-dark);font-weight:600;}
.mnd-body .woocommerce-MyAccount-content .button{display:inline-block;background:var(--mnd-gold);color:#fff;border:none;border-radius:8px;padding:9px 22px;font-weight:700;font-size:13.5px;transition:background .2s;}
.mnd-body .woocommerce-MyAccount-content .button:hover{background:var(--mnd-gold-dark);color:#fff;}
/* Orders / downloads tables */
.mnd-body .woocommerce-MyAccount-content .shop_table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;overflow:hidden;font-size:13.5px;}
.mnd-body .woocommerce-MyAccount-content .shop_table th,
.mnd-body .woocommerce-MyAccount-content .shop_table td{padding:11px 14px;border-bottom:1px solid #f1ebe2;text-align:start;}
.mnd-body .woocommerce-MyAccount-content .shop_table th{font-family:'Cairo',sans-serif;font-weight:700;background:var(--mnd-cream2);}
.mnd-body .woocommerce-MyAccount-content .shop_table tr:last-child td{border-bottom:none;}
/* Address cards on the "العنوان" endpoint */
.mnd-body .woocommerce-MyAccount-content .woocommerce-Address,
.mnd-body .woocommerce-MyAccount-content .col-1,
.mnd-body .woocommerce-MyAccount-content .col-2{min-width:0;}

/* =========================================================================
   PRODUCT CARDS — shop / category / search grids + related & upsells.
   Matched to the home-page .mnd-card look (white face, 12px radius, soft
   border, lift + shadow on hover) on top of Woodmart's hover-base card
   mechanics: .wd-product-card-bg is Woodmart's own expanding hover surface,
   so it carries the hover look; the wrapper carries the resting look.
   No overflow:hidden on the wrapper — the hover panel hangs below it.
   ========================================================================= */
.mnd-body .wd-product .wd-product-wrapper{background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;padding:0;}
.mnd-body .wd-product:hover .wd-product-wrapper{border-color:transparent;}
.mnd-body .wd-product .wd-product-card-bg{background:#fff;border-radius:12px;box-shadow:0 10px 28px rgba(43,33,27,.16);}
/* Image: uniform crop like the home cards so rows line up evenly. */
.mnd-body .wd-product .wd-product-thumb{border-radius:11px 11px 0 0;overflow:hidden;}
.mnd-body .wd-product .wd-product-img-link img{width:100%;aspect-ratio:1.1;object-fit:cover;}
.mnd-body .wd-product .wd-product-img-hover img{width:100%;height:100%;object-fit:cover;}
/* Body spacing inside the card face. */
.mnd-body .wd-product.wd-hover-base .product-element-bottom{padding:12px 14px 14px;}
/* Typography matched to .mnd-card-title / .mnd-price. */
.mnd-body .wd-product .wd-entities-title{font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:14px;line-height:1.5;color:var(--mnd-text);}
.mnd-body .wd-product .wd-product-cats{font-size:12px;}
.mnd-body .wd-product .wd-product-cats a{color:var(--mnd-muted);}
.mnd-body .wd-product .price{color:var(--mnd-gold);font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:16px;}
.mnd-body .wd-product .price del{color:#b9ad9d;font-weight:600;font-size:12.5px;}
.mnd-body .wd-product .price ins{text-decoration:none;}
.mnd-body .wd-product .star-rating{color:#d8a64a;}

/* =========================================================================
   BOTTOM NAV (mobile / tablet ≤1024px) — fixed quick-access bar rendered in
   footer.php; items and the bar itself toggle from the Customizer. The
   .mnd-has-bottnav body class (functions.php) reserves space below the page
   and lifts the Chaty buttons so nothing hides behind the bar.
   ========================================================================= */
.mnd-bottnav{display:none;}
@media (max-width:1024px){
  .mnd-has-bottnav .mnd-bottnav{position:fixed;bottom:0;inset-inline:0;z-index:10500;display:flex;align-items:stretch;background:#fff;border-top:1px solid var(--mnd-card-bd);box-shadow:0 -4px 16px rgba(43,33,27,.08);padding-bottom:env(safe-area-inset-bottom);}
  .mnd-has-bottnav{padding-bottom:calc(62px + env(safe-area-inset-bottom));}
  .mnd-has-bottnav .chaty-widget{bottom:calc(78px + env(safe-area-inset-bottom)) !important;}
}
.mnd-bottnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 4px 8px;color:var(--mnd-muted2);font-size:11.5px;font-weight:600;line-height:1;transition:color .2s;}
.mnd-bottnav-item:hover{color:var(--mnd-gold-dark);}
.mnd-bottnav-item.is-active{color:var(--mnd-gold-dark);font-weight:700;}
.mnd-bottnav-ic{position:relative;display:flex;}
/* Badges: contextual selectors only — WooCommerce fragments replace the
   badge with a bare <span class="mnd-cart-count/mnd-wish-count">, so any
   extra class put on the span in the markup would be wiped on first AJAX
   refresh. Overrides the header badge's absolute offsets for this context. */
.mnd-bottnav .mnd-cart-count,
.mnd-bottnav .mnd-wish-count{position:absolute;top:-7px;left:auto;inset-inline-end:-10px;background:var(--mnd-gold);color:#fff;border-radius:50%;min-width:17px;height:17px;font-size:10px;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 3px;}

/* =========================================================================
   CART & CHECKOUT — restyled to the design language (white cards, 12px
   radius, soft borders, gold accents). Woodmart's own page styles print
   AFTER this file, so every override here carries the .mnd-body prefix (or
   more) to win the cascade; !important appears only where Woodmart uses an
   ID-level selector (the checkout order-review "receipt" box).
   ========================================================================= */

/* ---- Notices (info / success / error) — used on both pages ------------- */
.mnd-body .woocommerce-info{background:var(--mnd-cream2);border:1px solid var(--mnd-card-bd);border-radius:10px;color:var(--mnd-text);}
.mnd-body .woocommerce-info a{color:var(--mnd-gold-dark);font-weight:700;}
.mnd-body .woocommerce-message{background:#f0f5ee;border:1px solid #cfe0c8;border-radius:10px;color:#3f5f38;}
.mnd-body .woocommerce-message a{color:var(--mnd-gold-dark);font-weight:700;}
.mnd-body ul.woocommerce-error{background:#f9efec;border:1px solid #e6c8c0;border-radius:10px;color:var(--mnd-danger);}

/* Gold radios/checkboxes across the store (payment methods, terms, ...). */
.mnd-body input[type=radio],
.mnd-body input[type=checkbox]{accent-color:var(--mnd-gold);}

/* ---- CART: products table as a card ------------------------------------ */
.mnd-body .woocommerce-cart-form .shop_table.cart{background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;border-collapse:separate;border-spacing:0;overflow:hidden;}
.mnd-body .shop_table.cart thead th{font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:13px;color:var(--mnd-muted2);background:var(--mnd-cream2);padding:14px 16px;border-bottom:1px solid var(--mnd-card-bd);text-align:start;}
.mnd-body .shop_table.cart td{padding:18px 16px;border-bottom:1px solid #f1ebe2;vertical-align:middle;}
.mnd-body .shop_table.cart tr:last-child td{border-bottom:none;}
.mnd-body .shop_table.cart .product-thumbnail img{width:80px;height:80px;object-fit:cover;border-radius:10px;border:1px solid var(--mnd-card-bd);display:block;}
.mnd-body .shop_table.cart .product-name a{font-family:'Cairo','Tajawal',sans-serif;font-weight:700;color:var(--mnd-text);}
.mnd-body .shop_table.cart .product-name a:hover{color:var(--mnd-gold-dark);}
.mnd-body .shop_table.cart .product-price .amount{font-weight:600;color:var(--mnd-muted2);white-space:nowrap;}
.mnd-body .shop_table.cart .product-subtotal .amount{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;color:var(--mnd-gold);white-space:nowrap;}
.mnd-body .shop_table.cart .product-remove .remove{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--mnd-cream);color:var(--mnd-danger) !important;font-size:18px;line-height:1;transition:background .2s,color .2s;}
/* Woodmart hides the anchor's raw "×" (font-size:0) and paints its own icon
   via :before — our font-size above re-enables the text, so both showed
   ("××"). Keep the text glyph, drop Woodmart's icon. */
.mnd-body .shop_table.cart .product-remove .remove::before{content:none;}
.mnd-body .shop_table.cart .product-remove .remove:hover{background:var(--mnd-danger);color:#fff !important;}

/* Quantity pill (cart table + single product page). */
.mnd-body .quantity{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--mnd-line);border-radius:8px;overflow:hidden;}
.mnd-body .quantity .btn{width:32px;height:38px;display:flex;align-items:center;justify-content:center;border:none;border-radius:0;background:transparent;color:var(--mnd-muted2);font-size:16px;cursor:pointer;transition:background .2s,color .2s;box-shadow:none;}
.mnd-body .quantity .btn:hover{background:var(--mnd-cream);color:var(--mnd-gold-dark);}
.mnd-body .quantity input.qty{width:42px;height:38px;border:none;background-color:transparent;border-radius:0;text-align:center;font-weight:700;color:var(--mnd-text);padding:0;}

/* Coupon + update-cart row. */
.mnd-body .cart-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mnd-body .cart-actions .coupon{display:flex;gap:8px;flex:1;min-width:260px;}
.mnd-body .cart-actions .coupon .input-text{max-width:220px;height:42px;}
.mnd-body .cart-actions .button{border-radius:8px;font-weight:700;}
.mnd-body button[name=update_cart]{background:var(--mnd-dark);color:#fff;border:none;}
.mnd-body button[name=update_cart]:hover{background:#000;color:#fff;}

/* Totals box: white card instead of Woodmart's thick gray outline. */
.mnd-body .cart-content-wrapper > .cart_totals .cart-totals-inner{background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;padding:24px;}
.mnd-body .cart_totals h2{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:20px;margin:0 0 14px;color:var(--mnd-text);}
.mnd-body .cart_totals .shop_table{border:none;width:100%;}
.mnd-body .cart_totals .shop_table th,
.mnd-body .cart_totals .shop_table td{padding:11px 0;border-bottom:1px solid #f1ebe2;font-size:14px;text-align:start;background:transparent;}
.mnd-body .cart_totals .shop_table th{font-weight:600;color:var(--mnd-muted2);}
.mnd-body .cart_totals .order-total th{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;color:var(--mnd-text);}
.mnd-body .cart_totals .order-total .amount{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:20px;color:var(--mnd-gold);}
.mnd-body .shipping-calculator-button{color:var(--mnd-gold-dark);font-weight:600;}
.mnd-body .wc-proceed-to-checkout .checkout-button{display:flex;align-items:center;justify-content:center;width:100%;background:var(--mnd-gold);color:#fff;border:none;border-radius:8px;min-height:50px;font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:16px;transition:background .2s;}
.mnd-body .wc-proceed-to-checkout .checkout-button:hover{background:var(--mnd-gold-dark);color:#fff;}

/* ---- CHECKOUT ----------------------------------------------------------- */
/* Column cards: billing details + the order review. Woodmart paints the
   review box gray with torn-receipt edges via an :is() that contains an ID
   selector — hence the two !important lines. */
.mnd-body form.woocommerce-checkout > .customer-details{background:#fff;border:1px solid var(--mnd-card-bd);border-radius:12px;padding:24px;align-self:flex-start;}
.mnd-body form.woocommerce-checkout > .customer-details .woocommerce-billing-fields{margin-top:0;}
.mnd-body form.woocommerce-checkout > .checkout-order-review{background-color:#fff !important;border:1px solid var(--mnd-card-bd);border-radius:12px;}
.mnd-body form.woocommerce-checkout > .checkout-order-review::before,
.mnd-body form.woocommerce-checkout > .checkout-order-review::after{display:none !important;}

.mnd-body .woocommerce-billing-fields > h3,
.mnd-body #order_review_heading{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:20px;color:var(--mnd-text);margin:0 0 16px;}
.mnd-body .woocommerce-checkout .form-row label{font-weight:600;color:var(--mnd-text);font-size:13.5px;}
.mnd-body .woocommerce-checkout .form-row .required{color:var(--mnd-danger);}
.mnd-body .woocommerce-checkout .form-row .optional{color:var(--mnd-muted);font-size:11px;}

/* Coupon form under "هل لديك قسيمة؟". */
.mnd-body form.checkout_coupon{background:#fff;border:1px dashed var(--mnd-line);border-radius:12px;padding:18px;}
.mnd-body form.checkout_coupon .button{background:var(--mnd-gold);color:#fff;border:none;border-radius:8px;font-weight:700;}
.mnd-body form.checkout_coupon .button:hover{background:var(--mnd-gold-dark);}

/* Express-checkout banner (Stripe Apple Pay). */
.mnd-body .wc-stripe-banner-checkout fieldset{border:1px solid var(--mnd-card-bd);border-radius:12px;background:#fff;}
.mnd-body .wc-stripe-banner-checkout .banner-title{font-family:'Cairo','Tajawal',sans-serif;font-weight:700;color:var(--mnd-muted2);}

/* Order review table. */
.mnd-body .woocommerce-checkout-review-order-table thead th{font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:13px;color:var(--mnd-muted2);}
.mnd-body .woocommerce-checkout-review-order-table th,
.mnd-body .woocommerce-checkout-review-order-table td{padding:11px 0;border-bottom:1px solid #f1ebe2;text-align:start;font-size:14px;background:transparent;}
.mnd-body .woocommerce-checkout-review-order-table .order-total th{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:16px;color:var(--mnd-text);}
.mnd-body .woocommerce-checkout-review-order-table .order-total .amount{font-family:'Cairo','Tajawal',sans-serif;font-weight:800;font-size:20px;color:var(--mnd-gold);}

/* Payment methods list. */
.mnd-body .wc_payment_methods{list-style:none;margin:18px 0 0;padding:0;}
.mnd-body .wc_payment_methods .wc_payment_method{border:1px solid var(--mnd-card-bd);border-radius:10px;margin:0 0 10px;padding:13px 14px;background:var(--mnd-cream2);transition:border-color .2s;}
.mnd-body .wc_payment_methods .wc_payment_method:has(input:checked){border-color:var(--mnd-gold);}
.mnd-body .wc_payment_method > label{font-weight:700;color:var(--mnd-text);cursor:pointer;}
.mnd-body .wc_payment_method .payment_box{background:#fff;border-radius:8px;padding:12px 14px;margin-top:10px;font-size:13px;color:var(--mnd-muted2);}

/* Place order. */
.mnd-body #place_order{width:100%;background:var(--mnd-gold);color:#fff;border:none;border-radius:8px;min-height:52px;font-family:'Cairo','Tajawal',sans-serif;font-weight:700;font-size:16px;transition:background .2s;}
.mnd-body #place_order:hover{background:var(--mnd-gold-dark);color:#fff;}
.mnd-body .woocommerce-privacy-policy-text{font-size:12px;color:var(--mnd-muted);line-height:1.7;}

/* Mobile. */
@media (max-width:768px){
  .mnd-body .shop_table.cart td{padding:10px 12px;}
  .mnd-body .cart-actions{flex-direction:column;align-items:stretch;}
  .mnd-body .cart-actions .coupon{min-width:0;}
  .mnd-body .cart-actions .coupon .input-text{max-width:none;flex:1;}
  .mnd-body form.woocommerce-checkout > .customer-details{padding:18px;}
}

/* =========================================================================
   404 PAGE (404.php — self-contained here: home.css never loads off-front)
   ========================================================================= */
.mnd-404{max-width:560px;margin:0 auto;padding:56px 20px 32px;text-align:center;}
.mnd-404-code{font-family:'Cairo',sans-serif;font-weight:900;font-size:96px;line-height:1;color:var(--mnd-gold);margin:0 0 10px;}
.mnd-404-title{font-family:'Cairo',sans-serif;font-weight:800;font-size:26px;color:var(--mnd-dark);margin:0 0 10px;}
.mnd-404-text{font-size:15px;line-height:1.9;color:var(--mnd-muted2);margin:0 0 26px;}
.mnd-404-search{display:flex;align-items:center;height:48px;background:#fff;border:1px solid var(--mnd-line);border-radius:8px;overflow:hidden;margin:0 0 20px;}
/* Same guard as the header search: the wrapper is the visible field. */
.mnd-body .mnd-404-search input{flex:1;min-width:0;border:none;background-color:transparent;border-radius:0;outline:none;padding:0 16px;font-family:'Tajawal',sans-serif;font-size:14px;color:var(--mnd-dark);}
.mnd-404-search button{height:100%;border:none;background:var(--mnd-gold);color:#fff;padding:0 26px;font-family:'Tajawal',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:background .2s;}
.mnd-404-search button:hover{background:var(--mnd-gold-dark);}
.mnd-404-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;}
/* Carries .mnd-btn only to escape the `a:not(.mnd-btn){color:inherit}` rule
   (home.css — where .mnd-btn is styled — doesn't load on 404). */
.mnd-404-btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 28px;border-radius:8px;background:#fff;border:1px solid var(--mnd-line);color:var(--mnd-dark);font-weight:700;font-size:14px;transition:border-color .2s,color .2s,background .2s;}
.mnd-404-btn:hover{border-color:var(--mnd-gold);color:var(--mnd-gold-dark);}
.mnd-404-btn.is-gold{background:var(--mnd-gold);border-color:var(--mnd-gold);color:#fff;}
.mnd-404-btn.is-gold:hover{background:var(--mnd-gold-dark);}

/* =========================================================================
   RESPONSIVE — header / footer
   ========================================================================= */
@media (max-width:1024px){
  .mnd-topbar-links{gap:14px;}
  .mnd-actions{gap:16px;}
  /* .mnd-action-label (not :last-child) — the cart action has a 3rd span
     (.mnd-cart-count, the badge) after the label, so :last-child hid the
     badge instead of the "السلة" text on cart specifically, while it
     correctly hid the label on wishlist/account (only 2 spans there). */
  .mnd-action .mnd-action-label{display:none;}
  .mnd-action .mnd-ic{font-size:21px;}
}
@media (max-width:860px){
  .mnd-topbar{display:none;}
  .mnd-header-main{gap:14px;flex-wrap:wrap;padding-block:12px;}
  .mnd-logo-img{max-height:44px;}
  .mnd-header .mnd-burger{display:flex;align-items:center;justify-content:center;order:1;}
  .mnd-logo{order:2;}
  .mnd-actions{order:3;margin-inline-start:auto;}
  .mnd-header .mnd-search-toggle{display:flex;align-items:center;justify-content:center;order:4;}
  .mnd-search{order:5;flex-basis:100%;height:42px;display:none;}
  .mnd-search.is-open{display:flex;}
  /* Nav becomes an off-canvas side drawer: fixed panel sliding in from the
     start edge (right, RTL), ~300px wide — NOT full screen — over a dimmed
     backdrop. Because it leaves normal flow entirely, the empty dark strip
     that used to sit under the header when the menu was closed is gone. */
  .mnd-nav{position:fixed;top:0;bottom:0;right:0;left:auto;width:302px;max-width:84vw;height:100vh;height:100dvh;z-index:11000;border-top:none;transform:translateX(105%);transition:transform .3s ease;overflow-y:auto;overscroll-behavior:contain;}
  /* Logged-in: keep the drawer (and its title bar) below the WP admin bar. */
  .admin-bar .mnd-nav{top:32px;height:calc(100vh - 32px);height:calc(100dvh - 32px);}
  .mnd-drawer-open .mnd-nav{transform:translateX(0);box-shadow:-14px 0 34px rgba(0,0,0,.35);}
  .mnd-drawer-open .mnd-drawer-backdrop{opacity:1;visibility:visible;}
  .mnd-drawer-open{overflow:hidden;}
  .mnd-nav-inner{display:block;height:auto;min-height:0;max-width:none;padding:0 16px 24px;}

  /* Panel selector: exactly one of .mnd-tab-menu / .mnd-tab-cats sits on
     .mnd-nav-inner. القائمة = primary menu + account links; الأقسام = the full
     category tree (.mnd-nav-all-wrap) shown as an accordion. */
  .mnd-tab-menu .mnd-nav-all-wrap{display:none;}
  .mnd-tab-cats .mnd-nav-all-wrap{display:block;}
  .mnd-tab-cats .mnd-nav-menu,
  .mnd-tab-cats .mnd-drawer-actions{display:none;}

  /* Drawer head: a single "إغلاق" control, start-aligned like the reference. */
  .mnd-drawer-head{display:flex;align-items:center;justify-content:flex-start;padding:14px 2px 12px;border-bottom:1px solid rgba(255,255,255,.12);margin-bottom:4px;}
  .mnd-drawer-close{display:flex;align-items:center;gap:7px;width:auto;height:34px;padding:0 8px;border:none;border-radius:8px;background:none;color:var(--mnd-on-dark4);font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:color .2s;}
  .mnd-drawer-close:hover{background:none;color:var(--mnd-gold-light);}

  /* Drawer search */
  .mnd-drawer-search{display:flex;align-items:center;height:46px;margin:12px 0;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;overflow:hidden;}
  .mnd-drawer-search input[type=search]{flex:1;min-width:0;height:100%;background:none;border:none;color:var(--mnd-on-dark4);font-family:'Tajawal',sans-serif;font-size:14px;padding:0 10px;}
  .mnd-drawer-search input[type=search]:focus{outline:none;}
  .mnd-drawer-search input::placeholder{color:var(--mnd-on-dark2);opacity:1;}
  .mnd-drawer-search button{display:flex;align-items:center;justify-content:center;width:46px;height:100%;background:none;border:none;color:var(--mnd-gold-light);cursor:pointer;flex-shrink:0;}

  /* Drawer tabs (القائمة / الأقسام) */
  .mnd-drawer-tabs{display:flex;gap:5px;margin-bottom:10px;background:rgba(255,255,255,.05);border-radius:10px;padding:4px;}
  .mnd-drawer-tab{flex:1;padding:11px 6px;background:none;border:none;border-radius:7px;color:var(--mnd-on-dark2);font-family:'Cairo',sans-serif;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s,color .2s;}
  .mnd-drawer-tab.is-active{background:var(--mnd-gold);color:#fff;}
  /* Woodmart's base `:is(.btn,.button,button,…)` rule (specificity 0,1,0) paints
     every <button> with --btn-bgcolor (#F3F3F3) + a 42px min-height + uppercase;
     our 0,1,0 class rules tie and lose (close button + inactive tab went white).
     Scope under .mnd-nav to win and strip that chrome. */
  .mnd-nav .mnd-drawer-close,
  .mnd-nav .mnd-drawer-tab,
  .mnd-nav .mnd-drawer-search button{background:none;background-color:transparent;border:none;box-shadow:none;min-height:0;text-transform:none;color:#bbbbbb;}
  .mnd-nav .mnd-drawer-tab.is-active{background:var(--mnd-gold);color:#fff;border-radius:5px;}

  /* Menu rows */
  .mnd-nav ul{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;padding:0;}
  .mnd-nav ul li,.mnd-nav ul a{width:100%;}
  .mnd-nav a,.mnd-navlnk{display:flex;align-items:center;gap:10px;padding:14px 6px;width:100%;font-size:15px;border-top:1px solid rgba(255,255,255,.06);white-space:normal;}
  .mnd-nav-menu > li{display:block;}
  .mnd-nav-menu > li:first-child > a{border-top:none;}
  .mnd-nav-menu > li > a{font-weight:700;}

  /* Parent items ("الأقسام الرئيسية") work as an accordion (theme.js toggles
     .is-sub-open); the chevron flips when open. */
  .mnd-nav-menu li.menu-item-has-children > a::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-inline-start:auto;flex-shrink:0;transition:transform .2s;}
  .mnd-nav-menu li.is-sub-open > a::after{transform:rotate(-135deg) translateY(-2px);}
  .mnd-nav .sub-menu{display:none;flex-direction:column;position:static;box-shadow:none;background:rgba(0,0,0,.18);padding:2px 0;min-width:0;border-inline-start:2px solid var(--mnd-gold);border-radius:0 6px 6px 0;}
  .mnd-nav-menu li.is-sub-open > .sub-menu{display:flex;}
  .mnd-nav .sub-menu a{padding-inline-start:26px;font-size:13.5px;font-weight:400;color:var(--mnd-on-dark2);border-top-color:rgba(255,255,255,.04);}

  /* "الأقسام" tab: reuse the desktop category dropdown as a static accordion.
     `.mnd-nav .sub-menu` (above) already flattens the flyouts to stacked panels;
     here we drop the panel chrome, hide the redundant "كل الأقسام" trigger, and
     add the same chevron + is-sub-open toggle the primary menu uses. */
  .mnd-nav-all-wrap .mnd-nav-all{display:none;}
  .mnd-catmenu{display:block;position:static;min-width:0;padding:0;background:none;box-shadow:none;border-radius:0;}
  .mnd-catmenu a{justify-content:flex-start;}
  .mnd-catmenu-list > li:first-child > a{border-top:none;}
  .mnd-catmenu li.menu-item-has-children > a::after{content:"";width:8px;height:8px;border-inline-end:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);margin-inline-start:auto;flex-shrink:0;transition:transform .2s;}
  .mnd-catmenu li.is-sub-open > a::after{transform:rotate(-135deg) translateY(-2px);}
  .mnd-catmenu li:hover > .sub-menu,
  .mnd-catmenu li:focus-within > .sub-menu{display:none;}
  .mnd-catmenu li.is-sub-open > .sub-menu{display:flex;}
  .mnd-catmenu .sub-menu .sub-menu a{padding-inline-start:42px;}

  /* Account quick-links — the footer of the "القائمة" panel (drawer only). */
  .mnd-drawer-actions{display:block;}
  .mnd-drawer-actions a{display:flex;align-items:center;gap:10px;padding:14px 6px;font-size:15px;font-weight:500;color:var(--mnd-on-dark3);border-top:1px solid rgba(255,255,255,.06);transition:color .2s;}
  .mnd-drawer-actions a:hover{color:var(--mnd-gold-light);}
  .mnd-drawer-actions .mnd-svgicon{color:var(--mnd-gold-light);flex-shrink:0;}

  /* Redundant on a small screen — "الرئيسية / المتجر" breadcrumb right above
     it already says where you are, and this duplicates that. */
  .woocommerce-result-count{display:none;}
}
/* WP admin bar grows to 46px on small screens — keep the drawer below it. */
@media (max-width:782px){
  .admin-bar .mnd-nav{top:46px;height:calc(100vh - 46px);height:calc(100dvh - 46px);}
}
@media (max-width:768px){
  .mnd-foot-features .mnd-wrap{grid-template-columns:1fr 1fr;gap:18px;}
  .mnd-footer-cols{grid-template-columns:1fr 1fr;gap:28px;}
  .mnd-footer-cols .mnd-brand-col{grid-column:1/-1;order:-1;text-align:center;}
  .mnd-brand-logo{justify-content:center;}
  .mnd-socials{justify-content:center;}
  .mnd-footer-bottom .mnd-wrap{justify-content:center;text-align:center;}
}
@media (max-width:480px){
  .mnd-logo-img{max-height:40px;}
  .mnd-promo{font-size:11.5px;}
  /* Was 1 column — 4 short icon+text rows stacked full-height, forcing a lot
     of scroll for very little information. 2 columns (already used at the
     768px breakpoint) stays legible on any phone width and is much more
     compact. */
  .mnd-foot-features .mnd-wrap{grid-template-columns:1fr 1fr;gap:16px;}
  .mnd-ff{gap:10px;}
  .mnd-ff-ic{font-size:24px;}
  .mnd-footer-cols{grid-template-columns:1fr;text-align:center;}
  .mnd-pays-img{height:70px;max-width:100%;object-fit:contain;}
}