/* =========================================================
   AZWA (alazwah.com) — Full-site Custom CSS, theme "Raed"
   Built from the real, live markup (header, homepage, product
   page, cart empty-state, footer) — every selector below was
   verified against the actual DOM, not guessed.

   Design direction: warm ink + camel-bronze accent (echoes the
   camel-leather charging stand — AZWA One), replacing the
   default flat black/white Raed look. Serif-adjacent geometric
   sans (Jost) for Latin/numerals; Arabic text automatically
   falls back to the theme's own Arabic font (PingARLT) since
   Jost has no Arabic glyphs — this is intentional, not a bug.

   custom_js_enabled = false on this theme version, so every
   animation below is pure CSS (hover states + one-time on-load
   fades). Nothing here alters cart/checkout/payment logic —
   only shared visual tokens (color, type, spacing) which is
   why buttons look the same wherever they're reused. See the
   bottom of this file if you want checkout/cart to stay plain
   black instead of picking up the accent color.
   ========================================================= */

/*@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&display=swap');*/

/* =========================================================
   1. Design tokens — override Salla/Raed's own CSS variables.
   Because the theme's components already read var(--color-primary)
   etc., this one block re-skins buttons, links and accents
   sitewide without touching a single component selector.
   ========================================================= */
:root {
  --azwa-ink: #1c1917;
  --azwa-camel: #8a4d12;       /* buttons / text-safe accent (AA vs white) */
  --azwa-camel-light: #a16207; /* icons, underlines, hovers — non-text use */
  --azwa-paper: #fafaf9;
  --azwa-muted: #6b6560;
  --azwa-border: #e7e2dc;
  --azwa-grey: #f5f1ec;

  /* Salla / Raed theme variables — re-pointed at the tokens above */
  /*--color-primary: var(--azwa-camel);*/
  --color-primary: #c6672e;
  --color-primary-dark: #8a7b63;
  --color-primary-light: var(--azwa-camel-light);
  --color-primary-l: var(--azwa-camel-light);
  --color-primary-d: var(--azwa-ink);
  --color-primary-reverse: #ffffff;
  --theme-primary-color: var(--azwa-camel);
  --main-text-color: var(--azwa-ink);
  --main-text-color-dark: var(--azwa-ink);
  --color-text: var(--azwa-muted);
  --color-grey: var(--azwa-grey);
  --color-light-grey: var(--azwa-border);
  --bg-gray: rgba(138, 77, 18, 0.06);
  /*--font-main: 'Jost', 'PingARLT', sans-serif;*/
  --font-main: 'tham', sans-serif;
}

/* =========================================================
   2. Base typography
   ========================================================= */
body {
  background-color: var(--azwa-paper);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .s-product-card-content-title,
[data-testid="store-product-title"] {
  letter-spacing: -0.01em;
}

/* =========================================================
   3. Shared transitions
   ========================================================= */
.store-header a,
.store-header button,
.s-product-card-entry,
.s-product-card-content-title a,
.s-button-element,
.store-footer a,
.feature-icon,
.s-quantity-input-button,
.s-slider-nav-arrow,
.s-breadcrumb-item a {
  transition: color 200ms ease, background-color 200ms ease,
              border-color 200ms ease, transform 200ms ease,
              box-shadow 200ms ease;
}

/* =========================================================
   4. Header
   ========================================================= */
.main-nav-container {
  box-shadow: 0 1px 0 rgba(28, 25, 23, 0.06);
}
.topnav-is-dark .top-navbar{
  background-color:#1E1B16 !important;
}
.topnav-is-dark .top-navbar .s-search-input::placeholder{
 color: #8A7B63; 
}
.s-search-icon-wrap .s-search-icon svg {
  fill: #C6672E;
}
.
.navbar-brand { transition: opacity 200ms ease; }
.navbar-brand:hover { opacity: 0.75; }
.s-user-menu-login-btn:hover,
.header-buttons button:hover {
  transform: translateY(-1px);
  color: var(--azwa-camel-light);
}

.navbar-brand img{
  max-height: 5.5rem !important;
}

@media only screen and (min-width: 1024px) {
    .fixed-pinned .main-menu {
        padding-top: 12px !important;
    }
}

.main-menu li>a:hover {
        color: #c6672e !important;
}

/* =========================================================
   5. Breadcrumbs
   ========================================================= */
.s-breadcrumb-wrapper {
  color: var(--azwa-muted);
  font-size: 13px;
}
.s-breadcrumb-item a:hover {
  color: var(--azwa-camel);
}

/* =========================================================
   6. Section titles + homepage section rhythm
   ========================================================= */
.s-block__title .right-side h2 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  font-weight: 700;
  color: var(--azwa-ink);
}
.s-block__title .right-side h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 42px;
  height: 3px;
  border-radius: 2px;
  background-color: var(--azwa-camel-light);
}
.s-block__title .right-side h2::after
 {
    background-color: #c6672e !important;
 }
/* One-time fade-up when a section first paints. Below-the-fold
   sections finish this before a visitor scrolls there, so they
   are always left fully visible — motion only, never load-bearing. */
.s-block {
  animation: azwaFadeUp 560ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* =========================================================
   7. Feature strip (quality / shipping / support)
   ========================================================= */
.s-block--features__item {
  border-radius: 14px;
  padding: 20px 14px;
  transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.s-block--features__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(28, 25, 23, 0.08);
  background-color: #8a7b63;
}
.s-block--features__item .feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #8a7b63;
  color: #c6672e;
  font-size: 20px;
  margin-bottom: 10px;
}
.s-block--features__item:hover .feature-icon {
  transform: scale(1.08) rotate(-4deg);
  background-color: #c6672e;
  color: #fff;
}
.s-block--features__item:hover p {
  color: #f5efe6 !important;
}
.s-block--features__item h2, .s-block--features__item p {
  font-size: 17px !important;
}
.s-block--features__item:nth-child(1) { animation: azwaFadeUp 520ms cubic-bezier(0.16,1,0.3,1) 40ms both; }
.s-block--features__item:nth-child(2) { animation: azwaFadeUp 520ms cubic-bezier(0.16,1,0.3,1) 120ms both; }
.s-block--features__item:nth-child(3) { animation: azwaFadeUp 520ms cubic-bezier(0.16,1,0.3,1) 200ms both; }

/* =========================================================
   8. Product cards (homepage grid + anywhere reused)
   ========================================================= */
.s-product-card-entry {
  border-radius: 14px;
  overflow: hidden;
}
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(28, 25, 23, 0.10);
}
.s-product-card-image { overflow: hidden; background-color: var(--azwa-grey); }
.s-product-card-image-contain { transition: transform 420ms ease; }
.s-product-card-entry:hover .s-product-card-image-contain { transform: scale(1.05); }

.s-product-card-content-title a {
  background-image: linear-gradient(var(--azwa-camel), var(--azwa-camel));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
}
.s-product-card-entry:hover .s-product-card-content-title a { background-size: 100% 1px; }

.s-product-card-price { transition: color 200ms ease; font-weight: 700; }
.s-product-card-entry:hover .s-product-card-price { color: var(--azwa-camel); }

/* =========================================================
   9. Product detail page
   ========================================================= */
[data-testid="store-product-title"] { color: var(--azwa-ink); }
.product-entry__sub-title { color: var(--azwa-muted); }

[data-testid="store-product-price"] p { color: var(--azwa-ink); }
[data-testid="store-product-price"] .text-red-800 { color: #b3431f; } /* sale price stays a clear "deal" red-ish, distinct from the brand accent */

.product__description { color: var(--azwa-muted); line-height: 1.9; }

/* Gallery slider */
.details-slider .s-slider-nav-arrow {
  border: 1px solid var(--azwa-border);
  background-color: #fff;
}
.details-slider .s-slider-nav-arrow:hover {
  border-color: var(--azwa-camel);
  color: var(--azwa-camel);
  transform: translateY(-1px);
}

/* Quantity stepper */
.s-quantity-input-container {
  border-radius: 10px;
  overflow: hidden;
}
.s-quantity-input-button:hover {
  background-color: var(--azwa-grey);
  color: var(--azwa-camel);
}

/* Sticky add-to-cart bar */
.sticky-product-bar {
  box-shadow: 0 -8px 24px rgba(28, 25, 23, 0.08);
  border-top: 1px solid var(--azwa-border);
}

/* section new products */
[data-testid="store-home-products-slider-widget"] .s-product-card-image img {
  object-position: center 30%; 
  object-fit: cover;
}

/* =========================================================
   10. Buttons (Add to cart, Buy now, etc. — visual skin only)
   ========================================================= */
.s-button-element {
  position: relative;
  overflow: hidden;
  font-weight: 600;
}
.s-button-element:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(28, 25, 23, 0.14);
}
.s-button-element:active { transform: translateY(0); box-shadow: none; }
/* One-shot light sweep on hover — never loops */
.s-button-element::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: -60%;
  width: 40%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  transition: inset-inline-start 550ms ease;
  pointer-events: none;
}
.s-button-element:hover::after { inset-inline-start: 130%; }
.s-button-primary:hover{
    border-color : #8a7b63 !important;
}
/* =========================================================
   11. Empty states (empty cart / search / wishlist)
   ========================================================= */
.no-content-placeholder {
  color: var(--azwa-muted);
}
.no-content-placeholder i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-color: var(--azwa-grey);
  color: var(--azwa-camel);
  font-size: 34px !important;
}

/* =========================================================
   12. Footer
   ========================================================= */
.store-footer a:hover {
  color: #c6672e !important;
  transform: translateX(-2px);
}
.copyright-text p {
  display: none;
}

.copyright-text::after {
  content: "حقوق الطبع والنشر © 2026 للعزْوَة. جميع الحقوق محفوظة.";
  color: #f5efe6;
  font-size: 14px;
}
.s-social-list a:hover { transform: translateY(-2px); }

/* =========================================================
   13. Keyframes
   ========================================================= */
@keyframes azwaFadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* =========================================================
   14. Respect reduced motion — always last, always wins
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .s-block,
  .s-block--features__item {
    animation: none !important;
  }
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}

#contact-slot:nth-of-type(2) {
  display: none !important;
}


/* =========================================================
   Optional: keep Cart / Checkout / Login neutral black instead
   of the camel accent (Salla tags <body> with a page-type class
   — .cart, .checkout, .login — so this scopes cleanly). Uncomment
   to opt out of the accent color on those three pages only.
   ========================================================= */
/*
body.cart, body.checkout, body.login {
  --color-primary: #000000;
  --theme-primary-color: #000000;
}
*/