/* =========================================================================
   El Safty — design tokens and Botiga presentation.

   Scope: the design tokens, the Botiga header/footer builders' markup, and the
   WooCommerce product card. The four storefront components are styled by the
   El Safty Storefront Tools plugin, which ships their CSS with them.

   The header, footer and homepage STRUCTURE are not defined here: they come
   from Botiga's Customizer builders and from Elementor. This file only gives
   them the approved look.
   ========================================================================= */

:root{
  --brand:#D42027;
  --brand-dark:#A9171D;
  --brand-tint:#FDECEC;
  --ink:#16202E;
  --body:#33415C;
  --accent:#F5A623;
  --accent-tint:#FFF6E5;
  --line:#E3E8F0;
  --bg:#FFFFFF;
  --bg-alt:#F7F9FC;
  --muted:#93A0B5;

  --wrap:1280px;
  --gap:20px;

  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --pill:999px;

  --sh-1:0 1px 2px rgba(22,32,46,.06),0 1px 3px rgba(22,32,46,.05);
  --sh-2:0 4px 14px rgba(22,32,46,.08);
  --sh-3:0 10px 30px rgba(22,32,46,.12);

  --font-ar:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif;
  --font-lat:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --tap:44px;
}

/* ---- base ---- */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-ar);color:var(--body);background:var(--bg);font-size:16px;line-height:1.7}
h1,h2,h3,h4,h5,h6{font-family:var(--font-ar);font-weight:700;line-height:1.35;color:var(--ink)}
/* Elementor's kit maps heading colour to the Primary global (brand red). Headings
   in this design system are ink; the extra .e-con in the selector wins on
   specificity rather than load order. A colour set on an individual widget in
   Elementor still overrides this, so editors keep control. */
.e-con .elementor-widget-heading .elementor-heading-title{color:var(--ink)}
img{max-width:100%;height:auto}

/* Latin text, prices and counts read better in Inter. */
[dir=ltr],.price,.amount,.els-dep__count,.els-chip__n,.woocommerce-Price-amount{
  font-family:var(--font-lat);font-variant-numeric:tabular-nums;
}

/* Botiga resets focus outlines on links AND inputs (input[type="text"]:focus,
   specificity 0,2,1). Nothing reachable by specificity alone beats that for
   every element type, so the visible focus ring — the one thing a keyboard user
   cannot do without — is the single deliberate !important here. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--brand) !important;
  outline-offset:2px !important;
  border-radius:var(--r-sm);
}

/* =========================================================================
   Botiga header builder — the approved look, applied to the builder's markup
   ========================================================================= */

/* Botiga hides the search overlay and the mini-cart dropdown by pushing them
   ~160,000px sideways as well as setting visibility:hidden. In an RTL document
   that physical offset extends the scrollable width instead of hiding anything
   — the real cause of the horizontal overflow the previous theme masked with a
   global overflow-x:hidden. Clipping the header contains it at source, and
   `clip` (unlike `hidden`) does not create a scroll container, so the sticky
   row and the vertical dropdowns still work. */
.bhfb-header{overflow-x:clip;overflow-y:visible}
.bhfb-footer,.site-footer{overflow-x:clip}

/* Botiga's row layouts are equal / fluid / big-left / big-right. The approved
   header needs a wide centre column for the search, which none of them give,
   so the main row is laid out here instead. */
@media (min-width:1024px){
  /* Botiga's own .bhfb-cols-layout-equal-desktop sets three equal columns, so the
     class is repeated here to win on specificity rather than on load order. */
  .bhfb-main_header_row .bhfb-row.bhfb-cols-3{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;gap:32px;
  }
  .bhfb-main_header_row .bhfb-row.bhfb-cols-3 > .bhfb-column{width:auto;max-width:none;flex:0 1 auto}
  .bhfb-main_header_row .bhfb-column-3 .bhfb-builder-item{justify-content:flex-end}
}
@media (max-width:1023px){
  .bhfb-main_header_row .bhfb-row.bhfb-cols-3{
    display:grid;grid-template-columns:auto 1fr auto;
    align-items:center;gap:10px;
  }
  .bhfb-main_header_row .bhfb-row.bhfb-cols-3 > .bhfb-column{width:auto;max-width:none;flex:0 1 auto}
  .bhfb-main_header_row .bhfb-column-2{justify-self:center}
}

/* ---- Announcement bar (Header Builder → Top Row → HTML) ----
   Compact but legible. The bar's content is Customizer-editable HTML; the two
   marked spans let the secondary message drop out on small screens instead of
   pushing the header a hundred pixels down the page. */
.bhfb-above_header_row{background:var(--ink);color:#fff;font-size:15px}
.bhfb-above_header_row a{color:var(--accent);font-weight:600}
.bhfb-above_header_row a:hover{text-decoration:underline}
.els-announce{
  display:flex;align-items:center;justify-content:center;
  gap:16px;flex-wrap:nowrap;min-height:42px;
  white-space:nowrap;overflow:hidden;
}
.els-announce b{
  flex:0 0 auto;
  background:var(--accent);color:#3B2A00;
  font-family:var(--font-lat);font-weight:700;letter-spacing:.5px;
  padding:3px 11px;border-radius:var(--r-sm);font-size:14px;
}
.els-announce span{opacity:.92;overflow:hidden;text-overflow:ellipsis}
.els-announce a{display:inline-flex;align-items:center;min-height:32px;padding-inline:2px}

/* ---- Logo — the original asset, uncropped, just given a readable height ---- */
.bhfb-component-logo img,
.site-branding img,
.custom-logo{height:64px;width:auto;max-width:none;object-fit:contain}

/* ---- Main header row ---- */
.bhfb-main_header_row{background:#fff;border-bottom:1px solid var(--line)}
/* Row heights are Customizer settings (Header Builder → row → Height), not CSS:
   botiga_header_row__*_height_{desktop,tablet,mobile}. Nothing is set here so an
   editor changing them in the Customizer actually takes effect. */

/* ---- Search in the header — the form comes from the documented Botiga filter ---- */
.bhfb-component-search{flex:1 1 auto;width:100%}
.bhfb-component-search .els-search{position:relative;width:100%;display:flex;align-items:center}
/* Botiga's own search icon + overlay would be a duplicate of the real form. */
.bhfb-component-search a.header-search,
.header-search-form{display:none}
.bhfb-component-search input[type=search]{
  width:100%;height:56px;padding-inline:22px 60px;
  border:1.5px solid var(--line);border-radius:var(--pill);
  background:var(--bg-alt);font:inherit;font-size:16px;color:var(--ink);
}
.bhfb-component-search input[type=search]::placeholder{color:#8E9AAE}
.bhfb-component-search input[type=search]:focus{background:#fff;border-color:var(--brand)}
.bhfb-component-search button[type=submit]{
  position:absolute;inset-inline-end:4px;inset-block-start:4px;
  width:48px;height:48px;display:grid;place-items:center;
  border:0;border-radius:var(--pill);background:var(--brand);color:#fff;cursor:pointer;
}
.bhfb-component-search button[type=submit]:hover{background:var(--brand-dark)}

/* ---- Cart / account icons — sized to match the taller row ---- */
.bhfb-component-woo_icons{display:flex;align-items:center;gap:6px}
/* `:not()` matters here. The mini-cart panel lives inside this component, so a
   bare descendant selector also matched every `a.remove` and every panel button
   inside it — inflating WooCommerce's 18px remove link into a 48px filled
   circle that sat on top of the product thumbnail. */
.bhfb-component-woo_icons a:not(.remove):not(.button){
  min-width:48px;min-height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ink);border-radius:var(--pill);
  transition:background .15s,color .15s;
}
.bhfb-component-woo_icons a:not(.remove):not(.button):hover{background:var(--bg-alt);color:var(--brand)}
.bhfb-component-woo_icons a:not(.remove):not(.button) svg,
.bhfb-component-woo_icons a:not(.remove):not(.button) img{width:26px;height:26px}
.bhfb-component-woo_icons .header-cart-count,
.bhfb-component-woo_icons .count{
  background:var(--brand);color:#fff;font-family:var(--font-lat);
  font-size:11.5px;font-weight:700;border-radius:var(--pill);
}

/* ---- Department navigation row ----
   Nine items on one line at 1280px. The inline padding is fluid so the row
   compresses instead of scrolling or wrapping as the viewport narrows, and the
   last item is styled as a deliberate trailing link rather than an item that
   happened to overflow. */
.bhfb-below_header_row{background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-1)}
.bhfb-below_header_row .bhfb-row-inner,
.bhfb-below_header_row .bhfb-column{display:flex;justify-content:flex-start}
/* Phase 3 gave this row `overflow-x:auto` so nine department names could
   scroll sideways. Phase 5 replaced them with eight short page links, which
   fit — and that overflow value was silently forcing `overflow-y:auto` too,
   making the row a scroll container that CLIPPED the الأقسام panel to its own
   56px height. The panel was being painted and then cut off; nothing to do
   with z-index. */
.bhfb-below_header_row .bhfb-column ul.menu{
  display:flex;flex-wrap:nowrap;gap:0;width:100%;
  overflow:visible;
}
.bhfb-below_header_row ul.menu > li{flex:0 0 auto;white-space:nowrap}
.bhfb-below_header_row .menu > li > a{
  min-height:52px;display:inline-flex;align-items:center;
  padding-inline:clamp(9px,1.05vw,18px);
  font-size:16px;font-weight:600;color:var(--ink);
  border-bottom:3px solid transparent;
}
.bhfb-below_header_row .menu > li > a:hover,
.bhfb-below_header_row .menu > li.current-menu-item > a{color:var(--brand);border-bottom-color:var(--brand)}
/* The final item is the catch-all "everything" link; give it the brand colour and
   an arrow so it reads as a destination rather than as a ninth department. It is
   NOT pushed to the far edge with an auto margin — that was what forced it onto
   a second line once Botiga's own flex-wrap:wrap applied. */
.bhfb-below_header_row ul.menu > li:last-child{margin-inline-start:10px}
.bhfb-below_header_row ul.menu > li:last-child > a{
  border-bottom-color:transparent;color:var(--brand);font-weight:700;
}
.bhfb-below_header_row ul.menu > li:last-child > a::after{
  content:"←";margin-inline-start:7px;font-size:15px;line-height:1;
}

/* ---- Mobile burger / offcanvas ---- */
.bhfb-component-mobile_hamburger .menu-toggle,
.bhfb-component-mobile_hamburger button,
.botiga-offcanvas-menu-toggle{
  min-width:var(--tap);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
}
.bhfb-mobile-offcanvas a{min-height:var(--tap);display:flex;align-items:center}
/* Botiga's off-canvas drawer is anchored left and slides in from the left even
   in RTL. Anchoring it to the inline-start edge (the right, in Arabic) matches
   the burger it opens from. */
[dir=rtl] .bhfb-mobile_offcanvas.botiga-offcanvas-menu{
  left:auto;right:0;
  transform:translateX(300px);
}
[dir=rtl] .bhfb-mobile_offcanvas.botiga-offcanvas-menu.toggled{transform:translateX(0)}

/* Close control in the drawer's own upper-right corner. Botiga positions it with
   a physical `left`, which in this right-anchored RTL drawer put it in the far
   corner from the thumb — and, at its old offset, directly on top of the first
   menu item. Overridden physically, because that is how Botiga sets it. */
[dir="rtl"] .bhfb-mobile_offcanvas .mobile-menu-close{
  left:auto;right:16px;
}
.bhfb-mobile_offcanvas .mobile-menu-close{
  inset-inline-end:16px;inset-inline-start:auto;
  /* Absolutely positioned, so the drawer's own padding-top never moves it: at
     top:16px it sat under the staging banner (measured bottom 30px). The
     Phase 4 offset rule aimed at `.bhfb-mobile-offcanvas` / `.botiga-offcanvas`
     and this drawer carries neither class — it is `.bhfb-mobile_offcanvas`
     with an underscore — so it only ever reached the filter panel. */
  top:calc(16px + var(--els-chrome-offset, 0px));
  min-width:var(--tap);min-height:var(--tap);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
}
/* Focus moves here programmatically when the drawer opens, and a programmatic
   focus after a pointer interaction does not match :focus-visible — so this one
   control also styles plain :focus, to satisfy "focus remains visible". */
.bhfb-mobile_offcanvas .mobile-menu-close:focus{
  outline:3px solid var(--brand);outline-offset:2px;
}

/* Enough room for that button and nothing more. The staging bar is a static
   element and the drawer is fixed at z-index 99999, so it is never obscured. */
.bhfb-mobile_offcanvas.botiga-offcanvas-menu{padding-top:72px}

/* Botiga's drawer has no backdrop of its own, so there is nothing to dim the
   page or to click on to dismiss. Added behind the drawer (z-index 99999). */
.els-drawer-backdrop{
  position:fixed;inset:0;z-index:99998;
  background:rgba(22,32,46,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease;
}
body.mobile-menu-visible .els-drawer-backdrop{opacity:1;visibility:visible}

/* Tighter list rhythm: 44px rows instead of 52px, with a hairline rule so the
   items read as a list rather than as floating text. The tap target stays 44px. */
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li{padding-top:0;margin-bottom:0}
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li + li{border-top:1px solid var(--line)}
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li > a{
  display:flex;align-items:center;
  min-height:var(--tap);padding:5px 0;
  font-size:16px;font-weight:600;line-height:1.35;color:var(--ink);
}
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li > a:hover{color:var(--brand)}
/* The two utility links close the list; mark them off from the departments.
   Selected as "the first utility item after a non-utility one" — :first-of-type
   would match the first <li> in the list, which is a department. */
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li:not(.els-drawer-utility) + li.els-drawer-utility{
  margin-top:12px;border-top:2px solid var(--line);
}

/* =========================================================================
   Product card — WooCommerce's own loop markup, styled to the approved design
   ========================================================================= */

/* Gaps are literal at every breakpoint, not var(--gap): the custom property
   does not survive to this rule once the page-optimiser has processed the
   stylesheet, and a silently-dropped gap collapses the grid into touching
   cards. The breakpoint blocks at the end of this file set the other two. */
ul.products,
ul.products[class*="columns-"]{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin:0;padding:0;list-style:none;
}
ul.products::before,ul.products::after{content:none}

ul.products li.product{
  width:auto !important;   /* WooCommerce ships float+percentage widths; grid owns layout now */
  margin:0 !important;
  float:none !important;
  clear:none !important;
  position:relative;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-1);
  transition:border-color .15s,box-shadow .15s;
}
ul.products li.product:hover{border-color:#CBD5E3;box-shadow:var(--sh-2)}

ul.products li.product a img,
ul.products li.product img{
  aspect-ratio:1/1;object-fit:contain;
  width:100%;height:auto;
  background:var(--bg-alt);padding:12px;margin:0;
}

ul.products li.product .woocommerce-loop-product__title,
ul.products li.product h2,
ul.products li.product h3{
  font-size:15px;font-weight:600;line-height:1.55;color:var(--ink);
  padding:15px 12px 0;margin:0;
  overflow:hidden;min-height:calc(1.55em * 3 + 15px);
}
/* The title is a flex item, and CSS blockifies a flex item's display, so
   -webkit-box (and with it line-clamp's ellipsis) can only be applied to the
   link inside it. */
ul.products li.product .woocommerce-loop-product__title > a,
ul.products li.product .botiga-wc-loop-product__title{
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;
  /* Botiga sets a font-size on the anchor itself, so the container's value
     never reached the visible text and every responsive size below was inert. */
  font-size:inherit;line-height:inherit;
}
/* WooCommerce prints "السعر الأصلي هو…" / "السعر الحالي هو…" for screen readers
   inside .price; the flex layout would otherwise make that text visible. */
ul.products li.product .price .screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
ul.products li.product .price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 12px 0;margin:0;
  font-size:19px;font-weight:700;color:var(--brand);line-height:1.4;
}
ul.products li.product .price del{
  color:var(--muted);font-size:14.5px;font-weight:400;opacity:1;
  text-decoration-thickness:1px;
}
ul.products li.product .price ins{text-decoration:none;color:var(--brand);font-weight:700}
ul.products li.product .star-rating,
ul.products li.product .woocommerce-product-rating{display:none}

/* Botiga nests the add-to-cart wrap INSIDE the image wrapper and reveals it on
   hover over the image. The approved card wants it always visible, below the
   price. `display:contents` dissolves the image wrapper so its two children
   become flex items of the card, which lets the CTA be ordered last. */
ul.products li.product .loop-image-wrap{display:contents}
ul.products li.product > .woocommerce-loop-product__link:empty{display:none}
ul.products li.product .loop-image-wrap > .woocommerce-loop-product__link{
  order:1;position:relative;display:block;
}
ul.products li.product .woocommerce-loop-product__title{order:2}
ul.products li.product .price{order:3}
ul.products li.product .loop-button-wrap{
  order:4;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  margin-top:auto;padding:0;height:auto;width:auto;
}
ul.products li.product .loop-button-wrap .button,
ul.products li.product .loop-button-wrap .added_to_cart{visibility:visible}
ul.products li.product .loop-button-wrap > .woocommerce-loop-product__link{display:none}

ul.products li.product .loop-button-wrap a.button,
ul.products li.product .loop-button-wrap a.added_to_cart,
ul.products li.product .button,
ul.products li.product .added_to_cart{
  margin:auto 12px 15px;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--tap);padding:10px 14px;
  border:1.5px solid var(--brand);border-radius:var(--pill);
  background:#fff;color:var(--brand);
  font:600 15px/1.2 var(--font-ar);white-space:nowrap;
  transition:background .15s,color .15s;
}
/* Botiga's base .button rule sets a white label and loads after this file. */
ul.products li.product .loop-button-wrap a.button,
ul.products li.product .loop-button-wrap a.button:visited{
  color:var(--brand) !important;background:#fff;border-color:var(--brand);
}
ul.products li.product .loop-button-wrap a.button:hover,
ul.products li.product .loop-button-wrap a.button:focus,
ul.products li.product .button:hover{
  background:var(--brand);color:#fff !important;border-color:var(--brand);
}
ul.products li.product .added_to_cart{border-style:dashed}

/* One badge convention: "خصم 20%" when the percentage is calculable, otherwise
   "خصم". The label itself is produced by the storefront-tools plugin. */
ul.products li.product .onsale{
  position:absolute;inset-block-start:10px;inset-inline-start:10px;
  width:auto;max-width:max-content;z-index:2;
  background:var(--brand);color:#fff;
  padding:4px 11px;border-radius:var(--pill);
  font-size:12.5px;font-weight:700;line-height:1.6;
  min-height:0;min-width:0;margin:0;
  font-family:var(--font-ar);font-variant-numeric:tabular-nums;
}
ul.products li.product .botiga-product-stock,
ul.products li.product .out-of-stock{
  padding:0 15px;color:var(--muted);font-size:13px;font-weight:600;
}

/* =========================================================================
   Homepage — Elementor-owned; only the marked pieces are styled here
   ========================================================================= */

/* Trust row — plain Elementor containers, so no icon font is loaded.
   Elementor applies a widget's CSS-classes setting but not a container's, so
   each card is selected by the marked heading it contains rather than by a
   class on the container itself. */
.e-con:has(> .e-con-inner > .els-trust-title){
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:20px 18px;
}
.els-trust-title .elementor-heading-title{font-size:16px;margin:0 0 6px}
.e-con:has(> .e-con-inner > .els-trust-title) p{font-size:14px;margin:0;color:var(--body)}

/* Botiga gives .content-wrapper a global 80px/120px top-and-bottom margin
   (60px/60px below 992px), which on the homepage put ~72px of empty white
   between the search field and the banner on a phone. The margin is correct for
   ordinary pages, so it is removed on the front page ONLY and the visible gap is
   handed to the hero container's own padding — a number an editor sets in
   Elementor. Archives, product pages, cart and checkout are untouched. */
body.home .container.content-wrapper{margin-top:0}

/* Hero. The banner is the single functional call to action: the whole image is
   linked, because the artwork already carries its own SHOP NOW button and a
   second competing button directly beneath it would be two CTAs for one intent.
   The <h1> and the supporting sentence stay real, editable text. */
.els-hero-img img{border-radius:var(--r-lg);display:block;width:100%}
.els-hero-img a{display:block}
.els-hero-img a:hover img{filter:brightness(1.03)}
.els-hero-title .elementor-heading-title{font-size:clamp(24px,3.4vw,36px);max-width:26ch}
.els-hero-sub{font-size:clamp(15px,1.5vw,17.5px);max-width:62ch}

/* The site name Botiga prints beside the logo is redundant next to the mark. */
.wp-custom-logo .site-title,
.wp-custom-logo .site-description{display:none}

/* =========================================================================
   Catalogue archives — shop, product categories, product search
   =========================================================================
   Structure is WooCommerce's own: the Infetech Elementor archive template was
   detached, not patched, so this styles native markup only. */

/* ---- Page header: Botiga centres it and gives it ~200px of vertical air ---- */
.woocommerce .page-header,
.woocommerce-products-header,
body.archive .page-header,
body.search .page-header{
  padding-block:26px 0;
  text-align:start;
}
.woocommerce .page-header .page-title,
.woocommerce-products-header .woocommerce-products-header__title,
body.archive .page-header .page-title,
body.search .page-header .page-title{
  font-size:clamp(24px,3vw,34px);
  margin:0;
  text-align:start;
}
.woocommerce .page-header .breadcrumbs,
body.archive .breadcrumbs,
body.search .breadcrumbs{font-size:13.5px;color:var(--muted);margin-bottom:10px}
.woocommerce .page-header .breadcrumbs a{color:var(--body)}
.term-description,
.taxonomy-description{
  max-width:70ch;margin:10px 0 0;color:var(--body);font-size:15.5px;
}
/* Botiga's content-wrapper margin is generous for a text page and excessive
   above a product grid. Archives get a tighter opening. */
body.woocommerce-shop .container.content-wrapper,
body.tax-product_cat .container.content-wrapper,
body.tax-product_tag .container.content-wrapper,
body.search-results .container.content-wrapper{margin-top:28px}

/* ---- Result count + ordering ---- */
.woocommerce-notices-wrapper:empty{display:none}
ul.products + .woocommerce-pagination{margin-top:32px}
.woocommerce .woocommerce-result-count{
  color:var(--body);font-size:14.5px;padding-block:10px;margin:0;
}
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby{
  min-height:44px;padding:8px 14px;padding-inline-end:34px;
  border:1.5px solid var(--line);border-radius:var(--pill);
  background-color:#fff;color:var(--ink);font:600 14.5px/1.2 var(--font-ar);
  cursor:pointer;max-width:100%;
}
.woocommerce .woocommerce-ordering select:focus{border-color:var(--brand)}

/* ---- Sidebar / filters ---- */
#secondary .widget,
.widget-area .widget{margin-bottom:26px}
#secondary .widgettitle,
#secondary .widget-title,
.widget-area .widgettitle{
  font-size:16px;font-weight:700;color:var(--ink);
  margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.wpc-filters-main-wrap{font-size:14.5px}
.wpc-filters-widget-wrapper .wpc-filter-title,
.wpc-filter-header{font-size:15px;font-weight:700;color:var(--ink);margin:0 0 8px}
.wpc-filters-ul-list li,
.wpc-filters-ul-list .wpc-term-item{margin:0 0 2px}
.wpc-filters-ul-list label{
  display:flex;align-items:center;gap:8px;
  min-height:36px;cursor:pointer;color:var(--body);line-height:1.4;
}
.wpc-filters-ul-list label:hover{color:var(--brand)}
.wpc-filters-ul-list input[type=checkbox]{
  width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand);cursor:pointer;
}
.wpc-filters-ul-list .wpc-term-count{color:var(--muted);font-size:12.5px;font-family:var(--font-lat)}
.wpc-filter-range input[type=text],
.wpc-filter-range input[type=number]{
  min-height:40px;padding:6px 10px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:14px;width:100%;max-width:100%;
}
.wpc-chips-wrapper,.wpc-chips-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.wpc-chip,.wpc-chips-list li a{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:4px 12px;
  border:1px solid var(--line);border-radius:var(--pill);
  background:var(--bg-alt);color:var(--ink);font-size:13.5px;font-weight:600;
}
.wpc-chip:hover,.wpc-chips-list li a:hover{border-color:var(--brand);color:var(--brand)}
.wpc-filter-clear-all,a.wpc-clear-all{
  display:inline-flex;align-items:center;min-height:40px;padding:0 16px;
  border-radius:var(--pill);border:1.5px solid var(--brand);
  color:var(--brand);font-weight:600;font-size:14px;
}
.wpc-filter-clear-all:hover,a.wpc-clear-all:hover{background:var(--brand);color:#fff}

/* ---- Pagination ---- */
.woocommerce-pagination ul.page-numbers{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  border:0;margin:0;padding:0;list-style:none;
}
.woocommerce-pagination ul.page-numbers li{border:0;margin:0}
.woocommerce-pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 12px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  color:var(--ink);font-weight:600;font-size:15px;background:#fff;
}
.woocommerce-pagination .page-numbers:hover{border-color:var(--brand);color:var(--brand)}
.woocommerce-pagination .page-numbers.current{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.woocommerce-pagination .page-numbers.dots{border-color:transparent;min-width:auto}

/* ---- Empty states ---- */
.woocommerce-info,.woocommerce-no-products-found,.els-empty{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 24px;color:var(--body);font-size:16px;line-height:1.8;
}
.woocommerce-info::before{display:none}
.els-empty__title{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px}
.els-empty__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.els-empty__actions a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  border-radius:var(--pill);border:1.5px solid var(--brand);color:var(--brand);
  font-weight:600;font-size:15px;background:#fff;
}
.els-empty__actions a:hover{background:var(--brand);color:#fff}
.els-empty__actions a.els-empty__primary{background:var(--brand);color:#fff}
.els-empty__actions a.els-empty__primary:hover{background:var(--brand-dark)}

/* ---- Mobile filter panel (assets/filters.js moves the real sidebar in) ---- */
.els-filter-trigger{
  display:none;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:48px;margin:0 0 14px;padding:0 18px;
  border:1.5px solid var(--brand);border-radius:var(--pill);
  background:#fff;color:var(--brand);font:700 15px/1.2 var(--font-ar);cursor:pointer;
}
.els-filter-trigger[hidden]{display:none}
.els-filter-trigger:hover{background:var(--brand);color:#fff}
.els-filters__backdrop{
  position:fixed;inset:0;z-index:99997;background:rgba(22,32,46,.55);
  opacity:0;visibility:hidden;transition:opacity .22s ease;
}
.els-filters__panel{
  position:fixed;inset-block:0;inset-inline-start:0;z-index:99998;
  width:min(88vw,360px);background:#fff;
  display:flex;flex-direction:column;
  transform:translateX(-100%);transition:transform .25s ease;
  box-shadow:0 0 40px rgba(22,32,46,.25);
}
[dir=rtl] .els-filters__panel{transform:translateX(100%)}
.els-filters-open .els-filters__backdrop{opacity:1;visibility:visible}
.els-filters-open .els-filters__panel{transform:translateX(0)}
.els-filters-open{overflow:hidden}
.els-filters__head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);flex:0 0 auto;
}
.els-filters__title{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.els-filters__close{
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;
  font-size:30px;line-height:1;color:var(--ink);border-radius:var(--r-sm);
}
.els-filters__close:hover{background:var(--bg-alt)}
.els-filters__close:focus{outline:3px solid var(--brand);outline-offset:2px}
.els-filters__panel #secondary,
.els-filters__panel .widget-area{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:16px 18px;width:auto;max-width:none;margin:0;
}
.els-filters__done{
  flex:0 0 auto;margin:0;width:100%;min-height:52px;border:0;
  background:var(--brand);color:#fff;font:700 16px/1.2 var(--font-ar);cursor:pointer;
}
.els-filters__done:hover{background:var(--brand-dark)}

@media (max-width:1023px){
  .els-filter-trigger{display:flex}
  /* Botiga stacks the sidebar under the grid on small screens; the panel owns it now. */
  body.woocommerce-shop #secondary:not(.els-filters__panel #secondary),
  body.tax-product_cat #secondary:not(.els-filters__panel #secondary),
  body.search-results #secondary:not(.els-filters__panel #secondary){margin-top:24px}
  .woocommerce .woocommerce-result-count{padding-block:4px}
  .woocommerce-pagination ul.page-numbers{gap:6px}
}
@media (min-width:1024px){
  .els-filters__panel,.els-filters__backdrop{display:none}
}

/* Archive title: Botiga centres it; the design aligns it to the reading edge. */
body.woocommerce .page-header .page-title,
body.archive .page-header .page-title,
body.search .page-header .page-title,
body.woocommerce .page-header,
body.archive .page-header,
body.search .page-header{text-align:start}

/* =========================================================================
   Single product
   =========================================================================
   Stock WooCommerce template restyled; no purchase logic is replaced. */

.single-product div.product{margin:0}
.single-product .product_title{
  font-size:clamp(21px,2.6vw,30px);line-height:1.4;margin:0 0 12px;color:var(--ink);
}
.single-product .woocommerce-product-gallery{margin-bottom:0}
.single-product .woocommerce-product-gallery__wrapper{border-radius:var(--r-lg);overflow:hidden}
.single-product .woocommerce-product-gallery img{
  border-radius:var(--r-lg);background:var(--bg-alt);
  aspect-ratio:1/1;object-fit:contain;width:100%;height:auto;
}
.single-product .flex-control-thumbs{
  display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:12px 0 0;padding:0;list-style:none;
}
.single-product .flex-control-thumbs li{margin:0}
.single-product .flex-control-thumbs img{
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  aspect-ratio:1/1;object-fit:contain;background:var(--bg-alt);cursor:pointer;opacity:1;
}
.single-product .flex-control-thumbs img.flex-active,
.single-product .flex-control-thumbs img:hover{border-color:var(--brand)}
.single-product .woocommerce-product-gallery__trigger{
  inset-inline-end:14px;inset-block-start:14px;z-index:3;
  width:44px;height:44px;display:grid;place-items:center;
  background:#fff;border-radius:var(--pill);box-shadow:var(--sh-1);
}

.single-product .summary p.price,
.single-product .summary .price{
  display:flex;align-items:baseline;flex-wrap:wrap;gap:12px;
  font-size:27px;font-weight:700;color:var(--brand);margin:0 0 14px;line-height:1.4;
}
.single-product .summary .price del{color:var(--muted);font-size:19px;font-weight:400;opacity:1}
.single-product .summary .price ins{text-decoration:none;color:var(--brand)}
/* WooCommerce prints "السعر الأصلي هو…" for screen readers inside .price; the
   flex layout would otherwise put that sentence on screen. */
.single-product .summary .price .screen-reader-text{
  position:absolute !important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}
.els-price-na{color:var(--body);font-size:16px;font-weight:600}

.single-product .stock.in-stock{color:#1B7F4B;font-weight:700;font-size:15px}
.single-product .stock.out-of-stock{color:var(--brand);font-weight:700;font-size:15px}
.single-product .summary .woocommerce-product-details__short-description{
  color:var(--body);font-size:16px;line-height:1.9;margin-bottom:18px;
}

.single-product form.cart{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 22px}
.single-product .quantity input.qty{
  min-height:52px;width:88px;padding:8px;text-align:center;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  font:600 16px/1 var(--font-lat);
}
.single-product form.cart button.single_add_to_cart_button{
  min-height:52px;padding:0 34px;border-radius:var(--pill);
  background:var(--brand);border:1.5px solid var(--brand);color:#fff;
  font:700 16px/1.2 var(--font-ar);
}
.single-product form.cart button.single_add_to_cart_button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.single-product table.variations{width:100%;margin:0 0 14px}
.single-product table.variations td,.single-product table.variations th{padding:6px 0;border:0}
.single-product table.variations select{
  min-height:48px;padding:8px 14px;border:1.5px solid var(--line);
  border-radius:var(--r-sm);font:inherit;font-size:15px;background:#fff;width:100%;
}
.single-product .product_meta{
  border-top:1px solid var(--line);margin-top:20px;padding-top:16px;
  font-size:14px;color:var(--body);line-height:2;
}
.single-product .product_meta > span{display:block}
/* Only one product in the catalogue has a SKU; hide the empty row rather than
   printing "رقم المنتج:" with nothing after it. */
.single-product .product_meta .sku_wrapper:has(.sku:empty){display:none}
.single-product .woocommerce-tabs ul.tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px;padding:0;list-style:none;border:0;
}
.single-product .woocommerce-tabs ul.tabs::before,
.single-product .woocommerce-tabs ul.tabs::after{display:none}
.single-product .woocommerce-tabs ul.tabs li{
  margin:0;padding:0;background:none;border:0;border-radius:var(--pill);
}
.single-product .woocommerce-tabs ul.tabs li a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 22px;
  border:1.5px solid var(--line);border-radius:var(--pill);
  color:var(--ink);font-weight:600;font-size:15px;
}
.single-product .woocommerce-tabs ul.tabs li.active a{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
.single-product .woocommerce-tabs .panel{
  border:0;padding:0;color:var(--body);font-size:16px;line-height:1.9;
}
.single-product .related > h2,
.single-product .up-sells > h2,
.single-product section.related h2{font-size:22px;margin:0 0 20px}
.single-product .related{margin-top:44px;border-top:1px solid var(--line);padding-top:34px}
/* Zero approved reviews across the store; never print an empty star row. */
.single-product .woocommerce-product-rating:not(:has(.star-rating[role])){display:none}

/* ---- Delivery / returns / payment facts, from the plugin ---- */
.els-pdp-facts{
  display:grid;gap:12px;margin:20px 0 0;padding:18px;
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg);
}
.els-pdp-fact{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;line-height:1.7;color:var(--body)}
.els-pdp-fact svg{flex:0 0 auto;width:22px;height:22px;color:var(--brand);margin-top:2px}
.els-pdp-fact strong{display:block;color:var(--ink);font-size:15px}

/* =========================================================================
   Cart (WooCommerce block) and checkout (classic shortcode)
   =========================================================================
   Two different markup families on purpose: page 11 is the cart BLOCK and
   page 12 is [woocommerce_checkout]. Neither is converted to the other. */

/* ---- Cart block ---- */
.wp-block-woocommerce-cart .wc-block-components-product-name{
  color:var(--ink);font-weight:600;font-size:15.5px;
}
.wp-block-woocommerce-cart .wc-block-cart-item__image img{
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--bg-alt);
}
.wc-block-components-totals-item__value,
.wc-block-formatted-money-amount{font-family:var(--font-lat);font-variant-numeric:tabular-nums}
.wc-block-cart__submit-button,
.wc-block-components-button:not(.is-link){
  min-height:52px;border-radius:var(--pill);
  background:var(--brand);border:1.5px solid var(--brand);color:#fff;
  font:700 16px/1.2 var(--font-ar);
}
.wc-block-cart__submit-button:hover,
.wc-block-components-button:not(.is-link):hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.wc-block-components-quantity-selector{border-radius:var(--r-sm);border-color:var(--line)}
.wc-block-components-quantity-selector__button{min-width:40px;min-height:40px}
.wc-block-components-sidebar,
.wc-block-cart__sidebar .wc-block-components-sidebar{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px;
}
.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title{
  font-size:20px;color:var(--ink);
}

/* ---- Cart block, narrow viewports -------------------------------------
   WooCommerce lays the line item out as a grid whose second track is a fixed
   `132px`. With three cells (image, product, total) the total is auto-placed
   into an implicit fourth column, so the row measures 80 + 132 + 11 + 91 plus
   three 16px gaps = 362px — wider than a 320px viewport. Measured at 320px:
   the row started at x = -57, taking the price and the "حفظ" savings badge off
   the screen entirely and giving the whole document a 377px scroll width.

   Two explicit tracks and explicit areas replace the fixed track: the image
   spans both rows on the inline-start side, the product details sit beside it
   and the total sits underneath them, full width of its column. Nothing is
   hidden — image, title, variation, unit price, struck regular price, savings
   badge, quantity, remove and line total are all still rendered.
   ---------------------------------------------------------------------- */
@media (max-width:768px){
  /* WooCommerce sizes the row from container-query classes it puts on the cart
     wrapper (`is-small` / `is-mobile` / `is-medium`), in a stylesheet enqueued
     after this one and at the same specificity — so matching its selectors
     exactly lost on load order alone. Both classes sit on the same element,
     so `.wc-block-cart.is-mobile` outranks it by one class without !important. */
  .wc-block-cart.is-small  table.wc-block-cart-items .wc-block-cart-items__row,
  .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row,
  .wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row,
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row{
    grid-template-columns:72px minmax(0,1fr);
    grid-template-rows:auto auto;
    column-gap:12px;row-gap:6px;
  }
  /* Placement needs the same treatment, and more of it. `grid-area` is a
     shorthand; WooCommerce overrides the individual longhands
     (`grid-column-end:4` on the product cell, `grid-row-start:1` on the total)
     from a 0,4,1 selector, so a 0,3,1 shorthand was silently half-applied and
     the total landed back in row 1 — printed on top of the product title.
     Measured before this rule: product area 1/2/2/4, total area 1/2/3/3, both
     starting at T330. The page-load overflow test still passed, because two
     boxes overlapping is not an overflow; the screenshot is what caught it. */
  .wc-block-cart.is-small  table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image,
  .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image,
  .wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__image{
    grid-area:1 / 1 / 3 / 2;align-self:start;
  }
  .wc-block-cart.is-small  table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product,
  .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product,
  .wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__product{
    grid-area:1 / 2 / 2 / 3;
  }
  .wc-block-cart.is-small  table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total,
  .wc-block-cart.is-mobile table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total,
  .wc-block-cart.is-medium table.wc-block-cart-items .wc-block-cart-items__row td.wc-block-cart-item__total{
    grid-area:2 / 2 / 3 / 3;
  }

  /* A grid/flex child's default `min-width:auto` refuses to shrink below the
     widest unbreakable word, which is how a long Arabic-plus-Latin book title
     pushes its whole column past the viewport edge. */
  .wc-block-cart .wc-block-cart-item__product,
  .wc-block-cart .wc-block-cart-item__total,
  .wc-block-cart .wc-block-cart-item__wrap,
  .wc-block-cart .wc-block-components-product-name,
  .wc-block-cart .wc-block-components-product-metadata,
  .wc-block-cart .wc-block-cart-item__prices{ min-width:0; }
  .wc-block-cart .wc-block-components-product-name,
  .wc-block-cart .wc-block-components-product-metadata{ overflow-wrap:anywhere; }

  .wc-block-cart .wc-block-cart-item__image img{ width:72px;height:auto; }
  /* The line total and its savings badge read as one block under the details
     rather than as a squeezed fourth column. */
  .wc-block-cart .wc-block-cart-item__total{ text-align:start; }
  .wc-block-cart .wc-block-cart-item__total-price-and-sale-badge-wrapper{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;justify-content:flex-start;
  }
  .wc-block-cart .wc-block-components-sale-badge{ margin:0; }
  /* Quantity control and remove link keep a 44px target on a narrow row. */
  .wc-block-cart .wc-block-cart-item__quantity{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; }
  .wc-block-cart .wc-block-components-quantity-selector{ margin:0; }
  .wc-block-cart .wc-block-cart-item__remove-link{ min-height:44px; }

  /* The order-summary card is a sibling of the items table, not a column of
     it: full width, below the products, and never a source of overflow. */
  .wc-block-cart .wc-block-cart__sidebar{ width:100%;max-width:100%;flex-basis:100%;min-width:0; }
  .wc-block-cart .wc-block-cart__sidebar .wc-block-components-sidebar{ width:100%;min-width:0; }

  .wp-block-woocommerce-cart .wc-block-cart__main,
  .wp-block-woocommerce-cart .wc-block-cart__sidebar{ min-width:0;max-width:100%; }
}

/* Cross-sell cards under the cart carry an 18px physical left padding on a
   `width:100%` box that is still `content-box`, so each card measures container
   + 18px: at 390px that is 378px inside a 360px column, and because the column
   is RTL the surplus hangs off the LEFT edge — the document scrolled to 393px.
   Sizing the box the way the rest of the page is sized fixes it at every width. */
/* WooCommerce declares this card `box-sizing:content-box; width:100%;
   padding-left:5%` at `.wp-block-woocommerce-cart .wp-block-woocommerce-cart-
   cross-sells-block .cross-sells-product` (0,3,0), so 100% + 18px = 378px in a
   360px column. Matching that chain and adding the element selector (0,3,1)
   wins without !important. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block div.cross-sells-product{
  box-sizing:border-box;max-width:100%;
}

/* Below 360px the two grid tracks still have to fit; shrink the thumbnail
   rather than let anything spill off the inline-start edge. */
@media (max-width:359.98px){
  .wc-block-cart table.wc-block-cart-items .wc-block-cart-items__row,
  .is-small table.wc-block-cart-items .wc-block-cart-items__row{
    grid-template-columns:56px minmax(0,1fr);column-gap:10px;
  }
  .wc-block-cart .wc-block-cart-item__image img{ width:56px; }
}

/* ---- Classic checkout ---- */
/* The section headings are promoted H3 -> H2 in the plugin so the page does not
   jump H1 -> H3; match both tags so the styling survives either way. */
.woocommerce-checkout .woocommerce-billing-fields h2,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout .woocommerce-shipping-fields > h2,
.woocommerce-checkout .woocommerce-shipping-fields > h3,
.woocommerce-checkout .woocommerce-additional-fields > h2,
.woocommerce-checkout .woocommerce-additional-fields > h3,
.woocommerce-checkout #order_review_heading{
  font-size:19px;color:var(--ink);margin:0 0 16px;
}
.woocommerce-checkout .form-row{margin:0 0 16px;padding:0}
.woocommerce-checkout .form-row label{
  display:block;margin-bottom:6px;font-weight:600;font-size:14.5px;color:var(--ink);
}
.woocommerce-checkout .form-row .required{color:var(--brand);text-decoration:none}
.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection--single{
  width:100%;min-height:50px;padding:10px 14px;
  border:1.5px solid var(--line);border-radius:var(--r-sm);
  background:#fff;font:inherit;font-size:15.5px;color:var(--ink);
}
.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus{border-color:var(--brand);outline:none}
.woocommerce-checkout .select2-container .select2-selection--single{height:50px;display:flex;align-items:center}
.woocommerce-checkout .woocommerce-checkout-review-order{
  background:var(--bg-alt);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:20px;
}
.woocommerce-checkout table.shop_table{border:0;border-radius:0;font-size:15px}
.woocommerce-checkout table.shop_table th,
.woocommerce-checkout table.shop_table td{
  padding:10px 0;border-color:var(--line);color:var(--body);
}
.woocommerce-checkout table.shop_table .order-total .amount{color:var(--brand);font-size:19px}
.woocommerce-checkout #place_order,
.woocommerce-checkout button.button.alt{
  width:100%;min-height:54px;border-radius:var(--pill);
  background:var(--brand);border:1.5px solid var(--brand);color:#fff;
  font:700 17px/1.2 var(--font-ar);
}
.woocommerce-checkout #place_order:hover{background:var(--brand-dark)}
.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-error,
.woocommerce-checkout .woocommerce-message{
  border-radius:var(--r);border:1px solid var(--line);background:var(--bg-alt);
  padding:14px 18px;font-size:15px;
}
.woocommerce-checkout .woocommerce-error{border-color:var(--brand);background:var(--brand-tint)}
.woocommerce-checkout .payment_methods{list-style:none;margin:0 0 18px;padding:0}
.woocommerce-checkout .payment_methods li{
  border:1.5px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:10px;
}
.woocommerce-checkout .payment_methods li label{font-weight:600;color:var(--ink)}
.woocommerce-checkout .wc_payment_method .payment_box{
  background:var(--bg-alt);border-radius:var(--r-sm);font-size:14px;
}

@media (max-width:1023px){
  .single-product .summary p.price,.single-product .summary .price{font-size:23px}
  .single-product form.cart{gap:10px}
  .single-product form.cart button.single_add_to_cart_button{flex:1 1 auto;padding:0 20px}
  .single-product .flex-control-thumbs{grid-template-columns:repeat(4,1fr)}
  .woocommerce-checkout .woocommerce-checkout-review-order{padding:16px}
}

/* ---- Cart / checkout page header: same tightening as the archives ---- */
body.woocommerce-cart .entry-header,
body.woocommerce-checkout .entry-header,
body.woocommerce-cart .page-header,
body.woocommerce-checkout .page-header{padding-block:26px 0;text-align:start}
body.woocommerce-cart .entry-title,
body.woocommerce-checkout .entry-title,
body.woocommerce-cart .page-title,
body.woocommerce-checkout .page-title{
  font-size:clamp(24px,3vw,34px);margin:0;text-align:start;
}
body.woocommerce-cart .container.content-wrapper,
body.woocommerce-checkout .container.content-wrapper{margin-top:28px}

/* ---- RTL order table: keep the header cells apart and stop the quantity
        from merging into the price. WooCommerce prints the quantity as
        "&nbsp;×&nbsp;2" right after the product name, and without an isolate
        the bidi algorithm reorders it into the amount beside it. ---- */
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{text-align:start;padding:12px 10px}
.woocommerce table.shop_table th:last-child,
.woocommerce table.shop_table td:last-child{text-align:end}
.woocommerce table.shop_table .product-name{padding-inline-end:16px}
.woocommerce .product-quantity,
.woocommerce table.shop_table strong.product-quantity{
  unicode-bidi:isolate;display:inline-block;margin-inline-start:4px;
  font-family:var(--font-lat);color:var(--body);font-weight:600;
}
.woocommerce table.shop_table .woocommerce-Price-amount{unicode-bidi:isolate}
.woocommerce-checkout .woocommerce-checkout-review-order-table{width:100%}

/* Single-product sale badge — the card rules are scoped to ul.products, so the
   badge on the product page itself was still Botiga's dark default. Same
   convention, anchored to the gallery rather than floating beside the title. */
.single-product div.product > .onsale,
.single-product .woocommerce-product-gallery .onsale,
.single-product span.onsale{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:3;
  width:auto;max-width:max-content;min-width:0;min-height:0;margin:0;
  padding:6px 14px;border-radius:var(--pill);
  background:var(--brand);color:#fff;
  font:700 14px/1.6 var(--font-ar);font-variant-numeric:tabular-nums;
}
.single-product div.product{position:relative}

/* Reviews tab: the store has zero approved reviews, so the count is honest but
   the panel is empty. Keep the tab, just don't let it look like a broken table. */
.single-product #reviews .woocommerce-noreviews{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;color:var(--body);
}

/* ---- Filter Everything: brand the controls it renders with browser defaults ---- */
.wpc-filter-range input[type=range],
.wpc-filters-main-wrap input[type=range],
.wpc-filter-slider{accent-color:var(--brand)}
.wpc-filters-main-wrap .noUi-connect,
.wpc-filters-main-wrap .ui-slider-range{background:var(--brand)}
.wpc-filters-main-wrap .noUi-handle,
.wpc-filters-main-wrap .ui-slider-handle{
  border-color:var(--brand);background:#fff;box-shadow:var(--sh-1);
}
.wpc-show-more-button,.wpc-more-less,.wpc-filter-more{
  display:inline-flex;align-items:center;min-height:40px;
  color:var(--brand);font-weight:600;font-size:14px;border:0;background:none;cursor:pointer;
}
/* The active-filter widget prints its heading even with nothing selected. */
.widget_wpc_chips_widget:not(:has(.wpc-chip)):not(:has(.wpc-chips-list li)){display:none}
.wpc-filters-open-close-heading{color:var(--ink)}

/* Filter Everything ships a hard-coded blue for its jQuery-UI range and its
   apply button. Its own stylesheet loads after this file, so these carry the
   brand on specificity rather than order. */
#secondary .ui-slider .ui-slider-range,
.els-filters__panel .ui-slider .ui-slider-range,
.widget-area .ui-slider .ui-slider-range{background:var(--brand);border-color:var(--brand)}
#secondary .ui-slider,
.els-filters__panel .ui-slider,
.widget-area .ui-slider{background:var(--line);border:0;height:4px;border-radius:var(--pill)}
#secondary .ui-slider .ui-slider-handle,
.els-filters__panel .ui-slider .ui-slider-handle,
.widget-area .ui-slider .ui-slider-handle{
  background:#fff;border:2px solid var(--brand);border-radius:var(--pill);
  width:20px;height:20px;top:-8px;box-shadow:var(--sh-1);cursor:pointer;
}
/* The apply button is appended outside the sidebar, so it is matched on body. */
body button.wpc-filters-apply-button,
body .wpc-filters-apply-button{
  background:var(--brand);border-color:var(--brand);color:#fff;
  min-height:44px;border-radius:var(--pill);font:700 15px/1.2 var(--font-ar);
}
body button.wpc-filters-apply-button:hover,
body .wpc-filters-apply-button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}

/* ---- Botiga's WooCommerce page header ----
   It ships `padding: 80px 0` with `margin-bottom: -60px` and centres its inner
   container, which put ~160px of empty space above the product grid and centred
   the Arabic H1 away from the reading edge. Botiga's free tier has no alignment
   or spacing control for this block (Shop Header "Style 2" is Pro), so it is
   set here. Scoped to the header itself — no other page header is affected. */
.woocommerce-page-header{
  padding-block:26px 0;
  margin-bottom:0;
}
.woocommerce-page-header > .container,
.woocommerce-page-header .container{text-align:start}
.woocommerce-page-header .page-title,
.woocommerce-page-header .woocommerce-products-header__title{
  text-align:start;font-size:clamp(24px,3vw,34px);margin:0;line-height:1.35;
}
.woocommerce-page-header .woocommerce-breadcrumb,
.woocommerce-page-header .breadcrumbs{
  text-align:start;font-size:13.5px;color:var(--muted);margin:0 0 8px;
}
.woocommerce-page-header .term-description{text-align:start;max-width:70ch;margin:10px 0 0}

/* ---- Accessibility corrections found in adversarial review ---- */

/* The current page number rendered white-on-white: the brand fill never landed
   because Botiga's own .page-numbers.current sets a white background after this
   file. Repeat the class to win on specificity rather than on load order. */
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination span.page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current{
  background:var(--brand);border-color:var(--brand);color:#fff;
}
/* 44px is the minimum tap target; the earlier 40px on small screens was wrong. */
@media (max-width:1023px){
  .woocommerce-pagination .page-numbers{min-width:44px;min-height:44px;font-size:14.5px;padding:0 10px}
}

/* The struck-through "was" price was --muted on white: 2.65:1. This clears 4.5:1
   at 14.5px/400 while staying visually secondary to the live price. */
ul.products li.product .price del,
.single-product .summary .price del,
.woocommerce .price del{color:#5F6E88}

/* The closed filter panel must not hold ~210 focusable controls in the tab
   order. `inert` is set by filters.js; this is the visual half. */
.els-filters__panel[inert]{visibility:hidden}
.els-filters-open .els-filters__panel[inert]{visibility:visible}

/* Scroll-lock the page, not just the root, while the panel is open. */
html.els-filters-open,
body.els-filters-open{overflow:hidden}

/* Active-filter count on the mobile trigger. */
.els-filter-trigger__n{
  display:inline-grid;place-items:center;
  min-width:22px;height:22px;padding:0 6px;margin-inline-start:8px;
  border-radius:var(--pill);background:var(--brand);color:#fff;
  font:700 12px/1 var(--font-lat);
}
.els-filter-trigger:hover .els-filter-trigger__n{background:#fff;color:var(--brand)}

/* The empty-state heading should sit in the document outline. */
.els-empty__title{font-size:20px;font-weight:700;color:var(--ink);margin:0 0 8px}

/* =========================================================================
   Corrections from adversarial review
   ========================================================================= */

/* D1 BLOCKER — the cart's checkout CTA rendered brand-red on brand-red.
   Botiga's `a.button:not(.has-text-color){color:var(--bt-color-button)}` beats a
   plain class selector, so the white label never landed and the primary way into
   checkout was an empty red pill. */
a.wc-block-cart__submit-button,
a.wc-block-cart__submit-button:visited,
.wp-block-woocommerce-cart a.wc-block-cart__submit-button,
.wc-block-cart__submit-container a.wc-block-components-button,
body .wc-block-components-button:not(.is-link):not(.has-text-color){
  color:#fff;background:var(--brand);border-color:var(--brand);
}
a.wc-block-cart__submit-button:hover,
body .wc-block-components-button:not(.is-link):not(.has-text-color):hover{
  color:#fff;background:var(--brand-dark);border-color:var(--brand-dark);
}

/* D11 — the footer ROW paints its own light background inside the dark footer,
   leaving headings, links and phone numbers at 1.1–1.9:1. */
.bhfb-footer .bhfb-row-wrapper,
.bhfb-row-wrapper.bhfb-main_footer_row,
.bhfb-row-wrapper.bhfb-above_footer_row,
.bhfb-row-wrapper.bhfb-below_footer_row{background:var(--ink)}

/* D4 — nine navigation items no longer fit between 1025 and 1439px, so the last
   one (كل المنتجات — the shop entry point) was clipped off the RTL start edge
   with no way to scroll to it. Tighten below 1440, and let the row scroll if a
   future menu still overruns rather than hiding an item outright. */
@media (min-width:1280px) and (max-width:1439.98px){
  .bhfb-below_header_row .menu > li > a{
    font-size:15px;padding-inline:clamp(6px,0.72vw,12px);
  }
  .bhfb-below_header_row ul.menu > li:last-child{margin-inline-start:4px}
}
@media (min-width:1024px) and (max-width:1279.98px){
  .bhfb-below_header_row .menu > li > a{
    font-size:14px;padding-inline:clamp(4px,0.5vw,9px);
  }
  .bhfb-below_header_row ul.menu > li:last-child{margin-inline-start:2px}
  .bhfb-below_header_row ul.menu > li:last-child > a::after{margin-inline-start:4px}
}
/* (Removed in Phase 5. This was a second, later copy of the sideways-scroll
   rule for the nine-department row; being later in the file it outranked the
   Phase 5 replacement at identical specificity and kept the الأقسام panel
   clipped to the height of the navigation row.) */

/* D12 — Botiga paints the select chevron on the physical right, which in RTL is
   where the Arabic label starts; the reserved 34px sat on the empty left side. */
.woocommerce .woocommerce-ordering select,
.woocommerce select.orderby{padding-right:36px;padding-left:16px}

/* D34 — "عرض 1–24 من أصل 996" rendered as "24–1"; the en-dashed range needs the
   same bidi isolation the sale badge already has. */
.woocommerce .woocommerce-result-count{unicode-bidi:isolate}

/* D17 — after an AJAX add, WooCommerce appends "عرض السلة" beside the button and
   li.product{overflow:hidden} cut it off. Give the wrap its own column. */
ul.products li.product .loop-button-wrap{
  display:flex;flex-direction:column;align-items:stretch;
}
ul.products li.product a.added_to_cart{
  margin:0 12px 15px;text-align:center;border-style:dashed;
  order:5;white-space:nowrap;
}
@media (max-width:1023px){
  ul.products li.product a.added_to_cart{margin-inline:12px;font-size:13.5px}
}

/* D26 — the "no price" line wrapped and added an 18px step to its grid row. */
.els-price-na{
  display:block;font-size:14px;font-weight:600;color:var(--body);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6;
}

/* D18 — one category (كتب خارجية) is set to show sub-category tiles *and*
   products, so five tiles render inside the product grid as short cards holding
   the "no image" placeholder. The display type is a merchant setting and has
   been corrected there; this keeps any future tile visually distinct from a
   product rather than silently mimicking one. */
ul.products li.product-category > a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:100%;padding:20px 14px;text-align:center;
}
ul.products li.product-category img{aspect-ratio:1/1;object-fit:contain;padding:8px}
ul.products li.product-category h2,
ul.products li.product-category .woocommerce-loop-category__title{
  font-size:15px;font-weight:700;color:var(--ink);padding:0;margin:0;min-height:0;
}

/* =========================================================================
   Back to top — replacement control
   Why a replacement rather than a restyle: Botiga renders its control as a
   bare <div> with no href, no tabindex, no role and no accessible name, so it
   cannot be reached or operated by keyboard and screen readers announce
   nothing. Those are attributes, not styles — they cannot be fixed in CSS, and
   Botiga's template is parent-theme core. The child theme therefore hides
   Botiga's control outright and renders its own <button> (see assets/backtotop.js).
   ========================================================================= */

/* Botiga's inaccessible control: gone at every width. */
body .back-to-top,
body .back-to-top.display{ display:none !important; }

.els-top{
  position:fixed;
  inset-block-end:var(--els-top-inset, 20px);
  inset-inline-end:var(--els-top-inset, 20px);
  width:48px;height:48px;                 /* > 44x44 minimum touch target */
  display:none;                            /* JS shows it past the threshold */
  align-items:center;justify-content:center;
  padding:0;margin:0;
  border:1.5px solid var(--line);
  border-radius:50%;
  background:#fff;color:var(--ink);
  box-shadow:var(--sh-2);
  cursor:pointer;
  /* Below the filter drawer (1000), the nav drawer and the promo modal
     (100000) so it can never sit on top of an open overlay. */
  z-index:900;
  transition:background .15s,color .15s,border-color .15s;
}
.els-top.is-visible{ display:flex; }
.els-top:hover{ background:var(--brand);color:#fff;border-color:var(--brand); }
.els-top:focus-visible{
  outline:3px solid var(--brand);
  outline-offset:3px;
}
.els-top svg{ width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2; }

/* Any open overlay hides it outright — belt and braces alongside the z-index.
   Botiga marks its open mobile drawer with `mobile-menu-visible` on <body>
   (verified live); the other classes cover the filter panel and the promo
   modal. Without the correct class the control only disappeared because the
   scroll heuristic happened to hide it, which is not a guarantee. */
.els-filters-open .els-top,
body.mobile-menu-visible .els-top,
body.botiga-offcanvas-menu-open .els-top,
body.els-modal-open .els-top{ display:none !important; }

/* The control stands down as soon as the footer reaches the strip it occupies
   (see backtotop.js clearOffset), so no page padding is reserved and no
   layout shifts. Verified at 390/768/1366 scrolled to the document bottom:
   nothing interactive and no footer sits underneath it. */

/* =========================================================================
   Phase 4 closure §5 — filter contrast and drawer chrome offset
   ========================================================================= */

/* Result counts. The first attempt at this set `color:#5F6E88` (5.16:1 on
   white) and measured the DECLARED colour, which passed. The RENDERED colour
   did not: filter-everything.min.css also sets `opacity:.3` on the same
   element, compositing #5F6E88 down to rgb(207,212,219) — 1.49:1, far worse
   than the 2.65:1 it replaced. Opacity is reset here and the count is kept
   visually secondary by size and weight instead, which costs no contrast.
   Measured after this rule: rgb(95,110,136) on #fff = 5.16:1, and inside the
   mobile panel on the same white ground, identical.
   filter-everything.min.css is enqueued after this file, so each selector
   carries one extra class to outrank it at equal specificity. */
.wpc-filters-widget-wrapper .wpc-term-count,
.els-filters__panel .wpc-filters-widget-wrapper .wpc-term-count{
  color:#5F6E88;opacity:1;font-size:12.5px;font-weight:400;
}

/* The staging banner is fixed chrome at the top of the viewport (measured:
   0-30px, z-index 99999) and the drawers start at top:0, so its band was
   covering the close button by 16px and the heading by 5px. The offset is
   written by drawer.js from the banner's real height, so it resolves to 0 in
   production where no banner exists — nothing staging-specific is hard-coded. */
.els-filters__panel{ padding-block-start:var(--els-chrome-offset, 0px); }
/* Correct class name (underscore), and enough specificity to beat the fixed
   72px above. */
.bhfb-mobile_offcanvas.botiga-offcanvas-menu{
  padding-top:calc(72px + var(--els-chrome-offset, 0px));
}

/* Head and the sticky "عرض النتائج" stay put; only the facet list scrolls. */
.els-filters__panel > .els-filters__head{ flex:0 0 auto; }
.els-filters__panel > .widget-area{
  flex:1 1 auto;min-height:0;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.els-filters__panel > .els-filters__done{ flex:0 0 auto; }

@media (prefers-reduced-motion:reduce){ .els-top{ transition:none; } }

/* =========================================================================
   Footer — Botiga footer builder widgets
   ========================================================================= */
.site-footer,.bhfb-footer{background:var(--ink);color:#C6CEDC}
.site-footer h2,.site-footer h3,.site-footer .widget-title,
.bhfb-footer h2,.bhfb-footer h3,.bhfb-footer .widget-title{color:#fff;font-size:17px}
.site-footer a,.bhfb-footer a{color:#C6CEDC}
.site-footer a:hover,.bhfb-footer a:hover{color:#fff}
.site-footer li,.bhfb-footer li{margin-bottom:2px}
.site-footer .menu a,.bhfb-footer .menu a{display:inline-flex;align-items:center;min-height:38px}
.els-branches{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.65}
.els-branches li{margin-bottom:15px}
.els-branches strong{color:#fff;display:block}
.els-branches a{color:var(--accent);font-weight:600;font-family:var(--font-lat)}

/* =========================================================================
   Breakpoints
   ========================================================================= */
@media (min-width:768px){
  ul.products,
  ul.products[class*="columns-"]{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
}
@media (min-width:1024px){
  ul.products,
  ul.products[class*="columns-"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
}

@media (max-width:1023px){
  :root{--gap:14px}
  .bhfb-component-logo img,.site-branding img,.custom-logo{height:44px}
  .bhfb-main_header_row .bhfb-row-inner{min-height:64px}
  .bhfb-component-woo_icons a{min-width:var(--tap);min-height:var(--tap)}
  .bhfb-component-woo_icons a svg,.bhfb-component-woo_icons a img{width:23px;height:23px}
  .bhfb-component-search input[type=search]{height:46px;font-size:15px;padding-inline:16px 50px}
  .bhfb-component-search button[type=submit]{width:40px;height:40px}

  /* One compact line before the main header instead of a wrapped block.
     The secondary message is marked in the Customizer HTML and simply drops
     out here; it is repeated in the footer and in the drawer. */
  .bhfb-above_header_row{font-size:13.5px}
  .els-announce{min-height:34px;gap:9px;padding-inline:10px}
  .els-announce b{font-size:12.5px;padding:2px 8px}
  .els-announce .els-announce__more{display:none}

  ul.products li.product .onsale{font-size:11.5px;padding:3px 9px;inset-block-start:8px;inset-inline-start:8px}
  /* Keep the add-to-cart label on one line in a two-column grid. */
  ul.products li.product .button{font-size:14px;padding-inline:8px;margin-inline:12px}
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  ul.products li.product h3{padding-inline:12px;min-height:calc(1.55em * 4 + 15px)}
  ul.products li.product .woocommerce-loop-product__title > a,
  ul.products li.product .botiga-wc-loop-product__title{-webkit-line-clamp:4}
  ul.products li.product .price{padding-inline:12px;font-size:17px}
  /* (the staging-banner offset is now measured at runtime — see --els-chrome-offset) */
}

/* =========================================================================
   A2 — product-title line allowance (Phase 3 final correction)
   Measured over all 1,376 published titles: the grade / term / edition that
   distinguishes a textbook sits at the END of the name, so a 2-line clamp hid
   exactly the part that identifies the book. Coverage measured in-browser at
   the real card widths:
   at the shipped 15px/12px gutter:
      mobile  390px  4 lines  95.3% fully visible, 91.0% keep every grade/term
      tablet  768px  3 lines  98.5%                97.4%
      desktop 1366px 3 lines  89.9%                89.5%
   (the 2-line clamp this replaces showed 50.5% / 63.3% / 57.6% fully visible)
   The clamp is visual only: the anchor always contains the complete title, so
   the accessible name and the link text are never truncated.
   ========================================================================= */
@media (min-width:768px) and (max-width:1023.98px){
  ul.products li.product .woocommerce-loop-product__title,
  ul.products li.product h2,
  ul.products li.product h3{min-height:calc(1.55em * 3 + 15px)}
  ul.products li.product .woocommerce-loop-product__title > a,
  ul.products li.product .botiga-wc-loop-product__title{-webkit-line-clamp:3}
}
/* At 1024-1279 the filter sidebar leaves the four-column grid only ~146px per
   card, a 114px title box that cannot show a textbook name in three lines at
   any readable size. Three columns there; four returns at 1280px. */
@media (min-width:1024px) and (max-width:1279.98px){
  ul.products,
  ul.products[class*="columns-"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Phase 4 - the off-canvas filter panel now carries six facets instead of two.
   Filter rows are 36px in the desktop sidebar, which is fine for a mouse but
   below the 44px minimum for touch, so raise them inside the mobile panel only
   (measured: 49 sub-44px targets before this rule, 0 after). */
@media (max-width:1023.98px){
  .els-filters__panel .wpc-filters-ul-list label{min-height:44px}
  .els-filters__panel .wpc-filters-ul-list .wpc-term-item{margin:0}
  .els-filters__panel .wpc-chip,
  .els-filters__panel .wpc-chips-list li a{min-height:44px}
  .els-filters__panel .wpc-filter-range input[type=text],
  .els-filters__panel .wpc-filter-range input[type=number]{min-height:44px}
  .els-filters__panel a{min-height:44px;display:flex;align-items:center}
  .els-filters__panel .wpc-filters-ul-list input[type=checkbox]{width:20px;height:20px}
  /* "عرض المزيد" expands a long facet; it is its own control, not wrapped in a
     label. filter-everything.min.css is enqueued AFTER this file and sets
     display:inline at equal specificity, which nulls min-height - so this
     selector carries one extra class to outrank it. */
  .els-filters__panel .wpc-filters-widget-wrapper .wpc-see-more-control{
    display:inline-flex;align-items:center;min-height:44px;padding-inline:4px;
  }
  /* the checkbox itself stays 20px - the 44px <label> around it is the tap area */
}



/* A substituted placeholder is square while most featured images were 16:9;
   fit it inside the card's box instead of stretching it. */
img.els-placeholder{
  object-fit:contain;background:var(--bg-alt);
}

/* =========================================================================
   Header mini-cart
   =========================================================================
   Botiga positions the panel with a PHYSICAL `right:0` on hover. The cart icon
   sits at the far inline-end of an RTL header — which is the LEFT of the
   screen — so the 400px panel was anchored to the icon's right edge and hung
   off the viewport: measured `left:-294px` at 1366px wide.

   It also lays the row out with absolutely positioned children — image at
   `left:30px`, remove control at `left:22px` — so those two overlap by design,
   and the row reserves 105px of physical left padding for them. That is
   replaced here with a real grid: no absolute positioning, no overlap.

   Selectors are id-based on purpose. Botiga's own rules are class-only, and an
   id outranks them whatever the enqueue order.
   ========================================================================= */

#site-header-cart{ position:relative; }

#site-header-cart .widget_shopping_cart{
  /* Geometry is declared once for both states; Botiga keeps owning the
     visibility/opacity transition that reveals it. */
  position:absolute;
  /* header.js writes `--els-mc-top`: the distance from this element's own
     containing block down to the bottom of the LOWEST fixed header row, plus a
     12px breath. Measuring beats arithmetic here because the offset depends on
     the admin bar, the staging banner, whether the header is stuck and which of
     the two header variants (desktop or mobile) is on screen. The fallback is
     the unstuck case, which is all that is needed before the first measurement.

     This is not cosmetic. With the old flat `calc(100% + 12px)` the panel's top
     edge landed at y=104 while the stuck navigation row occupied y=79–115, and
     `elementsFromPoint` inside that band returned the navigation row — 11px of
     the panel was painted over by the nav. See the z-index note further down. */
  top:var(--els-mc-top, calc(100% + 12px));
  inset-inline-start:auto;
  inset-inline-end:0;                       /* RTL: the panel's leading edge sits
                                               under the icon and opens inward */
  /* Botiga floors it at `min-width:400px`, which no width or max-width can
     beat — at 390px the panel measured 400px and ran past the viewport edge. */
  width:min(380px, calc(100vw - 24px));
  min-width:0;
  max-width:calc(100vw - 24px);
  margin:0;padding:0;
  display:flex;flex-direction:column;
  /* The panel is only as tall as its contents until it would run off the
     bottom of the screen. header.js measures the real space below the panel's
     top edge — which already accounts for the admin bar, the staging banner and
     the sticky header, because those are what push the trigger down — and writes
     it here. The fallback matters only before the first measurement. */
  max-height:var(--els-mc-max, 70vh);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-3);
  /* Above the sticky header rows (500) and page content, below the filter
     drawer (99998), the nav drawer (99999) and the promo modal (100000).
     Botiga ships 9999999, which would put it over the promotional modal. */
  z-index:1200;
  text-align:start;
}

/* ---- the hover bridge --------------------------------------------------
   The panel opens a measured distance BELOW the trigger — 60-68px, because it
   has to clear the whole sticky header — and everything in between belonged to
   the header. `#site-header-cart`'s box is only the icon, so a pointer crossing
   that strip was over neither the trigger nor the panel, Botiga's `:hover`
   reveal went false, and the panel vanished. The mini-cart could not be reached
   with a mouse at all.

   The bridge belongs on the WRAPPER, not on the panel. The first attempt put it
   on `.widget_shopping_cart::before` and it never worked: the panel carries
   `overflow:hidden` for its rounded corners, and a pseudo-element placed above
   the panel with `bottom:100%` sits entirely outside that box, so it was
   clipped away — `elementsFromPoint` in the gap returned `.bhfb-column`, never
   the bridge, at every width. The close delay alone then had to carry the
   crossing, and a deliberately slow movement (which is what the brief asks for)
   outlasts any delay short enough to feel responsive.

   Here it is a child of the wrapper, which clips nothing, and it is contiguous
   with the wrapper's own bottom edge — so the trigger, the bridge and the panel
   form one unbroken hover region.

   It has ZERO height at rest, so nothing invisible sits over the navigation
   when the mini-cart is closed, and it is only as wide as the cart wrapper
   (~44px) rather than as wide as the panel (380px) — a 380px strip across the
   navigation row is exactly the overlay this must not become. */
#site-header-cart::after{
  content:"";
  position:absolute;
  top:100%;
  inset-inline-end:0;
  width:var(--els-mc-bridge-w, 48px);
  height:0;
}
#site-header-cart:hover::after,
#site-header-cart.els-mc-open::after{
  height:var(--els-mc-bridge-h, 0px);
}
/* Dismissed: the bridge must not hold the panel open against the user. */
#site-header-cart.els-mc-closed::after{ height:0; }

/* Botiga reveals the panel on :hover only, so a keyboard user could never open
   it and a touch user never can — and its reveal rule lives inside
   `@media (min-width:48em)`, so below 768px there is no reveal at all. Focus
   opens it too, at id specificity, and `els-mc-open` — which header.js owns —
   opens it at every width and survives the pointer crossing the gap. */
#site-header-cart:focus-within .widget_shopping_cart,
#site-header-cart.els-mc-open .widget_shopping_cart{
  visibility:visible;opacity:1;transform:none;
}
@supports (height:100dvh){
  #site-header-cart .widget_shopping_cart{ max-height:var(--els-mc-max, 70dvh); }
}

/* Closed by Escape, a second click or an outside click. It has to beat both the
   :hover reveal and `els-mc-open`, because the pointer is usually still on the
   icon at that moment. */
#site-header-cart.els-mc-closed .widget_shopping_cart{
  visibility:hidden!important;opacity:0!important;
}

/* ---- panel chrome ---- */
#site-header-cart .widgettitle{
  flex:0 0 auto;margin:0;
  padding:14px 16px;
  font-size:15px;font-weight:700;color:var(--ink);
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
}
#site-header-cart .widget_shopping_cart_content{
  display:flex;flex-direction:column;
  flex:1 1 auto;min-height:0;
}
/* Botiga caps this list at `26vh` with a `260px` floor once it adds
   `mini-cart-has-scroll` — 234px at a 900px viewport, so a six-item cart showed
   two items and scrolled even with 742px of empty screen below the panel. Both
   the cap and the floor are removed; flexbox gives the list whatever is left
   after the title, the total and the buttons, and `overflow-y:auto` only
   engages when that is not enough. */
#site-header-cart ul.woocommerce-mini-cart{
  flex:1 1 auto;min-height:0;max-height:none;
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:0;padding:0;list-style:none;
}

/* ---- one product row ----
   Three columns: thumbnail, details, remove.

   WooCommerce puts the thumbnail and the name inside ONE anchor and leaves the
   price as that anchor's sibling, so while the anchor has a box the name and
   the price can never share a column. Previously the anchor occupied grid row 1
   and the price row 2 — and row 1 was sized by the 68px thumbnail, not by the
   name. Measured result: `grid-template-rows: 68px 13.5px 0px`, the price 49px
   below the name and 4px below the thumbnail's bottom edge, which is what made
   it read as "pinned to the bottom of the image".

   The anchor is therefore dissolved with `display:contents`, which promotes the
   thumbnail and the name to grid items of the row itself. The name then sits in
   row 1 of the details column and the price directly under it in row 2. */
#site-header-cart li.woocommerce-mini-cart-item{
  position:static;
  display:grid;
  grid-template-columns:68px minmax(0,1fr) 34px;
  /* name | price | variation | slack.
     The slack row is the load-bearing part: a grid item that spans a FLEXIBLE
     track does not contribute to the intrinsic size of the tracks it crosses,
     so the thumbnail — spanning 1/-1 — no longer stretches the name row, and
     any height it has spare falls into the slack row BELOW the price instead of
     between the name and the price. */
  grid-template-rows:auto auto auto 1fr;
  column-gap:12px;
  row-gap:0;              /* spacing is set per element, so a product with no
                             variation does not pay for an empty track */
  align-items:start;
  margin:0;padding:12px 16px;
  background:none;
  border-bottom:1px solid var(--line);
  /* inherited by the product name, which is now an anonymous grid item and so
     cannot be selected directly */
  font-size:14px;line-height:1.5;font-weight:600;color:var(--ink);
  overflow-wrap:anywhere;   /* long Arabic and mixed-script book names wrap
                               instead of widening the row */
}
#site-header-cart li.woocommerce-mini-cart-item:last-child{ border-bottom:0; }

#site-header-cart li.woocommerce-mini-cart-item > a:not(.remove){
  display:contents;
  color:var(--ink);
  text-decoration:none;
}
#site-header-cart li.woocommerce-mini-cart-item > a:not(.remove):hover{ color:var(--brand); }
/* A `display:contents` element has no box, so an outline on the anchor itself
   would never paint. The row carries the focus ring instead. */
#site-header-cart li.woocommerce-mini-cart-item:has(> a:not(.remove):focus-visible){
  outline:3px solid var(--brand);outline-offset:-3px;border-radius:var(--r-sm);
}
#site-header-cart li.woocommerce-mini-cart-item img{
  /* Botiga absolutely positions this at top:20px/left:30px with a descendant
     selector, so dissolving the anchor does not release it — it is reset here
     explicitly. */
  position:static;float:none;
  grid-column:1;grid-row:1 / -1;
  align-self:start;
  width:68px;height:68px;max-height:none;
  object-fit:contain;
  margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--bg-alt);
}

#site-header-cart li.woocommerce-mini-cart-item .quantity{
  grid-column:2;grid-row:2;
  margin-top:6px;          /* directly under the last line of the name */
  font-family:var(--font-lat);font-variant-numeric:tabular-nums;
  font-size:13.5px;font-weight:400;color:#5F6E88;   /* 5.16:1 on white */
  /* Rendered order must read "1 × 300.40 ج.م" left to right.
     Two things are needed, and only doing the first is why it previously came
     out as "1 × ج.م 300.40":
       1. the line itself laid out LTR, so "1 ×" leads;
       2. the price laid out LTR too — `<bdi>` carries an implicit `dir=auto`,
          and auto resolves from the first STRONG character, which in
          "300.40 ج.م" is the Arabic "ج". So the bdi flipped itself to RTL and
          put the currency symbol before the number.
     `text-align:right` then flushes the LTR run to the row's inline-start edge,
     so it still lines up under the start of the product name. */
  unicode-bidi:isolate;direction:ltr;text-align:end;
}
#site-header-cart li.woocommerce-mini-cart-item .quantity .amount{ color:var(--ink);font-weight:700; }
/* Point 2 above: override the bdi's auto direction so the number keeps its
   place before the currency symbol. Scoped to the mini-cart line — no other
   price on the storefront is touched. */
#site-header-cart li.woocommerce-mini-cart-item .quantity .amount,
#site-header-cart li.woocommerce-mini-cart-item .quantity bdi{
  direction:ltr;unicode-bidi:isolate;
}
#site-header-cart li.woocommerce-mini-cart-item dl.variation{
  grid-column:2;grid-row:3;
  margin:4px 0 0;font-size:12.5px;font-weight:400;color:#5F6E88;
}
#site-header-cart li.woocommerce-mini-cart-item dl.variation dt,
#site-header-cart li.woocommerce-mini-cart-item dl.variation dd{
  display:inline;margin:0;padding:0;font-weight:400;
}
#site-header-cart li.woocommerce-mini-cart-item dl.variation dd::after{ content:"";display:block; }

/* ---- remove control ----
   Its own grid cell, so it cannot land on the image, the title, the quantity or
   the price no matter how long the name is. */
#site-header-cart li.woocommerce-mini-cart-item a.remove{
  grid-column:3;grid-row:1 / -1;
  align-self:center;justify-self:end;
  position:static;
  width:34px;height:34px;min-width:34px;min-height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0;
  font-size:19px;line-height:1;font-weight:400;
  color:#5F6E88;background:var(--bg-alt);
  border:1px solid var(--line);border-radius:50%;
  text-decoration:none;
  transition:background .15s,color .15s,border-color .15s;
}
#site-header-cart li.woocommerce-mini-cart-item a.remove:hover,
#site-header-cart li.woocommerce-mini-cart-item a.remove:focus-visible{
  background:var(--brand-tint);color:var(--brand);border-color:var(--brand);
}
#site-header-cart li.woocommerce-mini-cart-item a.remove:focus-visible{
  outline:3px solid var(--brand);outline-offset:2px;
}

/* ---- total and actions: pinned below the scrolling list ---- */
#site-header-cart .woocommerce-mini-cart__total{
  flex:0 0 auto;margin:0;
  padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-top:1px solid var(--line);
  background:var(--bg-alt);
  font-size:15px;color:var(--ink);
}
#site-header-cart .woocommerce-mini-cart__total strong{ font-weight:700; }
#site-header-cart .woocommerce-mini-cart__total .amount{
  font-family:var(--font-lat);font-variant-numeric:tabular-nums;
  font-size:17px;font-weight:800;color:var(--ink);
}
#site-header-cart .woocommerce-mini-cart__buttons{
  flex:0 0 auto;margin:0;
  padding:14px 16px 16px;
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  border-top:1px solid var(--line);
}
#site-header-cart .woocommerce-mini-cart__buttons a.button{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;margin:0;
  font:700 14.5px/1.2 var(--font-ar);
  border-radius:var(--pill);border:2px solid var(--brand);
  text-decoration:none;white-space:nowrap;
}
/* View cart — secondary */
#site-header-cart .woocommerce-mini-cart__buttons a.button:not(.checkout){
  background:#fff;color:var(--brand);
}
#site-header-cart .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{
  background:var(--brand-tint);
}
/* Checkout — the primary action, unmistakably so */
#site-header-cart .woocommerce-mini-cart__buttons a.button.checkout{
  background:var(--brand);color:#fff;
}
#site-header-cart .woocommerce-mini-cart__buttons a.button.checkout:hover{
  background:var(--brand-dark);border-color:var(--brand-dark);
}
#site-header-cart .woocommerce-mini-cart__buttons a.button:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
}

/* ---- empty state ---- */
#site-header-cart .woocommerce-mini-cart__empty-message{
  margin:0;padding:34px 20px;
  text-align:center;color:var(--body);font-size:14.5px;font-weight:400;
}
#site-header-cart .woocommerce-mini-cart__empty-message::before{
  content:"";display:block;width:44px;height:44px;margin:0 auto 12px;
  border-radius:50%;background:var(--bg-alt);
  /* a cart glyph, inlined so the empty state costs no request */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6E88' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.6 10.4A2 2 0 0 0 9.5 16h7.6a2 2 0 0 0 2-1.6L20.5 7H6'/%3E%3Ccircle cx='10' cy='20' r='1.3'/%3E%3Ccircle cx='18' cy='20' r='1.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:24px 24px;
}

/* Narrow viewports: the panel is already clamped to the viewport width, but the
   row wants a little less thumbnail and a little less padding. */
@media (max-width:479.98px){
  #site-header-cart li.woocommerce-mini-cart-item{
    grid-template-columns:56px minmax(0,1fr) 32px;column-gap:10px;padding:11px 12px;
    font-size:13.5px;
  }
  #site-header-cart li.woocommerce-mini-cart-item img{ width:56px;height:56px; }
  #site-header-cart li.woocommerce-mini-cart-item a.remove{ width:32px;height:32px;min-width:32px;min-height:32px; }
  #site-header-cart .woocommerce-mini-cart__buttons a.button{ font-size:13.5px; }
}

/* =========================================================================
   PHASE 5 — global header, navigation and footer
   =========================================================================
   Structure still belongs to Botiga's header/footer builders and to the
   WordPress menu system; this file only gives them the approved behaviour and
   look. Nothing here renders markup, and no header is duplicated: the sticky
   header IS the header at the top of the page (see assets/header.js).
   ========================================================================= */

:root{
  --els-hdr-z:500;              /* under the filter drawer (1000), the nav
                                   drawer (99999) and the promo modal (100000) */
  /* The sticky header keeps the rows at their NATURAL height. header.js
     measures them once, before anything is pinned, and writes the three
     variables below; the fallbacks are the measured desktop values and matter
     only for the first frame.

     They used to be hard-coded compact heights — 47px main and 35px nav
     against a natural 96px and 56px. That is where the "excessively
     compressed" sticky header came from, and it is also why the active
     underline escaped: the nav row was forced to 35px while the link inside it
     kept a 52px min-height plus a 3px border, so the border painted 11px below
     the row it was supposed to sit inside. */
  --els-hdr-main-h:96px;        /* measured natural main row height */
  --els-hdr-nav-h:56px;         /* measured natural nav row height  */
  --els-hdr-mobile-h:96px;      /* measured natural mobile bar height */
  --els-admin-bar:0px;
  --els-hdr-h:152px;            /* main + nav; what an in-page anchor must clear */
  --els-cat-offset:0px;         /* catalogue: main column top -> toolbar top */
}
/* The admin bar is not one thing at three sizes — it changes POSITIONING as
   well as height, and only the height was accounted for:
     >= 783px   position:fixed, 32px  -> reserve 32px
     601-782px  position:fixed, 46px  -> reserve 46px
     <= 600px   position:ABSOLUTE     -> it scrolls away with the page, so a
                                         fixed header must reserve nothing
   Reserving 46px below 600px left the sticky header floating with a 46px empty
   strip above it, through which the page content showed. Measured logged in at
   320/390/450px: admin bar `position:absolute` at `top:-1500` while the header
   sat at `top:46`. The 600px boundary is WordPress's own
   (`wp-includes/css/admin-bar.css`, `@media screen and (max-width:600px)`),
   not a guess. */
body.admin-bar{ --els-admin-bar:32px; }
@media screen and (max-width:782px){ body.admin-bar{ --els-admin-bar:46px; } }
@media screen and (max-width:600px){ body.admin-bar{ --els-admin-bar:0px; } }

/* ---- Sticky ------------------------------------------------------------
   The rows leave the flow when they pin, which would pull every following
   pixel up by their height. The spacer (created once per header by header.js)
   takes exactly the space they vacate, so the transition is measured at 0px of
   movement. It is 0px tall at rest, so it costs nothing when not stuck.
   ---------------------------------------------------------------------- */
.els-hdr-spacer{ height:0; }

html.els-stuck .bhfb-header .bhfb-main_header_row,
html.els-stuck .bhfb-header .bhfb-below_header_row{
  position:fixed;left:0;right:0;
  z-index:var(--els-hdr-z);
  transition:height .18s ease, min-height .18s ease;
}
/* A separated bar once it detaches from the page. */
html.els-stuck .bhfb-header .bhfb-below_header_row{ box-shadow:var(--sh-2); }
html.els-stuck .bhfb-header.bhfb-mobile .bhfb-main_header_row{ box-shadow:var(--sh-2); }

/* Both stuck rows are position:fixed with the same z-index, in one stacking
   context — so the navigation row, being later in the DOM, painted over the
   mini-cart panel that lives inside the main row. The panel's own z-index:1200
   cannot help: it is sealed inside the main row's stacking context. Measured
   before this fix: the panel's top 11px (y 104–115) were covered by the nav row
   and `elementsFromPoint` returned `.bhfb-below_header_row` there.

   The two rows never overlap each other, so lifting the main row by one costs
   nothing visually and lets everything inside it paint above the navigation. */
html.els-stuck .bhfb-header .bhfb-main_header_row{
  z-index:calc(var(--els-hdr-z) + 1);
}

/* Desktop: the pinned rows keep the height, padding and vertical rhythm they
   have at the top of the page. Nothing here sets a height — a fixed row with
   `left:0;right:0` and no height sizes to its own content, which is the same
   markup it had in the flow, so it renders at exactly its natural height.
   The only value that must be stated is where the navigation row starts, and
   that is the MEASURED height of the main row above it, not a constant. */
html.els-stuck .bhfb-desktop .bhfb-main_header_row{
  top:var(--els-admin-bar);
}
html.els-stuck .bhfb-desktop .bhfb-below_header_row{
  top:calc(var(--els-admin-bar) + var(--els-hdr-main-h));
}

/* Mobile and tablet: one 56px bar. The search row is replaced by a labelled
   toggle (header.js) that opens the same form as a panel beneath the bar, so
   search survives without a second field, a duplicate id or a taller bar. */
html.els-stuck .bhfb-mobile .bhfb-main_header_row{
  top:var(--els-admin-bar);
}
html.els-stuck .bhfb-mobile .bhfb-below_header_row{
  position:fixed;top:calc(var(--els-admin-bar) + var(--els-hdr-mobile-h));
  padding:8px 0;background:#fff;border-bottom:1px solid var(--line);
  box-shadow:var(--sh-2);
  /* collapsed: present in the DOM and out of the accessibility tree until the
     toggle opens it, so the sticky bar stays 56px tall */
  display:none;
}
html.els-stuck.els-search-open .bhfb-mobile .bhfb-below_header_row{ display:block; }
.els-searchtoggle{
  display:none;
  min-width:var(--tap);min-height:var(--tap);
  align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--ink);
  border-radius:var(--pill);cursor:pointer;
}
.els-searchtoggle:hover{ background:var(--bg-alt);color:var(--brand); }
.els-searchtoggle:focus-visible{ outline:3px solid var(--brand);outline-offset:2px; }
html.els-stuck .bhfb-mobile .els-searchtoggle{ display:inline-flex; }

/* In-page anchors must clear the pinned bar. */
/* 0 in production; the staging banner script raises it on staging only. */
:root{ --els-chrome-offset:0px; }
:target{ scroll-margin-top:calc(var(--els-hdr-h) + 12px); }
html.els-stuck [id]{ scroll-margin-top:calc(var(--els-hdr-h) + 12px); }
#els-grade-finder{ scroll-margin-top:calc(var(--els-hdr-h) + 20px); }
/* (The mobile --els-hdr-h fallback used to live here. header.js writes the
   property as an inline style on <html>, which always outranks a :root rule,
   so the media query was dead - and its 1024px boundary overlapped the
   1023.98px breakpoint used everywhere else in this file.) */

@media (prefers-reduced-motion:reduce){
  html.els-stuck .bhfb-header .bhfb-main_header_row,
  html.els-stuck .bhfb-header .bhfb-below_header_row{ transition:none; }
}

/* ---- Primary navigation: pages, with departments in one dropdown --------
   The row used to be nine product categories. It now carries the site's own
   pages, and the categories live inside الأقسام.
   ---------------------------------------------------------------------- */
/* The active marker is an inset pseudo-element, NOT a border.
   A `border-bottom:3px` is part of the link's box, so it is drawn at the box's
   outer edge — and when the pinned nav row was forced shorter than the link
   inside it, the border painted 11px BELOW the row, outside the header
   entirely. An absolutely positioned bar at `bottom:0` sits on the link's
   INNER bottom edge, adds no height, and can never leave the row. */
.bhfb-below_header_row .menu > li > a{
  position:relative;
  border-bottom:0;
  transition:color .15s;
}
.bhfb-below_header_row .menu > li > a::before{
  content:"";
  position:absolute;
  inset-inline:0;
  bottom:0;
  height:3px;
  background:transparent;
  border-radius:3px 3px 0 0;
  transition:background-color .15s;
  pointer-events:none;
}
/* The global focus ring is deliberately `!important` (see the note at the top
   of this file), so an ordinary rule cannot pull it inside the row — measured
   with a real Tab press, the ring's bottom sat at y=155 against a row bottom of
   152, i.e. 3px outside the navigation. It is matched here at the same weight
   and turned inward, so a keyboard user's focus indicator stays within the row
   exactly like the active underline does. */
.bhfb-below_header_row .menu > li > a:focus-visible,
.bhfb-below_header_row ul.sub-menu > li > a:focus-visible{
  outline:3px solid var(--brand) !important;
  outline-offset:-3px !important;
  border-radius:var(--r-sm);
}
/* Active page — the last-child "trailing link" treatment from the department
   row no longer applies, so it is unset here rather than left to misfire on
   تواصل معنا. */
.bhfb-below_header_row ul.menu > li:last-child{ margin-inline-start:0; }
.bhfb-below_header_row ul.menu > li:last-child > a{ color:var(--ink);font-weight:600; }
.bhfb-below_header_row ul.menu > li:last-child > a::after{ content:none; }
/* Exactly one top-level item is marked, and functions.php is what decides
   which — WordPress marked two here, because "المتجر" and "الأقسام" both point
   at the shop page, so both received `current_page_item`. The old selector
   list also matched `current-menu-ancestor` and `current-menu-parent`, which
   is what put a second underline under "الأقسام" on every product page. */
.bhfb-below_header_row .menu > li.els-nav-current > a{
  color:var(--brand);font-weight:700;
}
.bhfb-below_header_row .menu > li.els-nav-current > a::before{
  background:var(--brand);
}
/* Hover and keyboard focus stay inside the row too. */
.bhfb-below_header_row .menu > li > a:hover::before{ background:var(--line); }
.bhfb-below_header_row .menu > li.els-nav-current > a:hover::before{ background:var(--brand); }

/* The dropdown itself. It opens on :hover for a mouse and on :focus-within for
   a keyboard, so it works with JavaScript disabled; header.js only mirrors the
   open state into aria-expanded and adds Escape, neither of which CSS can do. */
.bhfb-below_header_row li.menu-item-has-children{ position:relative; }
/* Botiga adds its own chevron in a <span tabindex="0"> with no accessible name
   and no role — a focus stop that announces nothing and does nothing here,
   because the panel opens on :hover and :focus-within. Removing it also removes
   the duplicate arrow beside the one drawn below. */
.bhfb-below_header_row .dropdown-symbol{ display:none; }
.bhfb-below_header_row li.menu-item-has-children > a::after{
  content:"";display:inline-block;margin-inline-start:7px;
  width:7px;height:7px;border:2px solid currentColor;
  /* PHYSICAL sides on purpose: the logical pair resolves to bottom+left in RTL,
     which rotates into a sideways chevron instead of one pointing down. */
  border-top:0;border-left:0;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .15s;
}
.bhfb-below_header_row li.menu-item-has-children:hover > a::after,
.bhfb-below_header_row li.menu-item-has-children:focus-within > a::after{
  transform:translateY(1px) rotate(225deg);
}
/* Botiga hides a closed submenu with `opacity:0` alone, at
   `.botiga-dropdown .botiga-dropdown-ul .botiga-dropdown-ul` (0,3,0) — so the
   panel keeps its box and its nine links stay in the tab order, invisible. A
   keyboard user tabbing along the navigation fell into nine links they could
   not see. `display:none` removes them; the selector carries one extra class
   (0,3,1) to outrank Botiga rather than rely on load order. */
.bhfb-below_header_row .botiga-dropdown-ul ul.sub-menu{
  position:absolute;top:100%;inset-inline-start:0;
  display:none;opacity:1;margin:0;padding:10px;
  min-width:460px;
  background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);
  z-index:calc(var(--els-hdr-z) + 5);
  grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;
}
.bhfb-below_header_row li.menu-item-has-children:hover > ul.sub-menu,
.bhfb-below_header_row li.menu-item-has-children:focus-within > ul.sub-menu{
  display:grid;opacity:1;
  /* Botiga animates the panel in with a translate; with display toggling the
     open state instead, the leftover transform only offsets it. */
  transform:none;
}
/* Escape has to be able to close a panel that is only open because the parent
   link still has focus — and focus is exactly where Escape must leave it. CSS
   alone cannot express "open, except dismissed", so header.js sets this class
   and clears it on the next hover or focus move. */
.bhfb-below_header_row li.menu-item-has-children.els-dd-closed:hover > ul.sub-menu,
.bhfb-below_header_row li.menu-item-has-children.els-dd-closed:focus-within > ul.sub-menu{ display:none; }
.bhfb-below_header_row ul.sub-menu > li{ flex:1 1 auto;white-space:normal; }
.bhfb-below_header_row ul.sub-menu > li > a{
  display:flex;align-items:center;
  min-height:var(--tap);padding:6px 12px;
  font-size:15px;font-weight:600;color:var(--ink);
  border-bottom:0;border-radius:var(--r-sm);
}
.bhfb-below_header_row ul.sub-menu > li > a:hover{ background:var(--brand-tint);color:var(--brand); }
/* The category being viewed, inside the الأقسام dropdown. */
.bhfb-below_header_row ul.sub-menu > li.els-nav-current > a{
  background:var(--brand-tint);color:var(--brand);font-weight:700;
}
.bhfb-below_header_row ul.sub-menu > li > a:focus-visible{
  outline:3px solid var(--brand);outline-offset:-3px;
}
/* The trailing "all departments" link closes the panel across both columns. */
.bhfb-below_header_row ul.sub-menu > li:last-child{
  grid-column:1 / -1;margin-block-start:6px;
  border-block-start:1px solid var(--line);padding-block-start:6px;
}
.bhfb-below_header_row ul.sub-menu > li:last-child > a{ color:var(--brand);font-weight:700; }
.bhfb-below_header_row ul.sub-menu > li:last-child > a::after{
  content:"←";margin-inline-start:7px;font-size:15px;line-height:1;
}

/* ---- Mobile drawer: pages first, then the departments ------------------ */
.bhfb-mobile_offcanvas .els-drawer-heading{
  margin:18px 0 2px;padding-block-start:14px;
  border-block-start:2px solid var(--line);
  font-size:13px;font-weight:700;letter-spacing:.6px;
  color:#5F6E88;text-transform:none;
}
/* The plugin renders this item as a <span>, not an <a> — a section label is
   not a destination, and a link that goes nowhere is a wasted tab stop. */
.bhfb-mobile_offcanvas .els-drawer-heading .els-drawer-heading__t{
  display:block;min-height:0;padding:0;font:inherit;color:inherit;
}
/* Botiga draws a hairline between every item; the heading supplies its own
   rule, so the automatic one directly above it would double up. */
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li.els-drawer-heading{ border-top:0; }
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li.els-drawer-dept > a{
  font-weight:500;color:var(--body);
}
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li.els-drawer-dept > a:hover{ color:var(--brand); }
.bhfb-mobile_offcanvas .botiga-dropdown-ul > li.current-menu-item > a{
  color:var(--brand);font-weight:700;
}

/* =========================================================================
   Footer
   ========================================================================= */

/* Every footer colour is declared here, on the footer itself, so nothing falls
   back to --body (#33415C). That inheritance is what produced the unreadable
   dark-blue-on-navy: measured 1.60:1 for the branch addresses and 1.41:1 for
   the payment note, which also carried an inline opacity:.75. */
.site-footer,.bhfb-footer{
  --f-fg:#D3DAE6;      /* 11.7:1 on #16202E */
  --f-muted:#AEB9CB;   /*  7.6:1 on #16202E */
  --f-line:rgba(255,255,255,.13);
  background:var(--ink);color:var(--f-fg);
}
.site-footer *,.bhfb-footer *{ color:inherit; }
.site-footer p,.bhfb-footer p,
.site-footer li,.bhfb-footer li,
.site-footer span,.bhfb-footer span,
.site-footer div,.bhfb-footer div{ color:var(--f-fg); }
/* Inline opacity in widget HTML is the other way text goes faint; secondary
   copy is expressed as a colour that still passes AA. */
.site-footer [style*="opacity"],.bhfb-footer [style*="opacity"]{ opacity:1!important; }
.site-footer .els-muted,.bhfb-footer .els-muted{ color:var(--f-muted);font-size:13.5px; }
.site-footer h2,.site-footer h3,.site-footer .widget-title,
.bhfb-footer h2,.bhfb-footer h3,.bhfb-footer .widget-title{
  color:#fff;font-size:16px;font-weight:700;letter-spacing:.2px;
  margin:0 0 14px;padding-block-end:10px;border-block-end:1px solid var(--f-line);
}
.site-footer a,.bhfb-footer a{ color:var(--f-fg);text-decoration:none; }
.site-footer a:hover,.bhfb-footer a:hover{ color:#fff;text-decoration:underline; }
.site-footer a:focus-visible,.bhfb-footer a:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}
.site-footer li,.bhfb-footer li{ margin-bottom:0;list-style:none; }
.site-footer .menu,.bhfb-footer .menu{ margin:0;padding:0; }
.site-footer .menu a,.bhfb-footer .menu a{
  display:inline-flex;align-items:center;min-height:38px;font-size:15px;
}
.bhfb-footer .bhfb-main_footer_row{ padding-block:38px 30px; }
.bhfb-footer .bhfb-main_footer_row .bhfb-row{ gap:28px; }

/* ---- Trust strip (Footer Builder → Top Row → HTML) ---------------------
   Light ground so the brand red has somewhere legible to sit: on navy it
   measures 3.15:1 and cannot carry normal-size text. */
.bhfb-footer .bhfb-above_footer_row{ background:var(--bg-alt);border-block-end:1px solid var(--line); }
.bhfb-footer .bhfb-above_footer_row *{ color:var(--ink); }
.els-trust{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;padding-block:18px;margin:0;list-style:none;
}
/* `align-items:center` centred each item on its OWN height, so the item whose
   description wraps to two lines sat with its heading higher than the other
   two. Starting them together puts all three icons and all three headings on
   one line, which is what makes the row read as a set. */
.els-trust li{ display:flex;align-items:flex-start;gap:12px;min-width:0; }
.els-trust .els-trust__t{ min-width:0;padding-block-start:1px; }
.els-trust .els-trust__i{
  flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;
  border-radius:var(--pill);background:var(--brand-tint);color:var(--brand);
}
/* Icons are CSS backgrounds, not inline SVG: Botiga runs the customizer HTML
   through wp_kses_post(), which strips <svg> outright and left three empty
   circles on the live page. */
.els-trust .els-trust__i{ background-repeat:no-repeat;background-position:center;background-size:21px 21px; }
.els-trust .els-trust__i--ship{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D42027' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7h11v9H3z'/%3E%3Cpath d='M14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.7'/%3E%3Ccircle cx='17' cy='18' r='1.7'/%3E%3C/svg%3E");
}
.els-trust .els-trust__i--cod{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D42027' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E");
}
.els-trust .els-trust__i--phone{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D42027' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4l2 5-2.5 1.5a12 12 0 0 0 6 6L15 14l5 2v4a1 1 0 0 1-1.1 1A17 17 0 0 1 3 5.1 1 1 0 0 1 4 4z'/%3E%3C/svg%3E");
}
.els-trust b{ display:block;font-size:15px;font-weight:700;color:var(--ink);line-height:1.4; }
.els-trust span{ display:block;font-size:13.5px;color:#4A5670;line-height:1.5; }
.els-trust a{
  color:var(--brand);font-weight:700;font-family:var(--font-lat);
  /* a 96x16 telephone link is below any usable target size */
  display:inline-flex;align-items:center;min-height:32px;padding-inline:2px;
  /* the number is a left-to-right run inside a right-to-left sentence; without
     isolation it can be reordered against its Arabic label */
  unicode-bidi:isolate;direction:ltr;
}
.els-trust bdi{ direction:ltr;unicode-bidi:isolate; }
.els-trust a:hover{ text-decoration:underline; }
.els-trust a:focus-visible{ outline:3px solid var(--brand);outline-offset:2px;border-radius:4px; }

/* ---- Brand column ---- */
.els-fbrand__logo img{ height:52px;width:auto;max-width:100%;
  /* the logo is dark on transparent; on navy it needs to read as white */
  filter:brightness(0) invert(1);opacity:.95; }
.els-fbrand p{ font-size:14px;line-height:1.7;margin:14px 0 16px;color:var(--f-fg); }
/* ---- contact group: Facebook + phone, read as one thing ----------------
   They used to be a lone bordered circle and a much heavier red pill sitting
   apart from each other. Grouping them under one label and giving them the
   same height and the same icon size makes them a pair rather than two
   unrelated floating controls. */
.els-fcontact{ margin:0 0 16px; }
.els-fcontact__label{
  display:block;margin:0 0 10px;
  font-size:13px;font-weight:600;letter-spacing:.01em;color:var(--f-muted);
}
.els-fcontact__row{ display:flex;flex-wrap:wrap;align-items:center;gap:10px; }

.els-fsocial{ display:flex;gap:10px;margin:0 0 16px;padding:0;list-style:none; }
.els-fsocial a,
.els-fcontact__row .els-fsocial__fb{
  width:44px;height:44px;flex:0 0 auto;
  display:grid;place-items:center;
  border-radius:var(--pill);border:1px solid var(--f-line);color:var(--f-fg);
  transition:background-color .15s,border-color .15s,transform .15s;
}
.els-fsocial a:hover,
.els-fcontact__row .els-fsocial__fb:hover{
  background:var(--brand);border-color:var(--brand);color:#fff;text-decoration:none;
}
.els-fsocial a:active,
.els-fcontact__row .els-fsocial__fb:active{ transform:translateY(1px); }
.els-fsocial a:focus-visible,
.els-fcontact__row .els-fsocial__fb:focus-visible{
  outline:3px solid #fff;outline-offset:2px;
}
.els-fsocial a > span,
.els-fcontact__row .els-fsocial__fb > span{
  width:22px;height:22px;display:block;
  background-repeat:no-repeat;background-position:center;background-size:22px 22px;
}
/* Facebook's own glyph — the disc with the cut-out "f" — instead of the thin
   outline letter, which read as a plain typed "f" at 20px. */
.els-fsocial__fb > span{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23D3DAE6'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}
.els-fsocial__fb:hover > span,
.els-fsocial__fb:focus-visible > span{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FFFFFF'%3E%3Cpath d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.1 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.96.93-1.96 1.89v2.25h3.33l-.53 3.49h-2.8V24C19.61 23.1 24 18.1 24 12.07z'/%3E%3C/svg%3E");
}
.els-fcall__i{
  width:22px;height:22px;display:block;flex:0 0 auto;
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h4l2 5-2.5 1.5a12 12 0 0 0 6 6L15 14l5 2v4a1 1 0 0 1-1.1 1A17 17 0 0 1 3 5.1 1 1 0 0 1 4 4z'/%3E%3C/svg%3E");
}
.els-fcall{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:44px;padding-inline:16px;
  border-radius:var(--pill);background:var(--brand);color:#fff!important;
  font-weight:700;font-size:15px;line-height:1;
  border:1px solid var(--brand);
  transition:background-color .15s,border-color .15s,transform .15s;
}
.els-fcall:hover{ background:#E8353C;border-color:#E8353C;color:#fff!important;text-decoration:none; }
.els-fcall:active{ transform:translateY(1px); }
.els-fcall:focus-visible{ outline:3px solid #fff;outline-offset:2px; }
.els-fcall bdi{
  font-family:var(--font-lat);color:#fff!important;
  direction:ltr;unicode-bidi:isolate;
}
.els-fcall span{ font-family:var(--font-lat);color:#fff!important; }

/* ---- Branches ---- */
.els-branches{ list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.6; }
.els-branches li{ margin-bottom:14px;padding-inline-start:0; }
.els-branches strong{ color:#fff;display:block;font-size:14.5px;margin-bottom:2px; }
.els-branches .els-branches__addr{ display:block;color:var(--f-muted);margin-bottom:3px; }
.els-branches a{
  color:var(--accent);font-weight:700;font-family:var(--font-lat);
  display:inline-flex;align-items:center;min-height:34px;
}
.els-branches a:hover{ color:#FFC760; }

/* ---- Bottom bar ---- */
.bhfb-footer .bhfb-below_footer_row{
  background:#0E1622;border-block-start:1px solid var(--f-line);
  padding-block:0;min-height:0;
}
.bhfb-footer .bhfb-below_footer_row .bhfb-row,
.bhfb-footer .bhfb-below_footer_row .bhfb-column{ min-height:0; }
.bhfb-footer .botiga-credits{
  padding-block:16px;font-size:13.5px;color:var(--f-muted);text-align:center;
}

/* ---- Footer breakpoints ---- */
@media (min-width:768px) and (max-width:1023.98px){
  .els-trust{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* Two balanced columns on tablet rather than four narrow ones or a single
     1,281px stack. Botiga's row is a flex container, so the columns are given
     an explicit basis instead of relying on its four-up layout. */
  .bhfb-footer .bhfb-main_footer_row .bhfb-row{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 28px;
  }
  .bhfb-footer .bhfb-main_footer_row .bhfb-row > .bhfb-column{
    width:auto;max-width:none;flex:0 1 auto;min-width:0;
  }
}
@media (max-width:767.98px){
  .els-trust{ grid-template-columns:1fr; }
}
@media (max-width:767.98px){
  .els-trust{ grid-template-columns:1fr;gap:10px;padding-block:12px; }
  /* The controls keep their full 44px targets; only the row wraps. */
  .els-fcontact__row{ gap:10px; }
  .els-fcall{ flex:1 1 auto;max-width:220px; }
  .els-trust span{ font-size:12.5px;line-height:1.45; }
  .els-trust b{ font-size:14px; }
  .els-trust .els-trust__i{ width:34px;height:34px; }
  .els-trust .els-trust__i svg{ width:18px;height:18px; }
  .bhfb-footer .bhfb-main_footer_row{ padding-block:18px 12px; }
  .bhfb-footer .bhfb-main_footer_row .bhfb-row{ gap:0; }
  .bhfb-footer .footer-widget{ padding-block:0; }
  .bhfb-footer .bhfb-column + .bhfb-column .footer-widget{
    border-block-start:1px solid var(--f-line);
  }
  .site-footer h2,.bhfb-footer h2,.bhfb-footer .widget-title{
    font-size:15px;margin:0;padding:0;border:0;
  }
  .bhfb-footer .menu{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px; }
  .bhfb-footer .menu > li{ min-width:0; }
  .bhfb-footer .menu a{ min-height:36px;font-size:14.5px; }
  .els-branches{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
  .els-branches li{ margin-bottom:0;min-width:0; }
  .els-fbrand p{ margin:8px 0 10px;font-size:13.5px;line-height:1.6; }
  .els-fbrand__logo img{ height:40px; }
  .els-fsocial{ margin-bottom:10px; }
  .bhfb-footer .botiga-credits{ padding-block:12px;font-size:13px; }
}

/* ---- Mobile footer accordions -----------------------------------------
   Compact formatting alone still left the footer 1,471px tall at 390px: the
   brand block, the trust strip and 21 links stacked. The three list sections
   collapse instead.

   The markup ships EXPANDED and only collapses once footer.js has added the
   `els-footer-accordions` body class — so with script unavailable the footer
   is exactly what it was, fully readable, rather than three headings whose
   contents can never be opened.
   ---------------------------------------------------------------------- */
.els-facc__btn{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  width:100%;min-height:48px;
  margin:0;padding:0;
  background:none;border:0;
  font:700 15px/1.35 var(--font-ar);color:#fff;
  text-align:start;cursor:pointer;
}
.els-facc__btn::after{
  content:"";flex:0 0 auto;
  width:9px;height:9px;
  border:2px solid currentColor;border-top:0;border-left:0;
  transform:translateY(-3px) rotate(45deg);
  transition:transform .18s ease;
  opacity:.75;
}
.els-facc__btn:hover{ color:#fff; }
.els-facc__btn:focus-visible{ outline:3px solid var(--accent);outline-offset:3px;border-radius:4px; }
/* Above the breakpoint the button is inert decoration: no pointer, no arrow. */
@media (min-width:768px){
  .els-facc__btn{ cursor:default;min-height:0; }
  .els-facc__btn::after{ display:none; }
}

@media (max-width:767.98px){
  body.els-footer-accordions .bhfb-footer .footer-widget .widget{ padding-block:4px; }
  /* Collapse only what the script has taken charge of. */
  body.els-footer-accordions .bhfb-footer .footer-widget .widget:not(.is-open) > nav,
  body.els-footer-accordions .bhfb-footer .footer-widget .widget:not(.is-open) > div > nav,
  body.els-footer-accordions .bhfb-footer .footer-widget .widget:not(.is-open) .els-branches{
    display:none;
  }
  body.els-footer-accordions .bhfb-footer .footer-widget .widget.is-open > nav,
  body.els-footer-accordions .bhfb-footer .footer-widget .widget.is-open .els-branches{
    padding-block-start:6px;
  }
  body.els-footer-accordions .els-facc__btn[aria-expanded="true"]::after{
    transform:translateY(2px) rotate(225deg);
  }
  /* A collapsed row is a 48px tap target and nothing more. */
  body.els-footer-accordions .bhfb-footer .bhfb-column + .bhfb-column .footer-widget{
    border-block-start:1px solid var(--f-line);
  }
}
/* Below 360px two branch cards leave ~150px each, which breaks the addresses
   into ragged four-line blocks; one column reads better there. */
@media (max-width:359.98px){
  .els-branches{ grid-template-columns:1fr; }
  .bhfb-footer .menu{ grid-template-columns:1fr; }
}

/* ---- Elementor section containment -------------------------------------
   `من نحن` (page 15320) carries a legacy Elementor section with a hard
   `width:767px`, so at 320 and 390px the whole page scrolled sideways — the
   document measured 767px inside a 390px viewport, with the content starting
   at x = -377. That is page content, not a Phase 5 change, but the page is now
   linked from the primary navigation on every page of the site.

   Clamping to the container cannot shrink a correct layout: Elementor's own
   full-width sections use `width:100%`, never more. Verified after this rule:
   no width change on the homepage, blog, contact, shop or any category at
   320/390/768/1024/1366.
   ---------------------------------------------------------------------- */
/* The root cause is one step further up: on the Elementor canvas template the
   `.elementor` root is a direct child of Botiga's `.row.main-row`, which is a
   flex container. As a flex item it keeps `min-width:auto`, so it refuses to
   shrink below its widest fixed-width descendant and grows the whole page
   instead of clamping it. `min-width:0` lets it shrink; the max-widths below
   then contain the descendants. */
.row.main-row > .elementor,
.content-wrapper .elementor{ min-width:0; }
.elementor-section,
.elementor-container,
.elementor-widget-wrap,
.elementor-background-overlay{ max-width:100%; }


/* =========================================================================
   Account — the signed-out card
   =========================================================================
   WooCommerce renders the login form as a plain block, so it inherited the
   full 1250px content column: a two-field form measured 1250 × 570px with the
   label at one end of the row and the input stretching across the whole page.
   The registration form is disabled, so there is no second column to justify
   that width.

   Everything here is scoped to `body.woocommerce-account:not(.logged-in)` —
   the signed-out account views only. The signed-in dashboard, its navigation,
   orders, addresses and every other WooCommerce page are untouched, and no
   WooCommerce template is overridden: this is presentation only.
   ========================================================================= */

body.woocommerce-account:not(.logged-in) .entry-header,
body.woocommerce-account:not(.logged-in) .page-header{
  padding-block:26px 0;text-align:center;
}
body.woocommerce-account:not(.logged-in) .entry-title,
body.woocommerce-account:not(.logged-in) .page-title{
  font-size:clamp(24px,3vw,32px);margin:0;text-align:center;
}
body.woocommerce-account:not(.logged-in) .entry-content{ margin-top:20px; }
/* Botiga puts an 80px top margin on the content wrapper, which on a page whose
   whole content is a 440px card left ~110px of empty screen above the heading.
   Same treatment the cart and checkout headers already get. */
body.woocommerce-account:not(.logged-in) .container.content-wrapper{ margin-top:28px; }

/* The card itself. `.woocommerce` is the wrapper WooCommerce always emits, and
   it holds both the "تسجيل الدخول" heading and the form, so the heading sits
   inside the card rather than floating above it at the far edge of the page. */
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce{
  width:100%;
  max-width:440px;
  margin:0 auto 48px;
  padding:28px 28px 24px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-2);
  box-sizing:border-box;
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce > h2{
  margin:0 0 4px;
  font-size:20px;font-weight:700;color:var(--ink);
  text-align:center;
}

/* ---- forms: login, lost password, and the reset form ----
   Every rule below is confined to `.entry-content > .woocommerce`, the card.
   An earlier version scoped them to a bare `form` inside the account body,
   which also matched the HEADER SEARCH form: its submit button inherited
   `display:block;width:100%;background:var(--brand)` and rendered as a solid
   949px red bar over the whole search field. */
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce form.woocommerce-form-login,
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce form.woocommerce-ResetPassword{
  margin:0;padding:0;border:0;
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce form > p{
  margin:0 0 16px;padding:0;
}
/* The lost-password form puts its single field in a 50%-wide `form-row-first`
   column, which inside a 440px card left a 248px input floating in the middle.
   Both forms are single-column here. */
body.woocommerce-account:not(.logged-in) .form-row-first,
body.woocommerce-account:not(.logged-in) .form-row-last,
body.woocommerce-account:not(.logged-in) .form-row-wide{
  width:100%;float:none;margin-inline:0;
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce label{
  display:block;margin:0 0 6px;
  font-size:14px;font-weight:600;color:var(--ink);
  text-align:start;
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce input.input-text{
  width:100%;box-sizing:border-box;
  min-height:48px;padding:10px 14px;
  font-size:15px;
  border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;color:var(--ink);
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce input.input-text:focus-visible{
  outline:3px solid var(--brand);outline-offset:1px;border-color:var(--brand);
}
/* WooCommerce's password reveal is a button overlaid on the field's inline-end.
   It must keep clear of the text and stay a real 44px target. */
body.woocommerce-account:not(.logged-in) .password-input{
  display:block;position:relative;width:100%;
}
body.woocommerce-account:not(.logged-in) .password-input input.input-text{
  padding-inline-end:48px;
}
body.woocommerce-account:not(.logged-in) .show-password-input{
  position:absolute;top:0;bottom:0;inset-inline-end:0;
  /* WooCommerce ships this control with `margin-left:-48px` to pull it back over
     a statically-positioned field. Once it is absolutely positioned that margin
     is pure offset — it pushed the button 17px past the viewport's inline edge
     and gave a 390px phone a 407px scroll width. */
  margin:0;
  width:44px;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;color:#5F6E88;
}
body.woocommerce-account:not(.logged-in) .show-password-input:focus-visible{
  outline:3px solid var(--brand);outline-offset:-3px;border-radius:var(--r-sm);
}

/* Remember-me and the submit button share the row WooCommerce gives them. */
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme{
  display:flex;align-items:center;gap:8px;
  margin:0 0 16px;
  font-size:14px;font-weight:400;color:var(--body);
  cursor:pointer;
}
body.woocommerce-account:not(.logged-in) .woocommerce-form-login__rememberme input{
  width:18px;height:18px;margin:0;flex:0 0 auto;accent-color:var(--brand);
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce button[type=submit]{
  display:block;width:100%;
  min-height:48px;margin:0;padding:0 16px;
  font:700 15px/1.2 var(--font-ar);
  color:#fff;background:var(--brand);
  border:2px solid var(--brand);border-radius:var(--pill);
  cursor:pointer;
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce button[type=submit]:hover{
  background:var(--brand-dark);border-color:var(--brand-dark);
}
body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce button[type=submit]:focus-visible{
  outline:3px solid var(--ink);outline-offset:2px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword{
  margin:16px 0 0;text-align:center;font-size:14px;
}
body.woocommerce-account:not(.logged-in) .woocommerce-LostPassword a{
  color:var(--brand);text-decoration:underline;text-underline-offset:3px;
}

/* Validation errors belong inside the card, above the fields, not stranded at
   the top of a 1250px column. */
body.woocommerce-account:not(.logged-in) .woocommerce-notices-wrapper{ margin:0; }
body.woocommerce-account:not(.logged-in) .woocommerce-error,
body.woocommerce-account:not(.logged-in) .woocommerce-message,
body.woocommerce-account:not(.logged-in) .woocommerce-info{
  margin:0 0 18px;padding:12px 14px;
  font-size:14px;line-height:1.6;
  border-radius:var(--r-sm);
  list-style:none;
}
body.woocommerce-account:not(.logged-in) .woocommerce-error{
  background:#FDECEC;border:1px solid #E9A8A8;color:#8A1C1C;
}
body.woocommerce-account:not(.logged-in) .woocommerce-error li{ margin:0; }

/* Full width and a little less padding where the screen is narrow — a card with
   side margins on a 320px phone wastes the only space there is. */
@media (max-width:479.98px){
  body.woocommerce-account:not(.logged-in) .entry-content > .woocommerce{
    max-width:none;margin-inline:0;
    padding:22px 16px 20px;
    border-inline:0;border-radius:0;box-shadow:none;
  }
}

/* =========================================================================
   Catalogue layout — one aligned top row, and a filter column that stays put
   =========================================================================
   Two separate problems, both measured on the shop archive at 1836px:

   1. `header.woocommerce-products-header` renders on every catalogue page and
      is EMPTY unless a filter chip is showing — 26px of padding plus a 25px
      gap. That 51px sat above the sorting toolbar, so the toolbar started at
      y=439 while the sidebar's "تصفية المنتجات" heading started at y=388.
      Collapsing the empty header removes the dead space and puts both columns
      on the same line.

   2. When chips ARE showing the header is real content, so the toolbar moves
      down again. Rather than guess a margin, header.js measures the distance
      from the main column's top to the toolbar's top and writes
      `--els-cat-offset`; the sidebar takes the same offset. Filtered or not,
      the two columns start on the same line.
   ========================================================================= */

.woocommerce-products-header:not(:has(h1)):not(:has(p)):not(:has(.wpc-filter-chips-list > li)){
  display:none;
}

@media (min-width:1024px){
  .archive.woocommerce .sidebar-wrapper,
  .woocommerce-page .sidebar-wrapper{
    padding-block-start:var(--els-cat-offset, 0px);
  }

  /* ---- sticky filter column ------------------------------------------
     `position:sticky` inside `aside#secondary`, which is as tall as the
     catalogue row — so the column stops at the bottom of that row on its own
     and can never reach the footer. `top` is the real measured header height
     plus a deliberate 12px gap, so it parks under the pinned header rather
     than sliding beneath them.

     The filter content measures 1997px against a 1147px viewport, so the
     column also gets a max-height and scrolls its own content. `contain`
     stops that scroll chaining into the document, which is what would
     otherwise produce two competing scrollbars. */
  .archive.woocommerce .sidebar-wrapper,
  .woocommerce-page .sidebar-wrapper{
    position:sticky;
    top:calc(var(--els-admin-bar) + var(--els-hdr-h) + 12px);
    max-height:calc(100vh - var(--els-admin-bar) - var(--els-hdr-h) - 24px);
    overflow-y:auto;
    /* `overflow-y:auto` alone makes the x axis `auto` too, and the column
       overflowed by exactly 2px — enough for a spurious horizontal scrollbar
       under the filters. There is nothing to scroll sideways. */
    overflow-x:hidden;
    /* room for a focus ring, which `overflow-x:hidden` would otherwise clip */
    padding-inline:3px;
    overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .archive.woocommerce .sidebar-wrapper::-webkit-scrollbar{ width:8px; }
  .archive.woocommerce .sidebar-wrapper::-webkit-scrollbar-thumb,
  .woocommerce-page .sidebar-wrapper::-webkit-scrollbar-thumb{
    background:var(--line);border-radius:8px;
  }
  /* The heading stays put while the options beneath it scroll. */
  .archive.woocommerce .sidebar-wrapper > section:first-of-type > .widget-title,
  .woocommerce-page .sidebar-wrapper > section:first-of-type > .widget-title{
    position:sticky;top:0;z-index:2;
    background:#fff;margin:0;padding-block:2px 8px;
  }
}

/* Below the desktop breakpoint the filters live in the drawer, which must
   never inherit any of the above: a sticky, height-capped, self-scrolling
   drawer is exactly the "two competing scrollbars" case. */
@media (max-width:1023.98px){
  .sidebar-wrapper{
    position:static;max-height:none;overflow:visible;
    padding-block-start:0;
  }
}

/* The gap between the page title and the catalogue controls was mostly the
   empty header above; what is left is tightened to match the cart and
   checkout headers. */
.archive.woocommerce .woocommerce-products-header,
.woocommerce-page .woocommerce-products-header{ padding-block-start:0; }


@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}