/* ============================================================
   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 (Merged Old & New Design) ───────────────────── */
:root {
  /* Old Tokens */
  --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);
  
  /* New Design Tokens */
  --base:       #080e2c;
  --base-2:     #d7ee63;
  --base-light: rgba(8,14,44,0.06);
  --card-bg:    #ffffff;
  --page-bg:    #f8f9fb;
  --muted:      #6b7a99;
  --border:     rgba(8,14,44,0.1);
  --accent-dim: #7a9010;
  --shadow-md:  0 12px 28px rgba(8,14,44,0.09);
  --shadow-lg:  0 18px 50px rgba(13,31,60,.16);
  --radius-md:  12px;
  --radius-lg:  16px;
  --transition: all 0.26s cubic-bezier(0.4,0,0.2,1);
}

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

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

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

/* ── SKELETON / LOADING / SPINNER ────────────────────────── */
.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; }

/* New Design Skeletons */
.skel {
  background: linear-gradient(90deg,#ececec 25%,#e2e2e2 50%,#ececec 75%);
  background-size: 200% 100%;
  animation: skl 1.4s infinite;
  border-radius: 8px;
}
@keyframes skl { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skel-card { background:var(--card-bg); border:1px solid var(--border); border-radius:14px; overflow:hidden; padding-bottom:14px; }
.skel-img  { width:100%; aspect-ratio:1/1; background:#e8e8e8; border-radius:0; animation:skl 1.4s infinite; }
.skel-line { height:10px; margin:12px 14px 6px; border-radius:6px; }
.skel-line.long  { width:82%; }
.skel-line.short { width:50%; }

.spin { 
  width:13px; height:13px; border:2px solid var(--border); 
  border-top-color:var(--base); border-radius:50%; 
  animation:rot 0.8s linear infinite; display:inline-block; 
}
@keyframes rot { to{transform:rotate(360deg);} }

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

/* ── SECTION HEADERS (Old & New) ─────────────────────────── */
/* Old */
.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;
  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; }

/* New */
.sec-head {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:20px; padding-bottom:14px;
  border-bottom:1.5px solid var(--border);
}
.sec-head-left { display:flex; align-items:center; gap:14px; }
.sec-icon {
  width:42px; height:42px; background:var(--base); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:var(--base-2); font-size:20px; flex-shrink:0;
}
.sec-icon img { width:28px; height:28px; object-fit:contain; border-radius:6px; }
.sec-title { font-size:18px; font-weight:700; color:var(--base); letter-spacing:-0.3px; line-height:1.1; }
.sec-title span { color:var(--accent-dim); }
.sec-sub { font-size:12px; color:var(--muted); margin-top:3px; }

/* ── VIEW ALL BUTTON (Updated to New Design) ─────────────── */
.view-all-text, .view-all-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--base) !important; text-decoration:none;
  padding:7px 15px; border:1.5px solid var(--border); border-radius:6px;
  background:transparent; transition:var(--transition); white-space:nowrap;
}
.view-all-text:hover, .view-all-btn:hover { 
  background:var(--base); color:var(--base-2) !important; 
  border-color:var(--base); text-decoration:none; 
}

/* ── PRODUCT CARDS ───────────────────────────────────────── */
/* Old 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);
}
.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); }
.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; }
.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); }
.pc-price .text-accent { color: var(--c-navy) !important; }
.pc-sep { height: 1px; background: var(--c-border); }

/* New Design Product Card (.pc) */
.products-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr));
  gap:16px; margin-bottom:32px;
}
.pc {
  background:var(--card-bg); border:1px solid var(--border); border-radius:16px;
  overflow:hidden; transition:transform 0.28s ease,border-color 0.22s,box-shadow 0.28s;
  cursor:pointer; display:flex; flex-direction:column;
}
.pc:hover { transform:translateY(-6px); border-color:rgba(8,14,44,0.22); box-shadow:var(--shadow-md); }
.pc-img { width:100%; aspect-ratio:1/1; overflow:hidden; position:relative; background:var(--base-light); }
.pc-img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.45s ease; }
.pc:hover .pc-img img { transform:scale(1.07); }
.pc-badge {
  position:absolute; top:10px; right:10px; background:var(--base-2); color:var(--base);
  font-size:10px; font-weight:800; padding:4px 10px; border-radius:20px; z-index:2;
}
.pc-name {
  font-size:13px; font-weight:600; color:var(--base); margin-bottom:6px; line-height:1.45;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.pc-price { font-size:15px; font-weight:700; color:var(--base); margin-bottom:10px; }
.pc-price small { font-size:11px; color:var(--muted); text-decoration:line-through; margin-right:5px; font-weight:400; }
.pc-divider { height:1px; background:var(--border); margin-bottom:10px; }
.pc-action { margin-top:auto; }

/* Buttons inside product cards (Merged Old & New) */
.pc-btn, .product-card-grey .btn-warning {
  display:flex !important; align-items:center; justify-content:space-between; width:100%;
  padding:10px 13px; border-radius:9px !important;
  background:var(--base) !important; color:var(--base-2) !important;
  border:none !important; font-size:12px !important; font-weight:700 !important;
  cursor:pointer; transition:background .22s var(--ease), transform .15s, opacity 0.2s !important;
  text-decoration:none; box-sizing:border-box; box-shadow:none !important; margin-top: 8px;
}
.pc-btn:hover, .product-card-grey .btn-warning:hover { 
  opacity:0.85; background:var(--base) !important; color:var(--base-2) !important; 
  transform:translateY(-1px); text-decoration:none; 
}
.pc-btn:active { transform: scale(.98); }
.pc-btn-ic { 
  width:20px; height:20px; border-radius:50%; 
  background:rgba(215,238,99,0.18); display:flex; align-items:center; 
  justify-content:center; flex-shrink:0; transition:background .2s; 
}
.pc-btn:hover .pc-btn-ic { background:rgba(215,238,99,0.3); }

/* Old product-card-grey */
.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); }

/* ── BRAND CARDS (Merged Old & New) ──────────────────────── */
.brands-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(140px,1fr));
  gap:12px; margin-bottom:32px;
}
.brand-card, .brand-item {
  border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--card-bg);
  display: flex; align-items: center; justify-content: center;
  padding: 18px 14px; box-sizing: border-box; cursor: pointer;
  transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s;
  overflow: hidden; min-height: 80px; text-decoration: none;
}
.brand-card:hover, .brand-item:hover {
  border-color: var(--base); 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, .brand-item img {
  max-width: 100%; max-height: 80px; object-fit: contain;
  filter: grayscale(100%); opacity: .55; transition: filter .3s ease, opacity .3s ease;
}
.brand-card:hover img, .brand-item:hover img { filter: grayscale(0%); opacity: 1; }

/* ── HERO SLIDER (New Design) ────────────────────────────── */
.hero-section {
  position:relative; overflow:hidden; margin-bottom:36px; min-height:280px;
}
.hero-section .owl-carousel { margin:0; }
.hero-section .owl-carousel .item { width:100%; display:flex; align-items:stretch; }
.hero-section .owl-carousel .item a { display:block; width:100%; line-height:0; }
.hero-section .owl-carousel .item img, .hero-slider .owl-item img, #hero-slider-container img {
  width:100%; height:480px; object-fit:cover; object-position:center center; display:block; border-radius: var(--r-xl);
}
.hero-section .owl-dots {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex !important; gap:7px; z-index:10;
}
.hero-section .owl-dot span {
  width:7px !important; height:7px !important; background:rgba(255,255,255,0.35) !important;
  border-radius:50% !important; margin:0 !important; transition:all 0.25s !important;
}
.hero-section .owl-dot.active span {
  width:22px !important; border-radius:4px !important; background:var(--base-2) !important;
}
#hero-loader {
  min-height:300px; display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.4); gap:10px; font-size:13px;
}

/* ── BANNERS ─────────────────────────────────────────────── */
.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%; }

#banner-container img, #shop-banners-container img, #extra-banners-container img, #footer-banner-container img,
.main-section-banner-img, .__inline-63 {
  border-radius: var(--r-md); transition: transform .35s var(--ease), box-shadow .3s; width: 100%;
}
#banner-container a:hover img, #shop-banners-container a:hover img, #extra-banners-container a:hover img, 
#footer-banner-container a:hover img, a:hover .__inline-63 {
  transform: scale(1.025); box-shadow: var(--shadow-sm);
}

/* ── CATALOG LINKS (Old & New) ───────────────────────────── */
/* Old */
.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); }

/* New */
.catalog-block {
  background:var(--base); border-radius:var(--radius-lg);
  padding:22px 26px; display:flex; align-items:center; justify-content:space-between;
  margin-bottom:36px; text-decoration:none;
  border:1px solid rgba(215,238,99,0.15); transition:var(--transition);
}
.catalog-block:hover { opacity:0.9; transform:translateY(-2px); text-decoration:none; }
.catalog-text h2 { font-size:16px; font-weight:700; color:#fff; margin-bottom:4px; }
.catalog-text p  { font-size:12px; color:rgba(255,255,255,0.4); margin:0; }
.catalog-ic {
  width:46px; height:46px; flex-shrink:0; background:rgba(215,238,99,0.12); 
  border:1px solid rgba(215,238,99,0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--base-2); font-size:20px; transition:transform 0.25s;
}
.catalog-block:hover .catalog-ic { transform:translateX(-4px); }

/* ── OWL CAROUSEL NAV (Old overrides) ────────────────────── */
.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; }
.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; }

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

/* Old styling inside js sections */
#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;
}

/* New Category Styles */
.cat-section { margin-bottom:48px; }
.cat-section-divider {
  height:2px; background:linear-gradient(90deg,var(--base) 0%,var(--base-2) 60%,transparent 100%);
  border-radius:2px; margin-bottom:32px; opacity:0.14;
}

/* ── 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; }
.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-section .owl-carousel .item img, .hero-slider .owl-item img { height:220px; max-height: 220px; border-radius: var(--r-lg); }
  .products-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .brands-grid   { grid-template-columns:repeat(3,1fr); gap:8px; }
  .sec-head      { flex-wrap:wrap; gap:10px; }
}

@media (min-width: 1200px) {
  .container { max-width: 1260px; }
  .products-grid { grid-template-columns:repeat(4,1fr); }
  .brands-grid   { grid-template-columns:repeat(5,1fr); }
}

/* ── 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;
}