/* ============================================================
   MAMLKAH — WORLD-CLASS ECOMMERCE DESIGN SYSTEM
   Clean, Fast, Memorable. No logic changes.
   ============================================================ */

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

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --c-gold:        #f0b429;
  --c-gold-light:  #fdf3d7;
  --c-gold-dark: #f8d50d;
  --c-navy:        #0d1f3c;
  --c-navy-mid:    #162d52;
  --c-ink:         #1a1a2e;
  --c-slate:       #4a5568;
  --c-muted:       #9aa5b4;
  --c-surface:     #f7f8fc;
  --c-white:       #ffffff;
  --c-border:      #eaecf2;
  --c-border-dark: #d0d5de;
  --r-sm:  8px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-xl:  28px;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-xs: 0 1px 3px rgba(13,31,60,.06);
  --shadow-sm: 0 4px 12px rgba(13,31,60,.08);
  --shadow-md: 0 8px 28px rgba(13,31,60,.12);
  --shadow-lg: 0 18px 50px rgba(13,31,60,.16);
}

/* ── BASE ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Tajawal', sans-serif;
  background: var(--c-surface);
  color: var(--c-ink);
}

img { display: block; max-width: 100%; }
a   { text-decoration: none; }

/* ── SKELETON / LOADING ──────────────────────────────────── */
.content-placeholder {
  min-height: 260px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    90deg,
    #f0f2f7 0%,
    #e4e8f0 40%,
    #f0f2f7 80%
  );
  background-size: 600px 100%;
  animation: sk-sweep 1.6s ease-in-out infinite;
  border-radius: var(--r-lg);
}

@keyframes sk-sweep {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.content-placeholder::after { display: none; }

.loader-img {
  width: 44px;
  height: 44px;
  opacity: .5;
}

.hidden-on-load { display: none; opacity: 0; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp .5s var(--ease) forwards; }

/* ── SECTION WRAPPERS ────────────────────────────────────── */
section, .container { position: relative; }

/* ── SECTION HEADER ─────────────────────────────────────── */
.section-header,
.section-header-modern {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 1.5px solid var(--c-border);
  position: relative;
}

.section-header::before,
.section-header-modern::before {
  content: '';
  position: absolute;
  bottom: -1.5px;
  right: 0;           /* RTL: starts from right */
  width: 64px;
  height: 3px;
  background: linear-gradient(90deg, var(--c-gold-dark), var(--c-gold));
  border-radius: 2px;
}

.section-title,
.feature-product-title,
.for-feature-title,
.arrival-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -.3px;
  line-height: 1.2;
}

.arrival-title .text-capitalize { font-size: 1.35rem; font-weight: 800; color: var(--c-navy); }
.section-subtitle { font-size: .9rem; color: var(--c-muted); margin-top: .2rem; }

/* ── VIEW ALL BUTTON ─────────────────────────────────────── */
.view-all-text,
.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem 1.1rem;
  background: transparent;
  border: 1.5px solid var(--c-gold);
  color: var(--c-ink) !important;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 700;
  transition: background .22s var(--ease), color .22s var(--ease);
  white-space: nowrap;
}
.view-all-text:hover,
.view-all-btn:hover {
  background: var(--c-gold);
  color: var(--c-navy) !important;
  text-decoration: none;
}

/* ── PRODUCT CARD (pc-card) ──────────────────────────────── */
.pc-card {
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--c-white);
  border: 1px solid var(--c-border);
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .22s;
  display: flex;
  flex-direction: column;
}
.pc-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-gold);
}

/* image area */
.pc-img-wrap {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: #f1f2f6;
}
.pc-img-wrap a { display: block; height: 100%; }
.pc-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease);
}
.pc-card:hover .pc-img-wrap img { transform: scale(1.07); }

/* wishlist button */
.pc-wish {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color .2s, transform .2s;
  backdrop-filter: blur(4px);
}
.pc-wish:hover { border-color: #e05; transform: scale(1.1); }
.pc-wish svg { stroke: var(--c-slate); transition: stroke .2s; }
.pc-wish:hover svg { stroke: #e05; }

/* body */
.pc-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}

.pc-title { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.3; }
.pc-title a { color: var(--c-ink); transition: color .18s; }
.pc-title a:hover { color: var(--c-gold-dark); }

.pc-price { font-size: 14px; font-weight: 600; color: var(--c-navy); }
/* Let existing price_html styles show through */
.pc-price .text-accent { color: var(--c-navy) !important; }

.pc-sep { height: 1px; background: var(--c-border); }

/* add to cart button */
.pc-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 15px;
  border-radius: var(--r-md);
  background: var(--c-navy);
  color: var(--c-white) !important;
  font-size: 13px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: background .22s var(--ease), transform .15s;
  margin-top: auto;
}
.pc-btn:hover {
  background: var(--c-gold-dark);
  color: var(--c-navy) !important;
  transform: translateY(-1px);
}
.pc-btn:active { transform: scale(.98); }

.pc-btn-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s;
}
.pc-btn:hover .pc-btn-icon { background: rgba(0,0,0,.12); }

/* ── OLD PRODUCT CARD (product-card-grey) → same upgrade ── */
.product-card-grey {
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--c-border) !important;
  background: var(--c-white) !important;
  overflow: hidden;
  transition: transform .32s var(--ease), box-shadow .32s var(--ease), border-color .22s;
  display: flex;
  flex-direction: column;
}
.product-card-grey:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-gold) !important;
}

.product-card-grey .product-card-image {
  overflow: hidden;
  background: #f1f2f6;
}
.product-card-grey .product-card-image img {
  transition: transform .55s var(--ease) !important;
}
.product-card-grey:hover .product-card-image img {
  transform: scale(1.07) !important;
}

.product-card-grey .product-card-title a {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-ink) !important;
  text-decoration: none;
  display: block;
  margin-bottom: .3rem;
  transition: color .18s;
}
.product-card-grey .product-card-title a:hover { color: var(--c-gold-dark) !important; }

.product-card-grey .product-card-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-navy);
}

/* override bootstrap warning button → navy style */
.product-card-grey .btn-warning,
.product-card-grey .btn.btn-warning {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 10px 14px;
  margin-top: 8px;
  border-radius: var(--r-md) !important;
  background: var(--c-navy) !important;
  color: var(--c-white) !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  transition: background .22s var(--ease) !important;
  box-shadow: none !important;
}
.product-card-grey .btn-warning:hover {
  background: var(--c-gold-dark) !important;
  color: var(--c-navy) !important;
}

/* ── BRAND CARD ──────────────────────────────────────────── */
.brand-card {
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  box-sizing: border-box;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
  overflow: hidden;
  min-height: 90px;
}
.brand-card:hover {
  border-color: var(--c-gold);
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}
.brand-card a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.brand-card img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .5;
  transition: filter .3s ease, opacity .3s ease;
}
.brand-card:hover img { filter: grayscale(0%); opacity: 1; }

/* ── BANNER WRAPPER ──────────────────────────────────────── */
.banner-wrapper {
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s;
}
.banner-wrapper:hover {
  transform: scale(1.015);
  box-shadow: var(--shadow-md);
}
.banner-wrapper img { width: 100%; }

/* Dynamic banner images */
#banner-container img,
#shop-banners-container img,
#extra-banners-container img,
#footer-banner-container img {
  border-radius: var(--r-md);
  transition: transform .35s var(--ease), box-shadow .3s;
}
#banner-container a:hover img,
#shop-banners-container a:hover img,
#extra-banners-container a:hover img,
#footer-banner-container a:hover img {
  transform: scale(1.012);
  box-shadow: var(--shadow-sm);
}

/* ── CATALOG LINK ────────────────────────────────────────── */
.bg-dark.px-3.py-3.rounded,
a.bg-dark {
  background: linear-gradient(115deg, var(--c-navy) 0%, var(--c-navy-mid) 100%) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid rgba(240,180,41,.25) !important;
  padding: 1.35rem 1.5rem !important;
  transition: transform .28s var(--ease), box-shadow .28s !important;
  display: block;
}
a.bg-dark:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
a.bg-dark h2,
a.bg-dark .fs-16 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: var(--c-white) !important;
}
a.bg-dark .fa-circle-arrow-left,
a.bg-dark .text-warning {
  color: var(--c-gold) !important;
  transition: transform .3s var(--ease);
}
a.bg-dark:hover .fa-circle-arrow-left { transform: translateX(-5px); }

/* ── OWL CAROUSEL NAVIGATION ─────────────────────────────── */
.owl-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 -18px;
  z-index: 10;
}
.owl-nav button {
  pointer-events: all;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: var(--c-white) !important;
  border: 1px solid var(--c-border) !important;
  box-shadow: var(--shadow-sm) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background .2s, border-color .2s, transform .18s !important;
  margin: 0 !important;
  outline: none !important;
}
.owl-nav button:hover {
  background: var(--c-gold) !important;
  border-color: var(--c-gold) !important;
  transform: scale(1.1) !important;
}
.owl-nav button span {
  font-size: 1.2rem;
  line-height: 1;
  color: var(--c-navy);
  margin-top: -2px;
}
.owl-carousel { position: relative; }

/* Dots */
.owl-dots { margin-top: 12px !important; }
.owl-dot span {
  background: var(--c-border-dark) !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  transition: background .2s, width .2s !important;
}
.owl-dot.active span {
  background: var(--c-gold) !important;
  width: 20px !important;
  border-radius: 4px !important;
}

/* ── FLASH DEAL SECTION ──────────────────────────────────── */
.flash-deal-section,
[class*="flash"] {
  border-radius: var(--r-xl);
  overflow: hidden;
}

/* ── CATEGORY SECTION ────────────────────────────────────── */
#home-categories-section .mt-4 {
  background: var(--c-white);
  border-radius: var(--r-xl);
  padding: 1.5rem;
  margin-bottom: 1.5rem !important;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-xs);
}

#home-categories-section .d-flex.flex-between {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: .75rem;
  padding-bottom: .65rem;
  border-bottom: 1.5px solid var(--c-border);
  position: relative;
}
#home-categories-section .d-flex.flex-between::after {
  content: '';
  position: absolute;
  bottom: -1.5px;
  right: 0;
  width: 48px;
  height: 3px;
  background: var(--c-gold);
  border-radius: 2px;
}

/* ── MAIN SECTION BANNERS ────────────────────────────────── */
.main-section-banner-img,
.__inline-63 {
  border-radius: var(--r-md);
  transition: transform .3s var(--ease), box-shadow .3s;
  width: 100%;
}
a:hover .__inline-63 {
  transform: scale(1.025);
  box-shadow: var(--shadow-sm);
}

/* ── HERO SLIDER ─────────────────────────────────────────── */
.hero-slider .owl-item img,
#hero-slider-container img {
  border-radius: var(--r-xl);
  object-fit: cover;
  max-height: 480px;
  width: 100%;
}

/* ── SPACING REFINEMENTS ─────────────────────────────────── */
.container { padding-left: 1rem; padding-right: 1rem; }

.py-3 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }
.pt-4 { padding-top: 1.75rem !important; }
.pb-4 { padding-bottom: 1.75rem !important; }
.mt-4 { margin-top: 1.75rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }

/* ── PRODUCT CARD CAROUSEL ITEM PADDING ─────────────────── */
.px-2 { padding-left: 6px !important; padding-right: 6px !important; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 768px) {
  .section-title,
  .feature-product-title,
  .for-feature-title { font-size: 1.1rem; }
  .pc-img-wrap { height: 175px; }
  .product-card-grey .product-card-image img { height: 175px !important; }
  #home-categories-section .mt-4 { padding: 1rem; }
  .hero-slider .owl-item img { max-height: 220px; border-radius: var(--r-lg); }
}

@media (min-width: 1200px) {
  .container { max-width: 1260px; }
}

/* ── SUBTLE PAGE BACKGROUND PATTERN ─────────────────────── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(13,31,60,.04) 1px, transparent 0);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: -1;
}