/* ==========================================================================
   Custom Styles - Organized & Formatted
   ========================================================================== */

/* ==========================================================================
   1. FONTS
   ========================================================================== */

@font-face {
  font-family: "Expo Arabic";
  src: url("https://dl.dropboxusercontent.com/scl/fi/i9waf4e8puexv1sd03lw1/Expo-Arabic-Light.woff?rlkey=7jqkpdjwyseq4u3jfdw47b75y&dl=0")
    format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Expo Arabic";
  src: url("https://dl.dropboxusercontent.com/scl/fi/fcvzar16sd4egizaipe6x/Expo-Arabic-Medium.woff?rlkey=9q9e97r4o35nabarrtaccnc8e&dl=0")
    format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html,
body {
  font-family: "Expo Arabic", sans-serif !important;
  font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b {
  font-weight: 500 !important;
}

/* ==========================================================================
   2. GLOBAL FONT SCALE
   ========================================================================== */

html {
  font-size: 90% !important;
}

@media (max-width: 768px) {
  html {
    font-size: 88% !important;
  }
}

/* --------------------------------------------------------------------------
   2.1 Heading Sizes
   -------------------------------------------------------------------------- */

h1 {
  font-size: 1.3rem !important;
}

h2 {
  font-size: 1.25rem !important;
}

h3 {
  font-size: 1.10rem !important;
}

h4 {
  font-size: 1.00rem !important;
}

/* --------------------------------------------------------------------------
   2.2 Form Elements
   -------------------------------------------------------------------------- */

button,
.s-button-element,
input,
select,
textarea {
  font-size: 0.95rem !important;
}

/* ==========================================================================
   3. FAQ TYPOGRAPHY
   ========================================================================== */

h2.text-center.text-3xl.font-bold.mb-8,
h3.text-lg.font-extrabold.leading-none.py-4.text-center {
  font-size: 1.5rem !important;
}

p.text-gray-600.text-right,
p.relative.overflow-hidden.px-6.pb-4.transition-all.duration-300 {
  font-size: 0.8rem !important;
  line-height: 1.3;
}

/* ==========================================================================
   4. PRICES & TAMARA WIDGET
   ========================================================================== */

.s-product-card-sale-price h4,
h4.total-price.text-red-800 {
  color: #f16f7a !important;
}

.tamara-product-widget,
.tamara-product-widget span {
  font-size: 0.8rem !important;
}

.tamara-product-widget .tamara-logo {
  height: 25px !important;
}

/* ==========================================================================
   5. LAYOUT FIXES
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 General Mobile Layout Fix
   -------------------------------------------------------------------------- */

div.flex.gap-8.justify-between.items-center {
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
  align-items: flex-start !important;
}

div.flex.gap-8.justify-between.items-center p.text-primary {
  padding-inline: 0.5rem !important;
  font-size: 14px !important;
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100% !important;
  flex: 1 1 100% !important;
  text-align: start !important;
}

@media (min-width: 768px) {
  div.flex.gap-8.justify-between.items-center p.text-primary {
    flex: 0 0 auto !important;
    max-width: unset !important;
  }
}

/* --------------------------------------------------------------------------
   5.2 Hide Specific Label
   -------------------------------------------------------------------------- */

p.text-\[\#C8C8C8\].font-bold.text-xs.md\:text-sm {
  display: none !important;
}

/* ==========================================================================
   6. PRODUCT SLIDER
   ========================================================================== */

.details-slider .swiper.s-slider-container {
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid #e5e7eb !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* ==========================================================================
   7. BREADCRUMBS
   ========================================================================== */

.breadcrumbs .s-breadcrumb-item:last-child,
.breadcrumbs .s-breadcrumb-item:last-child a {
  background-color: #fff;
  font-weight: bold;
}

.breadcrumbs .s-breadcrumb-item a:hover {
  background-color: #ececec;
}

.breadcrumbs .s-breadcrumb-arrow {
  display: none !important;
}

.s-breadcrumb-wrapper {
  font-size: 12px !important;
}

.s-breadcrumb-item,
.s-breadcrumb-item a {
  padding: 2px 6px !important;
  font-size: 12px !important;
}

/* ==========================================================================
   8. PRODUCTS GRID
   ========================================================================== */

:root {
  --prod-gap: 12px;
}

.s-products-list-wrapper,
.s-products-list-wrapper.s-products-list-vertical-cards {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--prod-gap) !important;
  justify-content: flex-start !important;
  align-items: stretch !important;
}

.s-products-list-wrapper .s-product-card-entry {
  box-sizing: border-box !important;
  margin: 0 !important;
}

/* --------------------------------------------------------------------------
   8.1 Mobile: 2 cards per row
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .s-products-list-wrapper .s-product-card-entry {
    flex: 0 0 calc(50% - (var(--prod-gap) / 2)) !important;
    max-width: calc(50% - (var(--prod-gap) / 2)) !important;
  }
}

/* --------------------------------------------------------------------------
   8.2 Desktop: 4 cards per row
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  .s-products-list-wrapper .s-product-card-entry {
    flex: 0 0 calc(25% - (var(--prod-gap) * 0.75)) !important;
    max-width: calc(25% - (var(--prod-gap) * 0.75)) !important;
  }
}

/* --------------------------------------------------------------------------
   8.3 Out of Stock Handling
   -------------------------------------------------------------------------- */

body:has(.category-tab[onclick*="switchCategory('all')"].active)
  .s-products-list-wrapper
  .s-product-card-out-of-stock {
  display: none !important;
}

.s-products-list-wrapper .s-product-card-entry:not(.s-product-card-out-of-stock) {
  order: 1 !important;
}

.s-products-list-wrapper .s-product-card-out-of-stock {
  order: 2 !important;
}

/* --------------------------------------------------------------------------
   8.4 Recommended Products Slider
   -------------------------------------------------------------------------- */

.s-products-slider-slider[block-title="منتجات قد تعجبك"]
  .s-product-card-out-of-stock
  .s-product-card-content-footer,
.s-products-slider-slider[block-title="منتجات قد تعجبك"]
  .s-product-card-out-of-stock
  .s-button-element {
  display: none !important;
}

.s-products-slider-slider[block-title="منتجات قد تعجبك"] .s-product-card-out-of-stock {
  opacity: 0.4 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   9. USER MENU DROPDOWN
   ========================================================================== */

.s-user-menu-dropdown {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

div.s-user-menu-dropdown > ul.s-user-menu-dropdown-list {
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
  margin-top: 25px !important;
  padding: 12px 0 !important;
}

.s-user-menu-dropdown-list {
  display: flex !important;
  flex-direction: column !important;
}

/* --------------------------------------------------------------------------
   9.1 My Account Item (5th child)
   -------------------------------------------------------------------------- */

.s-user-menu-dropdown-list li:nth-child(5) {
  order: -1 !important;
  width: 100% !important;
  text-align: center !important;
  margin-bottom: 15px !important;
}

.s-user-menu-dropdown-list li:nth-child(5) a i {
  display: none !important;
}

.s-user-menu-dropdown-list li:nth-child(5) a {
  display: inline-flex !important;
  justify-content: center !important;
  background: #3c986f !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 999px !important;
  padding: 6px 16px !important;
  width: fit-content !important;
  margin: 0 auto 8px auto !important;
}

/* --------------------------------------------------------------------------
   9.2 Logout Emphasis
   -------------------------------------------------------------------------- */

.s-user-menu-dropdown-item-logout a {
  color: #f16f7a !important;
  font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   9.3 Mobile Dropdown
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .s-user-menu-dropdown-list {
    position: fixed !important;
    top: -700% !important;
    left: 50% !important;
    transform: translate(-50%, 0) !important;
    background: #fff !important;
    border-radius: 20px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15) !important;
    width: 85% !important;
    max-width: 350px !important;
    padding: 20px !important;
    z-index: 9999 !important;
  }

  .s-user-menu-dropdown-list li {
    text-align: center !important;
    margin: 10px 0 !important;
  }

  .s-user-menu-dropdown-item img {
    display: none !important;
  }
}

/* ==========================================================================
   10. PRODUCT PAGE
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 Spacing
   -------------------------------------------------------------------------- */

.product__description,
.accordion-item,
salla-installment,
#tabbyPromoWrapper,
tamara-widget {
  margin-block: 16px !important;
}

/* --------------------------------------------------------------------------
   10.2 Reviews Summary (Hidden)
   -------------------------------------------------------------------------- */

salla-reviews-summary {
  display: none !important;
}

/* ==========================================================================
   11. COMMENTS SECTION
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 Container Centering
   -------------------------------------------------------------------------- */

salla-comments .s-comments-container,
.s-comments-product .s-comments-container {
  max-width: 960px !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

/* --------------------------------------------------------------------------
   11.2 Filter Bar
   -------------------------------------------------------------------------- */

.s-comments-filter-wrapper {
  margin: 0 !important;
  display: inline-block !important;
}

.s-comments-sort-input {
  font-size: 13px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  width: auto !important;
  min-width: 120px !important;
}

/* --------------------------------------------------------------------------
   11.3 Comment Card
   -------------------------------------------------------------------------- */

.s-comments-item-wrapper {
  background: #f7f7f7 !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  max-width: 960px !important;
  margin: 0 auto 20px auto !important;
  box-shadow: none !important;
}

.s-comments-item-wrapper::before,
.s-comments-item-wrapper::after {
  display: none !important;
}

.s-comments-item-user-info-name {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.s-comments-item-timestamp {
  font-size: 13px;
  color: #777;
  margin: 0;
}

.s-comments-item-content {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11.4 Comment Layout Order
   -------------------------------------------------------------------------- */

.s-comments-item-user-wrapper {
  display: flex;
  justify-content: space-between !important;
  align-items: flex-start;
  flex-wrap: wrap;
}

.s-comments-item-user-info {
  order: 1;
  text-align: right;
}

.s-comments-item-timestamp {
  order: 2;
}

.s-comments-item-stars {
  order: 3;
  margin-top: 4px;
  text-align: right;
}

.s-comments-flex {
  order: 4;
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   11.5 Like Button
   -------------------------------------------------------------------------- */

.s-comments-item-like-btn.s-button-element {
  background-color: #fff !important;
  color: #3c9971 !important;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px !important;
  transition: opacity 0.3s ease, transform 0.3s ease;
  margin-left: auto !important;
  padding: 8px 18px !important;
  font-weight: 500 !important;
  cursor: pointer;
}

.s-comments-item-like-btn.s-button-element:active,
.s-comments-item-like-btn.s-button-element:focus,
.s-comments-item-like-btn.s-button-element.active {
  background-color: #3c9971 !important;
  color: #fff !important;
}

.s-comments-item-like-btn.s-button-element svg path {
  fill: currentColor !important;
}

/* ==========================================================================
   12. QUANTITY INPUT
   ========================================================================== */

.s-quantity-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px !important;
  background-color: #f9f9f9 !important;
  padding: 4px 10px !important;
  width: fit-content !important;
}

@media (max-width: 768px) {
  .s-quantity-input-container {
    padding: 2px 4px !important;
    gap: 2px !important;
  }

  .s-quantity-input-input {
    max-width: 40px !important;
    text-align: center !important;
  }

  .s-quantity-input-button {
    padding: 4px !important;
  }
}

/* ==========================================================================
   13. SELECT INPUTS
   ========================================================================== */

#comments-filter.s-form-control.s-comments-sort-input,
#product-filter {
  background-color: #f0f0f0 !important;
  border: none !important;
  border-radius: 9999px !important;
  color: #333 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: auto !important;
  display: inline-block !important;
}

#comments-filter.s-form-control.s-comments-sort-input {
  padding: 8px 16px !important;
  font-size: 14px !important;
}

#product-filter {
  padding: 6px 14px !important;
  font-size: 14px !important;
  min-width: unset !important;
}

/* ==========================================================================
   14. OUT OF STOCK BUTTON
   ========================================================================== */

.s-button-element[product-status="out"] {
  background-color: #C6C6C6 !important;
  border: none !important;
}

.s-button-element[product-status="out"] svg {
  color: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* ==========================================================================
   15. PRODUCT CARD SUBTITLE
   ========================================================================== */

.s-product-card-content-subtitle {
  font-size: 10px !important;
  line-height: 1.4 !important;
}

/* ==========================================================================
   16. MISCELLANEOUS
   ========================================================================== */

#free-shipping {
  display: none !important;
}

.s-list-tile-item-content {
  text-align: center !important;
}

salla-slider.s-products-slider-slider {
  margin-top: 40px !important;
}

.sm\:grid.sm\:grid-cols-3.sm\:gap-4.sm\:items-start.pt-5 {
  margin-bottom: 30px !important;
}

/* ==========================================================================
   17. BLOG LAYOUT
   ========================================================================== */

#filters-menu {
  display: none !important;
}

.main-content {
  grid-column: span 8 / span 8 !important;
  width: 100% !important;
}

.grid.grid-cols-1.lg\:grid-cols-8 {
  grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

.main-content > * {
  width: 100% !important;
}

@media (min-width: 1024px) {
  .main-content {
    max-width: 100% !important;
  }
}

/* ==========================================================================
   18. SECTION TITLES (PILL STYLE)
   ========================================================================== */

.s-block-tabs.s-block--tabs-produtcs {
  background-color: #fff !important;
}

.s-block__title,
.s-slider-block__title {
  display: flex;
  justify-content: center;
  text-align: center;
  margin: 0;
  padding: 0;
}

.s-block__title .right-side h2,
.s-slider-block__title .s-slider-block__title-right h2 {
  display: inline-block;
  background-color: #3c9971;
  color: #fff;
  padding: 6px 20px;
  border-radius: 9999px;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 15px 0;
}

----------