/* Add custom CSS styles below */ 
/* ============================================================
   OUTLAW GEARS — Salla Custom CSS  (v2)
   Theme: Saji (marketplace) — applied as Custom CSS override.
   Paste into: Salla Dashboard → Themes → Theme editor →
               Advanced customization → Custom CSS.
   ------------------------------------------------------------
   v2 changes vs the original salla-custom.css:
   - Single accent token = burnt orange #EA580C (was red #E11D2A),
     matching the store brand color. All reds unified to one var.
   - NEW: uniform product-card image (1:1 square, object-fit
     contain on white) so mixed-aspect photos render identically
     on desktop + mobile. (Fixes the "pics orientation" issue.)
   - RTL-safe: logical properties only (inline-start/end), works
     in Arabic (rtl) and English (ltr).
   - Responsive checks at 1280 / 768 / 390 / 360.
   - Touch targets >= 44px on header controls and buttons.
   NOTE: Saji class names not 100% verified against live DOM.
   Selectors marked /* verify */ should be checked on the rendered
   page; if a rule doesn't bite, inspect the element and add its
   class next to the existing one (don't delete the generic one).
   ============================================================ */

/* ---------- 0. Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Tajawal:wght@400;500;700;900&display=swap');
/* Alexandria is already loaded by the store for Arabic body text. */

/* ---------- 1. Design tokens (single source of truth) ---------- */
:root {
  /* surfaces */
  --og-bg:        #0A0A0A;
  --og-bg-2:      #121212;
  --og-bg-3:      #1A1A1A;
  --og-line:      #262626;
  --og-text:      #F5F1EA;
  --og-muted:     #8C8478;

  /* brand accent — ONE orange, used everywhere */
  --og-accent:      #EA580C;        /* burnt orange (brand color) */
  --og-accent-soft: rgba(234,88,12,.18);
  --og-accent-glow: rgba(234,88,12,.45);
  --og-sand:        #D4A056;
  --og-green:       #1FBE5A;

  /* fonts */
  --og-font-body: 'Alexandria','Tajawal','Cairo',system-ui,-apple-system,sans-serif;
  --og-font-head: 'Oswald','Tajawal',sans-serif;

  /* map onto Salla's exposed vars where present */
  --color-primary:   #EA580C;
  --color-secondary: #D4A056;
  --primary:         #EA580C;
  --secondary:       #D4A056;
}

/* ---------- 2. Global base ---------- */
body,
.s-main-block,
main,
#salla-main,
.salla-app {
  background: var(--og-bg) !important;
  color: var(--og-text);
  font-family: var(--og-font-body) !important;
}
::selection { background: var(--og-accent); color: #fff; }
a { color: inherit; }

/* ============================================================
   3. PRODUCT CARD — uniform image (the key fix)
   1:1 square frame, image fully visible (contain) on white,
   so portrait + landscape + square photos all line up.
   ============================================================ */
.s-product-card-image,
.product-card__image,
salla-product-card .s-product-card-image,         /* verify */
.s-product-card-image-wrap {                        /* verify */
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  background: #ffffff !important;        /* clean white panel */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid var(--og-line);
}
.s-product-card-image img,
.product-card__image img,
salla-product-card .s-sproduct-card-image img {      /* verify */
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;        /* show whole product, no crop */
  object-position: center;
  padding: 10px;                          /* breathing room around product */
  transition: transform .4s ease;
}
.s-product-card:hover .s-product-card-image img,
.product-card:hover .product-card__image img {
  transform: scale(1.04);                 /* subtle zoom on hover */
}

/* ---------- 3b. Product card container ---------- */
.s-product-card,
.salla-product-card,
.product-card,
.product-entry {
  display: flex;
  flex-direction: column;
  height: 100%;                           /* equal-height cards in the grid */
  background: var(--og-bg-2) !important;
  border: 1px solid var(--og-line) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.s-product-card:hover,
.salla-product-card:hover,
.product-card:hover {
  transform: translateY(-3px);
  border-color: var(--og-accent) !important;
  box-shadow: 0 0 0 1px var(--og-accent-soft), 0 10px 30px -10px var(--og-accent-glow) !important;
}
/* push price/button to the bottom so rows align */
.s-product-card-content,
.product-card__content { display: flex; flex-direction: column; flex: 1 1 auto; }

.s-product-card-title,
.product-card__title {
  color: #fff !important;
  font-family: var(--og-font-body) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  line-height: 1.35;
  min-height: 42px;                       /* keeps 1–2 line titles aligned */
}
.s-product-card-brand,
.product-card__brand {
  font-family: var(--og-font-head) !important;
  color: var(--og-sand) !important;
  letter-spacing: .2em;
  font-size: 11px !important;
  text-transform: uppercase;
}

/* price */
.s-product-card-price,
.product-card__price,
.salla-price {
  font-family: var(--og-font-head) !important;
  font-weight: 700 !important;
  color: #fff !important;
  font-size: 22px !important;
}
.s-product-card-price-before,
.product-card__price--before,
.salla-price-before {
  color: var(--og-muted) !important;
  text-decoration: line-through;
  font-size: 13px !important;
  font-weight: 400;
}

/* discount / save chip */
.s-product-card-sale-price,
.product-card__discount,
.salla-discount-badge {
  background: var(--og-accent) !important;
  color: #fff !important;
  border-radius: 2px !important;
  font-family: var(--og-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px !important;
  padding: 5px 8px !important;
}

/* in-stock chip */
.s-product-card-stock,
.product-card__stock {
  background: rgba(31,190,90,.16) !important;
  color: var(--og-green) !important;
  border: 1px solid rgba(31,190,90,.4) !important;
  font-family: var(--og-font-head) !important;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 10px !important;
}

/* heart / quick-view icons inside card */
.s-product-card-wishlist-btn,
.s-product-card-actions a,                          /* verify */
.product-card__icon {
  color: var(--og-accent) !important;
}

/* ---------- 4. Headings ---------- */
h1, h2, h3, h4, h5,
.s-section-title,
.salla-section-title,
.section-title {
  font-family: var(--og-font-head) !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: -0.005em;
  color: var(--og-text);
}
.s-section-title::before,
.salla-section-title::before {
  content: "";
  display: inline-block;
  width: 24px; height: 2px;
  background: var(--og-accent);
  margin-inline-end: 10px;                /* RTL-safe */
  vertical-align: middle;
}

/* ---------- 5. Header / nav ---------- */
header,
.s-main-header,
.salla-header,
.app-header {
  background: rgba(10,10,10,.92) !important;
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--og-line) !important;
  box-shadow: none !important;
}
.s-main-header a,
.salla-header a,
.s-main-header-link {
  color: #D6D0C2 !important;
  font-family: var(--og-font-head) !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 14px;
}
.s-main-header a:hover,
.s-main-header-link:hover { color: var(--og-accent) !important; }

/* header controls — 44px min touch targets */
.s-header-cart,
.s-header-wishlist,
.s-header-user,
.salla-cart-summary,
header .icon-btn {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  border: 1px solid var(--og-line) !important;
  border-radius: 6px !important;
  color: var(--og-text) !important;
}
.s-header-cart:hover { border-color: var(--og-accent) !important; color: var(--og-accent) !important; }
.s-header-cart-count,
.cart-count,
.badge-count {
  background: var(--og-accent) !important;
  color: #fff !important;
  border: 2px solid var(--og-bg) !important;
}

/* search bar */
.s-search-input,
input[type="search"],
.search-input {
  background: var(--og-bg-2) !important;
  border: 1px solid var(--og-line) !important;
  color: var(--og-text) !important;
  border-radius: 6px !important;
  height: 44px;
}
.s-search-input::placeholder { color: var(--og-muted) !important; }

/* ---------- 6. Hero / wide banner ---------- */
.s-slider,
.s-main-slider,
.salla-slider,
.fixed-banner,                                      /* verify */
.home-fixed-banner {                                /* verify */
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}
.s-slider img,
.fixed-banner img {
  width: 100%;
  display: block;
  object-fit: cover;                      /* hero fills full width cleanly */
}
/* readable overlay for any hero text/CTA sitting on the image */
.s-slider .s-slider-content,
.hero-overlay {
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  padding: 28px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,10,10,.72) 100%);
}

/* ---------- 7. Buttons ---------- */
.salla-button,
.btn,
button.s-button,
.s-add-product-button-btn-default,
.add-to-cart-btn,
[type="submit"] {
  background: var(--og-accent) !important;
  color: #fff !important;
  border: 1px solid var(--og-accent) !important;
  border-radius: 6px !important;
  font-family: var(--og-font-head) !important;
  font-weight: 700 !important;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 0 22px !important;
  min-height: 48px;
  transition: .18s ease;
  box-shadow: 0 0 0 1px var(--og-accent-soft), 0 8px 24px -10px var(--og-accent-glow);
}
.salla-button:hover,
.btn:hover,
.s-add-product-button-btn-default:hover,
.add-to-cart-btn:hover {
  background: #fff !important;
  color: #0a0a0a !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
/* ghost / secondary */
.btn-ghost,
.s-button--ghost,
.salla-button--outline {
  background: transparent !important;
  color: var(--og-text) !important;
  border: 1px solid var(--og-line) !important;
  box-shadow: none !important;
}
.btn-ghost:hover,
.s-button--ghost:hover { border-color: var(--og-accent) !important; color: var(--og-accent) !important; }

/* mini add button inside cards */
.s-product-card-add-btn,
.product-card__add-to-cart {
  background: #0a0a0a !important;
  color: #fff !important;
  border: 1px solid var(--og-line) !important;
  font-family: var(--og-font-head) !important;
  font-size: 12px !important;
  min-height: 40px !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.s-product-card-add-btn:hover { background: var(--og-accent) !important; border-color: var(--og-accent) !important; }

/* ---------- 8. Sections / categories / brands ---------- */
section,
.s-section,
.salla-section { background: var(--og-bg) !important; }
section:nth-of-type(even),
.s-section--gray,
.salla-section--alt { background: var(--og-bg-2) !important; }

.s-categories-grid .s-category-card,
.categories-list .category-card {
  background: linear-gradient(160deg,#1a1a1a,#0e0e0e) !important;
  border: 1px solid var(--og-line) !important;
  border-radius: 6px !important;
  transition: .18s ease;
}
.s-categories-grid .s-category-card:hover { border-color: var(--og-accent) !important; transform: translateY(-3px); }

.s-brands-slider img,
.brands-list img { filter: brightness(0) invert(1) opacity(.7); transition: .2s; }
.s-brands-slider img:hover,
.brands-list img:hover { filter: none; opacity: 1; }

/* ---------- 9. Reviews ---------- */
.s-testimonial,
.salla-review,
.review-card {
  background: var(--og-bg-2) !important;
  border: 1px solid var(--og-line) !important;
  border-radius: 6px !important;
}
.s-testimonial-stars,
.review-stars,
[class*="rating"] { color: var(--og-sand) !important; }

/* ---------- 10. Product detail page ---------- */
.s-product-detail,
.product-page { background: var(--og-bg) !important; color: var(--og-text) !important; }
.s-product-detail-title,
.product-page__title {
  font-family: var(--og-font-head) !important;
  font-weight: 700 !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  text-transform: uppercase;
  line-height: 1.05 !important;
}
.s-product-detail-price-current,
.product-page__price--current {
  color: var(--og-accent) !important;
  font-family: var(--og-font-head) !important;
  font-size: 34px !important;
  font-weight: 700;
}
.s-product-detail-tabs button.active,
.tabs .tab--active { border-bottom: 2px solid var(--og-accent) !important; color: #fff !important; }
.s-product-gallery-thumbs img { border: 1px solid var(--og-line); border-radius: 4px; }
.s-product-gallery-thumbs img.active { border-color: var(--og-accent); }

/* ---------- 11. Forms ---------- */
input, textarea, select {
  background: var(--og-bg-2) !important;
  border: 1px solid var(--og-line) !important;
  color: var(--og-text) !important;
  border-radius: 6px !important;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--og-accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px var(--og-accent-soft) !important;
}
label { color: #C7C0B1 !important; font-weight: 600 !important; }

/* ---------- 12. Cart / checkout ---------- */
.s-cart-item, .cart-line { background: var(--og-bg-2) !important; border: 1px solid var(--og-line) !important; }
.s-cart-summary { background: linear-gradient(160deg,#1a1a1a,#0e0e0e) !important; border: 1px solid var(--og-line); color: var(--og-text) !important; }
.s-cart-summary-total { color: var(--og-accent) !important; font-family: var(--og-font-head) !important; }

/* ---------- 13. Toasts ---------- */
.notification, .salla-toast, .toast {
  background: var(--og-bg-3) !important;
  border: 1px solid var(--og-line) !important;
  border-inline-start: 3px solid var(--og-accent) !important;   /* RTL-safe */
  color: var(--og-text) !important;
  border-radius: 6px !important;
}

/* ---------- 14. Footer ---------- */
footer,
.s-footer,
.salla-footer,
.app-footer {
  background: #050505 !important;
  border-top: 1px solid var(--og-line);
  color: #A7A095 !important;
  padding-top: 56px !important;
}
footer h4, .s-footer h4, .s-footer-title {
  color: #fff !important;
  font-family: var(--og-font-head) !important;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 13px !important;
}
footer a, .s-footer a { color: #A7A095 !important; transition: .15s; }
footer a:hover, .s-footer a:hover { color: var(--og-accent) !important; }
.s-footer-payment img, .payment-methods img { background: #fff; padding: 6px 10px; border-radius: 4px; }

/* ---------- 15. Scrollbar (webkit) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0a0a0a; }
::-webkit-scrollbar-thumb { background: var(--og-line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--og-accent); }

/* ============================================================
   16. RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .s-product-card-title { font-size: 14px !important; }
}
@media (max-width: 768px) {
  section, .s-section { padding-block: 36px; }
  .s-product-detail-price-current { font-size: 28px !important; }
}
@media (max-width: 390px) {
  .s-product-card-title { font-size: 13px !important; min-height: 36px; }
  .s-product-card-price { font-size: 18px !important; }
  .salla-button, .btn { min-height: 44px; font-size: 12px !important; padding: 0 16px !important; }
  .s-product-card-image img, .product-card__image img { padding: 8px; }
}
@media (max-width: 360px) {
  .s-product-card-title { font-size: 12.5px !important; }
}

/* keep the sticky mobile bottom nav (Saji) clear of content */
@media (max-width: 768px) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}

/* ---------- 17. Lazy-load safety ----------
   Saji lazy-loads images at opacity:0 and reveals them via JS on
   scroll. On the product-detail gallery the above-the-fold reveal
   can stall, leaving the main image blank. Force loaded lazy images
   visible so product photos always show. (Verified live fix.) */
img.lazy, .lazy img, img.lazyload, img.lazyloaded { opacity: 1 !important; }

/* ---------- 18. Banner ratio/aspect ----------
   Fixed banners (hero + promo strips) were locked to their natural
   image width (e.g. 1080px) and centered inside a 1440px container,
   leaving big white gaps on both sides. Make the banner fill its
   container width and scale proportionally (no stretching/cropping).
   Verified DOM chain: a.banner--fixed > picture > img.saji_anime */
a.banner--fixed, .banner--fixed { display: block !important; width: 100% !important; }
.banner--fixed picture { display: block !important; width: 100% !important; }
.banner--fixed img,
.banner--fixed picture img { width: 100% !important; height: auto !important; max-width: 100% !important; margin: 0 auto !important; }

/* ---------- END v2 ---------- */

/* ---------- Hide mobile sticky bottom nav (Home / Categories / My Account / Search / Cart) ---------- */
.store-bottom-nav { display: none !important; }


/* Hide mobile sticky bottom nav */
.store-bottom-nav { display: none !important; }