/* =========================================================
   GIRLHOOD ABAYA — Editorial luxury for Salla "Wathiq" theme
   ستايل أصايل: أبيض تحريري · سيريف عربي · حواف حادة · افتتاحية للشعار
   الصق الكود كامل في: المظهر ← تخصيص ← تصميم متجرك باستخدام CSS
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cormorant+Garamond:wght@500;600&display=swap');

:root {
  --gh-ink: #141414;
  --gh-gold: #B8955A;
  --gh-sand: #F4EFE7;
  --gh-mist: #F2F2F0;
  --gh-muted: #7a7169;
  --gh-line: #ececec;
  --gh-serif: 'Amiri', 'PingARLT', serif;
  --gh-latin: 'Cormorant Garamond', Georgia, serif;
  --gh-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- الأساس ---------- */
body { background: #fff !important; color: var(--gh-ink); -webkit-font-smoothing: antialiased; }
::selection { background: var(--gh-ink); color: #fff; }

/* ---------- ✨ أول ما يفتح: افتتاحية الشعار (الرئيسية فقط) ---------- */
body.index::before {
  content: "GIRLHOOD";
  position: fixed; inset: 0; z-index: 99999;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
  font-family: var(--gh-latin);
  font-size: clamp(2rem, 6vw, 4.2rem);
  letter-spacing: .5em; text-indent: .5em;
  color: var(--gh-ink);
  pointer-events: none;
  animation: gh-intro 1.9s var(--gh-ease) forwards;
}
body.index::after {
  content: "";
  position: fixed; z-index: 100000;
  left: 50%; top: calc(50% + 3.2rem);
  width: 120px; height: 1px; margin-left: -60px;
  background: var(--gh-gold);
  pointer-events: none;
  animation: gh-intro-line 1.9s var(--gh-ease) forwards;
}
@keyframes gh-intro { 0% { opacity: 1; color: transparent; } 25% { color: var(--gh-ink); } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes gh-intro-line { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* ---------- الهيدر: سطر الشعار + سطر القائمة ---------- */
.store-header .header-components { background: #fff !important; border-bottom: 1px solid var(--gh-line); }
.store-header .main-nav-container { background: #fff !important; border-bottom: 1px solid var(--gh-line); box-shadow: none !important; }
.store-header .main-menu > li > a {
  font-family: var(--gh-serif) !important;
  font-size: 1.12rem !important;
  color: var(--gh-ink) !important;
  letter-spacing: .01em;
  position: relative;
}
.store-header .main-menu > li > a::after {
  content: ""; position: absolute; inset-inline: 25%; bottom: 8px; height: 1px;
  background: var(--gh-gold); transform: scaleX(0); transition: transform .35s var(--gh-ease);
}
.store-header .main-menu > li > a:hover::after { transform: scaleX(1); }
.store-header .header-icon-button { border-radius: 0 !important; }

/* ---------- 🖼️ الهيرو (ملء الشاشة) ---------- */
body.index .s-block.s-block--bundle-marquee,
body.index .s-block.s-block--hero-slider { margin-top: 0 !important; }
.s-block--hero-slider .swiper-slide--hero { position: relative; }
.s-block--hero-slider .swiper-slide--hero .bg-cover {
  background-position: center 72% !important;
  animation: gh-kenburns 14s ease-out both;
}
@keyframes gh-kenburns { from { transform: scale(1.08); } to { transform: scale(1); } }
.s-block--hero-slider .swiper-slide--hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20,20,20,0) 45%, rgba(20,20,20,.55) 100%);
}
.s-block--hero-slider .swiper-slide--hero .container { z-index: 2; align-items: flex-end !important; padding-bottom: 10vh; }
.s-block--hero-slider h2 {
  font-family: var(--gh-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(2.4rem, 5.5vw, 4.4rem) !important;
  color: #fff !important;
}
.s-block--hero-slider .description {
  font-family: var(--gh-serif) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem) !important;
  color: rgba(255,255,255,.9) !important;
}
.s-block--hero-slider .btn {
  border-radius: 0 !important;
  font-family: var(--gh-serif);
  padding: .85rem 2.6rem !important;
  letter-spacing: .04em;
  background: #fff !important; color: var(--gh-ink) !important; border: 1px solid #fff !important;
  transition: background .3s, color .3s !important;
}
.s-block--hero-slider .btn:hover { background: var(--gh-ink) !important; color: #fff !important; border-color: var(--gh-ink) !important; }

/* ---------- عناوين الأقسام ---------- */
.s-block { margin-top: clamp(3.5rem, 7vw, 6rem) !important; }
.s-block__title { justify-content: center !important; text-align: center; margin-bottom: 2.5rem !important; }
.s-block__title h2 {
  font-family: var(--gh-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.7rem, 3vw, 2.4rem) !important;
  color: var(--gh-ink) !important;
  padding-bottom: 1rem; position: relative;
}
.s-block__title h2::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 64px; height: 3px; background: var(--gh-gold); transform: translateX(-50%);
}

/* ---------- التصنيفات (شبكة المميزات) ---------- */
.s-block--fullscreen-features-grid .info-block__img { background: var(--gh-mist) !important; overflow: hidden; }
.s-block--fullscreen-features-grid .info-block__img img {
  object-fit: cover !important; transition: transform 1.4s var(--gh-ease) !important;
}
.s-block--fullscreen-features-grid .info-block:hover .info-block__img img { transform: scale(1.04); }
.s-block--fullscreen-features-grid .info-block__content h2 {
  font-family: var(--gh-serif) !important;
  font-weight: 700 !important;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem) !important;
  color: var(--gh-ink) !important;
  position: relative; padding-bottom: .9rem;
}
.s-block--fullscreen-features-grid .info-block__content h2::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0;
  width: 56px; height: 3px; background: var(--gh-gold);
}
.s-block--fullscreen-features-grid .info-block__content p {
  font-family: var(--gh-serif) !important; font-size: 1.15rem !important; color: var(--gh-muted) !important; line-height: 2 !important;
}

/* ---------- الأزرار ---------- */
.btn, .s-button-element, .btn--primary, .s-button-primary { border-radius: 0 !important; }
.btn--primary, .s-button-primary, .s-button-element.s-button-primary {
  background: var(--gh-ink) !important; border: 1px solid var(--gh-ink) !important; color: #fff !important;
  font-family: var(--gh-serif); letter-spacing: .03em; transition: background .3s, border-color .3s !important;
}
.btn--primary:hover, .s-button-primary:hover, .s-button-element.s-button-primary:hover {
  background: var(--gh-gold) !important; border-color: var(--gh-gold) !important;
}
.btn--outline {
  border: 1px solid var(--gh-ink) !important; color: var(--gh-ink) !important; background: transparent !important;
  font-family: var(--gh-serif); padding: .75rem 2.2rem !important; transition: background .3s, color .3s !important;
}
.btn--outline:hover { background: var(--gh-ink) !important; color: #fff !important; }

/* ---------- 🛍️ المنتجات: بلا إطارات ---------- */
.s-product-card-entry { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.s-product-card-image { background: var(--gh-mist) !important; border-radius: 0 !important; aspect-ratio: 3 / 4; overflow: hidden; }
.s-product-card-image img { width: 100%; height: 100%; object-fit: cover !important; transition: transform 1.4s var(--gh-ease) !important; }
.s-product-card-entry:hover .s-product-card-image img { transform: scale(1.05); }
.s-product-card-content { text-align: center !important; padding: 1.1rem .5rem 0 !important; }
.s-product-card-content-title, .s-product-card-content-title a {
  font-family: var(--gh-serif) !important; font-weight: 700 !important; font-size: 1.12rem !important;
  color: var(--gh-ink) !important; justify-content: center;
}
.s-product-card-price, .s-product-card-sale-price h4 {
  font-family: var(--gh-serif) !important; color: var(--gh-gold) !important; font-weight: 700 !important;
  font-size: 1.15rem !important; justify-content: center;
}
.s-product-card-sale-price span { color: var(--gh-muted) !important; }
.s-product-card-promotion-title { background: var(--gh-ink) !important; color: #fff !important; border-radius: 0 !important; font-size: .72rem !important; letter-spacing: .08em; }
.s-product-card-entry salla-add-product-button .s-button-element,
.s-product-card-content-footer .s-button-element {
  border: 1px solid var(--gh-ink) !important; background: transparent !important; color: var(--gh-ink) !important;
  font-family: var(--gh-serif); transition: background .3s, color .3s !important;
}
.s-product-card-entry salla-add-product-button .s-button-element:hover,
.s-product-card-content-footer .s-button-element:hover { background: var(--gh-ink) !important; color: #fff !important; }

/* ---------- البنرات ---------- */
.banner--fixed, .banner--fixed img, .s-block--fixed-banner a { border-radius: 0 !important; overflow: hidden; }
.s-block--fixed-banner a { display: block; transition: opacity .4s; }
.s-block--fixed-banner a:hover { opacity: .92; }

/* ---------- صفحة التصنيف والمنتج ---------- */
.product-single h1, .page-title, h1.text-3xl { font-family: var(--gh-serif) !important; }
.product-single .total-price, .product-single .price-wrapper { font-family: var(--gh-serif) !important; color: var(--gh-gold) !important; }
.s-product-options-option-content label, .s-product-options-thumbnails-wrapper label { border-radius: 0 !important; }
.s-product-options-option-content input:checked + label { background: var(--gh-ink) !important; color: #fff !important; border-color: var(--gh-ink) !important; }

/* ---------- الفوتر ---------- */
.store-footer { border-top: 1px solid var(--gh-line); }
.store-footer .footer-title { font-family: var(--gh-serif) !important; color: var(--gh-gold) !important; font-size: 1.2rem !important; }
.store-footer a:hover { color: var(--gh-gold) !important; }

/* ---------- الجوال ---------- */
@media (max-width: 640px) {
  .s-block__title h2 { font-size: 1.6rem !important; }
  .s-block--hero-slider .swiper-slide--hero .container { padding-bottom: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  body.index::before, body.index::after { display: none; }
  .s-block--hero-slider .swiper-slide--hero .bg-cover { animation: none; }
}