/* Add custom CSS styles below */
/* =====================================================
   ASRYA FULL CUSTOM CSS
   Header + Product Page + Footer + Mobile Fixes
===================================================== */

:root {
  --asrya-ink: #1f120b;
  --asrya-brown: #3a2415;
  --asrya-caramel: #9b6a42;
  --asrya-gold: #d8b98f;
  --asrya-cream: #fbf7f1;
  --asrya-page: #fffaf4;
  --asrya-soft: #f4ece2;
  --asrya-white: #ffffff;
  --asrya-muted: #7a6a5d;
  --asrya-line: rgba(31, 18, 11, 0.10);
  --asrya-shadow: 0 20px 60px rgba(31, 18, 11, 0.08);
}

/* =====================================================
   GLOBAL
===================================================== */

body {
  background:
    radial-gradient(circle at 85% 8%, rgba(155, 106, 66, 0.10), transparent 28%),
    linear-gradient(180deg, #fffaf4 0%, #f7efe6 100%) !important;
}

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

.store-header .s-user-menu-login-btn {
  background: transparent !important;
  border: 1px solid var(--asrya-brown) !important;
  border-radius: 999px !important;
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--asrya-brown) !important;
  box-shadow: none !important;
}

.store-header .s-user-menu-login-btn svg,
.store-header .s-user-menu-login-btn svg path {
  fill: var(--asrya-brown) !important;
}

.store-header .s-cart-summary-wrapper {
  background: transparent !important;
  border: 1px solid var(--asrya-brown) !important;
  border-radius: 999px !important;
  min-height: 42px !important;
  padding: 0 12px !important;
  color: var(--asrya-brown) !important;
  box-shadow: none !important;
}

.store-header #s-cart-icon,
.store-header .header-btn__icon,
.store-header .sicon-shopping-bag,
.store-header .s-cart-summary-total,
.store-header .s-cart-summary-total i,
.store-header .s-cart-summary-content {
  color: var(--asrya-brown) !important;
}

.store-header .s-cart-summary-count {
  background: var(--asrya-brown) !important;
  color: #fffaf4 !important;
  border: 2px solid #ffffff !important;
}

.store-header .s-user-menu-login-btn:hover,
.store-header .s-cart-summary-wrapper:hover {
  background: var(--asrya-brown) !important;
  border-color: var(--asrya-brown) !important;
}

.store-header .s-user-menu-login-btn:hover svg path {
  fill: #fffaf4 !important;
}

.store-header .s-cart-summary-wrapper:hover,
.store-header .s-cart-summary-wrapper:hover *,
.store-header .s-cart-summary-wrapper:hover .s-cart-summary-total,
.store-header .s-cart-summary-wrapper:hover .s-cart-summary-total i {
  color: #fffaf4 !important;
}

.store-header .s-cart-summary-wrapper:hover .s-cart-summary-count {
  background: var(--asrya-gold) !important;
  color: var(--asrya-ink) !important;
  border-color: #fffaf4 !important;
}

/* Hide header email */
.store-header salla-contacts[is-header],
.store-header .s-contacts-header,
.store-header .s-contacts-topnav-link[href^="mailto:"] {
  display: none !important;
  visibility: hidden !important;
}

/* =====================================================
   HIDE SEARCH COMPLETELY
===================================================== */

.store-header .header-search,
.store-header salla-search,
.store-header .s-search,
.store-header .s-search-modal,
.store-header .s-search-container,
.store-header .s-search-inline,
.store-header .s-search-input-wrapper,
.store-header .s-search-input,
.store-header input[type="search"].s-search-input,
.top-navbar .header-search,
.top-navbar salla-search,
.top-navbar .s-search,
.top-navbar .s-search-modal,
.top-navbar .s-search-container,
.top-navbar .s-search-inline,
.top-navbar .s-search-input-wrapper,
.top-navbar .s-search-input,
.top-navbar input[type="search"].s-search-input {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 0 0 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* =====================================================
   TOP NAV DELIVERY MESSAGE
===================================================== */

.s-menu-topnav-list {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.s-menu-topnav-list .s-menu-topnav-item {
  display: none !important;
}

.asrya-topnav-delivery {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #fffaf4 !important;
  color: var(--asrya-brown) !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.07) !important;
  isolation: isolate !important;
  overflow: hidden !important;
  animation: asryaSoftPulse 2.8s ease-in-out infinite !important;
}

.asrya-topnav-delivery::before {
  content: "⏱" !important;
  width: 24px !important;
  height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--asrya-gold) !important;
  color: var(--asrya-ink) !important;
  border-radius: 999px !important;
  font-size: 13px !important;
}

.asrya-topnav-delivery::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  padding: 1.5px !important;
  border-radius: inherit !important;
  background: linear-gradient(
    90deg,
    #3a2415,
    #d8b98f,
    #fffaf4,
    #d8b98f,
    #3a2415
  ) !important;
  background-size: 260% 100% !important;
  animation: asryaBorderMove 3.2s linear infinite !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  z-index: -1 !important;
}

@keyframes asryaBorderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 260% 50%; }
}

@keyframes asryaSoftPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(31, 18, 11, 0.07);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 12px 24px rgba(31, 18, 11, 0.12);
  }
}

/* =====================================================
   PRODUCT PAGE LAYOUT
===================================================== */

.container--product-details {
  max-width: 1280px !important;
  margin-top: 34px !important;
  margin-bottom: 64px !important;
  padding: 0 18px !important;
  background: transparent !important;
}

.container--product-details > .flex {
  gap: 34px !important;
  align-items: flex-start !important;
}

.container--product-details .sidebar {
  height: fit-content !important;
  align-self: flex-start !important;
  background: #ffffff !important;
  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 22px !important;
  padding: 10px !important;
  box-shadow: 0 14px 38px rgba(31, 18, 11, 0.07) !important;
  overflow: hidden !important;
}

.container--product-details .sidebar::before,
.container--product-details .sidebar::after {
  display: none !important;
}

/* Product info card */
.container--product-details .main-content {
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.88) !important;
  border-radius: 34px !important;
  padding: 34px !important;
  box-shadow: var(--asrya-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

.container--product-details .main-content::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  height: 5px !important;
  background: linear-gradient(90deg, #1f120b, #9b6a42, #d8b98f) !important;
}

.product-brand {
  display: none !important;
}

.container--product-details h1 {
  color: var(--asrya-ink) !important;
  font-size: clamp(30px, 3vw, 42px) !important;
  line-height: 1.25 !important;
  font-weight: 950 !important;
  letter-spacing: -0.6px !important;
  margin-bottom: 8px !important;
}

.product-entry__sub-title {
  color: #786756 !important;
  font-size: 16px !important;
  line-height: 1.9 !important;
  margin-bottom: 20px !important;
}

.container--product-details .total-price,
.container--product-details .starting-or-normal-price p,
.container--product-details .gap-4.flex p {
  color: var(--asrya-ink) !important;
  font-size: 32px !important;
  font-weight: 950 !important;
}

/* =====================================================
   PRODUCT IMAGE SLIDER
===================================================== */

.container--product-details .details-slider,
.container--product-details .details-slider .swiper,
.container--product-details .details-slider .s-slider-container,
.details-slider,
.details-slider .swiper,
.details-slider .swiper-wrapper,
.details-slider .swiper-slide {
  background: transparent !important;
  border-radius: 18px !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
}

.container--product-details .details-slider .swiper-wrapper,
.container--product-details .details-slider .s-slider-swiper-wrapper {
  height: auto !important;
  min-height: unset !important;
  align-items: center !important;
}

.container--product-details .details-slider .swiper-slide {
  height: auto !important;
  min-height: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.container--product-details .details-slider .swiper-slide img,
.details-slider .swiper-slide img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: contain !important;
  display: block !important;
  background: #fbf7f1 !important;
  border-radius: 18px !important;
  padding: 0 !important;
  transform: none !important;
  filter: none !important;
}

.details-slider .swiper-slide img:hover {
  transform: none !important;
  filter: none !important;
}

.container--product-details .details-slider .swiper-slide.magnify-wrapper {
  background: #fbf7f1 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}

.s-slider-nav-arrow {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(58, 36, 21, 0.14) !important;
  color: var(--asrya-brown) !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 20px rgba(31, 18, 11, 0.08) !important;
}

.promotion-title,
.s-product-card-promotion-title {
  background: var(--asrya-brown) !important;
  color: #fff7ef !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 20px rgba(31, 18, 11, 0.14) !important;
}

.details-slider .btn--wishlist button,
.details-slider .s-button-light-outline {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(58, 36, 21, 0.14) !important;
  color: var(--asrya-brown) !important;
  border-radius: 999px !important;
}

.container--product-details .absolute.z-\[2\] {
  background: rgba(255, 255, 255, 0.92) !important;
  border: 1px solid rgba(58, 36, 21, 0.12) !important;
  box-shadow: 0 10px 24px rgba(31, 18, 11, 0.08) !important;
}

.container--product-details .absolute.z-\[2\] span:first-child {
  color: var(--asrya-brown) !important;
}

.container--product-details .absolute.z-\[2\] span:last-child {
  color: var(--asrya-muted) !important;
}

/* Thumbnails */
.container--product-details .s-slider-thumbs,
.s-slider-thumbs {
  height: auto !important;
  margin-top: 12px !important;
}

.container--product-details .s-slider-thumbs .swiper-slide,
.s-slider-thumbs .swiper-slide {
  height: 92px !important;
  background: #ffffff !important;
  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  opacity: 0.7 !important;
}

.s-slider-thumbs .swiper-slide img {
  background: #fbf7f1 !important;
  border-radius: 10px !important;
}

.s-slider-thumbs .swiper-slide-thumb-active {
  opacity: 1 !important;
  border: 2px solid var(--asrya-brown) !important;
}


/* =====================================================
   PRODUCT DESCRIPTION
===================================================== */

.product__description {
  background: linear-gradient(135deg, rgba(31, 18, 11, 0.96), rgba(58, 36, 21, 0.94)) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  padding: 24px !important;
  margin: 24px 0 18px !important;
  box-shadow: 0 20px 45px rgba(31, 18, 11, 0.17) !important;
  position: relative !important;
  overflow: hidden !important;
}

.product__description::before {
  content: "" !important;
  position: absolute !important;
  width: 220px !important;
  height: 220px !important;
  left: -70px !important;
  bottom: -100px !important;
  background: radial-gradient(circle, rgba(216, 185, 143, 0.22), transparent 65%) !important;
}

.product__description h3,
.product__description p,
.product__description strong {
  color: #fffaf4 !important;
  font-size: 15.5px !important;
  line-height: 2.05 !important;
  font-weight: 500 !important;
  position: relative !important;
}

/* =====================================================
   PRODUCT TAGS - INFO PILLS
===================================================== */

.container--product-details .mb-3:has(a[href*="/tag-"]) {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin: 18px 0 22px !important;
  padding: 14px !important;
  background: rgba(251, 247, 241, 0.85) !important;
  border: 1px solid rgba(31, 18, 11, 0.08) !important;
  border-radius: 22px !important;
}

.container--product-details .mb-3:has(a[href*="/tag-"])::before {
  content: "مواصفات المنتج" !important;
  width: 100% !important;
  display: block !important;
  color: var(--asrya-brown) !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  margin-bottom: 4px !important;
}

.container--product-details .mb-3 a[href*="/tag-"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #ffffff !important;
  color: var(--asrya-brown) !important;
  border: 1px solid rgba(58, 36, 21, 0.14) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.045) !important;
  cursor: default !important;
  pointer-events: none !important;
}

.container--product-details .mb-3 a[href*="/tag-"]::before {
  content: "✓" !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: var(--asrya-gold) !important;
  color: var(--asrya-ink) !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

.container--product-details .mb-3 a[href*="/tag-"]:hover {
  background: #ffffff !important;
  color: var(--asrya-brown) !important;
  text-decoration: none !important;
  transform: none !important;
}

/* =====================================================
   PRODUCT OPTIONS
===================================================== */

.s-product-options-wrapper {
  display: block !important;
  background: #fbf7f1 !important;
  border: 1px solid rgba(31, 18, 11, 0.08) !important;
  border-radius: 28px !important;
  padding: 24px !important;
  margin-top: 22px !important;
}

.s-product-options-wrapper::before {
  content: "اختاري تفاصيل طلبك" !important;
  display: block !important;
  color: var(--asrya-ink) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  margin-bottom: 18px !important;
}

.s-product-options-option-container {
  margin-bottom: 18px !important;
}

.s-product-options-option-label b {
  color: var(--asrya-ink) !important;
  font-weight: 950 !important;
  font-size: 14px !important;
}

.s-product-options-option-label small {
  color: #8a7866 !important;
  font-size: 12px !important;
}

.s-form-control,
.s-datetime-picker-input,
.form-input,
textarea {
  background: #ffffff !important;
  border: 1px solid rgba(31, 18, 11, 0.12) !important;
  border-radius: 18px !important;
  color: var(--asrya-ink) !important;
  min-height: 52px !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.035) !important;
}

.s-form-control:focus,
.s-datetime-picker-input:focus,
.form-input:focus,
textarea:focus {
  border-color: var(--asrya-ink) !important;
  box-shadow: 0 0 0 4px rgba(31, 18, 11, 0.08) !important;
}

/* Delivery cards - no option IDs */
.asrya-delivery-options {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 14px !important;
}

.asrya-delivery-option {
  position: relative !important;
  min-height: 68px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: right !important;
  padding: 14px 56px 14px 48px !important;
  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.16), transparent 38%),
    #ffffff !important;
  color: var(--asrya-brown) !important;
  border: 1px solid rgba(58, 36, 21, 0.14) !important;
  border-radius: 22px !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(31, 18, 11, 0.06) !important;
  transition: all 0.25s ease !important;
}

.asrya-delivery-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  position: relative !important;
  z-index: 2 !important;
}

.asrya-delivery-text strong {
  color: inherit !important;
  font-size: 16px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

.asrya-delivery-text small {
  color: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  opacity: 0.72 !important;
}

.asrya-delivery-option::before {
  content: "" !important;
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 999px !important;
  background: #fffaf4 !important;
  border: 2px solid rgba(58, 36, 21, 0.24) !important;
  box-shadow: inset 0 0 0 4px #fffaf4 !important;
}

.asrya-delivery-option::after {
  content: "⏱" !important;
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  background: rgba(216, 185, 143, 0.20) !important;
  color: var(--asrya-brown) !important;
  font-size: 14px !important;
}

.asrya-delivery-option:hover {
  border-color: var(--asrya-brown) !important;
  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.22), transparent 38%),
    #fffaf4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 34px rgba(31, 18, 11, 0.10) !important;
}

.asrya-delivery-option.is-active {
  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.24), transparent 42%),
    linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;
  color: #fffaf4 !important;
  border-color: var(--asrya-brown) !important;
  box-shadow: 0 20px 42px rgba(31, 18, 11, 0.22) !important;
  transform: translateY(-2px) !important;
}

.asrya-delivery-option.is-active .asrya-delivery-text small {
  color: #fffaf4 !important;
  opacity: 0.85 !important;
}

.asrya-delivery-option.is-active::before {
  background: var(--asrya-gold) !important;
  border-color: #fffaf4 !important;
  box-shadow: inset 0 0 0 5px var(--asrya-brown), 0 0 0 4px rgba(216, 185, 143, 0.22) !important;
}

.asrya-delivery-option.is-active::after {
  background: rgba(255, 250, 244, 0.14) !important;
  color: #fffaf4 !important;
}

.asrya-hidden-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* General scheduled time input without option id */
.s-product-options-option[data-option-type="time"] .s-datetime-picker-input {
  border-radius: 20px !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(58, 36, 21, 0.18) !important;
  color: var(--asrya-brown) !important;
  font-weight: 900 !important;
  min-height: 56px !important;
  padding-inline: 18px !important;
  box-shadow: 0 10px 24px rgba(31, 18, 11, 0.05) !important;
}

/* Product form cards */
.product-form section {
  background: #ffffff !important;
  border: 1px solid rgba(31, 18, 11, 0.08) !important;
  border-radius: 26px !important;
  margin-bottom: 14px !important;
  box-shadow: 0 12px 30px rgba(31, 18, 11, 0.045) !important;
}

.product-form .form-label b {
  color: var(--asrya-ink) !important;
  font-weight: 950 !important;
}

.product-form section:has(.price-wrapper) {
  padding-top: 18px !important;
  padding-bottom: 18px !important;
  display: flex !important;
  align-items: center !important;
}

.product-form section:has(.price-wrapper) .center-between {
  width: 100% !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.product-form section:has(.price-wrapper) .form-label,
.product-form section:has(.price-wrapper) .form-label b,
.product-form section:has(.price-wrapper) .price-wrapper,
.product-form section:has(.price-wrapper) .starting-or-normal-price,
.product-form section:has(.price-wrapper) .price_is_on_sale:not(.hidden),
.product-form section:has(.price-wrapper) .total-price,
.product-form section:has(.price-wrapper) .before-price {
  margin: 0 !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
}

.product-form section:has(.price-wrapper) .price_is_on_sale.hidden,
.product-form section:has(.price-wrapper) .hidden.price_is_on_sale {
  display: none !important;
}

.product-form section:has(.price-wrapper).sm\:pb-0 {
  padding-bottom: 18px !important;
}

/* =====================================================
   BUTTONS
===================================================== */

.btn-tab,
.btn--collapse {
  background: var(--asrya-ink) !important;
  color: #fffaf4 !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 11px 17px !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(31, 18, 11, 0.16) !important;
}

.s-social-share-btn button,
.btn--wishlist button,
.s-button-light-outline {
  background: rgba(255, 255, 255, 0.75) !important;
  border: 1px solid rgba(31, 18, 11, 0.10) !important;
  color: var(--asrya-ink) !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px rgba(31, 18, 11, 0.08) !important;
}

.s-social-share-btn button:hover,
.btn--wishlist button:hover {
  background: var(--asrya-ink) !important;
  color: #fffaf4 !important;
}

.s-add-product-button-with-sticky-bar button,
.sticky-product-bar__btn button {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 45%, #9b6a42 100%) !important;
  color: #fffaf4 !important;
  border: none !important;
  border-radius: 24px !important;
  min-height: 60px !important;
  font-weight: 950 !important;
  font-size: 17px !important;
  box-shadow: 0 22px 48px rgba(31, 18, 11, 0.28) !important;
  transition: 0.25s ease !important;
}

.s-add-product-button-with-sticky-bar button:hover,
.sticky-product-bar__btn button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 28px 60px rgba(31, 18, 11, 0.34) !important;
}

.s-button-disabled,
.s-button-disabled button {
  opacity: 0.62 !important;
  cursor: not-allowed !important;
}

/* =====================================================
   FOOTER
===================================================== */

.store-footer {
  background: linear-gradient(135deg, #1f120b 0%, #2b1a10 48%, #3a2415 100%) !important;
  color: #fff7ef !important;
  border: none !important;
  overflow: hidden !important;
}

.store-footer__inner {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.16), transparent 34%),
    linear-gradient(135deg, #1f120b 0%, #2b1a10 48%, #3a2415 100%) !important;
  color: #fff7ef !important;
  padding-top: 44px !important;
  padding-bottom: 34px !important;
}

.store-footer .container,
.store-footer__inner .container,
.store-footer > div,
.store-footer > .container,
.store-footer > .md\:flex,
.store-footer > .md\:flex.container,
footer.store-footer,
footer.store-footer > div {
  background-color: transparent !important;
}

.store-footer salla-payments,
.store-footer .s-payments-list-wrap,
.store-footer .s-payments-list,
.store-footer .s-payments-list-item,
.store-footer salla-trust-badges,
.store-footer .s-trust-badges-wrapper,
.store-footer .s-trust-badges-image,
.store-footer .s-trust-badges-content,
.store-footer .s-trust-badges-label,
.store-footer .s-trust-badges-number {
  display: none !important;
  visibility: hidden !important;
}

.store-footer > .md\:flex {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px max(20px, calc((100vw - 1200px) / 2)) !important;
  background: #160d08 !important;
  border-top: 1px solid rgba(255, 247, 239, 0.12) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  text-align: initial !important;
}

.store-footer > .md\:flex::before {
  content: none !important;
  display: none !important;
}

.store-footer > .md\:flex::after {
  content: "عصــرية | Asrya" !important;
  display: block !important;
  color: var(--asrya-gold) !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  letter-spacing: 0.2px !important;
  text-align: left !important;
}

.store-footer .copyright-text a {
  display: none !important;
}

.store-footer,
.store-footer h3,
.store-footer p,
.store-footer span,
.store-footer a,
.store-footer li,
.store-footer strong,
.store-footer .unicode,
.store-footer .s-contacts-title,
.store-footer .s-contacts-item,
.store-footer .copyright-text,
.store-footer .copyright-text p,
.store-footer .text-gray-400 {
  color: #fff7ef !important;
}

.store-footer h3,
.store-footer .s-contacts-title {
  font-weight: 900 !important;
  color: #fff7ef !important;
  margin-bottom: 14px !important;
}

.store-footer .lg\:col-span-2 > a h3,
.store-footer a[href="https://asrya.shop/"] h3,
.store-footer a[href*="asrya.shop"] h3 {
  color: var(--asrya-gold) !important;
  font-weight: 900 !important;
}

.store-footer a {
  text-decoration: none !important;
  transition: 0.25s ease !important;
}

.store-footer a:hover,
.store-footer a:hover span,
.store-footer .lg\:col-span-2 > a:hover h3,
.store-footer a[href*="asrya.shop"]:hover h3 {
  color: #f1d8aa !important;
  opacity: 1 !important;
}

.store-footer svg,
.store-footer svg path {
  fill: #fff7ef !important;
}

.store-footer .s-social-list {
  display: flex !important;
  gap: 10px !important;
}

.store-footer .s-social-link a {
  width: 42px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(255, 247, 239, 0.10) !important;
  border: 1px solid rgba(255, 247, 239, 0.16) !important;
  border-radius: 999px !important;
  transition: 0.25s ease !important;
}

.store-footer .s-social-link a:hover {
  background: var(--asrya-gold) !important;
  transform: translateY(-2px) !important;
}

.store-footer .s-social-link a:hover svg path {
  fill: var(--asrya-ink) !important;
}

.store-footer .s-contacts-item {
  opacity: 0.95 !important;
  margin-bottom: 10px !important;
}

.store-footer .s-contacts-item:hover {
  opacity: 1 !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {
  .top-navbar {
    min-height: auto !important;
    height: auto !important;
    padding: 6px 0 !important;
  }

  .top-navbar .container,
  .top-navbar .container > .flex-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: auto !important;
  }

  .top-navbar .flex-1 {
    flex: unset !important;
    width: 100% !important;
  }

  .top-navbar .s-menu-topnav-item,
  .top-navbar salla-contacts,
  .top-navbar .s-contacts-header {
    display: none !important;
  }

  .top-navbar .asrya-topnav-delivery {
    font-size: 12px !important;
    padding: 7px 11px !important;
    white-space: nowrap !important;
  }

  .top-navbar .btn--rounded-gray {
    font-size: 12px !important;
    padding: 7px 11px !important;
    min-height: 34px !important;
    white-space: nowrap !important;
  }

  .container--product-details {
    padding: 12px !important;
    margin-top: 16px !important;
  }

  .container--product-details > .flex {
    gap: 18px !important;
  }

  .container--product-details .sidebar,
  .container--product-details .main-content {
    border-radius: 22px !important;
    padding: 12px !important;
  }

  .container--product-details h1 {
    font-size: 30px !important;
  }

  .container--product-details .total-price,
  .container--product-details .starting-or-normal-price p,
  .container--product-details .gap-4.flex p {
    font-size: 28px !important;
  }

  .container--product-details .details-slider .swiper-slide img {
    max-height: 390px !important;
  }

  .container--product-details .s-slider-thumbs .swiper-slide {
    height: 76px !important;
  }

  .container--product-details .mb-3:has(a[href*="/tag-"]) {
    padding: 12px !important;
    gap: 8px !important;
  }

  .container--product-details .mb-3 a[href*="/tag-"] {
    font-size: 12px !important;
    padding: 9px 12px !important;
  }

  .asrya-delivery-options {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .asrya-delivery-option {
    min-height: 66px !important;
    border-radius: 20px !important;
    padding: 13px 54px 13px 46px !important;
  }

  .asrya-delivery-text strong {
    font-size: 15px !important;
  }

  .asrya-delivery-text small {
    font-size: 11.5px !important;
  }

  .store-footer > .md\:flex {
    padding: 18px 20px !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .store-footer > .md\:flex::after {
    font-size: 13px !important;
  }

  .store-footer .copyright-text,
  .store-footer .copyright-text p {
    font-size: 12px !important;
  }
}
/* =====================================================
   FINAL MOBILE TOP NAV FIX
   Fix delivery badge pushing page horizontally
===================================================== */

@media (max-width: 768px) {
  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .top-navbar {
    min-height: auto !important;
    height: auto !important;
    padding: 6px 0 !important;
    overflow: hidden !important;
  }

  .top-navbar .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow: hidden !important;
  }

  .top-navbar .container,
  .top-navbar .container > .flex-1,
  .top-navbar .flex-1 {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
  }

  .top-navbar .s-menu-topnav-item,
  .top-navbar salla-contacts,
  .top-navbar .s-contacts-header,
  .top-navbar .header-buttons,
  .top-navbar .header-search,
  .top-navbar salla-search,
  .top-navbar .s-search,
  .top-navbar .s-search-modal,
  .top-navbar .s-search-container,
  .top-navbar .s-search-input-wrapper,
  .top-navbar .s-search-input {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .top-navbar salla-menu,
  .top-navbar .s-menu-topnav-list {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .top-navbar .asrya-topnav-delivery {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    max-width: 100% !important;
    min-width: 0 !important;

    font-size: 11px !important;
    padding: 7px 9px !important;
    gap: 5px !important;
    line-height: 1.2 !important;

    white-space: nowrap !important;
    text-align: center !important;

    flex: 0 1 auto !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .top-navbar .asrya-topnav-delivery::before {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    font-size: 11px !important;
  }

  .top-navbar .btn--rounded-gray {
    flex: 0 1 auto !important;
    max-width: 46% !important;
    min-width: 0 !important;

    font-size: 11px !important;
    padding: 7px 9px !important;
    min-height: 34px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}














/* =====================================================
   ASRYA FINAL FIXED DELIVERY BAR
   مستقل عن إعلان سلة ويثبت فوق المنيو
===================================================== */

.asrya-force-hide {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.asrya-fixed-delivery-bar {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  z-index: 2147483647 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #3a2415 !important;
  color: #fffaf4 !important;
  box-shadow: 0 8px 22px rgba(31, 18, 11, 0.18) !important;
  pointer-events: auto !important;
}

.asrya-fixed-delivery-inner {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  color: #fffaf4 !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.asrya-fixed-delivery-inner i,
.asrya-fixed-delivery-inner span {
  color: #fffaf4 !important;
}

/* ننزل النافبار الأساسي تحت الشريط */
body.asrya-has-fixed-delivery-bar #mainnav,
body.asrya-has-fixed-delivery-bar .main-nav-container,
body.asrya-has-fixed-delivery-bar #mainnav.fixed-header,
body.asrya-has-fixed-delivery-bar #mainnav.fixed-pinned {
  top: 40px !important;
  z-index: 2147483000 !important;
}

/* نعوض مساحة الشريط عشان المحتوى ما يدخل تحته */
body.asrya-has-fixed-delivery-bar {
  padding-top: 40px !important;
}

/* نرجع ارتفاع المنيو الطبيعي */
body.asrya-has-fixed-delivery-bar #mainnav {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

body.asrya-has-fixed-delivery-bar #mainnav > .inner {
  height: 84px !important;
  min-height: 84px !important;
  max-height: 84px !important;
}

/* مهم: نخفي أي إعلان نقلناه داخل mainnav سابقًا */
#mainnav > salla-advertisement,
#mainnav .asrya-mainnav-ad {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Mobile */
@media (max-width: 768px) {
  .asrya-fixed-delivery-bar {
    height: 36px !important;
    min-height: 36px !important;
  }

  .asrya-fixed-delivery-inner {
    font-size: 12px !important;
    padding: 0 12px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  body.asrya-has-fixed-delivery-bar {
    padding-top: 36px !important;
  }

  body.asrya-has-fixed-delivery-bar #mainnav,
  body.asrya-has-fixed-delivery-bar .main-nav-container,
  body.asrya-has-fixed-delivery-bar #mainnav.fixed-header,
  body.asrya-has-fixed-delivery-bar #mainnav.fixed-pinned {
    top: 36px !important;
  }

  body.asrya-has-fixed-delivery-bar #mainnav {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }

  body.asrya-has-fixed-delivery-bar #mainnav > .inner {
    height: 74px !important;
    min-height: 74px !important;
    max-height: 74px !important;
  }
}

/* =====================================================
   FIX NAVBAR POSITION UNDER FIXED DELIVERY BAR
===================================================== */

/* Desktop */
body.asrya-has-fixed-delivery-bar #mainnav,
body.asrya-has-fixed-delivery-bar #mainnav.fixed-header,
body.asrya-has-fixed-delivery-bar #mainnav.fixed-pinned,
body.asrya-has-fixed-delivery-bar .main-nav-container,
body.asrya-has-fixed-delivery-bar .main-nav-container.fixed-header,
body.asrya-has-fixed-delivery-bar .main-nav-container.fixed-pinned {
  top: 40px !important;
  transform: translateY(0) !important;
  margin-top: 0 !important;
}

/* لو سلة تستخدم position fixed وقت السكرول */
body.asrya-has-fixed-delivery-bar #mainnav.fixed-pinned,
body.asrya-has-fixed-delivery-bar #mainnav.fixed-header {
  position: fixed !important;
  right: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

/* نضمن أن الشريط فوق والناف تحته */
.asrya-fixed-delivery-bar {
  z-index: 2147483647 !important;
}

body.asrya-has-fixed-delivery-bar #mainnav {
  z-index: 2147483000 !important;
}
/* Mobile */
@media (max-width: 768px) {
  body.asrya-has-fixed-delivery-bar #mainnav,
  body.asrya-has-fixed-delivery-bar #mainnav.fixed-header,
  body.asrya-has-fixed-delivery-bar #mainnav.fixed-pinned,
  body.asrya-has-fixed-delivery-bar .main-nav-container,
  body.asrya-has-fixed-delivery-bar .main-nav-container.fixed-header,
  body.asrya-has-fixed-delivery-bar .main-nav-container.fixed-pinned {
    top: 36px !important;
    transform: translateY(0) !important;
  }
}






/* =====================================================
   ASRYA WHATSAPP BUTTON BRAND COLORS
===================================================== */

.wa-s-n,
a.wa-s-n[href*="wa.me"],
a.wa-s-n[href*="whatsapp"] {
  background:
    radial-gradient(circle at 30% 20%, rgba(216, 185, 143, 0.38), transparent 34%),
    linear-gradient(135deg, #1f120b 0%, #3a2415 52%, #9b6a42 100%) !important;
  color: #fffaf4 !important;
  border: 1px solid rgba(216, 185, 143, 0.75) !important;
  box-shadow: 0 14px 34px rgba(31, 18, 11, 0.26) !important;
  border-radius: 999px !important;
  transition: all 0.25s ease !important;
}

.wa-s-n svg,
a.wa-s-n[href*="wa.me"] svg,
a.wa-s-n[href*="whatsapp"] svg {
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
}

.wa-s-n svg path,
a.wa-s-n[href*="wa.me"] svg path,
a.wa-s-n[href*="whatsapp"] svg path {
  fill: currentColor !important;
}

.wa-s-n:hover,
a.wa-s-n[href*="wa.me"]:hover,
a.wa-s-n[href*="whatsapp"]:hover {
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 250, 244, 0.22), transparent 34%),
    linear-gradient(135deg, #9b6a42 0%, #3a2415 55%, #1f120b 100%) !important;
  color: #fffaf4 !important;
  border-color: #d8b98f !important;
  transform: translateY(-2px) scale(1.04) !important;
  box-shadow: 0 18px 42px rgba(31, 18, 11, 0.34) !important;
}



/* =====================================================
   ASRYA HEADER ACCOUNT + CART BRAND COLORS
===================================================== */

/* Account button */
#mainnav salla-user-menu .s-user-menu-login-btn,
#mainnav .s-user-menu-login-btn {
  background: #fffaf4 !important;
  border: 1.5px solid rgba(58, 36, 21, 0.55) !important;
  color: #3a2415 !important;
  fill: #3a2415 !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s ease !important;
}

/* Account icon */
#mainnav salla-user-menu .s-user-menu-login-btn svg,
#mainnav salla-user-menu .s-user-menu-login-btn svg path,
#mainnav .s-user-menu-login-btn svg,
#mainnav .s-user-menu-login-btn svg path {
  color: #3a2415 !important;
  fill: #3a2415 !important;
  stroke: #3a2415 !important;
}

/* Cart wrapper */
#mainnav salla-cart-summary .s-cart-summary-wrapper,
#mainnav .s-cart-summary-wrapper {
  background: #fffaf4 !important;
  border: 1.5px solid rgba(58, 36, 21, 0.55) !important;
  color: #3a2415 !important;
  fill: #3a2415 !important;
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
  padding: 0 12px !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.08) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.25s ease !important;
}

/* Cart icon + text */
#mainnav #s-cart-icon,
#mainnav #s-cart-icon *,
#mainnav .header-btn__icon,
#mainnav .sicon-shopping-bag,
#mainnav .s-cart-summary-total,
#mainnav .s-cart-summary-total i,
#mainnav .s-cart-summary-content,
#mainnav .s-cart-summary-content *,
#mainnav .s-cart-summary-wrapper svg,
#mainnav .s-cart-summary-wrapper svg path {
  color: #3a2415 !important;
  fill: #3a2415 !important;
  stroke: #3a2415 !important;
}

/* Cart count badge */
#mainnav .s-cart-summary-count {
  background: #3a2415 !important;
  color: #fffaf4 !important;
  border: 2px solid #fffaf4 !important;
  font-weight: 900 !important;
}

/* Hover - account */
#mainnav salla-user-menu .s-user-menu-login-btn:hover,
#mainnav .s-user-menu-login-btn:hover {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
  border-color: #d8b98f !important;
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(31, 18, 11, 0.18) !important;
}

#mainnav salla-user-menu .s-user-menu-login-btn:hover svg,
#mainnav salla-user-menu .s-user-menu-login-btn:hover svg path,
#mainnav .s-user-menu-login-btn:hover svg,
#mainnav .s-user-menu-login-btn:hover svg path {
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
  stroke: #fffaf4 !important;
}

/* Hover - cart */
#mainnav salla-cart-summary .s-cart-summary-wrapper:hover,
#mainnav .s-cart-summary-wrapper:hover {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
  border-color: #d8b98f !important;
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(31, 18, 11, 0.18) !important;
}

#mainnav salla-cart-summary .s-cart-summary-wrapper:hover *,
#mainnav .s-cart-summary-wrapper:hover *,
#mainnav .s-cart-summary-wrapper:hover #s-cart-icon,
#mainnav .s-cart-summary-wrapper:hover #s-cart-icon *,
#mainnav .s-cart-summary-wrapper:hover .header-btn__icon,
#mainnav .s-cart-summary-wrapper:hover .sicon-shopping-bag,
#mainnav .s-cart-summary-wrapper:hover .s-cart-summary-total,
#mainnav .s-cart-summary-wrapper:hover .s-cart-summary-total i,
#mainnav .s-cart-summary-wrapper:hover .s-cart-summary-content,
#mainnav .s-cart-summary-wrapper:hover svg,
#mainnav .s-cart-summary-wrapper:hover svg path {
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
  stroke: #fffaf4 !important;
}

/* Keep badge visible on hover */
#mainnav .s-cart-summary-wrapper:hover .s-cart-summary-count {
  background: #d8b98f !important;
  color: #1f120b !important;
  border-color: #fffaf4 !important;
}

/* Mobile menu burger brand color */
#mainnav .mburger,
#mainnav .mburger i,
#mainnav .sicon-menu {
  color: #3a2415 !important;
}

#mainnav .mburger:hover,
#mainnav .mburger:hover i,
#mainnav .mburger:hover .sicon-menu {
  color: #9b6a42 !important;
}




/* =====================================================
   ASRYA USER DROPDOWN ABOVE ALL SECTIONS
===================================================== */

/* نرفع كل طبقات الهيدر والقائمة */
.store-header,
#mainnav,
.main-nav-container,
salla-user-menu,
#mainnav salla-user-menu {
  z-index: 2147483000 !important;
  overflow: visible !important;
}

/* القائمة نفسها فوق البنرات والمحتوى */
.s-user-menu-dropdown,
#mainnav .s-user-menu-dropdown,
salla-user-menu .s-user-menu-dropdown {
  position: fixed !important;
  top: 110px !important; /* 40px delivery bar + 84px navbar + مسافة بسيطة */
  right: auto !important;
  left: 18px !important;
  z-index: 2147483647 !important;
  background: #fffaf4 !important;
  border: 1px solid rgba(58, 36, 21, 0.16) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 70px rgba(31, 18, 11, 0.28) !important;
  overflow: hidden !important;
}

/* رأس القائمة */
.s-user-menu-dropdown-header {
  background:
    radial-gradient(circle at 18% 20%, rgba(216, 185, 143, 0.24), transparent 34%),
    linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
  color: #fffaf4 !important;
  border-bottom: 1px solid rgba(216, 185, 143, 0.26) !important;
}

.s-user-menu-dropdown-header span,
.s-user-menu-dropdown-header p {
  color: #fffaf4 !important;
}

.s-user-menu-dropdown-header img {
  border: 2px solid #d8b98f !important;
  box-shadow: 0 8px 20px rgba(31, 18, 11, 0.22) !important;
}

.s-user-menu-dropdown-header-close,
.s-user-menu-dropdown-header-close svg,
.s-user-menu-dropdown-header-close svg path {
  color: #fffaf4 !important;
  fill: #fffaf4 !important;
}

/* عناصر القائمة */
.s-user-menu-dropdown-list {
  background: #fffaf4 !important;
  padding: 8px !important;
}

.s-user-menu-dropdown-item-link {
  color: #3a2415 !important;
  border-radius: 16px !important;
  transition: all 0.22s ease !important;
}

.s-user-menu-dropdown-item-title,
.s-user-menu-dropdown-item-prefix,
.s-user-menu-dropdown-item-prefix svg,
.s-user-menu-dropdown-item-prefix svg path {
  color: #3a2415 !important;
  fill: #3a2415 !important;
}

.s-user-menu-dropdown-item-link:hover {
  background: rgba(216, 185, 143, 0.22) !important;
  color: #1f120b !important;
  transform: translateX(-2px) !important;
}

.s-user-menu-dropdown-item-link:hover *,
.s-user-menu-dropdown-item-link:hover svg,
.s-user-menu-dropdown-item-link:hover svg path {
  color: #1f120b !important;
  fill: #1f120b !important;
}

/* تسجيل الخروج */
.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  color: #7a2f1b !important;
}

.s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
  background: rgba(122, 47, 27, 0.10) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .s-user-menu-dropdown,
  #mainnav .s-user-menu-dropdown,
  salla-user-menu .s-user-menu-dropdown {
    position: fixed !important;
    top: 116px !important; /* 36px delivery bar + 74px navbar + مسافة */
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    z-index: 2147483647 !important;
  }
}





/* =====================================================
   ASRYA PRODUCT PAGE BUTTONS + LINKS VISIBILITY FIX
===================================================== */

/* قراءة المزيد */
#btn-show-more,
a#btn-show-more,
.link--primary#btn-show-more {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #3a2415 !important;
  background: rgba(216, 185, 143, 0.20) !important;
  border: 1px solid rgba(58, 36, 21, 0.18) !important;
  border-radius: 999px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  text-decoration: none !important;
  box-shadow: 0 8px 18px rgba(31, 18, 11, 0.06) !important;
  transition: all 0.22s ease !important;
}

#btn-show-more::after {
  content: "⌄" !important;
  font-size: 13px !important;
  color: #9b6a42 !important;
  line-height: 1 !important;
}

#btn-show-more:hover {
  color: #fffaf4 !important;
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 60%, #9b6a42 100%) !important;
  border-color: #d8b98f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 26px rgba(31, 18, 11, 0.18) !important;
}

#btn-show-more:hover::after {
  color: #fffaf4 !important;
}

/* إضافة ملاحظة */
button.btn-tab.btn--collapse,
.btn-tab.btn--collapse {
  background: #fffaf4 !important;
  color: #3a2415 !important;
  border: 1.5px solid rgba(58, 36, 21, 0.26) !important;
  border-radius: 999px !important;
  padding: 11px 17px !important;
  font-weight: 900 !important;
  box-shadow: 0 10px 22px rgba(31, 18, 11, 0.08) !important;
  transition: all 0.22s ease !important;
}

button.btn-tab.btn--collapse i,
button.btn-tab.btn--collapse span,
.btn-tab.btn--collapse i,
.btn-tab.btn--collapse span {
  color: #3a2415 !important;
}

button.btn-tab.btn--collapse:hover,
.btn-tab.btn--collapse:hover {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 60%, #9b6a42 100%) !important;
  color: #fffaf4 !important;
  border-color: #d8b98f !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 30px rgba(31, 18, 11, 0.18) !important;
}

button.btn-tab.btn--collapse:hover i,
button.btn-tab.btn--collapse:hover span,
.btn-tab.btn--collapse:hover i,
.btn-tab.btn--collapse:hover span {
  color: #fffaf4 !important;
}

/* أعلمني عند التوفر */
.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary,
button.s-button-element.s-button-primary,
.s-button-primary {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
  color: #fffaf4 !important;
  border: 1.5px solid #d8b98f !important;
  border-radius: 22px !important;
  min-height: 54px !important;
  font-weight: 950 !important;
  box-shadow: 0 18px 38px rgba(31, 18, 11, 0.22) !important;
  transition: all 0.22s ease !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary .s-button-text,
button.s-button-element.s-button-primary .s-button-text,
.s-button-primary .s-button-text {
  color: #fffaf4 !important;
  font-weight: 950 !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:hover,
button.s-button-element.s-button-primary:hover,
.s-button-primary:hover {
  background: linear-gradient(135deg, #9b6a42 0%, #3a2415 58%, #1f120b 100%) !important;
  color: #fffaf4 !important;
  border-color: #fffaf4 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 24px 48px rgba(31, 18, 11, 0.30) !important;
}

.s-button-element.s-button-btn.s-button-solid.s-button-wide.s-button-primary:hover .s-button-text,
button.s-button-element.s-button-primary:hover .s-button-text,
.s-button-primary:hover .s-button-text {
  color: #fffaf4 !important;
}

#btn-show-more,
a#btn-show-more,
.link--primary#btn-show-more {
  color: #ffffff !important;
  background: #3a2415 !important;
  border-color: #d8b98f !important;
}





/* =====================================================
   ASRYA USER DROPDOWN MOBILE FIX
   Keep desktop as is, fix mobile visibility
===================================================== */

@media (max-width: 768px) {
  salla-user-menu,
  salla-user-menu *,
  .s-user-menu-wrapper,
  .s-user-menu-toggler,
  .s-user-menu-dropdown {
    overflow: visible !important;
  }

  salla-user-menu,
  .s-user-menu-wrapper,
  .s-user-menu-toggler.opened {
    position: static !important;
    z-index: 2147483647 !important;
  }

  /* القائمة بالموبايل تظهر ككارد واضح تحت الهيدر */
  .s-user-menu-toggler.opened .s-user-menu-dropdown,
  salla-user-menu .s-user-menu-toggler.opened .s-user-menu-dropdown,
  #mainnav salla-user-menu .s-user-menu-toggler.opened .s-user-menu-dropdown {
    position: fixed !important;
    top: 118px !important; /* 36 شريط التوصيل + 74 الهيدر + مسافة */
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 132px) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    background: #fffaf4 !important;
    border: 1px solid rgba(58, 36, 21, 0.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(31, 18, 11, 0.34) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
  }

  /* رأس القائمة */
  .s-user-menu-dropdown-header {
    background:
      radial-gradient(circle at 18% 20%, rgba(216, 185, 143, 0.24), transparent 34%),
      linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
    color: #fffaf4 !important;
    border-bottom: 1px solid rgba(216, 185, 143, 0.26) !important;
  }

  .s-user-menu-dropdown-header span,
  .s-user-menu-dropdown-header p,
  .s-user-menu-dropdown-header-close,
  .s-user-menu-dropdown-header-close svg,
  .s-user-menu-dropdown-header-close svg path {
    color: #fffaf4 !important;
    fill: #fffaf4 !important;
  }

  .s-user-menu-dropdown-header img {
    border: 2px solid #d8b98f !important;
    box-shadow: 0 8px 20px rgba(31, 18, 11, 0.22) !important;
  }

  /* القائمة */
  .s-user-menu-dropdown-list {
    background: #fffaf4 !important;
    padding: 8px !important;
  }

  .s-user-menu-dropdown-item-link {
    color: #3a2415 !important;
    border-radius: 16px !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
  }

  .s-user-menu-dropdown-item-title,
  .s-user-menu-dropdown-item-prefix,
  .s-user-menu-dropdown-item-prefix svg,
  .s-user-menu-dropdown-item-prefix svg path {
    color: #3a2415 !important;
    fill: #3a2415 !important;
  }

  .s-user-menu-dropdown-item-link:hover {
    background: rgba(216, 185, 143, 0.22) !important;
    color: #1f120b !important;
  }

  .s-user-menu-dropdown-item-link:hover *,
  .s-user-menu-dropdown-item-link:hover svg,
  .s-user-menu-dropdown-item-link:hover svg path {
    color: #1f120b !important;
    fill: #1f120b !important;
  }
}










/* =====================================================
   ASRYA ALLERGEN NOTICE - SOFT VERSION
   تنبيه حساسية لطيف ومرتب
===================================================== */

.asrya-allergen-notice {
  margin: 16px 0 22px !important;
  padding: 15px 16px !important;

  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;

  background: rgba(255, 250, 244, 0.72) !important;
  border: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 22px !important;

  box-shadow: 0 10px 24px rgba(31, 18, 11, 0.035) !important;
}

.asrya-allergen-notice__icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(216, 185, 143, 0.28) !important;
  color: #3a2415 !important;
  border-radius: 999px !important;

  font-size: 15px !important;
  font-weight: 900 !important;
}

.asrya-allergen-notice__content {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  flex: 1 !important;
}

.asrya-allergen-notice__title {
  color: #3a2415 !important;
  font-size: 13.5px !important;
  font-weight: 950 !important;
  line-height: 1.5 !important;
}

.asrya-allergen-notice__text {
  color: #7a6a5d !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  line-height: 1.8 !important;
}

.asrya-allergen-notice__items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
  margin-top: 2px !important;
}

.asrya-allergen-notice__pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  background: rgba(255, 255, 255, 0.78) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 999px !important;

  padding: 7px 10px !important;

  font-size: 12px !important;
  font-weight: 850 !important;
  line-height: 1 !important;

  box-shadow: 0 6px 14px rgba(31, 18, 11, 0.025) !important;
}

.asrya-allergen-notice__pill-icon {
  font-size: 13px !important;
  line-height: 1 !important;
  opacity: 0.85 !important;
}

@media (max-width: 768px) {
  .asrya-allergen-notice {
    padding: 14px !important;
    border-radius: 20px !important;
    gap: 10px !important;
  }

  .asrya-allergen-notice__icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 13px !important;
  }

  .asrya-allergen-notice__title {
    font-size: 13px !important;
  }

  .asrya-allergen-notice__text {
    font-size: 12px !important;
  }

  .asrya-allergen-notice__pill {
    font-size: 11.5px !important;
    padding: 7px 9px !important;
  }
}




/* =====================================================
   PRODUCT CARD PROMOTION BADGE - ASRYA BRAND STYLE
===================================================== */

.s-product-card-promotion-title,
.promotion-title {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  z-index: 5 !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;

  width: auto !important;
  max-width: calc(100% - 24px) !important;

  background:
    linear-gradient(135deg, rgba(255, 250, 244, 0.96), rgba(244, 236, 226, 0.94)) !important;

  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.14) !important;
  border-radius: 999px !important;

  padding: 7px 12px !important;

  font-size: 11.5px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;

  box-shadow: 0 10px 22px rgba(31, 18, 11, 0.10) !important;
  backdrop-filter: blur(10px) !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Soft small icon */
.s-product-card-promotion-title::before,
.promotion-title::before {
  content: "✦" !important;

  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(216, 185, 143, 0.35) !important;
  color: #3a2415 !important;

  border-radius: 999px !important;

  font-size: 10px !important;
  font-weight: 950 !important;
}

/* Hover touch */
.s-product-card:hover .s-product-card-promotion-title,
.product-card:hover .s-product-card-promotion-title,
.product-card:hover .promotion-title {
  transform: translateY(-1px) !important;
  box-shadow: 0 14px 26px rgba(31, 18, 11, 0.13) !important;
}

/* Mobile */
@media (max-width: 768px) {
  .s-product-card-promotion-title,
  .promotion-title {
    top: 10px !important;
    right: 10px !important;

    max-width: calc(100% - 20px) !important;

    padding: 6px 10px !important;
    font-size: 10.5px !important;
  }

  .s-product-card-promotion-title::before,
  .promotion-title::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 9px !important;
  }
}






/* =====================================================
   ASRYA THANK YOU PAGE - BRAND STYLE
===================================================== */

/* Main thank-you card */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.18), transparent 34%),
    linear-gradient(180deg, #fffaf4 0%, #fbf7f1 100%) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 34px !important;

  box-shadow: 0 24px 70px rgba(31, 18, 11, 0.10) !important;
  overflow: hidden !important;
}

/* Inner spacing */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 > .flex.flex-col.items-center {
  padding-top: 42px !important;
  padding-bottom: 34px !important;
}

/* Hide default delivery illustration */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 img[src*="delivery-bro"] {
  display: none !important;
}

/* Custom success icon wrapper added by JS */
.asrya-thanks-icon {
  width: 92px !important;
  height: 92px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  margin-bottom: 22px !important;

  border-radius: 999px !important;

  background:
    radial-gradient(circle at 30% 25%, rgba(255, 250, 244, 0.65), transparent 35%),
    linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;

  color: #fffaf4 !important;

  box-shadow:
    0 18px 44px rgba(31, 18, 11, 0.22),
    0 0 0 10px rgba(216, 185, 143, 0.16) !important;

  position: relative !important;
}

.asrya-thanks-icon::before {
  content: "✓" !important;

  width: 46px !important;
  height: 46px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 999px !important;

  background: #d8b98f !important;
  color: #1f120b !important;

  font-size: 30px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

/* Main title */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 h1.thanks-item {
  color: #1f120b !important;
  font-size: clamp(22px, 3vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.8 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  max-width: 620px !important;
}

/* Order number text */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item {
  color: #7a6a5d !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.8 !important;
  margin-bottom: 22px !important;
}

/* Order number button/link */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button button,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .s-button-element {
  color: #3a2415 !important;
  font-weight: 950 !important;
}

/* Invoice button */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 > .flex salla-button[shape="btn"] button,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .s-button-primary {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;
  color: #fffaf4 !important;

  border: none !important;
  border-radius: 999px !important;

  min-height: 48px !important;
  padding: 0 22px !important;

  font-size: 14px !important;
  font-weight: 950 !important;

  box-shadow: 0 16px 34px rgba(31, 18, 11, 0.20) !important;
}

.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 > .flex salla-button[shape="btn"] button:hover,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .s-button-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 20px 44px rgba(31, 18, 11, 0.26) !important;
}

/* Article message */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .article.article--main {
  max-width: 640px !important;
  margin: 0 auto 22px !important;

  background: rgba(255, 255, 255, 0.68) !important;
  border: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 24px !important;

  padding: 18px 20px !important;

  box-shadow: 0 12px 28px rgba(31, 18, 11, 0.04) !important;
}

.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .article.article--main h3,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .article.article--main p {
  color: #3a2415 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.9 !important;
  margin: 0 0 6px !important;
}

/* Clean empty paragraphs */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .article.article--main p:empty {
  display: none !important;
}

/* Mobile */
@media (max-width: 768px) {
  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 {
    border-radius: 24px !important;
    margin-inline: 10px !important;
  }

  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 > .flex.flex-col.items-center {
    padding-top: 34px !important;
    padding-bottom: 28px !important;
  }

  .asrya-thanks-icon {
    width: 78px !important;
    height: 78px !important;
    margin-bottom: 18px !important;
  }

  .asrya-thanks-icon::before {
    width: 40px !important;
    height: 40px !important;
    font-size: 26px !important;
  }

  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 h1.thanks-item {
    font-size: 20px !important;
    line-height: 1.8 !important;
    padding-inline: 10px !important;
  }

  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 .article.article--main {
    margin-inline: 10px !important;
    padding: 16px !important;
    border-radius: 20px !important;
  }
}



/* =====================================================
   THANK YOU PAGE FINAL FIXES
   Fix icon flip + bigger order number
===================================================== */

/* Fix flipped icon wrapper */
.rtl\:-scale-x-100:has(.asrya-thanks-icon) {
  transform: none !important;
}

/* If parent still flips it, cancel flip on icon */
.asrya-thanks-icon {
  transform: none !important;
  direction: ltr !important;
}

/* Bigger order number area */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #3a2415 !important;
  max-width: none !important;
  margin-bottom: 26px !important;
}

/* Bigger order number itself */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button button,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .s-button-text,
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .s-button-text span {
  font-size: 20px !important;
  font-weight: 950 !important;
  color: #1f120b !important;
}

/* Make order number look like a soft pill */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button button {
  background: rgba(216, 185, 143, 0.18) !important;
  border: 1px solid rgba(58, 36, 21, 0.12) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  margin-inline-start: 6px !important;
}

/* Copy icon */
.bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .copy-icon {
  color: #9b6a42 !important;
  font-size: 16px !important;
}

/* Clean any visible raw html item if JS is late */
.fix-align {
  color: #3a2415 !important;
  font-weight: 850 !important;
  line-height: 1.8 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item {
    font-size: 14.5px !important;
  }

  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button,
  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item salla-button button,
  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .s-button-text,
  .bg-white.p-4.md\:p-8.rounded-md.mb-6.md\:mb-8 p.thanks-item .s-button-text span {
    font-size: 18px !important;
  }
}



/* =====================================================
   WHITE BREADCRUMB ONLY ON THANK YOU / ORDER SUCCESS PAGE
   لا يؤثر على صفحة المنتج
===================================================== */

body:has(.thanks-item) nav.w-full.py-5,
body:has(.thanks-item) nav.w-full.py-5 ol,
body:has(.thanks-item) nav.w-full.py-5 li,
body:has(.thanks-item) nav.w-full.py-5 a,
body:has(.thanks-item) nav.w-full.py-5 span,
body:has(.thanks-item) nav.w-full.py-5 i,
body:has(.thanks-item) nav.w-full.py-5 .fix-align {
  color: #ffffff !important;
}

body:has(.thanks-item) nav.w-full.py-5 svg,
body:has(.thanks-item) nav.w-full.py-5 svg path {
  fill: #ffffff !important;
}

body:has(.thanks-item) nav.w-full.py-5 a:hover {
  color: #d8b98f !important;
}


/* =====================================================
   ASRYA ACCOUNT / ORDER DETAILS PAGE
   Brand styling for customer order page
===================================================== */

/* Page spacing */
.container.lg\:mb-24 {
  max-width: 1240px !important;
  margin-top: 28px !important;
  margin-bottom: 70px !important;
}

/* =====================================================
   ACCOUNT SIDEBAR
===================================================== */

nav.sidebar {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.16), transparent 34%),
    #fffaf4 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 28px !important;

  box-shadow: 0 20px 55px rgba(31, 18, 11, 0.08) !important;

  overflow: hidden !important;
}

/* User menu list */
nav.sidebar .s-user-menu-inline {
  padding: 10px !important;
}

/* Menu item */
nav.sidebar .s-user-menu-dropdown-item {
  margin-bottom: 6px !important;
}

/* Menu link */
nav.sidebar .s-user-menu-dropdown-item-link {
  min-height: 48px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 10px 14px !important;

  color: #3a2415 !important;
  background: transparent !important;

  border-radius: 18px !important;
  border: 1px solid transparent !important;

  font-weight: 850 !important;
  transition: 0.25s ease !important;
}

/* Menu icon */
nav.sidebar .s-user-menu-dropdown-item-prefix {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(216, 185, 143, 0.22) !important;
  border-radius: 999px !important;
}

nav.sidebar .s-user-menu-dropdown-item-prefix svg,
nav.sidebar .s-user-menu-dropdown-item-prefix svg path {
  fill: #3a2415 !important;
}

/* Menu title */
nav.sidebar .s-user-menu-dropdown-item-title {
  color: #3a2415 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* Hover */
nav.sidebar .s-user-menu-dropdown-item-link:hover {
  background: #3a2415 !important;
  border-color: #3a2415 !important;
  color: #fffaf4 !important;
  transform: translateX(-2px) !important;
}

nav.sidebar .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-title {
  color: #fffaf4 !important;
}

nav.sidebar .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix {
  background: rgba(255, 250, 244, 0.14) !important;
}

nav.sidebar .s-user-menu-dropdown-item-link:hover svg,
nav.sidebar .s-user-menu-dropdown-item-link:hover svg path {
  fill: #fffaf4 !important;
}

/* Logout item softer red/brown */
nav.sidebar .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  color: #7a3d2b !important;
}

nav.sidebar .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
  background: #7a3d2b !important;
  border-color: #7a3d2b !important;
}

/* =====================================================
   MAIN CONTENT
===================================================== */

.main-content.w-full.flex-1 {
  background: transparent !important;
}

/* Order title row */
.main-content .flex.justify-between.items-center.mb-2 {
  margin-bottom: 18px !important;
  padding: 20px 22px !important;

  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.18), transparent 34%),
    rgba(255, 250, 244, 0.88) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 26px !important;

  box-shadow: 0 14px 34px rgba(31, 18, 11, 0.06) !important;
}

.main-content h1 {
  color: #1f120b !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  font-weight: 950 !important;
  line-height: 1.6 !important;
  text-align: right !important;
}

/* =====================================================
   ORDER HEADER TABLE
===================================================== */

.main-content table.min-w-full {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;

  background: #fffaf4 !important;
  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 24px !important;

  box-shadow: 0 14px 36px rgba(31, 18, 11, 0.06) !important;
}

.main-content table.min-w-full tr {
  background: transparent !important;
}

.main-content .single-order-header-item {
  background: rgba(255, 255, 255, 0.58) !important;
  border-color: rgba(58, 36, 21, 0.08) !important;
}

.main-content .single-order-header-item div,
.main-content .single-order-header-item .text-gray-400 {
  color: #7a6a5d !important;
  font-weight: 750 !important;
}

.main-content .single-order-header-item b {
  color: #1f120b !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

/* Status pill */
.main-content .single-order-header-item .text-primary {
  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 8px 12px !important;
  font-weight: 900 !important;
}

/* Print button */
.main-content salla-button button,
.main-content .s-button-element {
  border-radius: 999px !important;
  font-weight: 900 !important;
}

.main-content .s-button-primary-outline {
  color: #3a2415 !important;
  border-color: rgba(58, 36, 21, 0.22) !important;
  background: #fffaf4 !important;
}

.main-content .s-button-primary-outline:hover {
  background: #3a2415 !important;
  color: #fffaf4 !important;
  border-color: #3a2415 !important;
}

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

.shipping-orders > .flex.bg-white {
  background:
    linear-gradient(135deg, rgba(255, 250, 244, 0.95), rgba(251, 247, 241, 0.92)) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-bottom: none !important;

  border-radius: 24px 24px 0 0 !important;

  color: #3a2415 !important;
  font-weight: 850 !important;

  box-shadow: 0 10px 26px rgba(31, 18, 11, 0.04) !important;
}

.shipping-orders img {
  background: #ffffff !important;
  border: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 12px !important;
  padding: 5px !important;
}

/* =====================================================
   ORDER ITEM CARD
===================================================== */

.order-item {
  background: #ffffff !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 0 0 24px 24px !important;

  padding: 22px !important;

  box-shadow: 0 18px 44px rgba(31, 18, 11, 0.06) !important;
}

/* Product image */
.order-item img {
  width: 86px !important;
  height: 72px !important;

  object-fit: cover !important;
  border-radius: 18px !important;

  background: #fbf7f1 !important;
  border: 1px solid rgba(58, 36, 21, 0.08) !important;

  box-shadow: 0 10px 22px rgba(31, 18, 11, 0.06) !important;
}

/* Product name */
.order-item a.block {
  color: #1f120b !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

.order-item a.block:hover {
  color: #9b6a42 !important;
}

/* Product price */
.order-item b {
  color: #3a2415 !important;
  font-weight: 950 !important;
}

/* Item rows */
.order-item .flex.justify-between.text-sm,
.order-item .w-full.flex.justify-between.text-sm {
  border-top: 1px dashed rgba(58, 36, 21, 0.12) !important;
  color: #7a6a5d !important;
}

.order-item .flex.justify-between.text-sm span,
.order-item .w-full.flex.justify-between.text-sm span {
  color: #7a6a5d !important;
  font-weight: 750 !important;
}

.order-item .flex.justify-between.text-sm b,
.order-item .w-full.flex.justify-between.text-sm b {
  color: #1f120b !important;
}

/* =====================================================
   ORDER DETAILS OPTIONS
===================================================== */

.s-order-details-wrapper,
.s-order-details-options-wrapper {
  display: block !important;
  margin-top: 18px !important;
}

.s-order-details-options-title {
  color: #1f120b !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  margin-bottom: 10px !important;
}

.s-order-details-options-container {
  background: #fffaf4 !important;
  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 20px !important;
  padding: 14px !important;
}

.s-order-details-options-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

.s-order-details-options-item-name {
  color: #7a6a5d !important;
  font-weight: 850 !important;
}

.s-order-details-options-item-value-text {
  margin: 0 !important;
}

.s-order-details-option-default-text {
  display: inline-flex !important;
  align-items: center !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 7px 11px !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* =====================================================
   ORDER TOTALS CARD
===================================================== */

.s-order-totals-card-wrapper {
  display: block !important;
  margin-top: 22px !important;
}

.s-order-totals-card-panel {
  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.16), transparent 34%),
    #fffaf4 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 26px !important;

  padding: 22px !important;

  box-shadow: 0 18px 44px rgba(31, 18, 11, 0.07) !important;
}

.s-order-totals-card-heading {
  color: #1f120b !important;
  font-size: 18px !important;
  font-weight: 950 !important;
  margin-bottom: 16px !important;
}

.s-order-totals-card-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

.s-order-totals-card-row-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;

  background: rgba(255, 255, 255, 0.62) !important;

  border: 1px solid rgba(58, 36, 21, 0.07) !important;
  border-radius: 16px !important;

  padding: 12px 14px !important;
}

.s-order-totals-card-label,
.s-order-totals-card-discount {
  color: #7a6a5d !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

.s-order-totals-card-value {
  color: #3a2415 !important;
  font-size: 14px !important;
  font-weight: 950 !important;
}

.s-order-totals-card-discount,
.s-order-totals-card-row:has(.s-order-totals-card-discount) .s-order-totals-card-value {
  color: #7a3d2b !important;
}

.s-order-totals-card-total {
  margin-top: 8px !important;
}

.s-order-totals-card-total .s-order-totals-card-row-inner {
  background: linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;
  border-color: #3a2415 !important;
  padding: 15px 16px !important;
}

.s-order-totals-card-total-label,
.s-order-totals-card-total-value,
.s-order-totals-card-total-value b {
  color: #fffaf4 !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

/* =====================================================
   REORDER CARD
===================================================== */

.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 {
  margin-top: 22px !important;

  background: #ffffff !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 26px !important;

  box-shadow: 0 16px 40px rgba(31, 18, 11, 0.06) !important;
}

.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 h3 {
  color: #1f120b !important;
  font-weight: 950 !important;
}

.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 p {
  color: #7a6a5d !important;
  font-weight: 700 !important;
}

.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 .s-button-primary-link {
  color: #3a2415 !important;
  background: rgba(216, 185, 143, 0.18) !important;
  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;
  padding: 10px 14px !important;
}

.bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 .s-button-primary-link:hover {
  background: #3a2415 !important;
  color: #fffaf4 !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {
  .container.lg\:mb-24 {
    margin-top: 16px !important;
    margin-bottom: 44px !important;
    padding-inline: 12px !important;
  }

  nav.sidebar {
    display: none !important;
  }

  .main-content .flex.justify-between.items-center.mb-2 {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .main-content h1 {
    font-size: 21px !important;
  }

  .main-content table.min-w-full {
    border-radius: 22px !important;
  }

  .main-content .single-order-header-item {
    padding: 14px !important;
  }

  .shipping-orders > .flex.bg-white {
    border-radius: 22px 22px 0 0 !important;
    padding: 14px !important;
  }

  .order-item {
    padding: 16px !important;
    border-radius: 0 0 22px 22px !important;
  }

  .order-item img {
    width: 74px !important;
    height: 64px !important;
    border-radius: 16px !important;
  }

  .order-item a.block {
    font-size: 15px !important;
  }

  .s-order-details-options-item {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .s-order-totals-card-panel {
    padding: 16px !important;
    border-radius: 22px !important;
  }

  .s-order-totals-card-row-inner {
    padding: 11px 12px !important;
  }

  .bg-white.rounded-md.p-5.divide-y.divide-border-color.space-y-4 {
    border-radius: 22px !important;
    padding: 16px !important;
  }
}




.asrya-account-note {
  display: inline-flex !important;
  align-items: center !important;

  margin-bottom: 10px !important;

  background: rgba(216, 185, 143, 0.20) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 8px 13px !important;

  font-size: 12.5px !important;
  font-weight: 900 !important;
}
/* Center account note on mobile */
@media (max-width: 768px) {
  .asrya-account-note {
    display: flex !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 12px !important;
    text-align: center !important;
    justify-content: center !important;
  }
}




/* =====================================================
   ASRYA ACCOUNT ORDERS LIST PAGE
   صفحة الطلبات - Brand Enhancement
===================================================== */

:root {
  --asrya-ink: #1f120b;
  --asrya-brown: #3a2415;
  --asrya-caramel: #9b6a42;
  --asrya-gold: #d8b98f;
  --asrya-page: #fffaf4;
  --asrya-cream: #fbf7f1;
  --asrya-muted: #7a6a5d;
}

/* Page background */
body:has(salla-orders),
main:has(salla-orders) {
  background:
    radial-gradient(circle at 90% 8%, rgba(216, 185, 143, 0.16), transparent 28%),
    linear-gradient(180deg, #fffaf4 0%, #f7efe6 100%) !important;
}

/* =====================================================
   PROFILE HEADER / TOP AREA
===================================================== */

.profile-header.gradient-bg {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.18), transparent 34%),
    linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;

  min-height: 150px !important;
  border-bottom: 1px solid rgba(255, 250, 244, 0.12) !important;
}

/* Breadcrumb only inside account header */
.profile-header .breadcrumbs,
.profile-header .breadcrumbs *,
.profile-header .s-breadcrumb-wrapper,
.profile-header .s-breadcrumb-item,
.profile-header .s-breadcrumb-item a {
  color: #fffaf4 !important;
  font-weight: 800 !important;
}

.profile-header .s-breadcrumb-arrow svg,
.profile-header .s-breadcrumb-arrow svg path {
  fill: rgba(255, 250, 244, 0.82) !important;
}

.profile-header .s-breadcrumb-item a:hover {
  color: #d8b98f !important;
}

/* Main container */
main:has(salla-orders) > .container,
.container.lg\:mb-24:has(salla-orders) {
  max-width: 1240px !important;
  margin-top: 30px !important;
  margin-bottom: 70px !important;
}

/* =====================================================
   ACCOUNT SIDEBAR
===================================================== */

main:has(salla-orders) nav.sidebar {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.16), transparent 34%),
    #fffaf4 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 28px !important;

  box-shadow: 0 20px 55px rgba(31, 18, 11, 0.08) !important;

  overflow: hidden !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-inline {
  padding: 10px !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item {
  margin-bottom: 6px !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link {
  min-height: 48px !important;

  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  padding: 10px 14px !important;

  color: #3a2415 !important;
  background: transparent !important;

  border-radius: 18px !important;
  border: 1px solid transparent !important;

  font-weight: 850 !important;
  transition: 0.25s ease !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-prefix {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(216, 185, 143, 0.22) !important;
  border-radius: 999px !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-prefix svg,
main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-prefix svg path {
  fill: #3a2415 !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-title {
  color: #3a2415 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

/* Active orders item */
main:has(salla-orders) nav.sidebar a[href*="/account/orders"] {
  background:
    linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;

  color: #fffaf4 !important;
  border-color: #3a2415 !important;
  box-shadow: 0 12px 26px rgba(31, 18, 11, 0.14) !important;
}

main:has(salla-orders) nav.sidebar a[href*="/account/orders"] .s-user-menu-dropdown-item-title {
  color: #fffaf4 !important;
}

main:has(salla-orders) nav.sidebar a[href*="/account/orders"] .s-user-menu-dropdown-item-prefix {
  background: rgba(255, 250, 244, 0.14) !important;
}

main:has(salla-orders) nav.sidebar a[href*="/account/orders"] svg,
main:has(salla-orders) nav.sidebar a[href*="/account/orders"] svg path {
  fill: #fffaf4 !important;
}

/* Hover */
main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link:hover {
  background: #3a2415 !important;
  border-color: #3a2415 !important;
  color: #fffaf4 !important;
  transform: translateX(-2px) !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-title {
  color: #fffaf4 !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix {
  background: rgba(255, 250, 244, 0.14) !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link:hover svg,
main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-link:hover svg path {
  fill: #fffaf4 !important;
}

/* Logout */
main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link {
  color: #7a3d2b !important;
}

main:has(salla-orders) nav.sidebar .s-user-menu-dropdown-item-logout .s-user-menu-dropdown-item-link:hover {
  background: #7a3d2b !important;
  border-color: #7a3d2b !important;
}

/* =====================================================
   MAIN CONTENT HEADER
===================================================== */

main:has(salla-orders) .main-content {
  background: transparent !important;
}

main:has(salla-orders) .main-content > h1 {
  position: relative !important;

  margin-bottom: 18px !important;
  padding: 20px 22px !important;

  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.18), transparent 34%),
    rgba(255, 250, 244, 0.90) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 26px !important;

  box-shadow: 0 14px 34px rgba(31, 18, 11, 0.06) !important;

  color: #1f120b !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 950 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

main:has(salla-orders) .main-content > h1::before {
  content: "قائمة طلباتك من عصرية" !important;

  display: inline-flex !important;
  align-items: center !important;

  position: absolute !important;
  top: -16px !important;
  right: 18px !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 7px 12px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

/* =====================================================
   ORDERS TABLE WRAPPER
===================================================== */

.s-orders-wrapper {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.13), transparent 34%),
    rgba(255, 250, 244, 0.84) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 28px !important;

  padding: 14px !important;

  box-shadow: 0 20px 55px rgba(31, 18, 11, 0.075) !important;
  overflow: hidden !important;
}

.s-orders-table {
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  width: 100% !important;
}

/* Table head */
.s-orders-table-head {
  background: transparent !important;
}

.s-orders-table-head-tr {
  background: transparent !important;
}

.s-orders-table-head-tr-th {
  color: #7a6a5d !important;
  font-size: 12.5px !important;
  font-weight: 950 !important;

  padding: 10px 16px !important;

  background: transparent !important;
  border: none !important;
}

/* Order rows */
.s-orders-table-tbody-tr {
  background: #ffffff !important;

  border-radius: 22px !important;

  box-shadow: 0 12px 28px rgba(31, 18, 11, 0.055) !important;

  transition: 0.22s ease !important;
}

.s-orders-table-tbody-tr:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(31, 18, 11, 0.085) !important;
}

.s-orders-table-tbody-tr-td {
  background: #ffffff !important;

  border-top: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-bottom: 1px solid rgba(58, 36, 21, 0.08) !important;

  padding: 16px !important;
}

.s-orders-table-tbody-tr-td:first-child {
  border-right: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 0 22px 22px 0 !important;
}

.s-orders-table-tbody-tr-td:last-child {
  border-left: 1px solid rgba(58, 36, 21, 0.08) !important;
  border-radius: 22px 0 0 22px !important;
}

.s-orders-table-tbody-tr-td-content {
  color: #3a2415 !important;
  font-weight: 850 !important;
}

/* Order reference */
.s-orders-reference-id {
  display: inline-flex !important;
  align-items: center !important;

  background: rgba(216, 185, 143, 0.20) !important;
  color: #1f120b !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 8px 12px !important;

  font-size: 13px !important;
  font-weight: 950 !important;
}

/* Copy button */
.s-orders-copy-to-clipboard-button .s-button-element,
.s-orders-copy-to-clipboard-button button {
  background: transparent !important;
  color: #3a2415 !important;
  padding: 0 !important;
}

.s-orders-copy-to-clipboard-button .s-button-text {
  gap: 6px !important;
  color: #3a2415 !important;
  font-weight: 900 !important;
}

.s-orders-copy-to-clipboard-button-icon {
  color: #9b6a42 !important;
  font-size: 16px !important;
}

/* Values */
.s-orders-table-tbody-tr-td-content div,
.s-orders-table-tbody-tr-td-content span:not(.s-orders-mobile-title):not(.s-orders-status-container) {
  color: #3a2415 !important;
  font-weight: 850 !important;
}

/* Mobile labels */
.s-orders-mobile-title {
  color: #7a6a5d !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

/* Status pill */
.s-orders-status-container {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 8px 12px !important;

  font-size: 12.5px !important;
  font-weight: 950 !important;
}

.s-orders-status-container i,
.s-orders-status-container span {
  color: #3a2415 !important;
}

/* Hide unrated star if it looks unnecessary */
.s-orders-status-rated.s-orders-unrated-text {
  color: rgba(155, 106, 66, 0.45) !important;
}

/* Click area links stay functional */
.s-orders-table-tbody-tr-td-content > a {
  border-radius: 22px !important;
}

/* =====================================================
   LOAD MORE BUTTON
===================================================== */

.s-infinite-scroll-wrapper {
  margin-top: 18px !important;
  display: flex !important;
  justify-content: center !important;
}

.s-infinite-scroll-btn {
  min-height: 48px !important;

  background: linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;
  color: #fffaf4 !important;

  border: none !important;
  border-radius: 999px !important;

  padding: 0 24px !important;

  font-size: 14px !important;
  font-weight: 950 !important;

  box-shadow: 0 16px 34px rgba(31, 18, 11, 0.18) !important;
  transition: 0.22s ease !important;
}

.s-infinite-scroll-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 44px rgba(31, 18, 11, 0.24) !important;
}

.s-infinite-scroll-btn-text {
  color: #fffaf4 !important;
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {
  .profile-header.gradient-bg {
    min-height: 120px !important;
  }

  .profile-header .breadcrumbs {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }

  main:has(salla-orders) > .container,
  .container.lg\:mb-24:has(salla-orders) {
    margin-top: 18px !important;
    margin-bottom: 48px !important;
    padding-inline: 12px !important;
  }

  main:has(salla-orders) nav.sidebar {
    display: none !important;
  }

  main:has(salla-orders) .main-content > h1 {
    text-align: center !important;
    padding: 22px 16px 18px !important;
    border-radius: 24px !important;
    font-size: 26px !important;
  }

  main:has(salla-orders) .main-content > h1::before {
    right: 50% !important;
    transform: translateX(50%) !important;
    top: -14px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }

  .s-orders-wrapper {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .s-orders-table {
    border-spacing: 0 12px !important;
  }

  .s-orders-table-head {
    display: none !important;
  }

  .s-orders-table-tbody,
  .s-orders-table-tbody-tr,
  .s-orders-table-tbody-tr-td {
    display: block !important;
    width: 100% !important;
  }

  .s-orders-table-tbody-tr {
    border: 1px solid rgba(58, 36, 21, 0.10) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    padding: 10px !important;
  }

  .s-orders-table-tbody-tr-td {
    border: none !important;
    border-radius: 0 !important;
    padding: 10px 8px !important;
    background: transparent !important;
  }

  .s-orders-table-tbody-tr-td + .s-orders-table-tbody-tr-td {
    border-top: 1px dashed rgba(58, 36, 21, 0.12) !important;
  }

  .s-orders-table-tbody-tr-td-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
  }

  .s-orders-mobile-title {
    display: inline-flex !important;
    min-width: 86px !important;
  }

  .s-orders-reference-id {
    padding: 7px 10px !important;
    font-size: 12.5px !important;
  }

  .s-orders-status-container {
    padding: 7px 10px !important;
    font-size: 12px !important;
  }

  .s-infinite-scroll-btn {
    width: 100% !important;
    min-height: 50px !important;
  }
}




/* =====================================================
   ACCOUNT SIDEBAR ICON CENTER FIX
===================================================== */

nav.sidebar .s-user-menu-dropdown-item-prefix {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0 !important;
  margin: 0 !important;

  line-height: 0 !important;
  vertical-align: middle !important;

  background: rgba(216, 185, 143, 0.22) !important;
  border-radius: 999px !important;

  overflow: hidden !important;
}

nav.sidebar .s-user-menu-dropdown-item-prefix svg {
  width: 18px !important;
  height: 18px !important;

  display: block !important;

  margin: auto !important;
  padding: 0 !important;

  transform: translate(0, 0) !important;
}

nav.sidebar .s-user-menu-dropdown-item-prefix svg path {
  fill: #3a2415 !important;
}

/* Active / hover icon color */
nav.sidebar .s-user-menu-dropdown-item-link:hover .s-user-menu-dropdown-item-prefix svg path,
nav.sidebar a[href*="/account/orders"] .s-user-menu-dropdown-item-prefix svg path {
  fill: #fffaf4 !important;
}




/* =====================================================
   ASRYA NOTIFICATIONS PAGE
   صفحة الإشعارات - Brand Enhancement
===================================================== */

/* Page title card */
main:has(salla-notifications) .main-content > h1,
.main-content:has(salla-notifications) > h1 {
  position: relative !important;

  margin-bottom: 18px !important;
  padding: 20px 22px !important;

  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.18), transparent 34%),
    rgba(255, 250, 244, 0.90) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 26px !important;

  box-shadow: 0 14px 34px rgba(31, 18, 11, 0.06) !important;

  color: #1f120b !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  font-weight: 950 !important;
  line-height: 1.4 !important;
  text-align: right !important;
}

main:has(salla-notifications) .main-content > h1::before,
.main-content:has(salla-notifications) > h1::before {
  content: "آخر تحديثات طلباتك" !important;

  display: inline-flex !important;
  align-items: center !important;

  position: absolute !important;
  top: -16px !important;
  right: 18px !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 7px 12px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
}

/* Wrapper */
.s-notifications-wrapper {
  background:
    radial-gradient(circle at top right, rgba(216, 185, 143, 0.13), transparent 34%),
    rgba(255, 250, 244, 0.84) !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 28px !important;

  padding: 14px !important;

  box-shadow: 0 20px 55px rgba(31, 18, 11, 0.075) !important;
  overflow: hidden !important;
}

.s-notifications-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* Notification card */
.s-notifications-item {
  background: #ffffff !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 22px !important;

  padding: 16px !important;

  box-shadow: 0 12px 28px rgba(31, 18, 11, 0.055) !important;

  transition: 0.22s ease !important;
}

.s-notifications-item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 18px 36px rgba(31, 18, 11, 0.085) !important;
  border-color: rgba(58, 36, 21, 0.16) !important;
}

/* Bell icon circle */
.s-notifications-item > .s-notifications-item-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  line-height: 0 !important;
}

.s-notifications-item > .s-notifications-item-icon i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 20px !important;
  height: 20px !important;

  color: #3a2415 !important;
  font-size: 18px !important;
  line-height: 1 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Content */
.s-notifications-item-content {
  gap: 12px !important;
}

.s-notifications-item-content-leading h4 {
  color: #1f120b !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  margin-bottom: 4px !important;
}

.s-notifications-item-content-leading p {
  color: #7a6a5d !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.8 !important;
}

/* Time badge */
.s-notifications-item-content-trailing {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;

  background: rgba(255, 250, 244, 0.86) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  padding: 7px 10px !important;

  font-size: 12px !important;
  font-weight: 850 !important;

  white-space: nowrap !important;
}

.s-notifications-item-content-trailing i,
.s-notifications-item-content-trailing span {
  color: #3a2415 !important;
}

/* Read items still soft */
.s-notifications-item-read {
  opacity: 1 !important;
}

/* Load more */
.s-notifications-wrapper .s-infinite-scroll-wrapper {
  margin-top: 18px !important;
  display: flex !important;
  justify-content: center !important;
}

.s-notifications-wrapper .s-infinite-scroll-btn {
  min-height: 48px !important;

  background: linear-gradient(135deg, #1f120b 0%, #3a2415 100%) !important;
  color: #fffaf4 !important;

  border: none !important;
  border-radius: 999px !important;

  padding: 0 24px !important;

  font-size: 14px !important;
  font-weight: 950 !important;

  box-shadow: 0 16px 34px rgba(31, 18, 11, 0.18) !important;
  transition: 0.22s ease !important;
}

.s-notifications-wrapper .s-infinite-scroll-btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 22px 44px rgba(31, 18, 11, 0.24) !important;
}

.s-notifications-wrapper .s-infinite-scroll-btn-text {
  color: #fffaf4 !important;
}

/* Mobile */
@media (max-width: 768px) {
  main:has(salla-notifications) .main-content > h1,
  .main-content:has(salla-notifications) > h1 {
    text-align: center !important;
    padding: 22px 16px 18px !important;
    border-radius: 24px !important;
    font-size: 26px !important;
  }

  main:has(salla-notifications) .main-content > h1::before,
  .main-content:has(salla-notifications) > h1::before {
    right: 50% !important;
    transform: translateX(50%) !important;
    top: -14px !important;
    white-space: nowrap !important;
    font-size: 11.5px !important;
  }

  .s-notifications-wrapper {
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .s-notifications-item {
    padding: 14px !important;
    border-radius: 20px !important;
    align-items: flex-start !important;
  }

  .s-notifications-item > .s-notifications-item-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .s-notifications-item > .s-notifications-item-icon i {
    font-size: 16px !important;
  }

  .s-notifications-item-content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  .s-notifications-item-content-leading h4 {
    font-size: 14px !important;
  }

  .s-notifications-item-content-leading p {
    font-size: 12.5px !important;
  }

  .s-notifications-item-content-trailing {
    padding: 6px 9px !important;
    font-size: 11.5px !important;
  }

  .s-notifications-wrapper .s-infinite-scroll-btn {
    width: 100% !important;
    min-height: 50px !important;
  }
}






/* =====================================================
   ASRYA CART DELIVERY DISCOUNT OFFER
   يظهر فقط إذا الشحن المجاني غير مطبق
===================================================== */

.asrya-delivery-discount-offer {
  margin-bottom: 20px !important;
  padding: 18px !important;

  background:
    radial-gradient(circle at top left, rgba(216, 185, 143, 0.20), transparent 38%),
    #fffaf4 !important;

  border: 1px solid rgba(58, 36, 21, 0.12) !important;
  border-radius: 24px !important;

  box-shadow: 0 14px 34px rgba(31, 18, 11, 0.07) !important;
}

.asrya-delivery-discount-offer__inner {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
}

.asrya-delivery-discount-offer__icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: #3a2415 !important;
  color: #fffaf4 !important;

  border-radius: 999px !important;

  font-size: 18px !important;
  line-height: 1 !important;

  box-shadow: 0 10px 22px rgba(31, 18, 11, 0.16) !important;
}

.asrya-delivery-discount-offer__content {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 5px !important;
}

.asrya-delivery-discount-offer__title {
  color: #1f120b !important;
  font-size: 14px !important;
  font-weight: 950 !important;
  line-height: 1.5 !important;
}

.asrya-delivery-discount-offer__text {
  color: #7a6a5d !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.8 !important;
}

.asrya-delivery-discount-offer__text b {
  color: #3a2415 !important;
  font-weight: 950 !important;
}

.asrya-delivery-discount-offer__badge {
  width: fit-content !important;

  margin-top: 4px !important;
  padding: 7px 11px !important;

  background: rgba(216, 185, 143, 0.22) !important;
  color: #3a2415 !important;

  border: 1px solid rgba(58, 36, 21, 0.10) !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

@media (max-width: 768px) {
  .asrya-delivery-discount-offer {
    padding: 15px !important;
    border-radius: 22px !important;
  }

  .asrya-delivery-discount-offer__icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 16px !important;
  }

  .asrya-delivery-discount-offer__title {
    font-size: 13.5px !important;
  }

  .asrya-delivery-discount-offer__text {
    font-size: 12.5px !important;
  }
}




/* =====================================================
   HOME PRODUCTS MOBILE - 2 PRODUCTS PER ROW
===================================================== */

@media (max-width: 768px) {
  .category-section .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 10px !important;
    padding-inline: 2px !important;
  }

  .category-section .product-card {
    width: 100% !important;
    min-width: 0 !important;
    border-radius: 20px !important;
    overflow: visible !important;
    position: relative !important;
  }

  .category-section .image-wrapper {
    height: 132px !important;
    min-height: 132px !important;
    max-height: 132px !important;
    width: 100% !important;

    display: block !important;
    position: relative !important;

    border-radius: 20px !important;
    overflow: hidden !important;

    background: #fbf7f1 !important;
  }

  .category-section .product-image {
    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;
    object-position: center !important;

    display: block !important;
  }

  /* Smaller floating info card */
  .category-section .info-card {
    position: relative !important;

    width: calc(100% - 18px) !important;
    min-height: 88px !important;

    margin: -24px auto 0 !important;
    padding: 11px 11px 10px !important;

    border-radius: 18px !important;

    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 10px 22px rgba(31, 18, 11, 0.08) !important;

    z-index: 3 !important;
  }

  .category-section .product-title {
    font-size: 12px !important;
    line-height: 1.55 !important;
    font-weight: 950 !important;
    color: #1f120b !important;

    min-height: 38px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;

    text-align: right !important;
  }

  .category-section .price-row {
    margin-top: 7px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
  }

  .category-section .current-price {
    font-size: 13px !important;
    font-weight: 950 !important;
    color: #3a2415 !important;
    white-space: nowrap !important;
  }

  .category-section .current-price i {
    font-size: 11px !important;
  }

  .category-section .add-btn-innovative {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 999px !important;
  }

  .category-section .add-btn-innovative i {
    font-size: 14px !important;
  }

  /* Make top badge smaller */
  .category-section .ribbon-badge {
    top: 8px !important;
    right: 8px !important;

    max-width: calc(100% - 16px) !important;

    padding: 5px 8px !important;
    font-size: 9.5px !important;
    font-weight: 850 !important;

    border-radius: 999px !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Hide subtitle overlay on mobile because it crowds the card */
  .category-section .subtitle-label {
    display: none !important;
  }
}







/* =====================================================
   ASRYA MOBILE USER MENU TRIGGER - COMPACT NICE PILL
===================================================== */

@media (max-width: 768px) {
  #mainnav salla-user-menu,
  #mainnav .s-user-menu-wrapper,
  #mainnav .s-user-menu-toggler {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    overflow: visible !important;
  }

  #mainnav .s-user-menu-trigger {
    width: auto !important;
    min-width: 0 !important;
    max-width: 118px !important;

    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    padding: 3px 7px !important;
    margin: 0 !important;

    background: #fffaf4 !important;
    border: 1.5px solid rgba(58, 36, 21, 0.35) !important;
    border-radius: 999px !important;

    box-shadow: 0 8px 18px rgba(31, 18, 11, 0.07) !important;
    overflow: hidden !important;
  }

  #mainnav .s-user-menu-avatar-wrap {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    margin: 0 !important;
    padding: 0 !important;

    border-radius: 999px !important;
    overflow: hidden !important;
  }

  #mainnav .s-user-menu-trigger-avatar {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    max-width: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;

    object-fit: cover !important;
    border-radius: 999px !important;

    margin: 0 !important;
    padding: 0 !important;
  }

  /* نخفي مرحباً بك فقط */
  #mainnav .s-user-menu-trigger-hello {
    display: none !important;
  }

  #mainnav .s-user-menu-trigger-content {
    display: block !important;
    visibility: visible !important;
    width: auto !important;
    max-width: 52px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #mainnav .s-user-menu-trigger-name {
    display: block !important;
    visibility: visible !important;

    color: #3a2415 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    line-height: 1 !important;

    margin: 0 !important;
    padding: 0 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #mainnav .s-user-menu-trigger-icon {
    display: inline-flex !important;
    visibility: visible !important;

    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #mainnav .s-user-menu-trigger-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  #mainnav .s-user-menu-trigger-icon svg path {
    fill: #3a2415 !important;
  }
}



/* =====================================================
   FIX MOBILE USER MENU CLOSE
   يخلي المنيو تقفل عند الضغط على X
===================================================== */

@media (max-width: 768px) {
  /* الحالة الافتراضية: المنيو مخفية */
  #mainnav salla-user-menu .s-user-menu-dropdown,
  salla-user-menu .s-user-menu-dropdown {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) !important;
  }

  /* تظهر فقط إذا سلة أضافت opened */
  #mainnav salla-user-menu .s-user-menu-toggler.opened .s-user-menu-dropdown,
  salla-user-menu .s-user-menu-toggler.opened .s-user-menu-dropdown,
  #mainnav salla-user-menu .s-user-menu-wrapper.opened .s-user-menu-dropdown,
  salla-user-menu .s-user-menu-wrapper.opened .s-user-menu-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;

    position: fixed !important;
    top: 118px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100vh - 132px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    z-index: 2147483647 !important;

    background: #fffaf4 !important;
    border: 1px solid rgba(58, 36, 21, 0.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(31, 18, 11, 0.28) !important;
  }

  /* مهم جدًا: يلغي أي كود قديم كان يجبر النافذة تظهر حتى وهي مقفلة */
  #mainnav salla-user-menu .s-user-menu-dropdown:not(.opened),
  salla-user-menu .s-user-menu-dropdown:not(.opened) {
    pointer-events: none !important;
  }
}









/* =====================================================
   ASRYA MOBILE PRODUCTS - APPLY TO ALL CATEGORY GRIDS
   يجعل المنتجات صفين بكل الأقسام في الموبايل
===================================================== */

@media (max-width: 768px) {
  .products-grid,
  .category-section .products-grid,
  section .products-grid,
  .s-products-list-wrapper .products-grid,
  .s-products-list-content .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
    align-items: start !important;
  }

  .products-grid .product-card,
  .category-section .product-card,
  section .product-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .products-grid .image-wrapper,
  .category-section .image-wrapper,
  section .image-wrapper {
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    width: 100% !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .products-grid .product-image,
  .category-section .product-image,
  section .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .products-grid .info-card,
  .category-section .info-card,
  section .info-card {
    width: 90% !important;
    max-width: 90% !important;
    margin: -16px auto 0 !important;
    padding: 8px 8px 7px !important;
    border-radius: 15px !important;
    min-height: 60px !important;
  }

  .products-grid .product-title,
  .category-section .product-title,
  section .product-title {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    min-height: 28px !important;
    max-height: 28px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .products-grid .price-row,
  .category-section .price-row,
  section .price-row {
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 5px !important;
  }

  .products-grid .current-price,
  .category-section .current-price,
  section .current-price {
    font-size: 11px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
  }

  .products-grid .add-btn-innovative,
  .category-section .add-btn-innovative,
  section .add-btn-innovative {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .products-grid .add-btn-innovative i,
  .category-section .add-btn-innovative i,
  section .add-btn-innovative i {
    font-size: 10px !important;
  }

  .products-grid .subtitle-label,
  .category-section .subtitle-label,
  section .subtitle-label {
    display: none !important;
  }
}








/* =====================================================
   ASRYA FORCE MOBILE 2 PRODUCTS PER ROW - ALL CATEGORIES
===================================================== */

@media (max-width: 768px) {
  html body .category-section > .products-grid,
  html body .category-section[data-index] > .products-grid,
  html body .category-section[data-index="3"] > .products-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: start !important;
  }

  html body .category-section > .products-grid > .product-card,
  html body .category-section[data-index] > .products-grid > .product-card,
  html body .category-section[data-index="3"] > .products-grid > .product-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
  }

  html body .category-section > .products-grid > .product-card .image-wrapper,
  html body .category-section[data-index] > .products-grid > .product-card .image-wrapper {
    width: 100% !important;
    height: 128px !important;
    min-height: 128px !important;
    max-height: 128px !important;
    display: block !important;
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  html body .category-section > .products-grid > .product-card .product-image,
  html body .category-section[data-index] > .products-grid > .product-card .product-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  html body .category-section > .products-grid > .product-card .info-card,
  html body .category-section[data-index] > .products-grid > .product-card .info-card {
    width: 90% !important;
    max-width: 90% !important;
    min-width: 0 !important;
    margin: -16px auto 0 !important;
    padding: 8px 8px 7px !important;
    border-radius: 15px !important;
    min-height: 60px !important;
    height: auto !important;
  }

  html body .category-section > .products-grid > .product-card .product-title,
  html body .category-section[data-index] > .products-grid > .product-card .product-title {
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    min-height: 28px !important;
    max-height: 28px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  html body .category-section > .products-grid > .product-card .subtitle-label,
  html body .category-section[data-index] > .products-grid > .product-card .subtitle-label {
    display: none !important;
  }

  html body .category-section > .products-grid > .product-card .add-btn-innovative,
  html body .category-section[data-index] > .products-grid > .product-card .add-btn-innovative {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    max-width: 26px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }
}








/* =====================================================
   ASRYA MOBILE ORDERS LIST FIX
   Fix duplicated order number + RTL alignment
===================================================== */

@media (max-width: 768px) {
  /* Main orders wrapper */
  .s-orders-wrapper {
    direction: rtl !important;
    text-align: right !important;
    padding: 10px !important;
    border-radius: 24px !important;
  }

  .s-orders-table,
  .s-orders-table-tbody {
    display: block !important;
    width: 100% !important;
    direction: rtl !important;
  }

  /* Each order card */
  .s-orders-table-tbody-tr {
    display: block !important;
    width: 100% !important;
    direction: rtl !important;
    text-align: right !important;

    background: #ffffff !important;
    border: 1px solid rgba(58, 36, 21, 0.10) !important;
    border-radius: 22px !important;

    padding: 10px !important;
    margin-bottom: 14px !important;

    box-shadow: 0 12px 28px rgba(31, 18, 11, 0.06) !important;
    overflow: hidden !important;
  }

  /* Hide desktop table behavior */
  .s-orders-table-head {
    display: none !important;
  }

  .s-orders-table-tbody-tr-td {
    display: block !important;
    width: 100% !important;

    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;

    padding: 0 !important;
  }

  .s-orders-table-tbody-tr-td + .s-orders-table-tbody-tr-td {
    border-top: 1px dashed rgba(58, 36, 21, 0.12) !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
  }

  /* Row layout: label right, value left */
  .s-orders-table-tbody-tr-td-content {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-direction: row !important;

    gap: 12px !important;
    width: 100% !important;

    direction: rtl !important;
    text-align: right !important;
  }

  /* Mobile label */
  .s-orders-mobile-title {
    display: inline-flex !important;
    align-items: center !important;

    min-width: 88px !important;
    max-width: 110px !important;

    color: #7a6a5d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;

    text-align: right !important;
    direction: rtl !important;
  }

  /* Values */
  .s-orders-table-tbody-tr-td-content > div:not(.s-orders-copy-to-clipboard-button),
  .s-orders-table-tbody-tr-td-content > span:not(.s-orders-mobile-title) {
    margin-inline-start: auto !important;

    color: #3a2415 !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;

    text-align: left !important;
    direction: rtl !important;
  }

  /* Order number pill */
  .s-orders-reference-id {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(216, 185, 143, 0.22) !important;
    color: #1f120b !important;

    border: 1px solid rgba(58, 36, 21, 0.10) !important;
    border-radius: 999px !important;

    padding: 7px 11px !important;

    font-size: 12.5px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  /* FIX DUPLICATED ORDER NUMBER:
     نخفي نص زر النسخ لأنه يكرر رقم الطلب */
  .s-orders-copy-to-clipboard-button .s-button-text span {
    display: none !important;
  }

  /* Keep only copy icon */
  .s-orders-copy-to-clipboard-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin-inline-start: 6px !important;
    flex: 0 0 auto !important;
  }

  .s-orders-copy-to-clipboard-button .s-button-element {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    margin: 0 !important;

    background: rgba(216, 185, 143, 0.18) !important;
    border: 1px solid rgba(58, 36, 21, 0.10) !important;
    border-radius: 999px !important;
  }

  .s-orders-copy-to-clipboard-button .s-button-text {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
  }

  .s-orders-copy-to-clipboard-button-icon {
    color: #9b6a42 !important;
    font-size: 14px !important;
    margin: 0 !important;
  }

  /* First row: order number + copy icon beside it */
  .s-orders-table-tbody-tr-td:first-child .s-orders-table-tbody-tr-td-content {
    justify-content: flex-start !important;
  }

  .s-orders-table-tbody-tr-td:first-child .s-orders-reference-id {
    margin-inline-start: auto !important;
  }

  /* Empty full-row links should not affect alignment */
  .s-orders-table-tbody-tr-td-content > a[href] {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 0 !important;
  }

  .s-orders-reference-id,
  .s-orders-copy-to-clipboard-button,
  .s-orders-status-container,
  .s-orders-table-tbody-tr-td-content > div,
  .s-orders-mobile-title {
    position: relative !important;
    z-index: 2 !important;
  }

  /* Status pill */
  .s-orders-status-container {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    margin-inline-start: auto !important;

    background: rgba(216, 185, 143, 0.22) !important;
    color: #3a2415 !important;

    border: 1px solid rgba(58, 36, 21, 0.10) !important;
    border-radius: 999px !important;

    padding: 7px 10px !important;

    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
  }

  .s-orders-status-container i,
  .s-orders-status-container span {
    color: inherit !important;
  }

  /* Hide rating star on mobile to reduce mess */
  .s-orders-status-rated,
  .s-orders-unrated-text {
    display: none !important;
  }
}





/* =====================================================
   ASRYA MOBILE ORDERS - RTL VALUES FIX
   Make values RTL and right aligned
===================================================== */

@media (max-width: 768px) {
  .s-orders-wrapper,
  .s-orders-table,
  .s-orders-table-tbody,
  .s-orders-table-tbody-tr,
  .s-orders-table-tbody-tr-td,
  .s-orders-table-tbody-tr-td-content {
    direction: rtl !important;
    text-align: right !important;
  }

  /* Row: label on right, value beside it/right aligned */
  .s-orders-table-tbody-tr-td-content {
    display: grid !important;
    grid-template-columns: 92px 1fr auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Label */
  .s-orders-mobile-title {
    grid-column: 1 !important;
    justify-self: start !important;

    min-width: 0 !important;
    max-width: none !important;

    direction: rtl !important;
    text-align: right !important;

    color: #7a6a5d !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
  }

  /* Main values: total/date/order number */
  .s-orders-table-tbody-tr-td-content > div:not(.s-orders-copy-to-clipboard-button),
  .s-orders-table-tbody-tr-td-content > span:not(.s-orders-mobile-title):not(.s-orders-status-container) {
    grid-column: 2 !important;
    justify-self: start !important;

    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;

    direction: rtl !important;
    text-align: right !important;

    color: #3a2415 !important;
    font-size: 12.5px !important;
    font-weight: 850 !important;
    line-height: 1.6 !important;
  }

  /* Order number pill */
  .s-orders-reference-id {
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-align: center !important;

    justify-self: start !important;
    white-space: nowrap !important;
  }

  /* Copy button goes after order number */
  .s-orders-copy-to-clipboard-button {
    grid-column: 3 !important;
    justify-self: end !important;

    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }

  /* Hide duplicated number inside copy button */
  .s-orders-copy-to-clipboard-button .s-button-text span {
    display: none !important;
  }

  /* Total row value */
  .s-orders-table-tbody-tr-td-content > div {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 4px !important;
  }

  .s-orders-table-tbody-tr-td-content > div i {
    margin: 0 !important;
  }

  /* Status value */
  .s-orders-status-container {
    grid-column: 2 / 4 !important;
    justify-self: start !important;

    margin: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;

    direction: rtl !important;
    text-align: right !important;

    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;

    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .s-orders-status-container i {
    order: 1 !important;
  }

  .s-orders-status-container span {
    order: 2 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* Empty link must not affect layout */
  .s-orders-table-tbody-tr-td-content > a[href] {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0 !important;
    z-index: 1 !important;
  }

  .s-orders-mobile-title,
  .s-orders-reference-id,
  .s-orders-copy-to-clipboard-button,
  .s-orders-status-container,
  .s-orders-table-tbody-tr-td-content > div {
    position: relative !important;
    z-index: 2 !important;
  }
}
/* =====================================================
   ASRYA MOBILE ORDERS - STATUS RTL FIX
===================================================== */

@media (max-width: 768px) {
  /* Status row layout */
  .s-orders-table-tbody-tr-td-content:has(.s-orders-status-container) {
    display: grid !important;
    grid-template-columns: 92px 1fr !important;
    align-items: center !important;
    gap: 8px !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* Status label */
  .s-orders-table-tbody-tr-td-content:has(.s-orders-status-container) .s-orders-mobile-title {
    grid-column: 1 !important;
    justify-self: start !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* Status value */
  .s-orders-table-tbody-tr-td-content:has(.s-orders-status-container) .s-orders-status-container {
    grid-column: 2 !important;
    justify-self: start !important;

    display: inline-flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;

    direction: rtl !important;
    text-align: right !important;

    margin: 0 !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .s-orders-status-container i {
    order: 2 !important;
    margin: 0 !important;
  }

  .s-orders-status-container span {
    order: 1 !important;
    direction: rtl !important;
    text-align: right !important;
  }

  /* Hide star beside status */
  .s-orders-table-tbody-tr-td-content:has(.s-orders-status-container) .s-orders-status-rated,
  .s-orders-table-tbody-tr-td-content:has(.s-orders-status-container) .s-orders-unrated-text {
    display: none !important;
  }
}







/* =====================================================
   ASRYA MOBILE PROFILE DROPDOWN ONLY
   لا يلمس مودالات سلة نهائيًا
===================================================== */

@media (max-width: 768px) {
  /* السماح لقائمة البروفايل بالخروج من الهيدر */
  #mainnav salla-user-menu,
  #mainnav .s-user-menu-wrapper,
  #mainnav .s-user-menu-toggler,
  salla-user-menu,
  .s-user-menu-wrapper,
  .s-user-menu-toggler {
    overflow: visible !important;
  }

  /* فقط منيو البروفايل إذا كانت مفتوحة */
  .s-user-menu-toggler.opened > .s-user-menu-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    position: fixed !important;
    top: 116px !important;
    right: 12px !important;
    left: 12px !important;

    width: auto !important;
    max-width: calc(100vw - 24px) !important;

    height: auto !important;
    min-height: 260px !important;
    max-height: calc(100vh - 132px) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    background: #fffaf4 !important;
    border: 1px solid rgba(58, 36, 21, 0.16) !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(31, 18, 11, 0.28) !important;

    transform: none !important;
    z-index: 2147483647 !important;
  }

  /* محتوى المنيو */
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    min-height: 64px !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
    padding: 8px !important;
    margin: 0 !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    overflow: visible !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item-link {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;

    height: auto !important;
    min-height: 44px !important;
    max-height: none !important;

    overflow: visible !important;
    padding: 8px 10px !important;

    color: #3a2415 !important;
    text-decoration: none !important;
    border-radius: 15px !important;
  }

  /* ألوان الهيدر فقط داخل منيو البروفايل */
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header {
    background:
      radial-gradient(circle at 18% 20%, rgba(216, 185, 143, 0.24), transparent 34%),
      linear-gradient(135deg, #1f120b 0%, #3a2415 58%, #9b6a42 100%) !important;
    color: #fffaf4 !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header span,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header p,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header-close,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header-close svg,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-header-close svg path {
    color: #fffaf4 !important;
    fill: #fffaf4 !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-list {
    background: #fffaf4 !important;
  }

  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item-title,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item-prefix,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item-prefix svg,
  .s-user-menu-toggler.opened > .s-user-menu-dropdown .s-user-menu-dropdown-item-prefix svg path {
    color: #3a2415 !important;
    fill: #3a2415 !important;
  }
}