/* ========================
   Base / Tokens
======================== */
:root{
  --container-max: 1200px;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --radius: 999px;
  --brand: #E9B100;
  --brand-strong: #d39a00;
  --text: #1f2937;
  --muted: #6b7280;
  --white: #fff;
  /* unified animation tokens */
  --anim-duration: 3.2s; /* much slower global animation */
  --anim-ease: cubic-bezier(.16,.84,.24,1); /* smoother ease */
  /* floating label tokens */
  --label-anim-duration: 2s; /* much slower floating label */
  --label-anim-ease: cubic-bezier(.5, 1, .25, 1.8); /* slight pull/settle feel */
}

html a {
  text-decoration: none;
}
/* ========================
   Featured Products
======================== */
.products{ background:#fff; }
.product-grid{ display:grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: repeat(4, 1fr); align-items:stretch; }
/* Large screens: Sidebar on the right and 3 products per row centered (RTL-aware) */
@media (min-width: 981px){
  /* Sidebar on the LEFT, products on the RIGHT */
  .shop-layout{ 
    grid-template-columns: 260px 1fr; 
    grid-template-areas: 'sidebar main';
  }
  .shop-sidebar{ grid-area: sidebar; max-width:260px; width:100%; position: sticky; top:88px; grid-column: 1 !important; }
  .shop-main{ grid-area: main; grid-column: 2 !important; }

  .product-grid{ grid-template-columns: repeat(3, 300px); justify-content: center; }
}
.product-card{ background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 6px 24px rgba(0,0,0,.08); transition: transform .6s var(--anim-ease), box-shadow .6s var(--anim-ease); display:flex; flex-direction:column; height:100%; }
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 12px 34px rgba(0,0,0,.12); }

.product-media{ position:relative; display:block; overflow:hidden; aspect-ratio: 4/3; }
.product-media img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform 1.4s var(--anim-ease); }
.product-card:hover .product-media img{ transform: scale(1.06); }

.product-badge{ position:absolute; inset-inline-start:8px; inset-block-start:8px; padding:.25rem .5rem; border-radius:999px; font-size:.78rem; color:#fff; font-weight:700; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.product-badge--new{ background:#16a34a; }
.product-badge--featured{ background:#0ea5e9; }
.product-badge--sale{ background:#ef4444; }
.product-badge--oos{ background:#b91c1c; }
.product-badges{ position:absolute; inset-inline-start:8px; inset-block-start:8px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.product-badges .product-badge{ position:static; inset:auto; }

.product-content{ padding: .9rem .9rem 1rem; flex:1; display:flex; flex-direction:column; }
.product-title{ margin:0 0 .4rem; font-size:1rem; color:#0f172a; font-weight:800; }
.has-custom-inline .product-title{ margin-bottom: .02rem; }
/* All Products page: apply tight spacing ONLY when custom-inline exists */
#allGrid .has-custom-inline .product-title{ margin-bottom: 0rem; }
.product-price{ display:flex; gap:.35rem; align-items:baseline; margin-bottom:.3rem; }
.product-price__current{ color:#d39a00; font-weight:800; }

/* Reserve consistent space for action area (button or qty-controls) */
.product-content{ display:flex; flex-direction:column; align-content:start; }
.product-content > .btn--add,
.product-content > .qty-controls{ 
  min-height: 48px; 
}
/* Center content and keep size while placing icon on the right in RTL */
.product-content > .btn--add{ 
  height:48px; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
}
.qty-controls{ min-height:48px; align-items:center; }
.product-price__old{ color:#9ca3af; text-decoration: line-through; font-size:.95rem; }

/* Weight selector (variants) */
.weight-options{ 
  display:flex; 
  flex-wrap: wrap;
  gap:.4rem; 
  margin-bottom:.6rem; 
}
.weight-option{ 
  border:1px solid #fde68a; 
  background:#fffdf5; 
  color:#b45309; 
  padding:.35rem .6rem; 
  border-radius:10px; 
  font-weight:800; 
  font-size:.9rem;
  cursor:pointer; 
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  position: relative; /* for badge positioning */
}
/* Small inline custom button variant for cards */
.weight-option--sm{ padding:.18rem .4rem; font-size:.82rem; line-height:1.1; border-radius:8px; }
.weight-option:hover{ 
  transform: translateY(-1px); 
  box-shadow: 0 4px 12px rgba(223, 174, 16, .18); 
  background:#fffbe6; 
}
.weight-option.is-selected{ 
  background:#fff2cc; 
  border-color:#f59e0b; 
  color:#b45309; 
  box-shadow: 0 4px 14px rgba(223, 174, 16, .22);
}
.weight-option[disabled], .weight-option[aria-disabled="true"]{ 
  opacity:.55; 
  cursor:not-allowed; 
  text-decoration: line-through; 
}

@media (max-width: 520px){
  .weight-option{ font-size:.85rem; padding:.3rem .55rem; }
}

/* Card: compact per-unit helper row with inline custom button */
.card-custom-row{ display:flex; align-items:center; gap:.3rem; margin-bottom:.35rem; }
.card-custom-help{ margin:0; font-size:.82rem; color:#6b7280; line-height:1.2; }
.card-custom-help b{ color:#b45309; font-weight:800; }

/* Small counter/badge on top-right of weight option when qty>0 */
.weight-badge{
  position:absolute;
  inset-inline-end:-6px;
  inset-block-start:-6px;
  min-width:18px;
  height:18px;
  padding-inline:4px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height: 1;
  display:none; /* shown via JS when qty>0 */
  place-items:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  border: 2px solid #fff;
}

.btn--add{ background:#f59e0b; color:#fff; border-radius:10px; padding:.6rem 1rem; font-weight:800; border:0; cursor:pointer; box-shadow: 0 6px 18px rgba(245,158,11,.35); transition: transform .2s ease, box-shadow .2s ease; width:100%; }
.btn--add{ 
  background:#fff7e6; 
  color:#d39a00; 
  border-radius:12px; 
  padding:.65rem 1rem; 
  font-weight:800; 
  border:1px solid #fde68a; 
  cursor:pointer; 
  box-shadow: 0 4px 14px rgba(223, 174, 16, .18);
  transition: transform .4s var(--anim-ease), box-shadow .4s var(--anim-ease), background .4s var(--anim-ease);
  width:100%;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  gap:.4rem; 
  /* In RTL put icon on the right visually */
  flex-direction: row-reverse;
}
.pd-qty__btn {background-color: var(--brand); color: #fff;border:1px solid #0000 ; border-radius: 15px;}
.pd-qty__count{padding: 8px; transform: translateX(5px); transform: translate(0px, 9px); position: absolute; color: #ff6200;font-weight: bold;font-size: 18px;}
.pd-qty__btn:hover {background-color:#f3d146 }
.pd-buy-btn{background-color: #f3d146;}
.pd-buy-btn:hover{background-color: #ffc31f;}
.btn--add:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(223, 174, 16, .28); background:#fff2cc; }
.btn--add:active{ transform: translateY(0); }

/* Featured section: slightly more compact cards */
.products .product-content{ padding: .75rem .75rem .85rem; }
.products .product-title{ font-size: .95rem; }
.products .product-price__current{ font-size: .98rem; }

/* Featured section: 4 per row on large screens */
@media (min-width: 981px){
  .products .product-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1100px){
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 800px){
  .product-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .product-grid{ grid-template-columns: 1fr; }
}

/* Horizontal product card layout on extra-small screens */
@media (max-width: 520px){
  .product-card{ 
    display:flex; 
    flex-direction: row; /* in RTL, first child appears on the right */
    align-items: stretch; 
    gap: .75rem;
    min-height: 140px;
  }
  .product-media{ 
    flex: 0 0 120px; /* fixed right column */
    height: auto; 
    align-self: stretch; /* make it take the full card height */
    border-radius: 12px; 
    overflow:hidden; 
  }
  .product-media img{ width:100%; height:100%; object-fit:cover; }
  .product-content{ flex:1; padding: .6rem .4rem .8rem; display:flex; flex-direction:column; justify-content:center; }
  .product-title{ font-size: .98rem; margin-bottom: .25rem; }
  .product-price{ margin-bottom: .55rem; }
}

/* ========================
   Categories Section
======================== */
.section-pad{ padding-block: clamp(4rem, 10vw, 7rem); background: #fff; }
.section-title{ margin:0 0 .5rem; text-align:center; color:#0f172a; font-size: clamp(1.2rem, 2.4vw + .6rem, 1.8rem); font-weight:800; }
.section-subtitle{ margin:0 0 2rem; text-align:center; color:#6b7280; font-size: clamp(.9rem, 1vw + .4rem, 1rem); }

/* Search Bar (All Products) */
.search-row{ display:flex; justify-content:center; margin: 0 0 1rem; }
.search-input{
  width:min(720px, 100%);
  border:1px solid #e5e7eb; border-radius: 12px; padding:.7rem 1rem; font-size:1rem; color:#0f172a; background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
}
.search-input::placeholder{ color:#9ca3af; }
.search-input:focus{ outline:none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(233,177,0,.15); }

/* Live search suggestions under the input */
.search-suggest{
  position:absolute; inset-inline:0; inset-block-start: calc(100% + 6px);
  margin:0; padding:.4rem; list-style:none; z-index: 1200; /* above .topbar (1000) to match homepage behavior */
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display:none; max-height: 320px; overflow:auto;
}
.search-suggest__item{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.5rem .65rem; border-radius:10px; cursor:pointer; }
.search-suggest__item .t{ color:#0f172a; font-weight:700; }
.search-suggest__item .pr{ color:#b45309; font-weight:800; }
.search-suggest__item:hover, .search-suggest__item.is-active{ background:#f8fafc; }

.search-suggest{
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* أنعم في الموبايل والتاتش باد */
}

/* للـ Chrome / Safari / Edge (webkit) */
.search-suggest::-webkit-scrollbar {
  width: 8px;               /* عرض البار */
}

.search-suggest::-webkit-scrollbar-track {
  background: transparent;   /* خلفية المسار */
}

.search-suggest::-webkit-scrollbar-thumb {
  background: #cfcfcf;       /* لون البار */
  border-radius: 6px;        /* حواف دائرية */
}

.search-suggest::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;       /* لون عند الـ hover */
}

/* للـ Firefox */
.search-suggest{
  scrollbar-width: thin;          /* أنحف */
  scrollbar-color: #cfcfcf transparent;
}


/* a11y helper */
.visually-hidden{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.category-grid{ display:grid; gap: clamp(1rem, 2.5vw, 1.5rem); grid-template-columns: repeat(4, 1fr); }
.category-card{ position:relative; display:block; border-radius:12px; overflow:hidden; box-shadow: 0 10px 30px rgba(0,0,0,.1); isolation:isolate; }
.category-card img{ width:100%; height: 280px; object-fit: cover; display:block; filter: contrast(1.02) saturate(1.02) brightness(.9); transition: transform 1.4s var(--anim-ease), filter 1.4s var(--anim-ease); }
.category-card::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.45)); z-index:0; transition: opacity .7s var(--anim-ease); }
.category-label{ position:absolute; left:50%; top:50%; right:auto; bottom:auto; transform: translate(-50%, -50%); z-index:1; color:#fff; font-weight:800; letter-spacing:.4px; text-shadow: 0 2px 12px rgba(0,0,0,.45); font-size: clamp(1.1rem, 1.6vw + .6rem, 1.5rem); text-align:center; margin:0; line-height:1.2; padding-inline: .25rem; }
.category-card:hover img{ transform: scale(1.06); filter: contrast(1.05) saturate(1.05) brightness(.95); }
.category-card:active img{ transform: scale(1.03); }

/* ========================
   Image Banner (All Products section)
======================== */
.image-banner{ margin:0; }
.image-banner img{ width:100%; height:auto; border-radius:14px; box-shadow: 0 10px 30px rgba(0,0,0,.12); display:block; }

/* ========================
   Shop Layout (All Products)
======================== */
.shop-layout{ display:grid; grid-template-columns: 1fr 800px; gap: clamp(1rem, 2.4vw, 1.5rem); align-items:start; }
.shop-main{ min-width:0; }
.shop-sidebar{ position:sticky; top:88px; align-self:start; }
.filter-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.filter-card + .filter-card{ margin-top:1rem; }
.filter-title{ margin:0 0 .75rem; font-size:1rem; color:#0f172a; font-weight:800; }
.filter-list{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.filter-list li{ display:flex; justify-content:space-between; align-items:center; padding:.5rem .65rem; border-radius:10px; cursor:pointer; color:#0f172a; }
.filter-list li:hover{ background:#f8fafc; }
.filter-list li[aria-current="true"]{ background:#fff; color: var(--brand-strong); font-weight:800; }
.filter-list .count{ min-width:26px; height:26px; border-radius:999px; display:grid; place-items:center; font-size:.85rem; padding-inline:.4rem; border:1px solid #e5e7eb; color:#6b7280; background:#f9fafb; }
.filter-list li[aria-current="true"] .count{ background:#fde68a; border-color:#f59e0b; color:#b45309; }
.price-range{ display:grid; gap:.5rem; }
.price-row{ display:flex; justify-content:space-between; color:#6b7280; font-size:.95rem; }
.price-range input[type="range"]{ width:100%; -webkit-appearance:none; height:4px; background:#e5e7eb; border-radius:999px; }
.price-range input[type="range"]:focus{ outline:none; }
/* WebKit */
.price-range input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background: var(--brand); border:2px solid #fff; box-shadow: 0 0 0 2px rgba(233,177,0,.35); cursor:pointer; margin-top:-8px; }
.price-range input[type="range"]::-webkit-slider-runnable-track{ height:4px; background:#e5e7eb; border-radius:999px; }
/* Firefox */
.price-range input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background: var(--brand); border:2px solid #fff; box-shadow: 0 0 0 2px rgba(233,177,0,.35); cursor:pointer; }
.price-range input[type="range"]::-moz-range-track{ height:4px; background:#e5e7eb; border-radius:999px; }
/* MS Edge (legacy) */
.price-range input[type=range]::-ms-thumb{ width:16px; height:16px; border-radius:50%; background: var(--brand); border:2px solid #fff; box-shadow: 0 0 0 2px rgba(233,177,0,.35); }
.price-range input[type=range]::-ms-track{ height:4px; background:transparent; border-color:transparent; color:transparent; }

/* Filled Apply button in filters */
.price-range .btn{ background: var(--brand); color:#fff; border:0; box-shadow: 0 6px 18px rgba(233,177,0,.35); }
.price-range .btn:hover{ background: var(--brand-strong); }

@media (max-width: 1075px){
  .shop-layout{ grid-template-columns: 1fr; }
  .shop-sidebar{ position:static; }
}

/* Mobile filter toggle */
.filter-toggle-row{ display:none; }
.filter-toggle{ display:none; margin: .25rem 0 1rem; border:1px solid #e5e7eb; background:#fff; color:#0f172a; border-radius:10px; padding:.45rem .75rem; cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.06); }
.filter-toggle i{ margin-inline-start:.35rem; transition: transform .2s ease; }
.filter-toggle[aria-expanded="true"] i{ transform: rotate(180deg); }
/* Align to the right in RTL */
.filter-toggle{ float:inline-end; }

@media (max-width: 1075px){
  .filter-toggle-row{ display:flex; justify-content:flex-end; }
  .filter-toggle{ display:inline-flex; align-items:center; float:none; }
  /* Dropdown look for sidebar on mobile */
  .shop-sidebar{ border:1px solid #e5e7eb; border-radius:14px; padding: .75rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); margin-bottom:1rem; background:#fff; order:-1; }
  .shop-layout{ margin-top:.25rem; }
  /* honor [hidden] attribute */
  .shop-sidebar[hidden]{ display:none !important; }
}

@media (max-width: 900px){
  .category-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .section-pad{ padding-block: 3rem; }
  .category-grid{ grid-template-columns: 1fr; }
  .category-card img{ height: 250px; }
}

/* ========================
   Mobile Menu (off-canvas)
======================== */
.menu-toggle{ 
  display:none; /* default hidden on desktop */
  width:44px; height:44px; border-radius:12px; border:0; cursor:pointer; 
  background:#f8fafc; color:#111827; display:none; place-items:center;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}
.menu-toggle i{ font-size:20px; }

.side-menu{ position: fixed; inset:0; z-index:50; pointer-events:none; display:none; }
.side-menu__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); opacity:0; transition: opacity .25s ease; z-index:1; }
.side-menu__panel{ position:fixed; inset-block:0; inset-inline-end:0; inset-inline-start:auto; right:0; left:auto; width:min(86vw, 340px); background:#fff; box-shadow:-10px 0 30px rgba(0,0,0,.15); z-index:2;
  transform: translateX(100%); transition: transform .3s ease; display:flex; flex-direction:column;
}
.side-menu__header{ display:flex; align-items:center; justify-content:space-between; padding:1rem 1rem; border-bottom:1px solid #f1f5f9; }
.side-menu__title{ font-weight:800; color:#0f172a; }
.side-menu__close{ border:0; background:transparent; font-size:22px; cursor:pointer; }
.side-menu__list{ list-style:none; padding: .5rem 0; margin:0; }
.side-menu__list li{ border-bottom:1px solid #f3f4f6; }
.side-menu__list a{ display:block; padding:1rem 1.25rem; text-decoration:none; color:#111827; }
.side-menu__list a:hover{ background:#f9fafb; }

/* open state */
body.menu-open{ overflow:hidden; }
body.menu-open .side-menu{ pointer-events:auto; }
body.menu-open .side-menu__backdrop{ opacity:1; }
body.menu-open .side-menu__panel{ transform: translateX(0); }
/* ensure the rest of the viewport is dimmed even if backdrop has issues */
body.menu-open .side-menu{ background: rgba(0,0,0,.55); }

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; overflow-x:hidden; }
body{
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  background: #fffdfa;
}

.container{ width:100%; 
  max-width:var(--container-max); 
  margin-inline:auto; 
  /* responsive side padding */
  padding-inline: clamp(.75rem, 4vw, 1.25rem);
}

/* ========================
   Topbar
======================== */

.topbar{ position: fixed; inset-inline:0; top:0; z-index:1000; width:100%; background:var(--white); border-bottom:1px solid #f1f5f9; backdrop-filter: saturate(160%) blur(4px); transition: transform .28s ease; will-change: transform; }
.topbar.topbar--hidden{ transform: translateY(-110%) !important; pointer-events: none; }


.topbar__inner {
  display: grid;
  align-items: center;
  grid-template-columns: auto 1fr auto;
  gap: 0; /* no column gap */
  min-height: 68px;
}

.nav-center {
  display: flex;
  align-items: center;
  justify-content: center; /* keep links centered */
  gap: .6rem; /* comfortable space between breadcrumb items visually */
  max-width: 100%;
  overflow: hidden; /* contain horizontal scroll of breadcrumb */
  width: 100%;
}

.nav-left{ justify-self:start; display:flex; align-items:center; flex:0 0 auto; margin-inline-end: 0; gap: .4rem; }
.nav-right{ justify-self:end; display:flex; align-items:center; flex:0 0 auto; justify-content:flex-end; }
.menu-toggle{ margin-inline-start:.5rem; }

/* Navbar search */
.nav-search{ position:relative; display:flex; align-items:center; flex: 0 1 auto; max-width: min(320px, 36vw); margin-inline-start:20px; margin-inline-end:.25rem; }
.nav-search__icon{ position:absolute; inset-inline-start:.6rem; inset-block-start:50%; transform: translateY(-50%); color:#7c818a; font-size:.9rem; pointer-events:none; }
.nav-search__input{
  width:100%;
  height:34px; border-radius: 999px; 
  border:2px solid #e3b400; /* stronger and more visible */
  background:#ffffff; color:#0f172a;
  padding: 0 .8rem; padding-inline-start: 2rem; font-size:.92rem;
  box-shadow: 0 2px 6px rgba(0,0,0,.05);
  transition: box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.nav-search__input::placeholder{ color:#a3a7ae; }
.nav-search__input:hover{ background:#ffffff; border-color: #d39a00; }
.nav-search__input:focus{ outline:none; border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgba(233,177,0,.2); background:#fff; }

@media (max-width: 600px){
  .nav-search{ flex:1; max-width: none; margin-inline-start:10px; }
  .nav-search__input{ width:100%; height:34px; }
}

/* Responsive horizontal spacing only (no vertical shift) */
@media (min-width: 687px) and (max-width: 969px){
  .nav-search{ margin-inline-start:14px; transform:none; }
}

.nav-center .breadcrumb {
  list-style: none;
  display: flex; 
  align-items: center;
  gap: .6rem;
  padding: 0;
  margin: 0;
  color: var(--muted);
  font-size: .95rem;

  /* responsiveness: allow horizontal scroll on small widths */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  overscroll-behavior-inline: contain;
  padding-inline: .25rem;
  /* edge fade to hint scroll (RTL both edges) */
  -webkit-mask-image: linear-gradient( to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100% );
  mask-image: linear-gradient( to right, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100% );
}

/* Shift breadcrumb slightly to the right for better balance */
@media (min-width: 687px) and (max-width: 969px){
  .nav-center .breadcrumb{ transform: translateX(35px); }
}

.nav-center .breadcrumb a {
  text-decoration: none;
  color: #0f172a;
  margin-left: 0;
  padding-inline: .25rem;
  white-space: nowrap;
}

.nav-center .breadcrumb li{ flex: 0 0 auto; scroll-snap-align: center; }

.cart{ 
  position:relative; 
  border:0; background:#f8fafc; 
  color:#111827; 
  width:44px; 
  height:44px; 
  border-radius:12px; 
  display:grid; place-items:center; 
  cursor:pointer; 
  box-shadow:0 2px 10px rgba(0,0,0,.06); 
  transition: transform .2s ease, box-shadow .2s ease; 
}

.cart:hover{ 
  transform: translateY(-2px); 
  box-shadow:0 8px 20px rgba(0,0,0,.12); 
}

.nav-center .breadcrumb a:hover { color: var(--brand); transition: color .2s ease; }

/* Active page link styling */
.nav-center .breadcrumb a[aria-current="page"]{
  color: var(--brand-strong);
  font-weight: 800;
  text-decoration: none;
  border-bottom: 3px solid currentColor; /* underline same as text color */
  padding-bottom: 3px;
  border-radius: 2px;
}

/* Active link in side menu */
.side-menu__list a[aria-current="page"]{
  color: var(--brand-strong);
  font-weight: 800;
  background: #fff7e6;
}

.fa-cart-shopping {
  font-size: 20px;
}

/* hide scrollbar visually while keeping scrollability */
.nav-center .breadcrumb::-webkit-scrollbar{ height:6px; }
.nav-center .breadcrumb::-webkit-scrollbar-thumb{ background: transparent; }
.nav-center .breadcrumb{ scrollbar-width: none; }
.nav-center .breadcrumb::-webkit-scrollbar{ display:none; }

.nav-center .breadcrumb li{ scroll-snap-align: center; }

.cart__badge{ 
  position:absolute; 
  inset-inline-start:-6px; 
  inset-block-start:-6px; 
  min-width:18px; height:18px; 
  padding-inline:5px; 
  border-radius:var(--radius); 
  background:#ef4444; 
  color:var(--white); font-size:12px; 
  display:grid; 
  place-items:center; 
  box-shadow: 0 2px 6px rgba(0,0,0,.15); 
  animation: bounceBadge 2.5s ease-in-out infinite;
}

.brand-logo{
  border-radius: 10px;
  display:block; /* remove potential inline spacing */
}
.bee{
  margin: 30px;
  font-size: 38px;
  font-weight: bold;
  color: #ffffff;
}
.gold {
  background-color: #e3e700;
  padding: 1px 30px;
  border-radius: 25px;
  color: var(--brand); 
}

.bee .tashkeel {
  color: #fbff00; 
  font-size: 1.2em;
  position: relative;
  top: -8px;
}
.bee .tashkee3 {
  color: white; 
  font-size: 1.2em;
  position: relative;
  top: -8px;
}
.bee .tashkee2 {
  color: white; 
  font-size: 1.2em;
  position: relative;
  bottom: -6px;
}
@keyframes bounceBadge{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-2px);} }

/* ========================
   Hero
======================== */
.hero{ position:relative; min-height:min(100vh, 880px); display:grid; place-items:center; overflow:clip; }
.hero__bg{ position:absolute; inset:0; z-index:0; }
.hero__bg img{ width:100%; height:100%; object-fit:cover; display:block; transform: scale(1.04); filter:saturate(1.12) contrast(1.05); transition: transform 1.8s var(--anim-ease); }
.hero__content{ position:relative; z-index:1; text-align:center; color:var(--white); padding-block: clamp(3rem, 6vw, 6rem); }
.hero__title{ margin:0 0 var(--space-4); font-weight:800; letter-spacing:.2px; line-height:1.15; font-size: clamp(1.8rem, 4.8vw + .6rem, 3.4rem); text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.hero__subtitle{ margin:0 0 var(--space-8); font-size: clamp(.95rem, 1.2vw + .5rem, 1.25rem); color: rgba(255,255,255,.95); text-shadow: 0 1px 6px rgba(0,0,0,.2);color: #ffffffc2; }
.btn{ display:inline-block; text-decoration:none; border:0; border-radius:999px; padding:.95rem 3rem; font-weight:700; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease; }
.btn--primary{ background: var(--white); color:var(--brand-strong); box-shadow: 0 8px 24px rgba(0,0,0,.15); position:relative; overflow:hidden; transition: transform .4s var(--anim-ease), box-shadow .4s var(--anim-ease), background-color .4s var(--anim-ease); }
.btn--primary:hover{ transform: translateY(-2px); }
.btn--primary:active{ transform: translateY(0); box-shadow: 0 6px 20px rgba(0,0,0,.18); }
.btn--primary::after{ content:""; position:absolute; inset:0; background: radial-gradient(120px 60px at var(--mx,50%) var(--my,50%), rgba(233,177,0,.25), transparent 60%); opacity:0; transition: opacity .6s var(--anim-ease); pointer-events:none; }
.btn--primary:hover::after{ opacity:1; }

/* Floating petals */
.petal{ position:absolute; width:22px; height:22px; border-radius:50% 60% 55% 45% / 60% 40% 60% 40%; background: rgba(255,255,255,.55); filter: blur(.2px); box-shadow: 0 8px 24px rgba(0,0,0,.12); animation: floatY 10s ease-in-out infinite; }
.petal--1{ inset-inline-end: 10%; inset-block-start: 20%; animation-delay: .2s; }
.petal--2{ inset-inline-start: 14%; inset-block-end: 18%; width:18px; height:18px; animation-delay: 1.1s; }
.petal--3{ inset-inline-start: 35%; inset-block-start: 28%; width:16px; height:16px; animation-delay: .6s; }
@keyframes floatY{ 0%,100%{ transform: translateY(0) rotate(0deg);} 50%{ transform: translateY(-12px) rotate(6deg);} }

/* ========================
   Reveal Animations (on scroll)
======================== */
.reveal{ opacity:0; transform: translateY(10px); will-change: transform, opacity; }
.reveal.in-view{ opacity:1; transform:none; transition: opacity var(--anim-duration) var(--anim-ease), transform var(--anim-duration) var(--anim-ease); }

/* Types */
[data-animate="fade-up"].in-view{ animation: fadeUp var(--anim-duration) var(--anim-ease) both; }
[data-animate="fade-down"].in-view{ animation: fadeDown var(--anim-duration) var(--anim-ease) both; }
[data-animate="pop"].in-view{ animation: popIn calc(var(--anim-duration) + .1s) var(--anim-ease) both; }
@keyframes fadeUp{ from{ opacity:.01; transform: translateY(10px);} to{ opacity:1; transform:none; } }
@keyframes fadeDown{ from{ opacity:.01; transform: translateY(-8px);} to{ opacity:1; transform:none; } }
@keyframes popIn{ 0%{ opacity:.01; transform: translateY(6px) scale(.99);} 100%{ opacity:1; transform: translateY(0) scale(1);} }

/* ========================
   Responsiveness
======================== */
@media (max-width: 900px){
  .topbar__inner{ grid-template-columns: auto 1fr auto; row-gap: var(--space-3); }
  .nav-center .breadcrumb{ gap: .75rem; justify-content: flex-start; }
  .nav-center .breadcrumb{ justify-content: flex-start; }
}
@media (max-width: 686px){
  /* add space below fixed navbar */
  body{ padding-top: 76px; }
  /* show off-canvas container only on small screens */
  .side-menu{ display:block; }
  /* make panel cover full viewport width to remove any side gutter */
  .side-menu__panel{ width:100vw; right:0; left:auto; inset-inline-end:0; inset-inline-start:auto; box-shadow:none; z-index: 2; }
  /* comfortable side padding on small screens */
  .container{ padding-inline: .5rem; }
  /* add top breathing space and respect notches */
  .topbar{ padding-top: max(.6rem, env(safe-area-inset-top, 0px)); }
  .topbar__inner{ gap: .75rem; }
  .nav-right, .nav-left{ margin-block-start: .25rem; }
  /* two-row header layout */
  .topbar__inner{
    display:grid; align-items:center; row-gap: .5rem;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'left . right'
      'center center center';
  }
  .nav-left{ grid-area:left; }
  .nav-center{ grid-area:center; }
  .nav-right{ grid-area:right; }
  .nav-center .breadcrumb{ justify-content:flex-start; }
  /* hide breadcrumb on small screens */
  .nav-center .breadcrumb{ display:none; }
  /* show hamburger button */
  .menu-toggle{ display:inline-grid; }
}

/* Faster animations on phones: reduce reveal/transition durations */
@media (max-width: 686px){
  :root{
    /* shorten global reveal animations */
    --anim-duration: .6s;
    /* shorten floating label as well */
    --label-anim-duration: .4s;
  }
  /* key transitions that were long on desktop */
  .hero__bg img{ transition-duration: .8s; }
  .product-media img{ transition-duration: .6s; }
  .category-card img{ transition-duration: .6s; }
}

/* Tablet/Phablet: 501px–863px -> links drop below, search expands between logo and cart */
@media (min-width: 686px) and (max-width: 969px){
  /* add space below fixed navbar (two-row header in this range) */
  body{ padding-top: 118px; }
  .topbar{ padding-top: 12px; }
  .topbar__inner{
    display:grid; align-items:center; row-gap: .5rem;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'left left right'
      'center center center';
  }
  .nav-left{ grid-area:left; display:flex; align-items:center; gap: 12px; min-width:0; }
  .nav-center{ grid-area:center; }
  .nav-right{ grid-area:right; }
  /* keep breadcrumb visible below */
  .nav-center .breadcrumb{ display:flex; justify-content:center; margin-inline:auto; transform:none !important; }
  /* expand search horizontally between logo and cart */
  .nav-search{ flex:1 1 auto; max-width:none; width:auto; min-width:0; margin-inline-start: 10px; margin-inline-end: 8px; }
  .nav-search__input{ height: 40px; }
}
@media (max-width: 480px){
  .breadcrumb{ font-size:.85rem; }
  .brand-logo{ width:40px; height:40px; }
  .btn{ padding:.85rem 1.2rem; }
  .nav-center .breadcrumb{ gap: .55rem; }
}
@media (max-width: 360px){
  .breadcrumb{ font-size:.8rem; }
  .nav-center .breadcrumb a{ margin-left: 10px; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001s !important; animation-iteration-count:1 !important; transition:none !important; }
}

/* ========================
   Footer
======================== */
.site-footer{ 
  background: #0f1a24; 
  color:#cbd5e1; 
  padding-block: clamp(3rem, 6vw, 4rem);
}
.footer__grid{ 
  display:grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: clamp(1rem, 2.4vw, 2rem);
}
.footer__title{ margin:0 0 .5rem; color:#fff; font-size:1.3rem; font-weight:800; }
.footer__text{ margin:0; color:#cbd5e1; line-height:1.8; }

.footer__heading{ margin:0 0 .75rem; color: var(--brand); font-weight:800; }
.footer__links{ list-style:none; padding:0; margin:0; display:grid; gap:.5rem; }
.footer__links a{ color:#cbd5e1; text-decoration:none; }
.footer__links a:hover{ color: var(--brand); }

.footer__social{ display:flex; gap:.5rem; align-items:center; }
.footer__social a{ 
  width:36px; height:36px; display:inline-grid; place-items:center; 
  background:#111827; color:#e5e7eb; border-radius:10px; 
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.footer__social a:hover{ background:#1f2937; color: var(--brand); }

.footer__divider{ border:0; border-top:1px solid rgba(255,255,255,.08); margin: 1.5rem 0 0; }
.footer__bottom{ text-align:center; padding-block: 1rem 1.2rem; }
.footer__copy{ margin:0; color:#94a3b8; font-size:.9rem; }
.footer__bottom a {text-decoration: none;}

/* ========================
   Pagination
======================== */
.pagination{ display:flex; justify-content:center; align-items:center; gap:.4rem; margin-top:1.25rem; }
.pagination button{ 
  min-width:36px; height:36px; border-radius:10px; border:1px solid #e5e7eb; background:#fff; color:#0f172a; cursor:pointer; 
}
.pagination button[aria-current="page"]{ background: var(--brand); color:#fff; border-color: var(--brand); }
.pagination button:hover{ background:#f8fafc; }

@media (max-width: 900px){
  .footer__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .footer__grid{ grid-template-columns: 1fr; }
}


/* ========================
   Floating Label Inputs
======================== */
.form-field{ position:relative; }
.form-field .input, .form-field .textarea{
  width:100%;
  border:1px solid #e5e7eb; 
  border-radius:12px; 
  padding:.9rem .9rem .6rem; 
  font-size:1rem; 
  color:#0f172a; 
  background:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.04);
  transition: border-color var(--label-anim-duration) var(--label-anim-ease), box-shadow var(--label-anim-duration) var(--label-anim-ease), background-color var(--label-anim-duration) var(--label-anim-ease);
}
.form-field .textarea{ resize:vertical; min-height: 120px; }
.form-field label{
  position:absolute; 
  inset-inline-start:12px; 
  inset-block-start:10px; 
  background:#fff; 
  padding: 0 .35rem; 
  color:#6b7280; 
  pointer-events:none; 
  transform: translateY(0) scale(1);
  transform-origin: right center; /* RTL */
  transition: transform var(--label-anim-duration) var(--label-anim-ease), color var(--label-anim-duration) var(--label-anim-ease), font-size var(--label-anim-duration) var(--label-anim-ease), inset var(--label-anim-duration) var(--label-anim-ease); 
}

/* Float on focus or when value exists */
.form-field .input:focus + label,
.form-field .input:not(:placeholder-shown) + label,
.form-field .textarea:focus + label,
.form-field .textarea:not(:placeholder-shown) + label{
  color: var(--brand-strong);
  inset-block-start: -8px; 
  font-size: .8rem; 
  transform: translateY(-6px) scale(.96);
}

/* Focus ring */
.form-field .input:focus, .form-field .textarea:focus{
  outline:none; 
  border-color: var(--brand); 
  box-shadow: 0 0 0 3px rgba(233,177,0,.15);
}

/* Invalid field visual state */
.form-field .input.is-invalid,
.form-field .textarea.is-invalid,
.form-field .input.touched:invalid,
.form-field .textarea.touched:invalid{
  border-color:#ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,.12) !important;
}

/* Keep floating label readable on invalid */
.form-field .input.is-invalid + label,
.form-field .textarea.is-invalid + label{
  color:#ef4444;
}

/* ========================
   Contact Page Layout
======================== */
.contact-grid{ display:grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr 1fr; align-items:start; }
.contact-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.contact-card h2{ margin:0 0 .75rem; font-size:1.1rem; font-weight:800; color:#0f172a; }
.contact-info-list{ list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }

@media (max-width: 900px){
  /* Stack and reorder: show info first on small screens */
  .contact-grid{ grid-template-columns: 1fr; display:flex; flex-direction: column; align-items:stretch; }
  .contact-card{ width:100%; max-width: none; margin-inline:0; }
  .contact-grid > .contact-card:nth-of-type(2){ order: -1; }
}


@media (max-width: 600px){
  .section-pad{ padding-block: 2.5rem; }
  .contact-card{ padding:.85rem; border-radius:12px; }
  /* center the submit button on very small screens */
  #contactForm .btn{ width:auto; display:block; margin-inline:auto; }
  .form-field label{ inset-inline-start:10px; }
}

/* ========================
   Cart Inline Controls
======================== */
.qty-controls{ 
  display:flex; 
  gap:.3rem; 
  align-items:center; 
  margin-top:.5rem; 
  flex-wrap: nowrap; 
  white-space: nowrap; 
  overflow: hidden; 
}
.qty-btn{ 
  border:1px solid #e5e7eb; background:#fff; color:#0f172a; 
  border-radius:10px; padding:.22rem .5rem; cursor:pointer; font-weight:700; font-size:.8rem;
  transition: transform .2s var(--anim-ease), box-shadow .2s var(--anim-ease), background-color .2s var(--anim-ease);
}
.qty-btn:hover{ background:#f8fafc; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.qty-remove{ color:#ef4444; border-color:#fecaca; }
.qty-plus{ color:#16a34a; border-color:#bbf7d0; }
.qty-meta{
  display:inline-flex; align-items:center; gap:.3rem; 
  padding:.2rem .45rem; border:1px solid #e5e7eb; border-radius:999px; background:#fff; 
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  flex: 1 1 auto; min-width: 120px; max-width: 60%; overflow:hidden; text-overflow: ellipsis;
}
.qty-label{ color:#6b7280; font-size:.78rem; margin-inline-end:.1rem; white-space:nowrap; }
.qty-count{ 
  min-width: 22px; height:22px; display:inline-grid; place-items:center; 
  padding:0 .35rem; border-radius:999px; 
  background:#f1f5f9; color:#0f172a; font-weight:800; font-size:.8rem; 
  border:1px solid #e5e7eb;
}
.qty-btn{ flex: 0 0 auto; }

/* Responsive tuning for cart controls */
@media (max-width: 600px){
  .qty-controls{ gap:.25rem; }
  .qty-meta{ min-width: 90px; max-width: 65%; padding:.15rem .4rem; }
  .qty-label{ display:inline; font-size:.72rem; } /* keep visible but small */
  .qty-count{ min-width:20px; height:20px; font-size:.75rem; padding:0 .3rem; }
  .qty-btn{ font-size:.75rem; padding:.18rem .4rem; }
}

@media (max-width: 360px){
  .qty-meta{ min-width: 70px; max-width: 60%; }
  .qty-label{ font-size:.68rem; }
  .qty-btn{ font-size:.72rem; padding:.16rem .35rem; }
}

/* Tablet small range: 801px–891px */
@media (min-width: 801px) and (max-width: 891px){
  .qty-controls{ gap:.3rem; }
  .qty-meta{ min-width: 110px; max-width: 60%; padding:.18rem .45rem; }
  .qty-label{ font-size:.65rem; }
  .qty-count{ min-width:22px; height:22px; font-size:.65تكrem; padding:0 .35rem; }
  .qty-btn{ font-size:.78rem; padding:.2rem .45rem; }
}

/* Tablet portrait range: 601px–800px */
@media (min-width: 601px) and (max-width: 800px){
  .qty-controls{ gap:.28rem; }
  .qty-meta{ min-width: 100px; max-width: 62%; padding:.18rem .42rem; }
  .qty-label{ font-size:.76rem; }
  .qty-count{ min-width:21px; height:21px; font-size:.76rem; padding:0 .32rem; }
  .qty-btn{ font-size:.76rem; padding:.18rem .42rem; }
}

/* ========================
   Product Detail Page
======================== */
.product-detail__grid{ 
  display:grid; 
  grid-template-columns: 1fr 1fr; 
  gap: clamp(1rem, 2.4vw, 1.5rem); 
  align-items:start;
  grid-template-areas: 'media info'; /* RTL: media on the right, info on the left */
}
.pd-info{ grid-area: info; }
.pd-media{ grid-area: media; }
.pd-info{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.pd-title{ margin:0 0 .75rem; font-size:1.6rem; font-weight:800; color:#0f172a; }
.pd-price{ display:flex; gap:.6rem; align-items:baseline; margin-bottom:.8rem; }
.pd-price__current{ color:#d39a00; font-weight:800; font-size:1.4rem; }
.pd-price__old{ color:#9ca3af; text-decoration: line-through; font-size:1.05rem; }
.pd-desc{ color:#475569; line-height:1.9; margin: .25rem 0 1rem;white-space: pre-line; }
.pd-action{ display:flex; align-items:center; gap:.6rem; }
/* stack internal rows */
.pd-action{ flex-direction: column; align-items: stretch; }
.pd-action__top{ display:flex; align-items:center; gap:.6rem; }
/* Make main button fill available width nicely */
.pd-main-btn{ flex:1 1 auto; height:48px; display:flex; align-items:center; justify-content:center; }
.pd-main-btn--remove{ background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; box-shadow: 0 4px 14px rgba(185,28,28,.15); }
.pd-main-btn--remove:hover{ background:#fecaca; }

.pd-media{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.pd-main{ border-radius:12px; overflow:hidden; aspect-ratio: 4/3; display:block; }
.pd-main img{ width:100%; height:100%; object-fit:cover; display:block; }
.pd-thumbs{ display:flex; gap:.5rem; margin-top:.6rem; overflow:auto; }
.pd-thumb{ border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:0; cursor:pointer; }
.pd-thumb[aria-current="true"]{ outline:3px solid #fde68a; border-color:#f59e0b; }
.pd-thumb img{ width:72px; height:72px; object-fit:cover; border-radius:10px; display:block; }

@media (max-width: 900px){
  .product-detail__grid{ 
    grid-template-columns: 1fr; 
    grid-template-areas:
      'media'
      'info'; /* على الموبايل: الصورة أولاً ثم المعلومات */
  }
}

.pd-badges{ display:flex; flex-wrap:wrap; gap:6px; margin:.25rem 0 .35rem; }
.pd-badges .product-badge{ position:static; inset:auto; font-size:.75rem; padding:.22rem .48rem; }

/* All Products grid on desktop: flexible columns instead of fixed 3x300px */
@media (min-width: 981px){
  #all-products .product-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); justify-content: stretch; }
}

/* Wider screens: increase columns for All Products */
@media (min-width: 1200px){
  #all-products .product-grid{ grid-template-columns: repeat(3, minmax(260px, 1fr)); }
}

/* ========================
   Checkout / Cart Page
======================== */
.checkout-grid{ display:grid; gap: clamp(1rem, 2.4vw, 1.5rem); grid-template-columns: 1fr 1fr; align-items:start; }
.checkout-card{ background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.checkout-card__title{ margin:0 0 .75rem; font-size:1.1rem; font-weight:800; color:#0f172a; }
.checkout-subtitle{ margin:1rem 0 .5rem; font-weight:800; color:#0f172a; }
.form-row-2{ display:grid; grid-template-columns: 1fr 1fr; gap:.75rem; }

.cart-items{ list-style:none; margin:0 0 1rem; padding:0; display:grid; gap:.65rem; }
.cart-item{ display:grid; grid-template-columns: 56px 1fr auto; gap:.75rem; align-items:center; padding:.5rem; border-radius:10px; background:#f9fafb; }
.cart-item .thumb{ width:56px; height:56px; border-radius:10px; object-fit:cover; display:block; }
.cart-item .meta .t{ font-weight:800; color:#0f172a; margin-bottom:4px; }
.cart-item .meta .pr{ color:#b45309; font-weight:800; }
.cart-item .qty{ display:flex; align-items:center; gap:.4rem; }
.cart-item .qbtn{ min-width:32px; height:32px; border-radius:8px; border:1px solid #e5e7eb; background:#fff; cursor:pointer; }
.cart-item .q{ min-width:24px; text-align:center; font-weight:800; }

.cart-totals{ display:grid; gap:.4rem; margin:.75rem 0 1rem; }
.cart-totals .row{ display:flex; align-items:center; justify-content:space-between; color:#0f172a; }
.cart-totals .row.total{ font-weight:800; color:#d39a00; font-size:1.1rem; }

/* Responsive */
@media (max-width: 900px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .form-row-2{ grid-template-columns: 1fr; }
}

/* Spacing between inputs on checkout */
.checkout-card form .form-field{ margin-bottom: .9rem; }
/* Inside two-column row, rely on grid gap instead of extra bottom margins */
.checkout-card form .form-row-2{ gap: .9rem; margin-bottom: .6rem; }
.checkout-card form .form-row-2 .form-field{ margin-bottom: 0; }

/* Payment methods spacing */
.pay-methods{ display:grid; gap:.7rem; margin-top:.4rem; }
.pay-option{ display:flex; align-items:center; justify-content:flex-start; gap:.6rem; padding:.7rem .85rem; border:1px solid #f3f4f6; border-radius:10px; background:#fffefb; cursor:pointer; }
.pay-option input[type="radio"]{ accent-color: var(--brand); }
.pay-option:has(input:checked){
  border-color:#f59e0b;
  background:#fff7e6;
  box-shadow: 0 0 0 3px rgba(233,177,0,.15);
}
.pay-option:hover{ border-color:#fde68a; }
.pay-note{ margin:.6rem 0 0; color:#6b7280; }

.pay-methods{ display:grid; gap:.7rem; margin-top:.4rem; }
.pay-option{ display:flex; align-items:center; justify-content:flex-start; gap:.6rem; padding:.7rem .85rem; border:1px solid #f3f4f6; border-radius:10px; background:#fffefb; cursor:pointer; }
.pay-option > span{ margin-inline-start: 0; }
.pay-option input[type="radio"]{ accent-color: var(--brand); }
.pay-option:has(input:checked){
  border-color:#f59e0b;
  background:#fff7e6;
  box-shadow: 0 0 0 3px rgba(233,177,0,.15);
}
.pay-option:hover{ border-color:#fde68a; }
.pay-note{ margin:.6rem 0 0; color:#6b7280; }

/* Place ONLY the hamburger at the extreme left on small/tablet screens */
@media (max-width: 863px){
  .topbar .nav-left{ position: relative; padding-inline-start: 52px; }
  .topbar .menu-toggle{ position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%); margin: 0; }
}

/* Global smooth scrolling for in-page anchors */
html{ scroll-behavior: smooth; }

/* Make sure #all-products stops below the fixed header */
#all-products{ scroll-margin-top: 92px; }
@media (max-width: 686px){
  #all-products{ scroll-margin-top: 76px; }
}
@media (min-width: 501px) and (max-width: 863px){
  #all-products{ scroll-margin-top: 118px; }
}

html {
  scroll-behavior: smooth;
}

/* ========================
   Modal (Empty Cart)
======================== */
.modal{ position: fixed; inset:0; z-index: 1200; display:grid; place-items:center; }
.modal[hidden]{ display:none !important; }
.modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.modal__panel{ position:absolute; z-index:1; width:min(92vw, 420px); background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:1rem; box-shadow: 0 18px 50px rgba(0,0,0,.25); text-align:center;top:315px}
.modal__title{ margin:0 0 .5rem; font-weight:800; color:#0f172a; font-size:1.2rem; }
.modal__text{ margin:.25rem 0 1rem; color:#475569; }
.modal__actions{ display:flex; justify-content:center; gap:.5rem; }
.modal__actions .btn{ min-width: 120px; }

/* Lock background scroll when modal open */
body.modal-open{ overflow:hidden; }

/* ===== Product details: Custom per‑unit selector ===== */
.pd-custom {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e9e9ee;
  border-radius: 12px;
  background: #fafbff; /* لمسة فاتحة حديثة */
}

.pd-custom__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-custom__label {
  font-weight: 600;
  color: #1f1f26;
}

.pd-custom__input {
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: none;
  width: 120px;
  padding: 10px 12px;
  border: 1px solid #dcddeb;
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  outline: none;
  transition: box-shadow .2s ease, border-color .2s ease, transform .06s ease;
}
.pd-custom__input:hover { border-color: #c9cae4; }
.pd-custom__input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(108,92,231,.12);
}
/* إخفاء أسهم الأرقام */
.pd-custom__input::-webkit-outer-spin-button,
.pd-custom__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.pd-custom__unit {
  padding: 6px 10px;
  background: var(--brand);
  color: #fff;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}

/* سطر مساعدة: سعر الجرام/المللي */
.pd-custom__help {
  margin-top: 8px;
  font-size: 13px;
  color: #666;
}


.weight-option:hover { box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.weight-option.is-selected {
  background: var(--brand);
  color: #fff;
  border-color: transparent;
}

/* أزرار شاشة عدم العثور على المنتج */
.pd-empty-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.pd-empty-actions .btn {
  padding: 10px 14px;
  border-radius: 10px;
}