/* ============================================================
   MY ELEGANT KID — Custom CSS Refinement
   Target: mykids-shop.com (Celia theme on Salla)
   Maintainer: Codio | Last updated: 2026-05-15
   ============================================================ */

/* ── FONTS — must be first ───────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700&family=Noto+Naskh+Arabic:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&display=swap');


/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root {
  --mek-cream:          #f6f1e8;
  --mek-cream-alt:      #ede8de;
  --mek-white:          #ffffff;
  --mek-ink:            #1a1a1a;
  --mek-ink-soft:       #2e2a26;
  --mek-accent:         #b08d57;
  --mek-accent-dark:    #8c6e3f;
  --mek-accent-light:   #d4af78;
  --mek-sale:           #c64545;
  --mek-border:         #e0d8cc;
  --mek-border-soft:    #ede8de;
  --mek-text-muted:     #6b5e4e;
  --mek-radius:         8px;
  --mek-radius-sm:      4px;
  --mek-shadow-sm:      0 2px 12px rgba(26, 26, 26, 0.06);
  --mek-shadow-md:      0 8px 28px rgba(26, 26, 26, 0.1);
  --mek-shadow-lg:      0 16px 48px rgba(26, 26, 26, 0.15);
  --mek-ease:           cubic-bezier(0.4, 0, 0.2, 1);
  --mek-ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --mek-transition:     0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* Celia token overrides */
  --bg-primary:           var(--mek-cream);
  --bg-secondary:         var(--mek-cream-alt);
  --header-bg:            var(--mek-cream);
  --store-text-primary:   var(--mek-ink);
  --store-text-secondary: var(--mek-text-muted);
  --product-bg:           var(--mek-white);
  --product-border-color: var(--mek-border);
  --color-primary:        var(--mek-accent);
  --color-primary-dark:   var(--mek-accent-dark);
}


/* ── 2. GLOBAL BASE ──────────────────────────────────────── */

html { scroll-behavior: smooth; }

body,
.app-inner {
  background-color: var(--mek-cream) !important;
}

body {
  font-family: 'Tajawal', 'PingARLT', sans-serif !important;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mek-ink);
}

h1, h2 {
  font-family: 'Cormorant Garamond', 'Noto Naskh Arabic', 'Tajawal', serif;
  font-weight: 600;
  line-height: 1.15;
  color: var(--mek-ink);
  letter-spacing: 0.01em;
}

h3, h4, h5, h6 {
  font-family: 'Tajawal', 'PingARLT', sans-serif;
  color: var(--mek-ink);
}

a, button, [role="button"],
.s-block--circle-links li.group > a,
ul.main-menu li > a,
salla-cart-summary, .header-btn, .mburger {
  cursor: pointer;
}

/* ── Scroll progress bar (JS injects #mek-progress) ── */
#mek-progress {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--mek-accent), var(--mek-accent-light));
  z-index: 100000;
  transition: width 0.08s linear;
  pointer-events: none;
}

/* ── Scroll fade-in system ── */
.mek-fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s var(--mek-ease-out), transform 0.7s var(--mek-ease-out);
}
.mek-fade-in.mek-visible { opacity: 1; transform: translateY(0); }

/* ── Title reveal system ── */
.mek-title-hidden {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.8s var(--mek-ease-out), transform 0.8s var(--mek-ease-out);
}
.mek-title-hidden.mek-title-revealed { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .mek-fade-in, .mek-title-hidden {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Section title system ── */
.home-block-title {
  text-align: center;
  margin-block-end: 2.5rem;
}

.home-block-title h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.375rem);
  margin-block-end: 0.5rem;
}

span.enhanced-title-border {
  display: block !important;
  width: 56px !important;
  height: 1.5px !important;
  background: linear-gradient(to right, transparent, var(--mek-accent), transparent) !important;
  margin: 0.625rem auto 0 !important;
  opacity: 1 !important;
  border-radius: 2px;
}


/* ── 3. INJECTED HERO (JS injects #mek-hero) ─────────────── */
#mek-hero {
  background-color: var(--mek-cream);
  padding-block: 5.5rem 4.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Concentric circle ornament — pure CSS decoration */
#mek-hero::before,
#mek-hero::after {
  content: '';
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
#mek-hero::before {
  width: min(700px, 120vw);
  height: min(700px, 120vw);
  border: 1px solid rgba(176, 141, 87, 0.1);
}
#mek-hero::after {
  width: min(480px, 90vw);
  height: min(480px, 90vw);
  border: 1px solid rgba(176, 141, 87, 0.07);
}

#mek-hero .mek-hero__eyebrow {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mek-accent);
  margin-block-end: 1.25rem;
  display: block;
  position: relative;
  z-index: 1;
}

#mek-hero .mek-hero__title {
  font-family: 'Cormorant Garamond', 'Noto Naskh Arabic', 'Tajawal', serif;
  font-size: clamp(2.75rem, 7.5vw, 5rem);
  font-weight: 600;
  line-height: 1.12;
  color: var(--mek-ink);
  margin-block-end: 1.125rem;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

#mek-hero .mek-hero__sub {
  font-family: 'Tajawal', sans-serif;
  font-size: 1.0625rem;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: var(--mek-text-muted);
  margin-block-end: 2.75rem;
  position: relative;
  z-index: 1;
}

#mek-hero .mek-hero__ctas {
  display: flex;
  gap: 0.875rem;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ── Shared button styles ── */
.mek-btn {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.8125rem 2.25rem;
  border-radius: 2px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: background-color 0.3s var(--mek-ease),
              color 0.3s var(--mek-ease),
              border-color 0.3s var(--mek-ease),
              transform 0.2s var(--mek-ease),
              box-shadow 0.3s var(--mek-ease);
  cursor: pointer;
  min-height: 44px;
}

.mek-btn--primary {
  background-color: var(--mek-ink);
  color: var(--mek-cream);
  border: 1px solid var(--mek-ink);
}

.mek-btn--primary:hover {
  background-color: var(--mek-accent);
  border-color: var(--mek-accent);
  color: var(--mek-white);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(176, 141, 87, 0.35);
}

.mek-btn--ghost {
  background-color: transparent;
  color: var(--mek-ink);
  border: 1px solid rgba(26, 26, 26, 0.35);
}

.mek-btn--ghost:hover {
  background-color: var(--mek-ink);
  border-color: var(--mek-ink);
  color: var(--mek-cream);
  transform: translateY(-1px);
}

@media (max-width: 480px) {
  #mek-hero { padding-block: 4rem 3.5rem; }
  #mek-hero .mek-hero__ctas { flex-direction: column; align-items: center; }
  .mek-btn { width: 100%; max-width: 260px; }
}


/* ── 4. HEADER ───────────────────────────────────────────── */

header.store-header {
  background-color: var(--mek-cream) !important;
  transition: background-color 0.35s var(--mek-ease),
              box-shadow 0.35s var(--mek-ease),
              backdrop-filter 0.35s var(--mek-ease);
}

/* Glass on scroll — JS adds .mek-scrolled */
header.store-header.mek-scrolled {
  background-color: rgba(246, 241, 232, 0.9) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 1px 0 var(--mek-border), 0 4px 32px rgba(26, 26, 26, 0.07);
}

/* Top utility bar */
header.store-header .top-navbar {
  background-color: var(--mek-ink) !important;
  padding-block: 0.4375rem;
}

header.store-header .top-navbar .topnav-link-item,
header.store-header .top-navbar button,
header.store-header .top-navbar span,
header.store-header .top-navbar a,
header.store-header .top-navbar i {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.75rem;
  color: rgba(246, 241, 232, 0.6) !important;
  letter-spacing: 0.04em;
  transition: color var(--mek-transition);
}

header.store-header .top-navbar .topnav-link-item:hover,
header.store-header .top-navbar button:hover,
header.store-header .top-navbar a:hover {
  color: var(--mek-cream) !important;
}

/* Main nav container — position:relative required for fade pseudo-elements */
#mainnav .inner {
  padding-block: 0.625rem;
  border-bottom: 1px solid var(--mek-border);
  position: relative;
  overflow: hidden;
}

/* Cream gradient fade on both scroll edges — signals overflow to user */
#mainnav .inner::before,
#mainnav .inner::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3rem;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s var(--mek-ease);
}
/* Left fade — overflow side in RTL */
#mainnav .inner::before {
  left: 0;
  background: linear-gradient(to right, var(--mek-cream) 30%, transparent);
}
/* Right fade — start side in RTL */
#mainnav .inner::after {
  right: 0;
  background: linear-gradient(to left, var(--mek-cream) 30%, transparent);
}
/* JS toggles these when user reaches the ends */
#mainnav .inner.mek-nav-at-start::after  { opacity: 0; }
#mainnav .inner.mek-nav-at-end::before   { opacity: 0; }

/* Logo */
.navbar-brand img.logo-normal {
  height: 52px !important;
  width: auto !important;
  transition: opacity var(--mek-transition), transform var(--mek-transition);
  flex-shrink: 0;
}
.navbar-brand:hover img.logo-normal { opacity: 0.82; transform: scale(1.02); }

/* Scrollable nav list — scoped to desktop only, never touches mobile drawer */
#mainnav .inner ul.main-menu {
  display: flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  align-items: center;
  padding-inline: 2rem;
  gap: 0;
}
#mainnav .inner ul.main-menu::-webkit-scrollbar { display: none; }

/* Nav items — prevent shrink so they keep their size */
ul.main-menu li.root-level {
  position: relative;
  flex-shrink: 0;
}

ul.main-menu li.root-level > a {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--mek-ink);
  padding: 0.375rem 0.5rem;
  border-radius: var(--mek-radius-sm);
  position: relative;
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--mek-transition), background-color var(--mek-transition);
}

ul.main-menu li.root-level > a::after {
  content: '';
  position: absolute;
  bottom: 2px;
  inset-inline-start: 0.375rem;
  inset-inline-end: 0.375rem;
  height: 1.5px;
  background-color: var(--mek-accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.28s var(--mek-ease);
}

ul.main-menu li.root-level > a:hover {
  color: var(--mek-accent-dark);
  background-color: rgba(176, 141, 87, 0.07);
}

ul.main-menu li.root-level > a:hover::after,
ul.main-menu li.root-level.active > a::after,
ul.main-menu li.root-level > a.active::after { transform: scaleX(1); }

ul.main-menu li.root-level.active > a,
ul.main-menu li.root-level > a.active { color: var(--mek-accent); }

a.offers-link { color: var(--mek-accent) !important; font-weight: 500 !important; }
a.offers-link:hover::after { transform: scaleX(1) !important; }

/* Utility icons */
.header-btn__icon {
  color: var(--mek-ink);
  font-size: 1.25rem;
  transition: color var(--mek-transition), transform var(--mek-transition);
}
button:hover .header-btn__icon,
.header-btn:hover .header-btn__icon {
  color: var(--mek-accent);
  transform: scale(1.12);
}

@media (max-width: 1023px) {
  #mainnav .inner { padding-block: 0.5rem; }
  .navbar-brand img.logo-normal { height: 44px !important; }
}


/* ── 5. ANNOUNCEMENT BARS ────────────────────────────────── */
section.animated-text {
  background-color: var(--mek-ink) !important;
  padding-block: 0.5rem;
  overflow: hidden;
}

section.animated-text .animated-text__inner a {
  color: rgba(246, 241, 232, 0.8) !important;
  font-family: 'Tajawal', sans-serif;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
}

section.animated-text .animated-text__inner li::after {
  content: '✦';
  display: inline-block;
  color: var(--mek-accent);
  font-size: 0.4rem;
  opacity: 0.65;
  margin-inline: 1.25rem;
  vertical-align: middle;
}

section.animated-text:hover .animated-text__inner ul {
  animation-play-state: paused;
}


/* ── 6. CATEGORY SECTION — portrait editorial cards ─────── */
section.s-block--circle-links {
  background-color: var(--mek-cream);
  padding-block: 3.5rem;
}

/* Fewer, larger columns — editorial rhythm */
.s-block--circle-links ul[role="list"] {
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: 960px !important;
  margin-inline: auto !important;
  gap: 1.25rem !important;
}

@media (min-width: 768px) {
  .s-block--circle-links ul[role="list"] {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 100% !important;
  }
}

@media (max-width: 479px) {
  .s-block--circle-links ul[role="list"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    max-width: 100% !important;
  }
}

/* Card */
.s-block--circle-links li.group > a {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: var(--mek-radius);
  text-decoration: none;
  background-color: var(--mek-cream-alt);
  transition: transform 0.35s var(--mek-ease-out), box-shadow 0.35s var(--mek-ease-out);
}

.s-block--circle-links li.group > a:hover {
  transform: translateY(-5px);
  box-shadow: var(--mek-shadow-lg);
}

/* Portrait image — 3:4 ratio like fashion e-commerce */
.s-block--circle-links li.group div.overflow-hidden {
  border-radius: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 3 / 4;
}

.s-block--circle-links li.group img.lazy {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  object-fit: cover;
  transition: transform 0.55s var(--mek-ease-out);
}

.s-block--circle-links li.group > a:hover img.lazy {
  transform: scale(1.07);
}

/* Gradient overlay from bottom — label sits on image */
.s-block--circle-links li.group > a::before {
  content: '';
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 55%;
  background: linear-gradient(to top,
    rgba(22, 17, 12, 0.78) 0%,
    rgba(22, 17, 12, 0.25) 55%,
    transparent 100%
  );
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.35s var(--mek-ease);
}

.s-block--circle-links li.group > a:hover::before {
  opacity: 0.88;
}

/* Label overlaid on image */
.s-block--circle-links li.group h3 {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  font-family: 'Tajawal', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(246, 241, 232, 0.95);
  padding: 1.25rem 0.75rem 0.875rem;
  margin: 0;
  line-height: 1.35;
  letter-spacing: 0.01em;
  text-align: center;
  transition: color var(--mek-transition);
}

.s-block--circle-links li.group > a:hover h3 {
  color: var(--mek-accent-light);
}

.s-block--circle-links li.group p:empty { display: none; }

@media (max-width: 768px) {
  section.s-block--circle-links { padding-block: 2.5rem; }
  .s-block--circle-links li.group h3 { font-size: 0.8125rem; }
}


/* ── 7. BEST SELLERS ─────────────────────────────────────── */
section#best-offers-3-slider {
  background-color: var(--mek-white);
  padding-block: 4.5rem;
  border-top: 1px solid var(--mek-border-soft);
  border-bottom: 1px solid var(--mek-border-soft);
}

section#best-offers-3-slider .home-block-title h2 {
  font-size: clamp(1.875rem, 4vw, 2.625rem);
}

@media (max-width: 768px) {
  section#best-offers-3-slider { padding-block: 2.75rem; }
}


/* ── 8. REVIEWS ──────────────────────────────────────────── */
section.s-block--testimonials {
  background-color: var(--mek-cream-alt);
  padding-block: 4.5rem;
  border-top: 1px solid var(--mek-border-soft);
}

.s-block--testimonials .review > div {
  background-color: var(--mek-white);
  border: 1px solid var(--mek-border);
  border-radius: var(--mek-radius);
  box-shadow: var(--mek-shadow-sm) !important;
  transition: box-shadow var(--mek-transition), transform var(--mek-transition);
}

.s-block--testimonials .review > div:hover {
  box-shadow: var(--mek-shadow-md) !important;
  transform: translateY(-3px);
}

.s-block--testimonials .sicon-quote {
  font-size: 5rem !important;
  color: var(--mek-accent) !important;
  opacity: 0.06 !important;
}

.comment__rating i { color: var(--mek-accent) !important; }

.s-block--testimonials .review p.text-base {
  font-family: 'Tajawal', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--mek-ink);
}

.s-block--testimonials .review p.leading-6 {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--mek-text-muted);
}

@media (max-width: 768px) {
  section.s-block--testimonials { padding-block: 2.75rem; }
}


/* ── 9. FOOTER ───────────────────────────────────────────── */
footer.store-footer {
  background-color: var(--mek-ink);
  color: var(--mek-cream);
  border-top: 2px solid var(--mek-accent);
}

.store-footer__curve { color: var(--mek-ink); }

footer.store-footer h3 {
  font-family: 'Tajawal', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mek-accent-light);
  margin-block-end: 1.25rem;
  padding-block-end: 0.625rem;
  border-bottom: 1px solid rgba(176, 141, 87, 0.18);
}

footer.store-footer ul.footer-list a {
  font-family: 'Tajawal', sans-serif;
  color: rgba(246, 241, 232, 0.55);
  font-size: 0.875rem;
  text-decoration: none;
  transition: color var(--mek-transition), padding-inline-start var(--mek-transition);
  display: inline-block;
}

footer.store-footer ul.footer-list a:hover {
  color: var(--mek-cream);
  padding-inline-start: 4px;
}

.footer-description {
  color: rgba(246, 241, 232, 0.4) !important;
  font-size: 0.875rem;
  line-height: 1.65;
  font-family: 'Tajawal', sans-serif;
}

.store-footer__contacts-row {
  border-top: 1px solid rgba(246, 241, 232, 0.07);
  padding-block: 1.25rem;
}

.footer-bottom { border-top: 1px solid rgba(246, 241, 232, 0.07); }

.footer-bottom .footer-rights,
.footer-bottom .footer-rights p,
.footer-bottom .footer-rights a {
  color: rgba(246, 241, 232, 0.3);
  font-size: 0.75rem;
  font-family: 'Tajawal', sans-serif;
}

.footer-bottom .footer-rights a:hover { color: var(--mek-accent-light); }


/* ── 10. MOBILE GLOBAL ───────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 0.9375rem; }
  .home-block-title { margin-block-end: 1.75rem; }
}