/* Import comprehensive variables */
@import url('variables.css');
/* fallback */
@font-face {font-family: 'Material Icons';font-style: normal;font-weight: 400;src: url(../assets/fonts/mir.woff2) format('woff2');}
i,[ico]::before {font-family: 'Material Icons';font-weight: normal;font-style: normal;font-size: inherit;display: inline-block;line-height: 1;text-transform: none;letter-spacing: normal;word-wrap: normal;white-space: nowrap;direction: ltr;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;-moz-osx-font-smoothing: grayscale;font-feature-settings: 'liga'}
[ico]::before {content: attr(ico)}
html {background-color: var(--primary-green);overflow: hidden;}
body {direction: rtl;font-family: "Rubik", sans-serif;background-color: var(--background-body);width: 100%;padding-bottom: 80px;box-sizing: border-box;margin-bottom: 0 !important;}
body {
  max-width: none;min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: auto;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  max-height: 100vh;
}
body>* { width: 800px; margin: auto; max-width: 100% !important;padding: 0 10px; }
.container {margin: 0 auto;padding-bottom: 60px; max-width: 800px; flex-grow: 1;}
body>.container,body>main {
  max-height: calc(100vh - 58px); /* -99px */
  scrollbar-color: rgb(33 107 73 / 15%) transparent; overflow: auto; scrollbar-width: thin;
  /* padding-bottom: 100px !important; */
}
main{background: var(--background-body);}
js { display: none; }
*{box-sizing: border-box;}
.header .search_btn.header-search--hidden {
    display: none !important;
}
.header {
    background-color: var(--primary-green); margin:-3px auto !important; padding: 10px 5px 5px; border-radius: 0 0 15px 15px;width:100%;position: sticky; top: -3px; z-index: 3;
    a{ color:#fff !important; }
    &.address{   }
    .title{ color:#fff !important; font-size: 16px; }
    .current-location-btn { color: #fff; font-size: 14px; }
}
/* لوحة اختيار عنوان التوصيل (تحت الهيدر) — خلفية محايدة */
.address-sheet {
  position: fixed;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  width: min(100% - 24px, 440px);
  max-width: 100%;
  background: var(--background-card);
  color: var(--text-primary);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  border-radius: 0 0 18px 18px;
  z-index: 400;
  padding: 0 14px 14px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: max-height 0.35s ease, opacity 0.25s ease, padding-top 0.35s ease;
  border: 1px solid var(--border-light);
  border-top: none;
}
.address-sheet.active {
  max-height: min(70vh, 420px);
  opacity: 1;
  padding-top: 12px;
  pointer-events: auto;
}
.address-sheet-title {
  margin: 0 0 10px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.address-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 12px;
  max-height: min(48vh, 260px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 2px 8px;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
  scrollbar-width: thin;
}
.address-list::-webkit-scrollbar {
  width: 6px;
}
.address-list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 999px;
}
.address-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  padding: 12px 14px;
  background: var(--background-body);
  color: var(--text-primary);
  border-radius: 12px;
  border: 2px solid var(--border-lighter);
  cursor: pointer;
  text-align: right;
  line-height: 1.35;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.address-item:hover {
  border-color: var(--links);
  box-shadow: 0 4px 14px rgba(245, 130, 32, 0.2);
}
.address-item:active {
  transform: scale(0.99);
}
.address-item:focus-visible {
  outline: 2px solid var(--links);
  outline-offset: 2px;
}
.address-item--current {
  border-color: var(--links);
  background: linear-gradient(135deg, #fff 0%, var(--background-primary) 100%);
  box-shadow: 0 0 0 1px rgba(245, 130, 32, 0.3), 0 4px 12px rgba(0, 0, 0, 0.08);
  padding-inline-start: 36px;
}
.address-item--current::before {
  content: "✓";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  inset-inline-start: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--links);
}
.address-item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  word-break: break-word;
}
.address-item-coords {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  opacity: 0.95;
}
.add-address-btn {
  width: 100%;
  padding: 12px 14px;
  background: var(--links);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
  box-shadow: 0 2px 8px rgba(245, 130, 32, 0.35);
}
.add-address-btn:hover {
  background: var(--primary-blue-hover);
}
.add-address-btn:active {
  transform: scale(0.99);
}
.navbar {display: flex;justify-content: start;align-items: center;background-color: transparent;padding: 10px 20px;border-radius: 10px;font-weight: 600}
.logo {height: 38px; filter: brightness(10); cursor: pointer; margin: -5px 0 0 0;}
.navbar space,.navbar s {flex-grow: 1;}
.navbar a {color: var(--text-bright);text-decoration: none;transition: transform .2s ease;font-size: 24px;display: flex;align-items: center;gap: 5px;border: none;padding: 4px;border-radius: 5px;cursor: pointer;}
.cart-link {position: relative;}
.cart-count {position: absolute;top: -6px;left: -10px;background-color: var(--black);color: var(--background-body);font-size: 10px;border-radius: 50%;padding: 2px 5px}
.status-icons {display: flex;justify-content: start;padding: 5px;margin:5px auto;gap: 10px;overflow-x: auto;max-width: 100vw; width: auto;scrollbar-width: thin; scrollbar-color: rgb(33 107 73 / 15%) transparent;}
.status-icons a {
  position: relative;background-color: var(--button-base);border-radius: 100%;cursor: pointer;min-width: 80px;height: 80px;overflow: hidden;margin: 4px 2px 4px 0;aspect-ratio: 1 / 1;
  &:visited{ outline-color: var(--text-lightest); }
  img {  width: 100%;  height: 100%;  object-fit: cover;}
  .offer-overlay {  position: absolute;  bottom: 0;  left: 0;  width: 100%;  height: 50%;  background-color: rgba(0, 0, 0, 0.5);  display: flex;  justify-content: center;  align-items: center;  color: var(--white);  font-size: 8px;  text-align: center;}
}
@property --left-fade { syntax: "<length>"; inherits: false; initial-value: 0; }
@property --right-fade { syntax: "<length>"; inherits: false; initial-value: 0; }
@keyframes scrollfade {
  0%         { --right-fade: 0; }
  10%, 100%  { --right-fade: 3rem; }
  0%, 90%    { --left-fade: 3rem; }
  100%       { --left-fade: 0; }
}
.status-icons {
  overflow-x: scroll;
  mask: linear-gradient(to right,
    #0000,
    #ffff var(--left-fade) calc(100% - var(--right-fade)),
    #0000
  );
  animation: scrollfade;
  animation-timeline: --scrollfade;
  scroll-timeline: --scrollfade x;
  scroll-snap-type: x mandatory;
}
.slider {background: var(--border-light);border-radius: 10px;width: 100%;height: fit-content;}
.slider img {width: 100%;aspect-ratio: 3/1;object-fit: cover;border-radius: 10px;}
.slider::-webkit-scrollbar {display: none;}
.slider {-ms-overflow-style: none;scrollbar-width: none;}
.filter::-webkit-scrollbar {display: none;}
.filter {-ms-overflow-style: none;scrollbar-width: none;}
.categories::-webkit-scrollbar {display: none;}
.categories {-ms-overflow-style: none;scrollbar-width: none;touch-action: pan-x;}

/* أقسام الصفحة الرئيسية: عمود ثابت + شريط تمرير داخلي وبطاقات بأسماء واضحة */
.categories.status-icons {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  overflow-x: visible;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  mask: none;
  animation: none;
  scroll-timeline: none;
  scroll-snap-type: none;
  touch-action: auto;
  padding: 8px 12px 6px;
  margin: 8px auto 4px;
}
.categories-home-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  padding: 0 2px;
}
.categories-home-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary, inherit);
  margin: 0;
}
/* ltr: scrollLeft يتصرف بشكل موحّد على ديسكتوب/كروم (في rtl غالباً لا يتغيّر السحب بالماوس) */
/* row-reverse: أول فئة تبقى بجهة اليمين كواجهة عربية */
.categories-scroll {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  direction: ltr;
  gap: 14px;
  overflow-x: auto;
  overflow-y: visible;
  max-width: 100%;
  width: 100%;
  min-width: 0;
  padding: 4px 2px 8px;
  margin: 0;
  touch-action: pan-x pinch-zoom;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  user-select: none;
  -webkit-user-select: none;
}
.categories-scroll::-webkit-scrollbar {
  display: none;
}
/* تلاشي يمين/يسار مثل .status-icons: القناع على عنصر التمرير لأن overflow-x هنا */
.categories.status-icons .categories-scroll {
  mask: linear-gradient(
    to right,
    #0000,
    #ffff var(--left-fade) calc(100% - var(--right-fade)),
    #0000
  );
  animation: scrollfade;
  animation-timeline: --categoriesScrollFade;
  scroll-timeline: --categoriesScrollFade x;
}
.categories.status-icons .categories-scroll a.category-pill {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  direction: rtl;
  scroll-snap-align: start;
  width: auto;
  min-width: 0;
  max-width: 96px;
  height: auto;
  min-height: 0;
  aspect-ratio: unset;
  margin: 0;
  padding: 4px 2px 0;
  border-radius: 0;
  background-color: transparent;
  text-decoration: none;
  color: var(--text-primary);
  box-sizing: border-box;
  overflow: visible;
}
.categories.status-icons .categories-scroll a.category-pill:visited {
  outline-color: var(--text-lightest);
}
.categories.status-icons .categories-scroll a.category-pill .category-pill-media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--background-body, #fff);
  border: 2px solid #ead6c8;
  box-sizing: border-box;
}
.categories.status-icons .categories-scroll a.category-pill .category-pill-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}
.categories.status-icons .categories-scroll a.category-pill .category-pill-name {
  position: static;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: 100%;
  max-width: 96px;
  margin-top: 8px;
  padding: 0 1px;
  font-size: 12px;
  line-height: 1.35;
  font-weight: 600;
  text-align: center;
  word-break: break-word;
  overflow: hidden;
  color: var(--text-primary);
  background: none;
}

.section-header {display: flex;width: 100%;justify-content: space-between;align-items: center;margin: 15px 0;}
h2.section-title {text-align: start;font-weight: normal;margin: 0 !important;font-size: 16px;}
.product-list {display: flex;flex-wrap: wrap;gap: 1rem;justify-content: space-between;}
.product-card {text-decoration: none !important;color: var(--text-primary);border-radius: 15px;text-align: center;width: calc(30% - 1rem);box-sizing: border-box;transition: transform .2s ease, box-shadow .2s ease;cursor: pointer;box-shadow: var(--shadow-darker) 0px 1px 4px;background: var(--sidemenu-bg);padding: 3px;position: relative;display: flex;flex-direction: column;align-items: stretch;}
.product-card .product-card-media {width: 100%;flex-shrink: 0;aspect-ratio: 1 / 1;background: #fff;border-radius: 15px;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.product-card .product-card-media img {max-width: 100%;max-height: 100%;width: auto;height: auto;min-width: 0;min-height: 0;object-fit: contain;object-position: center;display: block;}
.product-info {display: flex;flex-direction: column;justify-content: space-between;padding: 5px 10px;}
.product-info .text {display: flex;flex-direction: column;align-items: start;width: 100%;min-width: 0;}
.product-info p.product-card-title {font-size: 14px;font-weight: 600;line-height: 1.35;margin: 0 0 4px 0;text-align: right;width: 100%;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;word-break: break-word;white-space: normal;color: var(--text-primary);}
.product-card-meta {font-size: 11px;color: var(--text-muted, #888);display: flex;flex-wrap: wrap;align-items: center;gap: 4px 8px;margin: 0 0 6px 0;width: 100%;line-height: 1.35;text-align: right;}
.product-card-meta .product-card-meta-sep {opacity: 0.5;user-select: none;}
.product-card-meta .product-card-id {font-variant-numeric: tabular-nums;}
.product-card-barcode {display: inline-flex;align-items: center;gap: 4px;flex-wrap: wrap;}
.product-card-barcode-label {font-size: 10px;opacity: 0.9;}
.product-card-barcode-code {font-size: 10px;font-family: ui-monospace, monospace;background: var(--background-input, rgba(0,0,0,.06));padding: 1px 5px;border-radius: 4px;}
.product-card-stock-badge {font-size: 9px;font-weight: 600;color: var(--white, #fff);background: var(--primary-green, #1f6d47);padding: 2px 6px;border-radius: 999px;line-height: 1.2;}
.cart-icon i {font-size: 18px}
.product-card:hover {transform: scale(1.03);box-shadow: 2px 4px 10px var(--shadow-dark)}
.product-info p {font-size: 12px;margin: 0 0 .25rem 0;text-align: right;gap: 10px;}
.product-info p img {width: 14px;height: 14px;;margin-left: 5px}
.product-card .favorite-button {position: absolute;top: 10px;right: 10px;z-index: 999;background-color: var(--modal-bg);border: none;border-radius: 50%;width: 25px;height: 25px;display: flex;justify-content: center;align-items: center;cursor: pointer;padding: 0;z-index: 1;transition: background-color 0.3s ease;}
.product-card .favorite-button svg {width: 15px;height: 15px;stroke: var(--text-gray);fill: none;transition: fill 0.3s ease, stroke 0.3s ease;}
.product-card .favorite-button.active svg {fill: var(--error-alt);stroke: var(--error-alt);}
.product-card .favorite-button:hover {background-color: var(--white);}
.product-card .favorite-button:focus {box-shadow: none;}
.product-card .text .average_reviews,
.product-card .text .star-rating-container {display: flex;align-items: center;flex-wrap: wrap;gap: 4px;}
.product-card .product-description {font-size: 10px;color: var(--text-gray);margin: 2px 0 4px 0 !important;}
.product-info i {color: var(--gold-light);text-decoration: none;font-size: 14px;}
.product-info h6 {margin: 0.5rem 0;}
.nav-link-offers,.nav-link-account {display: none !important}
.navbar {padding: 0;position: relative;border-radius: 10px;gap: 10px;}
footer {margin: auto;width: 100%;}
.v-error {color: var(--alert);padding: 5px 10px 8px;border-radius: 11px;line-height: 1.2;border: 1px solid var(--alert);}
picure[ico]::before {font-size: 50px;opacity: 0.2;width: 100%;height: 150px;align-content: center;}
[rate] i::before {content: 'star';}
[rate='1'] i:nth-child(n+2) {opacity: 0.2;}
[rate='2'] i:nth-child(n+3) {opacity: 0.2;}
[rate='3'] i:nth-child(n+4) {opacity: 0.2;}
[rate='4'] i:nth-child(n+5) {opacity: 0.2;}
input {box-sizing: border-box;margin: 10px 0;}
label input {width: 100%;}
.bottom-nav {display: flex;position: sticky;bottom: -5px;right: 0;left: 0;background: transparent;
  border-radius: 15px 15px 0 0;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDEyIDM5MyA1MiIgZmlsbD0iIzFGNkQ0NyIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+PHBhdGggZD0iTTIwNyA0Ny42MjdjMTUuNDY4IDAgMjguNTkzLTkuMjU3IDMzLjIxOS0yMy44MDRDMjQyLjIyOCAxNy41MDcgMjQ3LjM3MyAxMiAyNTQgMTJoMTIzLjRjOC45NjEgMCAxMy40NDEgMCAxNi44NjQgMS41MDIgMy4wMSAxLjMyIDUuNDU4IDMuNDI4IDYuOTkyIDYuMDJDNDAzIDIyLjQ3IDQwMyAyNi4zMjkgNDAzIDM0LjA0NXYzMC45MTJIMTBWMzQuMDQ0YzAtNy43MTYgMC0xMS41NzQgMS43NDQtMTQuNTIxIDEuNTM0LTIuNTkzIDMuOTgyLTQuNyA2Ljk5Mi02LjAyMUMyMi4xNiAxMiAyNi42NCAxMiAzNS42IDEySDE2MGM2LjYyNyAwIDExLjc1NCA1LjQ5MyAxMy42MjQgMTEuODUgNC40ODEgMTUuMjM4IDE3LjczIDIzLjc3NyAzMy4zNzYgMjMuNzc3Ii8+PC9zdmc+);
  border: none;justify-content: center;padding:0.4rem 0 0.25rem;gap: 2rem;z-index: 400;align-items: center;background-position: center; background-size: 430px; background-repeat: no-repeat;
  margin: 0;
}
.bottom-nav a {display: flex;flex-direction: row;align-items: center;gap: 5px;width: 40px;font-size: 24px;color: var(--white);padding: 10px;text-decoration: none;}
.bottom-nav a {position: relative;}
.bottom-nav a .cart-badge{
  position:absolute;
  top:-5px;
  right:0px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ff3b30;
  color:#fff;
  font-size:11px;
  line-height:18px;
  text-align:center;
  display:none;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.bottom-nav a .icon {font-size: 34px;margin-bottom: 5px;}
.bottom-nav a .text {font-size: 14px;text-align: center;}
.bottom-nav a:hover {transform: scale(1.05);text-decoration: none;color: var(--links);}
.bottom-nav .center {
  background: var(--links); color: #fff !important; border-radius: 50%; padding: 6px; height: 45px; width: 45px; display: flex ; align-items: center; justify-content: center; gap: 0 !important; margin: -50px 15px 0 15px;
}
main .filter div:empty {background: var(--loading-bg);border-radius: 50%;min-width: 50px;min-height: 50px;animation: glowing infinite linear 0.5s;}
.slider:empty {background: var(--loading-bg);animation: glowing infinite linear 0.5s;}
@keyframes glowing { 0%, 100% {  opacity: 1;} 30%, 70% {  opacity: 0.7;} 50% {  opacity: 0.5;}}
.side-menu {width: 280px;height: 100%;max-height: 100dvh;background-color: var(--sidemenu-bg);position: fixed;top: 0;right: -300px;transition: right 0.3s ease;box-shadow: -2px 0 8px var(--shadow-medium);z-index: 1000;padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;overflow-y: auto;overflow-x: hidden;-webkit-overflow-scrolling: touch;overscroll-behavior: contain;scrollbar-width: thin;scrollbar-color: rgb(33 107 73 / 15%) transparent;}
.side-menu.active {right: 0;}
/* بطاقة المستخدم في القائمة الجانبية */
.side-menu .profile {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 20px;
  padding: 16px 14px 18px;
  background: linear-gradient(160deg, var(--background-secondary) 0%, var(--background-card) 55%, var(--background-tertiary) 100%);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.side-menu .profile .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-top: 0;
  gap: 6px;
}
.side-menu .profile .avatar {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  object-fit: cover;
  margin-bottom: 4px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px var(--shadow-medium);
  border: 3px solid var(--white);
  outline: 1px solid var(--border-lighter);
  background: var(--background-input);
}
.side-menu .profile .info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 4px 0 0;
  line-height: 1.4;
  max-width: 100%;
  word-break: break-word;
}
.side-menu .profile .info small#side-email {
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
  letter-spacing: 0.02em;
  direction: ltr;
  unicode-bidi: embed;
}
.side-menu .profile .info .side-account-type {
  display: inline-block;
  margin: 0;
  padding: 5px 12px;
  max-width: 100%;
  box-sizing: border-box;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--primary-blue-dark);
  background: var(--background-primary);
  border: 1px solid var(--border-light);
  border-radius: 999px;
}
/* أقرب تاجر — نفس لغة بطاقة البروفايل في القائمة */
.side-nearest-store {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 14px 14px 16px;
  background: linear-gradient(160deg, var(--background-secondary) 0%, var(--background-card) 55%, var(--background-tertiary) 100%);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  border-right: 4px solid var(--primary-green);
}
.side-nearest-store__intro {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 8px;
  line-height: 1.45;
}
.side-nearest-store__name {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 10px;
  line-height: 1.35;
  word-break: break-word;
  color: var(--text-primary);
}
.side-nearest-store__dist-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 0 0 8px;
  padding: 8px 10px;
  background: var(--background-primary);
  border: 1px solid var(--border-lighter);
  border-radius: 10px;
}
.side-nearest-store__dist-icon {
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--primary-green);
  margin-top: 1px;
}
.side-nearest-store__line {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  line-height: 1.4;
  color: var(--text-primary);
  word-break: break-word;
}
.side-nearest-store__addr {
  font-size: 12px;
  margin: 0;
  line-height: 1.45;
  color: var(--text-muted);
  word-break: break-word;
}
.avatar {width: 60px;height: 80px;border-radius: 20px;object-fit: contain;margin-bottom: 0;}
.info {display: flex;flex-direction: column;margin-top: 10px;}
.info strong {font-size: 14px;margin-bottom: 3px;}
.info small {color: var(--gray-dark);font-size: 14px;}
/* قائمة روابط القائمة الجانبية */
.side-menu #side-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px 14px;
  background: linear-gradient(165deg, var(--background-tertiary) 0%, var(--background-card) 50%, var(--background-secondary) 100%);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}
.side-menu #side-links a {
  display: flex;
  align-items: center;
  padding: 11px 12px;
  margin-bottom: 0;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  font-size: 22px;
  gap: 10px;
}
.side-menu #side-links a:hover {
  background-color: var(--primary-blue);
  color: var(--white);
  box-shadow: 0 3px 12px var(--shadow-medium);
}
.side-menu #side-links a:active {
  opacity: 0.94;
}
.side-menu #side-links a .text {
  font-size: 14px;
  flex: 1;
  font-weight: 600;
  text-align: right;
  line-height: 1.35;
}
.side-menu .logout {
  width: 100%;
  padding-top: 16px;
  margin-top: 4px;
  border-top: 1px solid var(--border-lighter);
}
.side-menu .logout a {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: 12px;
  transition: background 0.2s ease, color 0.2s ease;
  font-size: 24px;
  gap: 8px;
}
.side-menu .logout a .text {
  font-size: 15px;
  flex: 1;
  font-weight: 600;
}
.side-menu .logout a:hover {background-color: var(--alert);color: var(--white);}
.side-menu .logout a.blue:hover {background-color: var(--primary-blue) !important;}
.overlay {position: fixed;top: 0;right: 0;left: 0;bottom: 0;background-color: var(--overlay-bg);display: none;z-index: 500;margin: 0; width: auto;}
.overlay.active {display: block;}
.not-found {max-width: 400px;margin: 0 auto;text-align: center;padding: 50px;transform: translateY(40%);}
.not-found h1 {font-size: 80px;margin: 0;color: var(--error-primary);}
.not-found h2 {margin: 10px 0;font-size: 24px;}
.not-found p {margin: 20px 0;color: var(--text-lightest);}
.not-found a {display: inline-block;padding: 10px 20px;background-color: var(--error-primary);color: var(--white);text-decoration: none;border-radius: 8px;transition: 0.3s;}
.not-found a:hover {background-color: var(--error-hover);text-decoration: none;}
.profile-card {max-width: 400px;margin: 0 auto;padding: 24px;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.profile-header {
  display: flex;flex-direction: column;align-items: center;justify-content: center;margin-bottom: 20px;
  img {  width: 80px;  height: 80px;  object-fit: cover;  border-radius: 50%;  margin-bottom: 5px;}
  .info { display: flex;  flex-direction: column;  align-items: center;  justify-content: center;
    strong {font-size: 16px;font-weight: bold;  }
    small {color: var(--text-gray);font-size: 16px;}
  }
}
form {width: 100%;}
form label {display: block;margin-bottom: 5px;text-align: right}
.login form {display: flex;flex-direction: column;}
.login form a {align-self: start;font-size: 12px;margin: 0}
button[type="submit"] {width: 100%;padding: 10px;background-color: var(--primary-blue);border: none;border-radius: 5px;color: var(--white);font-size: 16px;cursor: pointer;margin: 20px 0 0 0;}
.pass-view {position: relative}
input {width: 100%;height: 40px;font-size: 14px;}
.pass-view span {font-size: 16px;position: absolute;left: 10px;top: 55%;transform: translateY(-50%);cursor: pointer;z-index: 1}
button[type="submit"]:hover {background-color: var(--primary-blue-hover)}
button:focus {box-shadow: none !important;}
fr, .fr {float: right;}
fl, .fl {float: left;}
.w100,[w100] {width: 100%;}
.w90,[w90] {width: 90%;}
.w80,[w80] {width: 80%;}
.w70,[w70] {width: 70%;}
.w60,[w60] {width: 60%;}
.w50,[w50] {width: 50%;}
.w40,[w40] {width: 40%;}
.w30,[w30] {width: 30%;}
.w20,[w20] {width: 20%;}
.w10,[w10] {width: 10%;}
flex,[flex],.flex {display: flex;flex-wrap: wrap;gap: 10px;}
flex>*,[flex]>*,.flex>* {flex-grow: 1;}
fwrap,.fwrap,[fwrap] {flex-wrap: wrap;}
fnowrap,.fnowrap,[fnowrap] {flex-wrap: nowrap;}
.slider {display: flex;background: transparent;border-radius: 15px;margin-top: 15px;overflow-x: auto;white-space: nowrap;overflow-y: hidden;/* scroll-snap-type: x mandatory;*/
  will-change: transform;user-select: none;cursor: pointer;transition: all 0.2s;transform: scale(0.99);/* scroll-snap-type: x mandatory;*/}
.slider.active {cursor: grabbing;cursor: -webkit-grabbing;scroll-snap-type: none;}
.slider * {user-select: none;}
.slider>* {scroll-snap-align: center;flex: none;width: 100%;}
@keyframes slideUp { from { height: auto; opacity: 1; padding: 1em; margin: 1em 0; } to { height: 0; opacity: 0; padding: 0; margin: 0; } }
.hide, [hide] { height: 0; overflow: hidden; padding: 0; margin: 0; animation: slideUp 0.3s ease; }
sliderup {
     inner{position: fixed; z-index: 999999999; bottom: -100vh; transition: all 0.5s; background-color: #fff; width: 100%; padding: 20px; box-sizing: border-box; border-radius: 30px 30px 0 0; overflow: auto; max-height: 70vh;right: 0; }
     &.open inner { bottom: 0; }
     shade{position: fixed; z-index: 999999998; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,0.4); }
}
@media (min-width: 600px) {/* PC */
  .pc-100, [pc-100] { width: 100%; }
  .pc-90, [pc-90] { width: 90%; }
  .pc-80, [pc-80] { width: 80%; }
  .pc-70, [pc-70] { width: 70%; }
  .pc-60, [pc-60] { width: 60%; }
  .pc-50, [pc-50] { width: 50%; }
  .pc-40, [pc-40] { width: 40%; }
  .pc-30, [pc-30] { width: 30%; }
  .pc-20, [pc-20] { width: 20%; }
  .pc-10, [pc-10] { width: 10%; }
  [hide-pc], .hide-pc { display: none; }
  .product-card { width: calc(25% - 1rem); }
  .bottom-nav {background-size: 500px;background: var(--primary-green);padding: 0;border-radius: 15px 15px 0 0;}
  .bottom-nav a{width: auto;}
  .bottom-nav .center{ margin: 0px 15px 0 15px;/*border: 9px solid var(--background-body);*/transform: translateY(-50%) !important;}
/* PC END*/
}
@media (max-width: 600px) {
  /* MOB */
  .pc-100,  [pc-100],  .pc-90,  [pc-90],  .pc-80,  [pc-80],  .pc-70,  [pc-70],  .pc-60,  [pc-60],  .pc-50,  [pc-50],  .pc-40,  [pc-40],  .pc-30,  [pc-30],  .pc-20,  [pc-20],  .pc-10,  [pc-10] {  width: 100%;}
  .mob-100,  [mob-100] {  width: 100%;}
  .mob-90,  [mob-90] {  width: 90%;}
  .mob-80,  [mob-80] {  width: 80%;}
  .mob-70,  [mob-70] {  width: 70%;}
  .mob-60,  [mob-60] {  width: 60%;}
  .mob-50,  [mob-50] {  width: 50%;}
  .mob-40,  [mob-40] {  width: 40%;}
  .mob-30,  [mob-30] {  width: 30%;}
  .mob-20,  [mob-20] {  width: 20%;}
  .mob-10,  [mob-10] {  width: 10%;}
  [hide-mob],  .hide-mob {  display: none;}
  .product-card {  width: calc(50% - 0.5rem);}
  .filter {  gap: 8px;}
  .filter div {  min-width: 60px;  height: 60px;}
  .navbar {  padding: 0;}
  .bottom-nav {  gap: 1rem;}
  .logo {  height: 45px;  /* filter: brightness(0); */
    cursor: pointer;}
  .bottom-nav a .text {  font-size: 10px;}
  .bottom-nav a {  flex-direction: column;  gap: 0;  font-size: 20px;  padding: 0 8px;}
  .navbar a {  font-size: 20px;}
  .slider {  scroll-snap-type: x mandatory;}
  .slider img {  aspect-ratio: 5/2;}
  .section-header {  width: 96%;  margin: 15px auto;}
  .view-all {  font-size: 10px;}
  h2.section-title {  font-size: 12px !important;}
  .product-card p {  margin: 0;  font-size: 10px;}
  .product-info p.product-card-title {  font-size: 13px;  font-weight: 600;  margin: 0 0 4px 0;}
  .product-card .product-card-meta {  font-size: 9px;}
  .product-card .product-card-stock-badge {  font-size: 8px;  padding: 2px 5px;}
  p.product-description {  margin: 0 !important;}
  /* MOB END */
}
#loading-spinner { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; }
.spinner-overlay { background: rgba(255, 255, 255, 0.9); display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; }
.spinner { text-align: center; color: var(--primary-green); }
.spinner-circle { width: 50px; height: 50px; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-green); border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 20px auto; }
.spinner p { font-size: 16px; font-weight: 500; margin: 0; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
alert { font-size: 9px; margin: 10px; background-color: #ffebd8; color: #885858; padding: 5px; border-radius: 10px; }
.add-to-cart-btn svg{ color: #fff; }
button.add-to-cart-btn { border-radius: 100%; height: 30px; width: 30px; padding: 8px; background-color: #f58220; }
.notyf { bottom: 160px; min-width: auto; width: 80%; left: auto; right: auto; margin: auto;z-index: 99999; }
.notyf__toast { padding: 0; border-radius: 16px; }