/* ─── WhyDifferent (Neden Farklı?) ─── lululemon "Why We Made This" uyarlaması.
   Akordeon satırı dili ProductAccordion'dan gelir (PlusIcon .pacc-plus
   sınıfını taşır — o stiller bu zincire de import edilir).
   MOBİL: bölüm client'ta PDP'nin [data-pd-why-slot]'una taşınır (akordeon
   yığınının doğal devamı); panel açılınca TEK görsel + BEYAZ overlay üstünde
   ortalı 2 satır başlık + çizgi + metin. md+: TAM GENİŞLİK split-tout. */
/* Imported from: ../../sub-components/ProductAccordion/styles.css */
/* ProductAccordion — eski product-detail/accordion.tsx Tailwind zincirleri. */

/* border-b border-line */
.cc_dadnPAQTf5_jVocTv46vd .pacc {
  border-bottom: 1px solid var(--lp-line);
}

/* border-t border-line */
.cc_dadnPAQTf5_jVocTv46vd .pacc-item {
  border-top: 1px solid var(--lp-line);
}

/* flex w-full items-center justify-between gap-4 py-4 text-left (+ preflight reset) */
.cc_dadnPAQTf5_jVocTv46vd .pacc-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}

/* Başlık ikonu (lululemon PDP deseni): 18px stroke, başlığın solunda.
   justify-content: space-between düzeninde başlık esner, "+" sağda kalır —
   ikon + başlık soldaki grubu oluşturur. */
.cc_dadnPAQTf5_jVocTv46vd .pacc-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--lp-ink);
}
.cc_dadnPAQTf5_jVocTv46vd .pacc-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}
/* İkon ile başlık arası 12px; buton gap'i 1rem "+" tarafı için kalır. */
.cc_dadnPAQTf5_jVocTv46vd .pacc-icon + .pacc-title {
  margin-left: -0.25rem;
}

/* text-sm text-ink — flex:1 ile başlık kalan alanı doldurur, "+" sağa yaslanır */
.cc_dadnPAQTf5_jVocTv46vd .pacc-title {
  flex: 1;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700; /* müşteri kararı: akordeon başlıkları kalın */
  color: var(--lp-ink);
}

/* h-4 w-4 shrink-0 text-ink transition-transform duration-300 (+ rotate-45) */
.cc_dadnPAQTf5_jVocTv46vd .pacc-plus {
  height: 1rem;
  width: 1rem;
  flex-shrink: 0;
  color: var(--lp-ink);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cc_dadnPAQTf5_jVocTv46vd .pacc-plus--open {
  transform: rotate(45deg);
}

/* pb-5 text-xs text-ink */
.cc_dadnPAQTf5_jVocTv46vd .pacc-panel {
  padding-bottom: 1.25rem;
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--lp-ink);
}
.cc_dadnPAQTf5_jVocTv46vd .pacc-panel[hidden] {
  display: none;
}

/* ── İç içe akordeon (lululemon "Product Details" deseni) ──
   Üst satırın panelinde yaşar: dış alt çizgi yok. */
.cc_dadnPAQTf5_jVocTv46vd .pacc--nested {
  border-bottom: 0;
  margin-top: 1rem;
}
.cc_dadnPAQTf5_jVocTv46vd .pacc--nested .pacc-btn {
  padding: 0.875rem 0;
}

/* ÜST düzey panel içeriği (açıklama + iç akordeon) başlık METNİYLE hizalı
   başlar — ikon (18px) + boşluk kadar girinti (müşteri kararı: "içindekiler
   biraz daha sağdan başlasın"). İç akordeonun kendi panelleri ekstra girinti
   almaz; tek kademe yeter. */
.cc_dadnPAQTf5_jVocTv46vd .pacc:not(.pacc--nested) > .pacc-item > .pacc-panel {
  padding-left: 1.75rem;
}

/* End import: ../../sub-components/ProductAccordion/styles.css */

.cc_dadnPAQTf5_jVocTv46vd .wdf {
  width: 100%;
  background: #ffffff;
  padding: 0 1.25rem;
}

/* ── Mobil akordeon başlığı — PDP .pacc satır dili birebir ── */
.cc_dadnPAQTf5_jVocTv46vd .wdf-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--lp-line);
  border-bottom: 1px solid var(--lp-line);
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  color: inherit;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-toggle-title {
  flex: 1; /* ikon solda, "+" sağa yaslı kalsın (pacc-btn dili) */
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700; /* akordeon başlıklarıyla aynı (müşteri kararı) */
  color: var(--lp-ink);
}

/* Mobil panel: kapalıyken gizli; açılınca TEK görsel + BEYAZ overlay
   üstünde başlık+çizgi+metin (müşteri kararı: okunabilir, tema dilinde). */
.cc_dadnPAQTf5_jVocTv46vd .wdf-panel {
  display: none;
  position: relative;
  padding: 1rem 0 1.25rem;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf--open .wdf-panel {
  display: block;
}

/* ── Başlık: kelime başına satır, altında kısa çizgi — SOLA yaslı
   (müşteri kararı; mobilde kompakt: heading-2 kademesi).
   Font: değişken çözülmezse bile T-Star'a düşsün (yayın scoper'ı font
   adlarını cc_ önekiyle yeniden adlandırır — memory: ikas-css-scoper). */
/* Mobil başlık — marka kartı: Inter kalın, Title Case, TEK SATIR. */
.cc_dadnPAQTf5_jVocTv46vd .wdf-title {
  display: block;
  margin: 0;
  font-family: var(--lp-font-sans, "cc_dadnPAQTf5_Inter"), "cc_dadnPAQTf5_Inter", "cc_dadnPAQTf5_Inter",
    sans-serif;
  font-size: 1.75rem; /* referans karttaki oran (~28px @390) */
  line-height: 1.2;
  letter-spacing: 0;
  font-weight: 800;
  text-transform: none;
  color: inherit;
  text-align: left;
}
/* Mobilde kelimeler TEK satırda (masaüstü bloğu alt alta böler). */
.cc_dadnPAQTf5_jVocTv46vd .wdf-title-line {
  display: inline;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-title-line + .wdf-title-line::before {
  content: " ";
}
/* Gri kısa çizgi — referans karttaki dil. */
.cc_dadnPAQTf5_jVocTv46vd .wdf-rule {
  display: block;
  width: 4rem;
  height: 3px;
  margin: 0.875rem 0 1rem;
  background: #c4c4c4;
}
/* Gövde — "inci gibi": küçük, zarif, TEK akış (paragraf boşluğu yok). */
.cc_dadnPAQTf5_jVocTv46vd .wdf-body {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.375rem;
  font-weight: 500;
  color: inherit;
  text-align: left;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-body p {
  margin: 0;
}

/* Görseller — MOBİL: tek görsel (2.si gizli), yazı bloğu üzerine biner. */
.cc_dadnPAQTf5_jVocTv46vd .wdf-media {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: #fafafa;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-img:nth-of-type(2) {
  display: none;
}
/* MOBİL — MARKA KARTI DİLİ (müşterinin referans görseli, image.png):
   overlay YOK; metin KOYU renkle doğrudan açık tonlu görselin üzerinde.
   Başlık Title Case + Inter kalın, altında GRİ kısa çizgi, gövde rahat. */
.cc_dadnPAQTf5_jVocTv46vd .wdf-shade {
  display: none;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf--open .wdf-copy, .cc_dadnPAQTf5_jVocTv46vd .wdf-copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.75rem;
  padding: 1.25rem;
  color: var(--lp-ink);
  z-index: 1;
}

/* ── md+ : akordeon YOK — TAM GENİŞLİK split-tout (SKIMS dili):
   görseller sağ yarıyı kenara kadar doldurur, metin sol yarıda dikey
   ortalı; blok içeriği ORTALI dizilir, üste yapışmaz. ── */
@media (min-width: 768px) {
  .cc_dadnPAQTf5_jVocTv46vd .wdf {
    padding: 0;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-toggle {
    display: none;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-panel {
    display: grid;
    grid-template-columns: 45fr 55fr;
    gap: 0;
    align-items: stretch;
    padding: 0;
    max-width: none;
    margin: 0;
  }
  /* Metin bloğu SOLA yaslı (müşteri kararı — SKIMS/lululemon dizgisi):
     başlık, çizgi ve gövde sola; blok sol kolonda dikey ortalı. */
  .cc_dadnPAQTf5_jVocTv46vd .wdf--open .wdf-copy, .cc_dadnPAQTf5_jVocTv46vd .wdf-copy {
    position: static;
    align-self: center;
    padding: 4rem 3rem 4rem 4rem;
    color: var(--lp-ink);
    max-width: 34rem;
    margin: 0;
    text-align: left;
    text-shadow: none;
  }
  /* Masaüstü başlık dili KORUNUR: T-Star display-1, uppercase, kelimeler
     alt alta (mobil Inter/Title Case/tek satır kuralını geri ezer). */
  .cc_dadnPAQTf5_jVocTv46vd .wdf-title {
    font-family: var(--lp-font-display, "cc_dadnPAQTf5_T-Star Pro"), "cc_dadnPAQTf5_T-Star Pro",
      "cc_dadnPAQTf5_T-Star Pro", sans-serif;
    font-size: var(--lp-text-display-1, 3rem);
    line-height: var(--lp-lh-display-1, 3.5rem);
    letter-spacing: var(--lp-ls-type);
    text-transform: uppercase;
    text-align: left;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-title-line {
    display: block;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-title-line + .wdf-title-line::before {
    content: none;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-rule {
    width: 2.5rem;
    height: 2px;
    margin: 1.25rem 0 1.5rem;
    background: var(--lp-ink);
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-rule {
    margin: 1.25rem 0 1.5rem;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-body {
    text-align: left;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-shade {
    display: none;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-body {
    font-size: 1rem;
    line-height: 1.75rem;
    font-weight: 400;
  }
  /* İki görsel — ince ayraç; hiçbir kenara yapışmaz (müşteri kararı:
     üst/alt VE sağdan nefes). */
  .cc_dadnPAQTf5_jVocTv46vd .wdf-media {
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 3rem 3rem 3rem 0;
    align-self: center;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-media--single {
    grid-template-columns: 1fr;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-img:nth-of-type(2) {
    display: block;
  }
}

/* ── MOBİL KART MODU: hazır tasarım görseli varsa mobilde YALNIZ o ──
   (dinamik yazı/görsel/overlay gizlenir; masaüstü split'e dokunulmaz). */
.cc_dadnPAQTf5_jVocTv46vd .wdf-card {
  display: block;
  width: 100%;
  height: auto;
}
.cc_dadnPAQTf5_jVocTv46vd .wdf-panel--card .wdf-media, .cc_dadnPAQTf5_jVocTv46vd .wdf-panel--card .wdf-copy {
  display: none;
}
@media (min-width: 768px) {
  .cc_dadnPAQTf5_jVocTv46vd .wdf-card {
    display: none;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-panel--card .wdf-media {
    display: grid;
  }
  .cc_dadnPAQTf5_jVocTv46vd .wdf-panel--card .wdf-copy {
    display: block;
  }
}