/* =========================================================
   Handmade Marketplace — Electro integration tweaks
   Keep changes minimal to preserve Electro's design.
   ========================================================= */

html[dir="rtl"] body {
  direction: rtl;
  text-align: right;
}

/* Fix Bootstrap breadcrumb divider placement in RTL */
html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before{
  float: right;
}

/* Dropdown alignment (Bootstrap defaults to left) */
html[dir="rtl"] .dropdown-menu{
  text-align: right;
}

/* Align navbar brand + icons in RTL */
html[dir="rtl"] .navbar .navbar-nav{
  text-align: right;
}

/* Product cards: ensure title doesn't overflow */
.product-item .h4, .product-item h4{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Use existing placeholder SVG sizes nicely */
.hm-img-cover{
  object-fit: cover;
}

/* Make quantity inputs usable with server-side forms */
.quantity input[type="number"], .quantity input[type="text"]{
  min-width: 44px;
}

/* Alert container spacing */
.alert{ border-radius: 14px; }

/* Ensure footer links readable */
.footer .footer-item a{ cursor: pointer; }


/* Hard-disable Electro spinner overlay */
#spinner{display:none !important; opacity:0 !important; visibility:hidden !important;}


/* Force-disable Electro preloader (safety) */
#spinner{display:none !important; opacity:0 !important; visibility:hidden !important;}
/* =========================================================
   HM Responsive Pack (Full) — paste at END of hm-app.css
   ========================================================= */

/* A) Global anti-overflow + sensible defaults */
html{ -webkit-text-size-adjust:100%; }
body{
  overflow-x:hidden;
  font-size: clamp(14px, .9vw + 11px, 16px);
  line-height: 1.65;
}
img, video, iframe{ max-width:100%; height:auto; }
*{ max-width:100%; }
:root{
  --hm-container: 1240px;
  --hm-gutter: clamp(10px, 2.2vw, 18px);
  --hm-radius: 14px;
}

/* Containers */
.container, .container-fluid{
  padding-left: var(--hm-gutter) !important;
  padding-right: var(--hm-gutter) !important;
}
@media (min-width: 1400px){
  .container{ max-width: var(--hm-container) !important; }
}

/* Typography scale */
h1,.h1{ font-size: clamp(22px, 2.2vw + 12px, 40px); line-height:1.15; }
h2,.h2{ font-size: clamp(20px, 1.8vw + 10px, 32px); line-height:1.2; }
h3,.h3{ font-size: clamp(18px, 1.2vw + 10px, 26px); line-height:1.25; }
.display-6{ font-size: clamp(20px, 2vw + 10px, 40px) !important; line-height:1.15; }

/* Section spacing (avoid huge padding on desktop) */
section, .py-5{
  padding-top: clamp(22px, 4vw, 56px) !important;
  padding-bottom: clamp(22px, 4vw, 56px) !important;
}
.my-5{
  margin-top: clamp(16px, 3vw, 48px) !important;
  margin-bottom: clamp(16px, 3vw, 48px) !important;
}

/* Buttons: not oversized */
.btn{
  padding: .55rem .95rem;
  font-size: clamp(13px, .45vw + 11px, 15px);
  border-radius: 12px;
}
.btn-lg{ padding: .65rem 1.05rem; }
.btn-lg-square{ width: 48px; height: 48px; }
.btn-md-square{ width: 42px; height: 42px; }
.btn-sm-square{ width: 34px; height: 34px; }

/* Forms: prevent iOS zoom */
input, select, textarea{ font-size:16px; }
@media (max-width: 576px){
  .form-control, .form-select{ padding: .6rem .8rem; }
}

/* Cards radius */
.card, .rounded, .rounded-3, .rounded-4{ border-radius: var(--hm-radius) !important; }

/* Tables always scroll safely */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* B) Navbar / Header sizing */
.nav-bar .navbar .navbar-nav .nav-link{
  font-size: clamp(14px, .55vw + 12px, 16px) !important;
  padding: 14px 12px !important;
}
@media (max-width: 992px){
  .nav-bar .navbar .navbar-nav .nav-link{ padding: 10px 0 !important; }
}

/* C) Hero / Carousel: clamp height (key for “not ضخمة”) */
.header-carousel .owl-item img,
.carousel .carousel-header-banner img,
.carousel .carousel-header-banner picture img{
  width:100%;
  object-fit:cover;
  height: clamp(220px, 34vw, 520px);
}

/* Carousel arrows not huge */
.header-carousel.owl-carousel .owl-nav .owl-prev,
.header-carousel.owl-carousel .owl-nav .owl-next{
  width: 42px !important;
  height: 42px !important;
  top: auto !important;
  bottom: 14px !important;
  border-radius: 999px !important;
}
.header-carousel.owl-carousel .owl-nav .owl-prev{ right: 72px !important; }
.header-carousel.owl-carousel .owl-nav .owl-next{ right: 18px !important; }

@media (max-width: 576px){
  .header-carousel .owl-item img{ height: clamp(220px, 60vw, 360px); }
  .header-carousel.owl-carousel .owl-nav .owl-prev,
  .header-carousel.owl-carousel .owl-nav .owl-next{
    width: 38px !important;
    height: 38px !important;
    bottom: 10px !important;
  }
  .header-carousel.owl-carousel .owl-nav .owl-prev{ right: 62px !important; }
  .header-carousel.owl-carousel .owl-nav .owl-next{ right: 14px !important; }
}

/* Page header not too tall */
.page-header{
  padding: clamp(54px, 10vw, 100px) 0 !important;
  background-attachment: scroll !important;
}

/* D) Product cards: fix hover behavior on touch + keep compact */
.product .product-item,
.related-product .related-carousel .related-item{
  border-radius: var(--hm-radius);
}

/* Badges smaller */
.product .product-item .product-item-inner .product-item-inner-item .product-new,
.product .product-item .product-item-inner .product-item-inner-item .product-sale,
.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-new,
.related-product .related-carousel .related-item .related-item-inner .related-item-inner-item .related-sale{
  width: 48px !important;
  height: 48px !important;
  border-radius: 999px !important;
  top: 14px !important;
  right: 14px !important;
  font-size: 12px;
}

@media (max-width: 992px){
  /* Disable “slide-up add-to-cart” that breaks layout on touch */
  .product .product-item .product-item-add,
  .related-product .related-carousel .related-item .related-item-add{
    position: static !important;
    opacity: 1 !important;
    margin: 10px 0 0 !important;
  }
  .product .product-item:hover .product-item-add,
  .related-product .related-carousel .related-item:hover .related-item-add{
    margin-bottom: 0 !important;
  }
}

/* E) Product list / single product gallery thumbs */
.single-product .single-carousel .owl-dots{
  height:auto !important;
  margin-top:8px !important;
}
.single-product .single-carousel .owl-dots .owl-dot img{
  width: 54px !important;
  height: 54px !important;
  margin-right: 10px !important;
}
.single-product .single-carousel .owl-dots .owl-dot.active img{
  width: 68px !important;
  height: 68px !important;
}

/* F) Footer columns stack nicely */
@media (max-width: 768px){
  .footer .row > [class*="col-"]{ margin-bottom: 16px; }
}

/* G) Safety: prevent any fixed widths from blowing mobile */
[class*="w-"], .w-100{ max-width:100% !important; }

/* =========================================================
   Header Pro + Slider Height Fix — paste at END of hm-app.css
   ========================================================= */

:root{
  --hm-gutter: clamp(10px, 2.2vw, 18px);
  --hm-header-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* Sticky header wrapper */
.hm-site-header{
  position: sticky;
  top: 0;
  z-index: 1100;
  background: #fff;
  box-shadow: var(--hm-header-shadow);
}

/* Desktop topbar: smaller */
.hm-topbar{
  padding-left: var(--hm-gutter) !important;
  padding-right: var(--hm-gutter) !important;
}
.hm-topbar .row{ min-height: 42px; }
.hm-topbar a{ font-size: 13px; }

/* Desktop main header row: remove huge py-4/px-5 effect */
.hm-head{
  padding: 10px var(--hm-gutter);
}
@media (min-width: 992px){
  .hm-head{ padding-top: 10px; padding-bottom: 10px; }
  /* Smaller logo */
  .hm-head .navbar-brand h1{
    font-size: 30px !important;   /* بدل display-5 */
    line-height: 1.1;
    margin: 0 !important;
  }
  .hm-head .navbar-brand i{ font-size: 26px; }
}

/* Search sizing (desktop + mobile) */
.hm-cat-select{
  max-width: 170px;
}
.hm-search-input{
  padding: .6rem .9rem !important;
  height: 44px;
}
.hm-search-btn{
  height: 44px;
  padding: 0 16px !important;
}

/* Icons compact */
.hm-head .fa-heart,
.hm-head .fa-shopping-cart{
  font-size: 22px !important; /* بدل fs-3 الكبير */
}

/* Navbar spacing smaller (override style.css 18px/17px) */
@media (min-width: 992px){
  .nav-bar .navbar .navbar-nav .nav-link{
    padding: 12px 12px !important;
    font-size: 15px !important;
  }
}

/* Mobile navbar head */
.hm-navhead{ padding: 10px 0; }
.hm-brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color:#0d6efd;
  font-size: 18px;
}
.hm-brand-mini i{
  color:#fd7e14;
  font-size: 18px;
}
.hm-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  color: #222;
  text-decoration:none;
  position: relative;
}
.hm-icon-btn .badge{
  position:absolute;
  top:-6px;
  left:-6px;
  font-size: 11px;
  padding: 4px 7px;
}
.hm-toggler{
  width: 42px;
  height: 40px;
  border-radius: 12px !important;
  box-shadow:none !important;
}

/* Mobile search row */
.hm-mobile-search{
  padding: 10px 0 12px;
  border-top: 1px solid rgba(0,0,0,.06);
  background: #fff;
}

/* =========================
   Slider height fix (Desktop + Mobile)
   ========================= */

/* cover most Electro structures */
.header-carousel,
.header-carousel .owl-stage-outer{
  overflow:hidden;
}

@media (min-width: 992px){
  .header-carousel .owl-item,
  .header-carousel .owl-item .carousel-header-banner,
  .header-carousel .owl-item img,
  .carousel .carousel-header-banner,
  .carousel .carousel-header-banner img{
    height: 520px !important;
  }
}

@media (max-width: 991.98px){
  .header-carousel .owl-item,
  .header-carousel .owl-item .carousel-header-banner,
  .header-carousel .owl-item img,
  .carousel .carousel-header-banner,
  .carousel .carousel-header-banner img{
    height: 340px !important;
  }
}

.header-carousel .owl-item img,
.carousel .carousel-header-banner img{
  width:100% !important;
  object-fit:cover !important;
}

/* Optional: arrows smaller */
.header-carousel.owl-carousel .owl-nav .owl-prev,
.header-carousel.owl-carousel .owl-nav .owl-next{
  width: 42px !important;
  height: 42px !important;
}

/* ================================
   Bootstrap Carousel (#carouselId)
   ================================ */

/* define heights */
:root{
  --hm-hero-h-desktop: 520px;
  --hm-hero-h-tablet:  420px;
  --hm-hero-h-mobile:  340px;
}

#carouselId,
#carouselId .carousel-inner,
#carouselId .carousel-item{
  height: var(--hm-hero-h-desktop);
}

#carouselId .carousel-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* tablet */
@media (max-width: 991.98px){
  #carouselId,
  #carouselId .carousel-inner,
  #carouselId .carousel-item{
    height: var(--hm-hero-h-tablet);
  }
}

/* mobile */
@media (max-width: 575.98px){
  #carouselId,
  #carouselId .carousel-inner,
  #carouselId .carousel-item{
    height: var(--hm-hero-h-mobile);
  }
}

/* caption: center + readable */
#carouselId .carousel-caption{
  inset: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 16px;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.35) 100%);
}

#carouselId .carousel-content{
  max-width: 900px;
}

/* responsive text (your h1 is display-1 -> too big on desktop) */
#carouselId h4{
  font-size: clamp(14px, 1.2vw + 10px, 22px);
  margin-bottom: 10px !important;
}
#carouselId h1,
#carouselId .display-1{
  font-size: clamp(20px, 2.2vw + 14px, 52px) !important;
  line-height: 1.15;
  margin-bottom: 16px !important;
}

/* button not oversized */
#carouselId .btn{
  padding: .6rem 1.2rem !important;
  font-size: 15px;
}

/* controls smaller + not annoying */
#carouselId .carousel-control-prev,
#carouselId .carousel-control-next{
  width: 56px;
}
#carouselId .carousel-control-prev-icon,
#carouselId .carousel-control-next-icon{
  width: 2.2rem;
  height: 2.2rem;
}
/* =========================================================
   HM Header PRO v3 (Sticky Store Header + Chips)
   Paste at END of hm-app.css
   ========================================================= */

:root{
  --hm-brand: #0d6efd;   /* primary */
  --hm-accent:#fd7e14;   /* orange */
  --hm-bg: rgba(255,255,255,.92);
  --hm-border: rgba(0,0,0,.07);
  --hm-shadow: 0 14px 40px rgba(0,0,0,.10);
  --hm-radius: 16px;
  --hm-gutter: clamp(10px, 2.2vw, 18px);
}

/* Sticky header base */
#hmHeader.hm-site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--hm-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hm-border);
}

/* Accent gradient line */
#hmHeader.hm-site-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height: 3px;
  background: linear-gradient(90deg, var(--hm-accent), var(--hm-brand));
}

/* Smooth transitions */
#hmHeader *{ transition: all .2s ease; }

/* Desktop topbar */
.hm-topbar{
  padding-left: var(--hm-gutter) !important;
  padding-right: var(--hm-gutter) !important;
}
.hm-topbar .row{ min-height: 42px; }
.hm-topbar a, .hm-topbar small{ font-size: 13px; }

/* Desktop head row */
.hm-head{
  padding: 10px var(--hm-gutter);
}

/* Brand sizing */
@media (min-width: 992px){
  .hm-head .navbar-brand h1{
    font-size: 30px !important;
    line-height: 1.1;
    margin: 0 !important;
    font-weight: 900;
    letter-spacing: .2px;
  }
  .hm-head .navbar-brand i{ font-size: 24px; }
}

/* Desktop icons: make them premium */
.hm-head .fa-heart,
.hm-head .fa-shopping-cart{
  font-size: 20px !important;
}
.hm-head .text-start small{ font-size: 12px; }

/* Make search bar look premium (pill + shadow) */
.hm-head .input-group,
.hm-mobile-search .input-group{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}

/* Remove ugly borders inside */
.hm-head .input-group .form-select,
.hm-head .input-group .form-control,
.hm-mobile-search .input-group .form-select,
.hm-mobile-search .input-group .form-control{
  border: 0 !important;
  box-shadow: none !important;
}

/* Select width */
.hm-cat-select{ max-width: 190px; }

/* Input height */
.hm-search-input{
  height: 46px;
  padding: .65rem 1rem !important;
  font-size: 15px;
}
.hm-search-btn{
  height: 46px;
  padding: 0 16px !important;
  border: 0 !important;
  background: linear-gradient(135deg, var(--hm-brand), #1d8bff) !important;
}
.hm-search-btn:hover{
  filter: brightness(.95);
}

/* Navbar tweaks */
.nav-bar{ background: transparent !important; }
.nav-bar .navbar{ padding: .35rem 0; }
@media (min-width: 992px){
  .nav-bar .navbar .navbar-nav .nav-link{
    padding: 12px 12px !important;
    font-size: 15px !important;
    position: relative;
    font-weight: 700;
  }
  /* Underline hover like big stores */
  .nav-bar .navbar .navbar-nav .nav-link::after{
    content:"";
    position:absolute;
    right: 10px; left: 10px; bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--hm-accent), transparent);
    opacity: 0;
    transform: translateY(4px);
  }
  .nav-bar .navbar .navbar-nav .nav-link:hover::after,
  .nav-bar .navbar .navbar-nav .nav-link.active::after{
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile header row (your class is hm-navhead) */
.hm-navhead{
  padding: 10px 0;
}
.hm-brand-mini{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  color: var(--hm-brand);
  font-size: 18px;
}
.hm-brand-mini i{ color: var(--hm-accent); font-size: 18px; }

/* Icon pills */
.hm-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
  color: #222;
  text-decoration:none;
  position: relative;
}
.hm-icon-btn:hover{ background: rgba(0,0,0,.08); transform: translateY(-1px); }
.hm-icon-btn i{ font-size: 18px; }

/* Badge inside icon btn (you currently use .badge) */
.hm-icon-btn .badge{
  position:absolute;
  top:-7px;
  left:-7px;
  font-size: 11px;
  padding: 4px 7px;
  border-radius: 999px;
}

/* Toggler */
.hm-toggler{
  width: 46px;
  height: 42px;
  border-radius: 14px !important;
  background: rgba(0,0,0,.05) !important;
  border: 0 !important;
}
.hm-toggler:hover{ background: rgba(0,0,0,.08) !important; }

/* Mobile search row */
.hm-mobile-search{
  padding: 10px 0 12px;
  background: transparent;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Collapsed menu looks like a panel */
@media (max-width: 991.98px){
  .navbar-collapse{
    background:#fff;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--hm-radius);
    padding: 10px 12px;
    margin-top: 10px;
    box-shadow: 0 16px 40px rgba(0,0,0,.10);
  }
  .navbar .dropdown-menu{
    border-radius: var(--hm-radius);
  }
}

/* Dropdown scroll if long */
.navbar .dropdown-menu{
  max-height: 60vh;
  overflow: auto;
}

/* Chips bar */
.hm-chipbar{
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.88);
}
.hm-chiprow{
  display:flex;
  gap:10px;
  overflow:auto;
  padding: 10px 0;
  scrollbar-width: none;
}
.hm-chiprow::-webkit-scrollbar{ display:none; }
.hm-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space: nowrap;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color:#222;
  text-decoration:none;
  font-weight: 700;
  font-size: 14px;
}
.hm-chip i{ color: var(--hm-accent); }
.hm-chip:hover{ background: rgba(0,0,0,.07); transform: translateY(-1px); }
.hm-chip.active{
  background: linear-gradient(135deg, rgba(13,110,253,.14), rgba(253,126,20,.12));
  border-color: rgba(13,110,253,.25);
}
.hm-chipcount{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(13,110,253,.12);
  color: var(--hm-brand);
  font-size: 12px;
  font-weight: 800;
}

/* “Scrolled” state (JS will toggle this) */
#hmHeader.hm-scrolled{
  background: rgba(255,255,255,.98);
  box-shadow: var(--hm-shadow);
}

/* Slightly tighten spacing when scrolled */
#hmHeader.hm-scrolled .hm-head{ padding-top: 6px; padding-bottom: 6px; }
#hmHeader.hm-scrolled .hm-search-input,
#hmHeader.hm-scrolled .hm-search-btn{ height: 44px; }

/* =========================================================
   HM Header FINAL (Sticky + Mobile Right Drawer + Search Toggle)
   Paste at END of hm-app.css
   ========================================================= */
:root{
  --hm-brand:#0d6efd;
  --hm-accent:#fd7e14;
  --hm-bg: rgba(255,255,255,.94);
  --hm-border: rgba(0,0,0,.08);
  --hm-shadow: 0 16px 44px rgba(0,0,0,.12);
  --hm-radius: 16px;
}

/* Base */
#hmHeader.hm-site-header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--hm-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--hm-border);
}
#hmHeader.hm-site-header::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--hm-accent), var(--hm-brand));
}

/* Desktop top row */
.hm-dtop{ padding: 10px 0; }
.hm-dtop-inner{ display:flex; align-items:center; gap:14px; }
.hm-logo{
  display:flex; align-items:center; gap:10px;
  text-decoration:none;
  font-weight: 900;
  font-size: 22px;
  color: var(--hm-brand);
  white-space: nowrap;
}
.hm-logo i{ color: var(--hm-accent); }

.hm-dsearch{ flex: 1; }

.hm-searchbox{
  display:flex; align-items:center; gap:10px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding: 8px 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.07);
}
.hm-search-ico{ color:#777; padding: 0 6px; }
.hm-search-input{
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  width:100%;
  font-size: 15px;
  padding: 4px 0;
  background: transparent;
}
.hm-search-go{
  border:0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 800;
  color:#fff;
  background: linear-gradient(135deg, var(--hm-brand), #1d8bff);
}
.hm-search-go:hover{ filter: brightness(.95); }

.hm-dicons{ display:flex; align-items:center; gap:10px; }
.hm-ibtn{
  position: relative;
  width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(0,0,0,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  color:#222;
  border:0;
}
.hm-ibtn:hover{ background: rgba(0,0,0,.08); transform: translateY(-1px); }
.hm-ibtn i{ font-size: 18px; }
.hm-ibtn-btn{ cursor:pointer; }

.hm-badge{
  position:absolute;
  top:-7px; left:-7px;
  background: var(--hm-brand);
  color:#fff;
  border-radius: 999px;
  font-size: 11px;
  padding: 3px 7px;
  line-height: 1.2;
  font-weight: 800;
}

.hm-total{ min-width: 110px; text-align:right; }
.hm-total-label{ font-size: 12px; color:#777; }
.hm-total-val{ font-weight: 900; color:#222; }

/* Dropdown align in RTL */
.hm-dd{ right:0 !important; left:auto !important; text-align:right; }

/* Mobile top row */
.hm-mtop{ padding: 10px 0; }
.hm-mtop-inner{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.hm-mbrand{
  display:flex; align-items:center; gap:10px;
  font-weight: 900;
  color: var(--hm-brand);
  text-decoration:none;
  font-size: 18px;
}
.hm-mbrand i{ color: var(--hm-accent); }
.hm-mactions{ display:flex; align-items:center; gap:10px; }

/* Tabs bar */
.hm-tabsbar{
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.90);
}
.hm-tabs-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 0;
  gap: 12px;
}
.hm-tabs{
  display:flex; align-items:center; gap: 6px;
  overflow:auto;
  scrollbar-width:none;
}
.hm-tabs::-webkit-scrollbar{ display:none; }
.hm-tab{
  text-decoration:none;
  color:#222;
  font-weight: 900;
  font-size: 15px;
  padding: 10px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.hm-tab:hover{ background: rgba(0,0,0,.06); }
.hm-tab.active{ background: rgba(13,110,253,.12); color: var(--hm-brand); }

.hm-sbtn{
  width: 42px; height: 42px;
  border-radius: 14px;
  border:0;
  background: rgba(0,0,0,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hm-sbtn:hover{ background: rgba(0,0,0,.08); transform: translateY(-1px); }

/* Search panel toggle */
.hm-searchpanel{
  display:none;
  border-top: 1px solid rgba(0,0,0,.06);
  background: rgba(255,255,255,.96);
  padding: 12px 0;
}
#hmHeader.hm-search-open .hm-searchpanel{ display:block; }
.hm-searchbox--panel{ padding: 10px 12px; }
.hm-search-close{
  border:0;
  background: transparent;
  width: 42px; height: 42px;
  border-radius: 14px;
}
.hm-search-close:hover{ background: rgba(0,0,0,.06); }

/* Compact on scroll:
   - Desktop: hide top row, keep tabs only
*/
#hmHeader{
  background: rgba(255,255,255,.92);
  transition: background .18s ease, box-shadow .18s ease;
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

#hmHeader.hm-compact{
  box-shadow: var(--hm-shadow);
  background: rgba(255,255,255,.98);
}

/* بدل display:none (الذي يسبب قفزة) */
#hmHeader .hm-dtop{
  overflow: hidden;
  max-height: 140px; /* أكبر من ارتفاع hm-dtop الحقيقي */
  opacity: 1;
  transform: translateY(0);
  transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
}

#hmHeader.hm-compact .hm-dtop{
  max-height: 0;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}


@media (max-width: 991.98px){
  #hmHeader .hm-tabsbar{
    overflow: hidden;
    max-height: 90px; /* حسب ارتفاع tabsbar */
    opacity: 1;
    transform: translateY(0);
    transition: max-height .18s ease, opacity .18s ease, transform .18s ease;
  }
  #hmHeader.hm-compact .hm-tabsbar{
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
  }
}


/* Offcanvas drawer */
.hm-offcanvas .offcanvas-header{ border-bottom: 1px solid rgba(0,0,0,.08); }
.hm-oc-title{ font-weight: 900; color:#222; display:flex; align-items:center; gap:10px; }
.hm-oc-title i{ color: var(--hm-accent); }
.hm-oc-section{ display:flex; flex-direction:column; gap:8px; }
.hm-oc-divider{ height:1px; background: rgba(0,0,0,.08); margin: 14px 0; }

.hm-oc-head{ font-weight: 900; color:#666; margin-bottom: 6px; }
.hm-oc-link{
  text-decoration:none;
  color:#222;
  font-weight: 800;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.03);
}
.hm-oc-link:hover{ background: rgba(0,0,0,.06); }

.hm-oc-link--cat{ display:flex; justify-content:space-between; align-items:center; }
.hm-oc-count{
  font-size: 12px;
  font-weight: 900;
  color: var(--hm-brand);
  background: rgba(13,110,253,.10);
  border-radius: 999px;
  padding: 3px 9px;
}
.hm-oc-btn{
  display:block;
  text-align:center;
  text-decoration:none;
  padding: 12px 14px;
  border-radius: 14px;
  font-weight: 900;
  background: rgba(0,0,0,.05);
  color:#222;
}
.hm-oc-btn--pri{
  background: linear-gradient(135deg, var(--hm-brand), #1d8bff);
  color:#fff;
}

/* ===== Bootstrap Carousel (#carouselId) height fix (optional keep) ===== */
:root{
  --hm-hero-h-desktop: 520px;
  --hm-hero-h-tablet:  420px;
  --hm-hero-h-mobile:  340px;
}
#carouselId, #carouselId .carousel-inner, #carouselId .carousel-item{ height: var(--hm-hero-h-desktop); }
#carouselId .carousel-item img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width: 991.98px){
  #carouselId, #carouselId .carousel-inner, #carouselId .carousel-item{ height: var(--hm-hero-h-tablet); }
}
@media (max-width: 575.98px){
  #carouselId, #carouselId .carousel-inner, #carouselId .carousel-item{ height: var(--hm-hero-h-mobile); }
}
/* =========================================================
   HM Desktop Fix Pack — Tabs + Search Icon + Remove Blue
   Paste at END of hm-app.css
   ========================================================= */

/* 1) Brand colors (kill Bootstrap blue in header only) */
:root{
  --hm-brand: #c76a2b;          /* بني/برتقالي */
  --hm-accent:#fd7e14;          /* برتقالي */
  --hm-brand-rgb: 199 106 43;
  --hm-accent-rgb: 253 126 20;
}

/* Top gradient line uses brand instead of blue */
#hmHeader.hm-site-header::before{
  background: linear-gradient(90deg, var(--hm-accent), var(--hm-brand)) !important;
}

/* Logo + highlights */
#hmHeader .hm-logo,
#hmHeader .hm-mbrand{
  color: var(--hm-brand) !important;
}
#hmHeader .hm-logo i,
#hmHeader .hm-mbrand i{
  color: var(--hm-accent) !important;
}

/* Badges */
#hmHeader .hm-badge{
  background: var(--hm-brand) !important;
}

/* Search button (بحث) بدل الأزرق */
#hmHeader .hm-search-go{
  background: linear-gradient(135deg, var(--hm-brand), var(--hm-accent)) !important;
  color:#fff !important;
}

/* Focus ring بدل الأزرق */
#hmHeader .hm-searchbox:focus-within{
  box-shadow: 0 10px 26px rgba(0,0,0,.07), 0 0 0 4px rgba(var(--hm-brand-rgb), .14) !important;
  border-color: rgba(var(--hm-brand-rgb), .25) !important;
}

/* 2) Hide desktop search icon beside tabs at TOP of page
      Show it ONLY when header becomes compact (on scroll) */
#hmHeader .hm-tabs-actions{
  display: none !important;
}
#hmHeader.hm-compact .hm-tabs-actions{
  display: flex !important;
}

/* 3) Tabs layout + better pills on desktop */
#hmHeader .hm-tabsbar{
  background: rgba(255,255,255,.92) !important;
}

#hmHeader .hm-tabs-inner{
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 0 !important;
}

/* Tabs row: no wrapping + scroll if too many */
#hmHeader .hm-tabs{
  display:flex !important;
  align-items:center !important;
  gap: 10px !important;
  overflow:auto !important;
  white-space: nowrap !important;
  scrollbar-width: none;
}
#hmHeader .hm-tabs::-webkit-scrollbar{ display:none; }

/* Tab pill style */
#hmHeader .hm-tab{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding: 9px 14px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  color:#222 !important;
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  line-height: 1 !important;
  text-decoration:none !important;
}
#hmHeader .hm-tab:hover{
  background: rgba(0,0,0,.06) !important;
  transform: translateY(-1px);
}

/* Active tab uses brand (no blue) */
#hmHeader .hm-tab.active{
  color: var(--hm-brand) !important;
  border-color: rgba(var(--hm-brand-rgb), .28) !important;
  background: linear-gradient(
    135deg,
    rgba(var(--hm-brand-rgb), .16),
    rgba(var(--hm-accent-rgb), .14)
  ) !important;
}

/* Search icon button in tabs (when it appears on scroll) */
#hmHeader .hm-sbtn{
  background: rgba(0,0,0,.04) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}
#hmHeader .hm-sbtn:hover{
  background: rgba(0,0,0,.07) !important;
}

/* Optional: reduce the weird blue focus/outline in header controls only */
#hmHeader button:focus,
#hmHeader a:focus{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--hm-brand-rgb), .12) !important;
}
/* =========================================================
   HM Tabs Centered (Desktop) — Pills like "الكل" + Icons
   Paste at END of hm-app.css
   ========================================================= */

@media (min-width: 992px){

  /* خلي الحاوية relative عشان نحط زر البحث absolute */
  #hmHeader .hm-tabs-inner{
    position: relative !important;
    justify-content: center !important;
  }

  /* التبويبات نفسها بالوسط */
  #hmHeader .hm-tabs{
    margin-inline: auto !important;   /* يمين/يسار فراغ متساوي */
    justify-content: center !important;
    overflow: visible !important;     /* ما نحتاج سكرول بالديسكتوب */
  }

  /* زر البحث لا يؤثر على التمركز */
  #hmHeader .hm-tabs-actions{
    position: absolute !important;
    inset-inline-end: 0 !important;   /* في RTL = يسار الشاشة */
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  /* شكل التبويب مثل "الكل" */
  #hmHeader .hm-tab{
    display:inline-flex !important;
    align-items:center !important;
    gap: 10px !important;
    padding: 10px 16px !important;
    border-radius: 999px !important;
    background: rgba(0,0,0,.035) !important;
    border: 1px solid rgba(0,0,0,.07) !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    line-height: 1 !important;
  }

  #hmHeader .hm-tab i{
    color: var(--hm-accent) !important;
    font-size: 14px !important;
  }

  #hmHeader .hm-tab.active{
    color: var(--hm-brand) !important;
    border-color: rgba(var(--hm-brand-rgb), .30) !important;
    background: linear-gradient(
      135deg,
      rgba(var(--hm-brand-rgb), .16),
      rgba(var(--hm-accent-rgb), .12)
    ) !important;
  }
  #hmHeader .hm-tab.active i{
    color: var(--hm-brand) !important;
  }
}

/* =========================================================
   HM Footer PRO — Dark Premium + Mobile Accordion
   Paste at END of hm-app.css
   ========================================================= */

.hm-footer{
    background-color: rgb(139, 115, 103) !important;
  background: radial-gradient(1200px 500px at 20% -10%, rgba(var(--hm-brand-rgb),.18), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(var(--hm-accent-rgb),.14), transparent 55%),
              #0f1012;
  color: rgba(255,255,255,.82);
  padding: 44px 0 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.hm-footer a{ color: rgba(255,255,255,.78); text-decoration:none; }
.hm-footer a:hover{ color:#fff; }

.hm-footer-brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  font-size: 20px;
  color:#fff !important;
}
.hm-footer-brand i{ color: var(--hm-accent); }

.hm-footer-desc{
  margin-top: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.8;
  font-size: 14px;
}

.hm-footer-title{
  font-weight: 900;
  color:#fff;
  margin-bottom: 12px;
  font-size: 14px;
  letter-spacing: .2px;
}
.hm-footer-title.sm{ font-size: 13px; opacity:.9; }

.hm-footer-list{
  list-style:none;
  padding:0; margin:0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.hm-footer-list li{
  display:flex;
  align-items:center;
  gap: 10px;
}
.hm-footer-list--contact i{
  color: rgba(255,255,255,.55);
}

.hm-footer-actions{
  display:flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.hm-footer-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 900;
  font-size: 13px;
}
.hm-footer-btn:hover{ background: rgba(255,255,255,.10); }
.hm-footer-btn--pri{
  background: linear-gradient(135deg, rgba(var(--hm-brand-rgb), .85), rgba(var(--hm-accent-rgb), .85));
  border-color: rgba(255,255,255,.12);
  color:#fff !important;
}
.hm-footer-btn--pri:hover{ filter: brightness(.98); }

.hm-footer-social{
  display:flex;
  gap:10px;
  margin-top: 14px;
}
.hm-social{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  color:#fff !important;
}
.hm-social:hover{ background: rgba(255,255,255,.10); transform: translateY(-1px); }

.hm-news-form{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}
.hm-news-input{
  flex:1;
  height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color:#fff;
  padding: 0 12px;
}
.hm-news-input::placeholder{ color: rgba(255,255,255,.55); }
.hm-news-btn{
  height: 42px;
  padding: 0 14px;
  border-radius: 14px;
  border: 0;
  font-weight: 900;
  color:#fff;
  background: linear-gradient(135deg, var(--hm-brand), var(--hm-accent));
}

.hm-footer-bottom{
  margin-top: 26px;
  padding-top: 14px;
}
.hm-footline{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  margin-bottom: 14px;
}
.hm-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
  color: rgba(255,255,255,.70);
  font-size: 13px;
}
.hm-brand-txt{ color:#fff; font-weight: 900; }
.hm-pay{
  display:flex;
  align-items:center;
  gap:10px;
  color: rgba(255,255,255,.65);
}
.hm-pay i{ font-size: 18px; opacity:.9; }

/* Mobile accordion styling */
.hm-footer-acc .accordion-item{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow:hidden;
  margin-bottom: 10px;
}
.hm-footer-acc .accordion-button{
  background: transparent;
  color:#fff;
  font-weight: 900;
  padding: 14px 14px;
  box-shadow: none !important;
}
.hm-footer-acc .accordion-button:not(.collapsed){
  background: rgba(255,255,255,.06);
}
.hm-footer-acc .accordion-body{
  padding: 12px 14px 14px;
  color: rgba(255,255,255,.75);
}
.hm-footer-m-link{
  display:block;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  margin-bottom: 8px;
}
.hm-footer-m-link:hover{ background: rgba(255,255,255,.08); }

.hm-footer-m-contact{
  padding: 8px 0;
  display:flex;
  align-items:center;
  gap:10px;
}
.hm-footer-m-contact i{ opacity:.8; }


/* =========================
   HM Products Grid: 5 desktop / 2 mobile
   ========================= */

/* Bootstrap col-lg-2 = 16.66% (6 columns)
   We override to 20% for 5 columns on desktop */
@media (min-width: 992px){
  .hm-col-5{
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* =========================
   Compact Product Card
   ========================= */

.hm-prod{
  border-radius: 16px !important;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* Make card not tall */
.hm-prod-body{
  padding: 10px 10px 12px;
}

/* Media fixed ratio (shorter) */
.hm-prod-media{
  position: relative;
  overflow: hidden;
  background: #f6f7f9;
  aspect-ratio: 1 / 1;   /* مربع -> أقل طول */
}

/* Image covers the box */
.hm-prod-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* No-image box hidden by default */
.hm-noimg-box{
  display: none;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: rgba(0,0,0,.55);
  font-weight: 800;
}
.hm-noimg-box i{
  font-size: 34px;
  opacity: .8;
}
.hm-noimg-box span{
  font-size: 12px;
  opacity: .9;
}
/* Show no-image placeholder when no image or broken */
.hm-noimg .hm-noimg-box{
  display: flex;
}

/* Quick view button */
.hm-prod-eye{
  position: absolute;
  top: 10px;
  inset-inline-start: 10px; /* RTL friendly */
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: rgba(255,255,255,.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #222;
  border: 1px solid rgba(0,0,0,.08);
}

/* Meta */
.hm-prod-cat{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 4px;
}

/* Title: 2 lines max */
.hm-prod-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-decoration: none;
  color: #111;
  font-weight: 900;
  font-size: 13px;
  line-height: 1.35;
  margin-bottom: 6px;
}

/* Store */
.hm-prod-store{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-bottom: 8px;
}

/* Footer row: price + actions */
.hm-prod-foot{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.hm-prod-price{
  font-weight: 900;
  font-size: 13px;
  color: #0d6efd;
  white-space: nowrap;
}

/* Compact action icons */
.hm-prod-actions{
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.hm-btn-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color: #222;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  padding: 0;
}
.hm-btn-icon:hover{
  background: rgba(0,0,0,.06);
}

/* Optional: emphasize cart */
.hm-btn-cart{
  background: rgba(13,110,253,.10);
  border-color: rgba(13,110,253,.25);
}
.hm-btn-cart i{ color:#0d6efd; }
.hm-btn-wish i{ color:#0d6efd; }
.hm-btn-login i{ color:#0d6efd; }


/* =========================
   Products Page Layout PRO
   ========================= */

/* وسّع الكونتينر داخل صفحة المنتجات فقط */
.hm-shop .hm-shop-container{
  max-width: 1540px !important;
}

/* Grid layout: منتجات + سايدبار يمين */
.hm-shop-layout{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px; /* main + sidebar */
  gap: 22px;
  align-items: start;
}

@media (max-width: 991.98px){
  .hm-shop-layout{ grid-template-columns: 1fr; }
}

/* Sidebar sticky على الديسكتوب */
.hm-shop-aside{
  position: sticky;
  top: 110px; /* تحت الهيدر */
  max-height: calc(100vh - 130px);
  overflow: auto;
}

/* كروت الفلاتر */
.hm-filter-card{
  background:#fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* شريط أعلى النتائج */
.hm-shop-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.hm-shop-topbar .hm-shop-actions{
  display:flex;
  gap: 10px;
  align-items:center;
}

/* خَلّي شبكة المنتجات تبدأ من اليمين وما تتسنتر */
.hm-pgrid{
  justify-content: flex-start !important;
}

/* =========================
   5 columns on very wide screens
   ========================= */
/* على الشاشات الكبيرة جدًا: 5 أعمدة */
@media (min-width: 1400px){
  .hm-col-5{
    flex: 0 0 20% !important;
    max-width: 20% !important;
  }
}

/* =========================
   Fix BLUE -> ORANGE (cards)
   ========================= */
:root{
  --hm-accent: #fd7e14;
}

/* السعر */
.hm-prod-price{
  color: var(--hm-accent) !important;
}

/* أزرار الأيقونات */
.hm-btn-cart{
  background: rgba(253,126,20,.12) !important;
  border-color: rgba(253,126,20,.25) !important;
}
.hm-btn-cart i,
.hm-btn-wish i,
.hm-btn-login i{
  color: var(--hm-accent) !important;
}

/* لو المنتج في المفضلة (قلب ممتلئ) خليه أحمر لطيف */
.hm-btn-wish .fas.fa-heart{
  color: #e53935 !important;
}

/* =========================
   Mobile Filters Offcanvas
   ========================= */
.hm-filters-offcanvas .offcanvas-header{
  border-bottom: 1px solid rgba(0,0,0,.08);
}


/* =========================================================
   Cart V2 — New design (page-only)
   ========================================================= */
.hm-cartv2{
  --hm-brand:#c76a2b;
  --hm-brand2:#a95623;
  --hm-ink:#1d1d1f;
  --hm-muted:rgba(0,0,0,.55);
  --hm-bd:rgba(0,0,0,.10);
  --hm-soft:#fff7f0;
}

/* Fix bootstrap blue inside cart page */
.hm-cartv2 .text-primary{ color: var(--hm-brand) !important; }
.hm-cartv2 .btn-primary{
  background: var(--hm-brand) !important;
  border-color: var(--hm-brand) !important;
}
.hm-cartv2 .btn-primary:hover{
  background: var(--hm-brand2) !important;
  border-color: var(--hm-brand2) !important;
}
.hm-cartv2 .btn-outline-primary{
  color: var(--hm-brand) !important;
  border-color: color-mix(in srgb, var(--hm-brand) 55%, transparent) !important;
}
.hm-cartv2 .btn-outline-primary:hover{
  background: color-mix(in srgb, var(--hm-brand) 10%, transparent) !important;
}

/* Steps */
.hm-cart-steps{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.hm-step{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--hm-bd);
  border-radius:999px;
  background:#fff;
  color:var(--hm-muted);
  box-shadow: 0 10px 24px rgba(0,0,0,.04);
}
.hm-step-dot{
  width:26px;height:26px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;
  background: rgba(0,0,0,.06);
  color:#222;
}
.hm-step.is-active{
  border-color: color-mix(in srgb, var(--hm-brand) 40%, var(--hm-bd));
  color: var(--hm-ink);
}
.hm-step.is-active .hm-step-dot{
  background: color-mix(in srgb, var(--hm-brand) 18%, #fff);
  color: var(--hm-brand);
}

/* Layout */
.hm-cart-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 992px){
  .hm-cart-layout{ grid-template-columns: 1fr 360px; gap:18px; align-items:start; }
}

/* Panels */
.hm-cart-panel{
  background:#fff;
  border:1px solid var(--hm-bd);
  border-radius:18px;
  box-shadow: 0 18px 36px rgba(0,0,0,.06);
  overflow:hidden;
}
.hm-cart-panel__head{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.hm-cart-panel__title{ margin:0; font-weight:1000; font-size:18px; color:var(--hm-ink); }
.hm-cart-panel__sub{ color:var(--hm-muted); font-size:12px; }

/* Cart list */
.hm-cart-listv2{ padding: 12px; display:flex; flex-direction:column; gap:10px; }

/* Item card */
.hm-ci{
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  background: #fff;
  display:grid;
  grid-template-columns: 92px 1fr;
  gap:12px;
  padding:10px;
}
@media (min-width: 768px){
  .hm-ci{ grid-template-columns: 110px 1fr; padding:12px; }
}

/* Media */
.hm-ci-media{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  background:#f6f7f9;
  width:100%;
  aspect-ratio: 1 / 1;
  display:block;
  border:1px solid rgba(0,0,0,.06);
}
.hm-ci-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.hm-ci-noimg{
  display:none;
  width:100%; height:100%;
  align-items:center; justify-content:center;
  flex-direction:column;
  gap:6px;
  color:rgba(0,0,0,.55);
  font-weight:900;
  font-size:12px;
}
.hm-ci-noimg i{ font-size:26px; opacity:.85; }
.hm-ci-media.hm-noimg .hm-ci-noimg{ display:flex; }

/* Body */
.hm-ci-body{ min-width:0; }
.hm-ci-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.hm-ci-titlewrap{ min-width:0; }
.hm-ci-title{
  font-weight:1000;
  font-size:14px;
  line-height:1.35;
  color:var(--hm-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-bottom:6px;
}
.hm-ci-store{
  font-size:12px;
  color:var(--hm-muted);
  display:flex;
  gap:6px;
  align-items:center;
  margin-bottom:4px;
}
.hm-ci-link{
  font-size:12px;
  color: var(--hm-brand);
  text-decoration:none;
  font-weight:900;
}
.hm-ci-link:hover{ text-decoration:underline; }

/* Remove */
.hm-ci-remove{
  width:38px; height:38px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  color:#222;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hm-ci-remove:hover{
  background: rgba(199,106,43,.10);
  border-color: rgba(199,106,43,.25);
  color: var(--hm-brand);
}

/* Bottom row */
.hm-ci-bottom{
  margin-top:8px;
  display:grid;
  grid-template-columns: 1fr;
  gap:8px;
}
@media (min-width: 576px){
  .hm-ci-bottom{
    grid-template-columns: 1fr 180px 1fr;
    align-items:center;
  }
}

.hm-ci-unit, .hm-ci-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:var(--hm-muted);
  background: rgba(0,0,0,.02);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 12px;
  padding: 8px 10px;
}
.hm-ci-unit b, .hm-ci-line b{
  color: var(--hm-ink);
  font-weight:1000;
  white-space:nowrap;
}
.hm-ci-line b{ color: var(--hm-brand); }

/* Qty stepper */
.hm-qty{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.hm-qty-btn{
  width:34px;height:34px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.hm-qty-btn:hover{ background: rgba(0,0,0,.06); }
.hm-qty-inputx{
  width:72px !important;
  text-align:center;
  border:0 !important;
  box-shadow:none !important;
  font-weight:1000;
}

/* Footer bar */
.hm-cart-footerbar{
  padding: 12px 16px 16px;
  border-top:1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.hm-cart-hint{ font-size:12px; color:var(--hm-muted); }

/* Summary */
.hm-sumcard{
  position: sticky;
  top: 110px;
  background: linear-gradient(180deg, var(--hm-soft), #fff);
  border:1px solid var(--hm-bd);
  border-radius:18px;
  padding:16px;
  box-shadow: 0 18px 36px rgba(0,0,0,.06);
}
@media (max-width: 991.98px){
  .hm-sumcard{ position: relative; top:auto; }
}
.hm-sumcard__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
  flex-wrap:wrap;
}
.hm-sumcard__title{ margin:0; font-weight:1000; font-size:16px; color:var(--hm-ink); }
.hm-sumcard__pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(199,106,43,.25);
  background: rgba(199,106,43,.10);
  color: var(--hm-brand);
  font-size:12px;
  font-weight:1000;
}
.hm-sumrows{ display:flex; flex-direction:column; gap:10px; }
.hm-sumrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  font-size:13px;
  color:var(--hm-muted);
}
.hm-sumrow b{ color:var(--hm-ink); font-weight:1000; }
.hm-sumrow--total{
  padding-top:10px;
  border-top:1px dashed rgba(0,0,0,.18);
  color: var(--hm-ink);
}
.hm-sumrow--total b{ color: var(--hm-brand); font-size:16px; }

.hm-sumfine{
  font-size:12px;
  color: var(--hm-muted);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hm-sumfine i{ color: var(--hm-brand); }

/* Mobile bottom bar */
.hm-cartbar{
  position: fixed;
  left: 12px; right: 12px;
  bottom: 12px;
  z-index: 999;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hm-cartbar__total{ display:flex; flex-direction:column; gap:2px; }
.hm-cartbar__label{ font-size:12px; color:var(--hm-muted); }
.hm-cartbar__value{ font-weight:1000; color:var(--hm-brand); }
.hm-cartbar__btn{
  background: var(--hm-brand);
  color:#fff;
  text-decoration:none;
  font-weight:1000;
  border-radius: 14px;
  padding: 10px 14px;
  white-space:nowrap;
}
.hm-cartbar__btn:hover{ background: var(--hm-brand2); color:#fff; }

/* Empty state */
.hm-cart-empty{
  background: #fff;
  border:1px solid var(--hm-bd);
  border-radius: 22px;
  padding: 34px 16px;
  text-align:center;
  box-shadow: 0 18px 36px rgba(0,0,0,.06);
}
.hm-cart-empty__icon{
  width:74px;height:74px;
  border-radius: 22px;
  margin:0 auto 12px;
  display:flex;align-items:center;justify-content:center;
  background: color-mix(in srgb, var(--hm-brand) 12%, #fff);
  color: var(--hm-brand);
  font-size: 30px;
}
.hm-cart-empty__title{ font-weight:1000; margin:0 0 8px; color:var(--hm-ink); }
.hm-cart-empty__text{ color:var(--hm-muted); margin:0 0 16px; }
/* =========================================================
   Checkout V2 (extends hm-cartv2)
   ========================================================= */
.hm-checkoutv2 .hm-checkout-layout{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
}
@media (min-width: 992px){
  .hm-checkoutv2 .hm-checkout-layout{
    grid-template-columns: 1fr 420px;
    gap:18px;
    align-items:start;
  }
}

.hm-co-panel .hm-co-body{ padding:16px; }

.hm-co-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
}
@media (min-width: 768px){
  .hm-co-grid{
    grid-template-columns: 1fr 1fr;
    gap:12px;
  }
}
.hm-co-grid .col-12{ grid-column: 1 / -1; }
.hm-co-grid .col-md-6{ grid-column: span 1; }

.hm-field .hm-label{
  display:block;
  font-weight:900;
  font-size:12px;
  color: rgba(0,0,0,.65);
  margin-bottom:6px;
}

.hm-input{
  position:relative;
}
.hm-input i{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  inset-inline-start: 12px;
  color: rgba(0,0,0,.45);
  font-size:14px;
}
.hm-input{ position:relative; }

.hm-input i{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  inset-inline-start:12px;       /* يمين في RTL */
  color:rgba(0,0,0,.45);
  font-size:14px;
  pointer-events:none;
}

.hm-input .form-control{
  border-radius:14px;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:none !important;

  /* أهم سطرين: نخلي المساحة عند بداية السطر (يمين في RTL) */
  padding-inline-start:42px;     /* مكان للأيقونة */
  padding-inline-end:14px;

  padding-block:12px;           /* ارتفاع مريح */
  text-align:start;
}

.hm-input .form-control:focus{
  border-color: color-mix(in srgb, var(--hm-brand) 45%, rgba(0,0,0,.12));
  box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--hm-brand) 20%, transparent) !important;
}

.hm-textarea .form-control{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow:none !important;
}

.hm-co-pay{
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(0,0,0,.10);
  border-radius:16px;
  background: rgba(0,0,0,.02);
}
.hm-co-pay__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.hm-co-pay__title{
  font-weight:1000;
  color:#1d1d1f;
}

.hm-payopt{
  display:flex;
  gap:10px;
  align-items:flex-start;
  cursor:pointer;
  margin:0;
}
.hm-payopt .form-check-input{ margin-top: 4px; }
.hm-payopt__box{
  flex:1;
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.hm-payopt__name{
  display:block;
  font-weight:1000;
  color:#1d1d1f;
  margin-bottom:4px;
}
.hm-payopt__hint{
  display:block;
  font-size:12px;
  color: rgba(0,0,0,.55);
}

.hm-co-items{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding: 10px 0 0;
}
.hm-co-item{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  padding:10px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
}
.hm-co-item__title{
  font-weight:1000;
  font-size:13px;
  color:#1d1d1f;
  margin-bottom:4px;
}
.hm-co-item__store{
  font-size:12px;
  color: rgba(0,0,0,.55);
}
.hm-co-item__meta{
  text-align:end;
  white-space:nowrap;
}
.hm-co-item__qty{
  font-weight:900;
  color: rgba(0,0,0,.55);
  font-size:12px;
  margin-bottom:4px;
}
.hm-co-item__price{
  font-weight:1000;
  color: var(--hm-brand);
}
/* =========================
   Account Page (Professional)
   ========================= */

.hm-account .hm-card{
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
}

.hm-avatar{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(0,0,0,.06);
}

.hm-profile-name{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.2;
}

.hm-profile-lines{
  border-top: 1px solid rgba(0,0,0,.06);
  padding-top: 12px;
  margin-top: 10px;
}

.hm-line{
  display: grid;
  grid-template-columns: 18px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.hm-line:last-child{ border-bottom: 0; }
.hm-line i{ opacity: .75; }

.hm-orders-table thead th{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.hm-order-id{
  font-weight: 900;
}

.hm-badge{
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 800;
  font-size: 12px;
}

/* Mobile order cards */
.hm-order-card{
  border: 1px solid rgba(0,0,0,.06);
}

/* Sticky on desktop only */
@media (min-width: 992px){
  .hm-sticky{
    position: sticky;
    top: 90px; /* مناسب للهيدر */
  }
}
/* =========================
   Product Details — HM Pro
   ========================= */

.hm-product-page .hm-card{
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 28px rgba(0,0,0,.06);
}

/* gallery */
.hm-pg-gallery{ display:flex; flex-direction:column; gap:12px; }
.hm-pg-mainbox{
  position:relative;
  border-radius: 18px;
  overflow:hidden;
  background:#f6f7f9;
  aspect-ratio: 1 / 1;
}
@media (min-width: 992px){
  .hm-pg-mainbox{ aspect-ratio: 4 / 3; }
}
.hm-pg-mainimg{ width:100%; height:100%; object-fit:cover; display:block; }
.hm-pg-noimg{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:8px;
  color: rgba(0,0,0,.55);
  font-weight: 800;
}
.hm-pg-noimg i{ font-size: 38px; opacity:.9; }
.hm-pg-noimg span{ font-size: 12px; opacity:.9; }
.hm-pg-noimg-on .hm-pg-mainimg{ display:none !important; }

.hm-pg-thumbs{
  display:flex;
  gap:10px;
  overflow:auto;
  padding-bottom:4px;
}
.hm-pg-thumb{
  border:0; background:transparent; padding:0;
  flex:0 0 auto;
}
.hm-pg-thumbbox{
  width:64px; height:64px;
  border-radius: 16px;
  overflow:hidden;
  background:#f6f7f9;
  border: 2px solid transparent;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.hm-pg-thumb.is-active .hm-pg-thumbbox{
  border-color: var(--hm-brand, #c76a2b);
}
.hm-pg-thumbbox img{ width:100%; height:100%; object-fit:cover; display:block; }
.hm-thumb-ph{
  color: rgba(0,0,0,.55);
  font-size: 18px;
}
.hm-pg-thumbbox.hm-thumb-noimg img{ display:none !important; }

/* buy box */
.hm-pg-head{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
.hm-chip{
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  color:#111;
  padding:6px 10px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 12px;
}
.hm-chip-soft{
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.65);
  font-weight: 700;
}
.hm-pg-title{
  font-weight: 900;
  font-size: 22px;
  line-height: 1.35;
  margin-bottom: 12px;
}
.hm-pg-pricewrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 14px;
}
.hm-pg-price{
  font-size: 22px;
  font-weight: 900;
  color: var(--hm-brand, #c76a2b);
}
.hm-pg-stock{
  font-size: 12px;
  font-weight: 800;
  padding:6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
}
.hm-pg-stock.is-in{ background: rgba(16,185,129,.10); color: #0f766e; }
.hm-pg-stock.is-out{ background: rgba(239,68,68,.10); color: #b91c1c; }

/* store card */
.hm-storecard{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius: 16px;
  border:1px solid rgba(0,0,0,.06);
  text-decoration:none;
  color:#111;
  background: rgba(0,0,0,.02);
}
.hm-storecard img{
  width:44px; height:44px;
  border-radius: 14px;
  object-fit:cover;
}
.hm-store-name{ font-weight: 900; line-height:1.2; }
.hm-store-go{ font-size: 12px; color: rgba(0,0,0,.55); }
.hm-store-arr{ margin-inline-start:auto; color: rgba(0,0,0,.35); }

/* qty */
.hm-qty{
  display:flex;
  align-items:center;
  gap:8px;
}
.hm-qty-inp{
  width: 84px;
  text-align:center;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.12);
  padding:10px 10px;
  font-weight: 900;
}
.hm-qty-btn{
  width:42px; height:42px;
  border-radius: 14px;
  border:1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
}

/* custom tabs */
.hm-tabs-head{
  display:flex;
  gap:10px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.hm-tabbtn{
  border:0;
  background: transparent;
  font-weight: 900;
  padding:10px 14px;
  border-radius: 999px;
  color: rgba(0,0,0,.55);
}
.hm-tabbtn.is-active{
  background: rgba(0,0,0,.05);
  color:#111;
}
.hm-tabpane{ display:none; }
.hm-tabpane.is-active{ display:block; }

/* reviews */
.hm-rev-summary{
  display:grid;
  grid-template-columns: 160px 1fr;
  gap:14px;
  align-items:start;
  background: rgba(0,0,0,.03);
  border:1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 14px;
}
@media (max-width: 575.98px){
  .hm-rev-summary{ grid-template-columns: 1fr; }
}
.hm-rev-avgnum{ font-size: 34px; font-weight: 900; color: var(--hm-brand, #c76a2b); }
.hm-rev-stars{ font-size: 14px; color: var(--hm-brand, #c76a2b); }
.hm-rev-count{ font-size: 12px; color: rgba(0,0,0,.55); font-weight: 700; }
.hm-rev-barrow{
  display:grid;
  grid-template-columns: 44px 1fr 34px;
  gap:10px;
  align-items:center;
  font-size: 12px;
}
.hm-rev-bar{
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow:hidden;
}
.hm-rev-bar span{
  display:block; height:100%;
  background: var(--hm-brand, #c76a2b);
  border-radius: 999px;
}
.hm-rev-item{
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 12px 14px;
  background: #fff;
}
.hm-rev-top{ display:flex; justify-content:space-between; gap:10px; align-items:center; }
.hm-rev-name{ font-weight: 900; }
.hm-rev-date{ font-size: 12px; color: rgba(0,0,0,.55); margin-top:4px; }
.hm-rev-txt{ margin-top:8px; color: rgba(0,0,0,.75); }

/* info rows */
.hm-info-row{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:10px 0;
}
.hm-info-row i{
  width:34px; height:34px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(0,0,0,.05);
  color: var(--hm-brand, #c76a2b);
}
.hm-info-title{ font-weight: 900; }
.hm-info-sub{ font-size: 12px; color: rgba(0,0,0,.6); }

/* sticky on desktop */
@media (min-width: 992px){
  .hm-sticky-lg{ position: sticky; top: 92px; }
}

/* mobile bottom bar */
.hm-pg-bbar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 999;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0,0,0,.08);
  padding: 10px 12px;
  display:flex;
  gap:10px;
  align-items:center;
}
.hm-pg-bbar-price{
  font-weight: 900;
  color: var(--hm-brand, #c76a2b);
  white-space: nowrap;
}
.hm-pg-bbar-btn{
  flex:1;
  border:0;
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--hm-brand, #c76a2b);
  color:#fff;
  font-weight: 900;
}
.hm-pg-bbar-btn:disabled{ opacity:.6; }

/* add space so bottom bar doesn't cover content */
@media (max-width: 991.98px){
  .hm-product-page{ padding-bottom: 74px; }
}

/* =========================
   STORES PAGE — PRO UI
   ========================= */

.hm-stores-search{
  background: linear-gradient(135deg, rgba(199,106,43,.12), rgba(42,27,20,.06));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;
}
.hm-stores-search-inner{
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.hm-stores-search-title{
  display:flex;
  align-items:center;
  gap: 12px;
}
.hm-stores-ico{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--hm-brand, #c76a2b);
  font-size: 18px;
}

.hm-stores-form{
  display:flex;
  gap: 10px;
  align-items:center;
  flex: 1;
  min-width: min(520px, 100%);
  justify-content:flex-end;
}
.hm-stores-input{
  position: relative;
  flex: 1;
  min-width: 220px;
}
.hm-stores-input i{
  position:absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity:.65;
}
.hm-stores-input .form-control{
  padding-inline-start: 38px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  height: 44px;
  background: rgba(255,255,255,.9);
}
.hm-stores-btn{
  border-radius: 14px;
  height: 44px;
  padding: 0 16px;
  white-space: nowrap;
}

/* Store Card */
.hm-storecard{
  display:block;
  text-decoration:none;
  color: inherit;
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  height: 100%;
}
.hm-storecard:hover{
  transform: translateY(-2px);
  border-color: rgba(199,106,43,.35);
  box-shadow: 0 16px 38px rgba(0,0,0,.10);
}

.hm-storecard-top{
  padding: 14px 14px 10px;
  display:flex;
  gap: 12px;
  align-items:center;
}
.hm-storecard-logo{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.06);
}
.hm-storecard-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.hm-storecard-meta{ flex:1; min-width:0; }

.hm-storecard-head{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content:space-between;
}
.hm-storecard-name{
  font-size: 15px;
  font-weight: 900;
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-storecard-badge{
  background: rgba(199,106,43,.12);
  border: 1px solid rgba(199,106,43,.25);
  color: #8d3d13;
  font-weight: 900;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hm-storecard-city{
  margin-top: 6px;
  display:flex;
  align-items:center;
  gap: 6px;
  color: rgba(0,0,0,.62);
  font-size: 12px;
}
.hm-storecard-city i{ opacity:.8; }
.hm-storecard-city--empty{ opacity: .8; }

.hm-storecard-desc{
  padding: 0 14px 12px;
  color: rgba(0,0,0,.65);
  font-size: 13px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}
.hm-storecard-desc--empty{
  opacity: .6;
}

.hm-storecard-foot{
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.hm-storecard-cta{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  font-weight: 900;
  color: var(--hm-brand, #c76a2b);
}
.hm-storecard-cta i{
  font-size: 12px;
  opacity: .9;
}
.hm-storecard-hint{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  font-size: 12px;
  color: rgba(0,0,0,.55);
}

/* Responsive tweaks */
@media (max-width: 576px){
  .hm-stores-search-inner{ padding: 14px; }
  .hm-stores-form{ width:100%; min-width: 100%; justify-content: stretch; }
  .hm-stores-btn{ width: 100%; }
  .hm-storecard-top{ padding: 12px; }
  .hm-storecard-desc{ padding: 0 12px 12px; }
  .hm-storecard-foot{ padding: 10px 12px 12px; }
  .hm-storecard-logo{ width: 58px; height: 58px; border-radius: 16px; }
}
/* =========================
   STORE PAGE — PRO UI
   ========================= */

.hm-store-hero{
  background: linear-gradient(135deg, rgba(199,106,43,.14), rgba(42,27,20,.06));
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  overflow: hidden;
}
.hm-store-hero-inner{
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 14px;
  align-items: stretch;
}

.hm-store-hero-main{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
}

.hm-store-hero-logo{
  width: 92px;
  height: 92px;
  border-radius: 24px;
  overflow: hidden;
  flex: 0 0 auto;
  background: #f6f7f9;
  border: 1px solid rgba(0,0,0,.06);
}
.hm-store-hero-logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.hm-store-hero-info{ flex: 1; min-width: 0; }

.hm-store-hero-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.hm-store-hero-title{
  margin: 0;
  font-weight: 900;
  font-size: 22px;
  line-height: 1.25;
}

.hm-store-hero-badges{
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}

.hm-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  color: #222;
}
.hm-chip--soft{
  background: rgba(199,106,43,.10);
  border-color: rgba(199,106,43,.22);
  color: #8d3d13;
}

.hm-store-hero-desc{
  margin-top: 10px;
  color: rgba(0,0,0,.68);
  line-height: 1.65;
  font-size: 14px;
  white-space: pre-wrap;

  /* clamp by default */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hm-store-hero-desc.is-open{
  -webkit-line-clamp: unset;
  overflow: visible;
}
.hm-store-hero-desc--empty{ opacity:.65; }

.hm-store-desc-toggle{
  margin-top: 8px;
  background: transparent;
  border: 0;
  padding: 0;
  color: var(--hm-brand, #c76a2b);
  font-weight: 900;
  font-size: 13px;
}

.hm-store-hero-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hm-store-hero-side{
  height: 100%;
}
.hm-store-side-card{
  height: 100%;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.hm-side-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  font-size: 13px;
}
.hm-pill-ok{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 12px;
  background: rgba(25,135,84,.10);
  border: 1px solid rgba(25,135,84,.20);
  color: #0f5132;
}
.hm-side-divider{
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 6px 0;
}
.hm-side-note{
  margin-top: auto;
  display:flex;
  align-items:center;
  gap: 8px;
  color: rgba(0,0,0,.60);
  font-size: 12px;
}

/* Toolbar */
.hm-store-toolbar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hm-store-toolbar-left{ min-width: 220px; }
.hm-store-toolbar-right{ flex: 1; display:flex; justify-content:flex-end; }

.hm-store-search{
  position: relative;
  width: min(520px, 100%);
}
.hm-store-search i{
  position:absolute;
  inset-inline-start: 12px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .65;
}
.hm-store-search .form-control{
  height: 44px;
  border-radius: 14px;
  padding-inline-start: 38px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
}

/* Responsive */
@media (max-width: 992px){
  .hm-store-hero-inner{
    grid-template-columns: 1fr;
  }
}
@media (max-width: 576px){
  .hm-store-hero-inner{ padding: 14px; }
  .hm-store-hero-main{
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .hm-store-hero-logo{ width: 88px; height: 88px; }
  .hm-store-hero-head{
    justify-content: center;
  }
  .hm-store-toolbar-right{ width: 100%; justify-content: stretch; }
  .hm-store-search{ width: 100%; }
  .hm-store-hero-actions{ justify-content: center; }
}
/* =========================================================
   HM Brand Theme — NEW IDENTITY
   Base: rgb(138, 123, 114)
   Hover: darker & elegant
   Paste at END of hm-app.css
   ========================================================= */
/* =========================================================
   THEME: OCEAN + PINK (Elegant)
   Paste at VERY END of hm-app.css
   ========================================================= */

body.hm-theme--oceanpink{
  /* Ocean (Primary) */
  --hm-brand: #0284c7;
  --hm-brand-rgb: 2 132 199;
  --hm-brand-hover: #0369a1;
  --hm-brand-soft: rgba(2,132,199,.12);

  /* Pink (Accent) */
  --hm-accent: #ec4899;
  --hm-accent-rgb: 236 72 153;
  --hm-accent-hover: #db2777;
  --hm-accent-soft: rgba(236,72,153,.14);

  --hm-ink: #0b1220;
  --hm-bg: #ffffff;
}

/* ربط Electro + Bootstrap عشان ما يبقى برتقالي */
body.hm-theme--oceanpink{
  --primary: var(--hm-brand);
  --secondary: var(--hm-accent);

  --bs-primary: var(--hm-brand);
  --bs-primary-rgb: var(--hm-brand-rgb);

  --bs-secondary: var(--hm-accent);
  --bs-secondary-rgb: var(--hm-accent-rgb);

  --bs-warning: var(--hm-accent);
  --bs-warning-rgb: var(--hm-accent-rgb);

  --bs-link-color: var(--hm-brand);
  --bs-link-hover-color: var(--hm-brand-hover);
}

/* Header gradient line (mix واضح) */
body.hm-theme--oceanpink #hmHeader.hm-site-header::before{
  background: linear-gradient(90deg, var(--hm-accent), var(--hm-brand)) !important;
}

/* خلي بادج الأرقام زهري عشان يظهر المزج */
body.hm-theme--oceanpink #hmHeader .hm-badge{
  background: var(--hm-accent) !important;
}

/* أزرار البحث/CTA خليها مزج */
body.hm-theme--oceanpink #hmHeader .hm-search-go,
body.hm-theme--oceanpink #hmHeader .hm-oc-btn--pri{
  background: linear-gradient(135deg, var(--hm-brand), var(--hm-accent)) !important;
  color:#fff !important;
}
body.hm-theme--oceanpink #hmHeader .hm-search-go:hover,
body.hm-theme--oceanpink #hmHeader .hm-oc-btn--pri:hover{
  background: linear-gradient(135deg, var(--hm-brand-hover), var(--hm-accent-hover)) !important;
}

/* Primary / Secondary / Warning */
body.hm-theme--oceanpink .btn-primary,
body.hm-theme--oceanpink .bg-primary{
  background-color: var(--hm-brand) !important;
  border-color: var(--hm-brand) !important;
}
body.hm-theme--oceanpink .btn-primary:hover{
  background-color: var(--hm-brand-hover) !important;
  border-color: var(--hm-brand-hover) !important;
}

body.hm-theme--oceanpink .btn-secondary,
body.hm-theme--oceanpink .btn-warning,
body.hm-theme--oceanpink .bg-secondary,
body.hm-theme--oceanpink .bg-warning{
  background-color: var(--hm-accent) !important;
  border-color: var(--hm-accent) !important;
  color:#fff !important;
}
body.hm-theme--oceanpink .btn-secondary:hover,
body.hm-theme--oceanpink .btn-warning:hover{
  background-color: var(--hm-accent-hover) !important;
  border-color: var(--hm-accent-hover) !important;
}

/* Prices & icons (خليها Ocean) */
body.hm-theme--oceanpink .hm-prod-price{ color: var(--hm-brand) !important; }
body.hm-theme--oceanpink .hm-btn-cart i,
body.hm-theme--oceanpink .hm-btn-wish i,
body.hm-theme--oceanpink .hm-btn-login i{ color: var(--hm-brand) !important; }

/* Hover actions (لمسة زهري خفيفة) */
body.hm-theme--oceanpink .hm-btn-icon:hover{
  background: var(--hm-accent-soft) !important;
  border-color: rgba(var(--hm-accent-rgb), .35) !important;
}

/* Focus ring */
body.hm-theme--oceanpink :focus-visible{
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(var(--hm-brand-rgb), .18) !important;
}

/* Footer: Ocean+Pink glow */
body.hm-theme--oceanpink .hm-footer{
  background:
    radial-gradient(1200px 520px at 20% -10%, rgba(var(--hm-brand-rgb),.28), transparent 60%),
    radial-gradient(900px 520px at 90% 10%, rgba(var(--hm-accent-rgb),.22), transparent 55%),
    #0b0f19 !important;
}
/* ===== Theme Switch Button (Side) ===== */
.hm-theme-switch{
  position: fixed;
  top: 50%;
  right: 14px;                 /* RTL: يمين */
  transform: translateY(-50%);
  z-index: 9999;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  background: linear-gradient(180deg, #e02424, #b31212);
  color: #fff;
  text-decoration: none;

  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.18);
}

.hm-theme-switch:hover{
  transform: translateY(-50%) scale(1.02);
  color:#fff;
  text-decoration:none;
}

.hm-theme-ico{
  font-size: 18px;
  line-height: 1;
}

.hm-theme-txt{
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .2px;
  white-space: nowrap;
}

/* في الموبايل نخفي النص ونترك الأيقونة */
@media (max-width: 575px){
  .hm-theme-switch{ padding: 10px; border-radius: 12px; }
  .hm-theme-txt{ display:none; }
}