/* =========================================================================
   LYN Skincare — Redesign katmanı (2026-06)
   Bricks builder verisine dokunmadan, kod katmanından profesyonelleştirme.
   Her blok ayrı ve geri alınabilir. Bricks inline stillerini ezmek için
   gereken yerlerde yeterli specificity / !important kullanılır.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1) TASARIM TOKEN'LARI (tek kaynak — marka paleti + ölçek)
   Sadece tanım; tek başına görsel etki yok, sonraki kurallar referans verir.
   ------------------------------------------------------------------------- */
:root {
  /* Marka renkleri (Bricks paletiyle hizalı) */
  --lyn-sage:        #718472;  /* Primary  */
  --lyn-sage-dark:   #5c6e5d;
  --lyn-gold:        #b2a83c;  /* Secondary */
  --lyn-gold-dark:   #968d2f;
  --lyn-ink:         #1f2a26;  /* metin için saf siyahtan daha yumuşak */
  --lyn-black:       #1a1a1a;  /* buton default (Sephora-stili siyah) */
  --lyn-line:        #e6e1d8;  /* nötr ayraç */
  --lyn-oat:         #faf7f2;  /* sıcak nötr arka plan */

  /* Boşluk ölçeği (8px tabanlı) */
  --lyn-s1: 4px;  --lyn-s2: 8px;  --lyn-s3: 12px; --lyn-s4: 16px;
  --lyn-s5: 24px; --lyn-s6: 32px; --lyn-s7: 48px; --lyn-s8: 64px;

  --lyn-radius: 10px;
  --lyn-shadow: 0 6px 24px rgba(31, 42, 38, .08);
}

/* =========================================================================
   2) TUTARLI ÜRÜN KARTI — TÜM YÜZEYLER
   Anasayfa (ewpxqu/fhnmyd), ürün listesi (archive), ürün detay > Benzer Ürünler
   hepsi farklı Bricks loop'larıyla kuruluyordu → box/buton/renk uyuşmuyordu.
   Ortak woo class'larını GLOBAL hedefleyerek tek tasarıma indiriyoruz.
   ------------------------------------------------------------------------- */

/* 2a) Başlık — her yerde aynı tipografi, 2 satıra sabit (hizalama) */
.brxe-product-title,
.brxe-product-title a {
  color: var(--lyn-ink) !important;
  font-weight: 600 !important;
}
.brxe-product-title {
  font-size: 15px !important;
  line-height: 1.4 !important;
}

/* 2b) Fiyat — indirimli eski fiyat sönük & üstü çizili, yeni fiyat vurgulu */
.brxe-product-price del,
.brxe-product-price del .amount,
.brxe-product-price del bdi {
  color: #9aa39a !important;
  font-weight: 400 !important;
  text-decoration: line-through;
}
.brxe-product-price ins,
.brxe-product-price ins .amount,
.brxe-product-price ins bdi {
  color: var(--lyn-ink) !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

/* 2c) "Sepete Ekle / Seçenekler" butonu — HER kartta aynı sage CTA
   (gri gradient & siyah varyantların hepsini ezer) */
/* Kart loop'larında wrapper = butonun kendisi → siyah. PDP'de wrapper miktar+buton
   konteyneri (siyah kutu OLMAMALI), orada sadece .button siyah olur. */
.brxe-ewpxqu .brxe-product-add-to-cart,
.brxe-fhnmyd .brxe-product-add-to-cart,
.brxe-cfb7f8 .brxe-product-add-to-cart,
.brxe-e71d6e .brxe-product-add-to-cart,
.brxe-caaec3 .brxe-product-add-to-cart,
.brxe-product-add-to-cart .button,
.brxe-product-add-to-cart a.button,
.brxe-product-add-to-cart button {
  background-image: none !important;
  background-color: var(--lyn-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  transition: background-color .25s ease !important;
}
.brxe-ewpxqu .brxe-product-add-to-cart:hover,
.brxe-fhnmyd .brxe-product-add-to-cart:hover,
.brxe-cfb7f8 .brxe-product-add-to-cart:hover,
.brxe-e71d6e .brxe-product-add-to-cart:hover,
.brxe-caaec3 .brxe-product-add-to-cart:hover,
.brxe-product-add-to-cart .button:hover,
.brxe-product-add-to-cart a.button:hover,
.brxe-product-add-to-cart button:hover {
  background-color: var(--lyn-sage) !important;
  color: #fff !important;
}

/* 2d) Ürün detay ANA "Sepete Ekle" CTA + WooCommerce varsayılan loop butonları
   da aynı sage rengine (tutarlılık) */
.single_add_to_cart_button,
.woocommerce .products a.button.add_to_cart_button,
.woocommerce a.button.add_to_cart_button {
  background-image: none !important;
  background-color: var(--lyn-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.single_add_to_cart_button:hover,
.woocommerce .products a.button.add_to_cart_button:hover,
.woocommerce a.button.add_to_cart_button:hover {
  background-color: var(--lyn-sage) !important;
  color: #fff !important;
}

/* 2g) HOVER TİTREME (flicker) FIX — anasayfa slider + liste kartı
   Sorun: buton display:none→flex olunca kart 412→468px büyüyor, reflow →
   imleç karttan çıkıp giriyor → titreme. Çözüm: buton alanı HER ZAMAN rezerve
   (display:flex sabit), sadece opacity/visibility ile açılır. Yükseklik sabit. */
/* Standart kart loop'lari: liste(cfb7f8), anasayfa(ewpxqu/fhnmyd), arama(e71d6e)
   — hepsi ayni yapida, ayni titreme-fix + hover davranisi. */
.brxe-ewpxqu .brxe-product-add-to-cart,
.brxe-fhnmyd .brxe-product-add-to-cart,
.brxe-cfb7f8 .brxe-product-add-to-cart,
.brxe-e71d6e .brxe-product-add-to-cart,
.brxe-caaec3 .brxe-product-add-to-cart {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
.brxe-ewpxqu:hover .brxe-product-add-to-cart,
.brxe-fhnmyd:hover .brxe-product-add-to-cart,
.brxe-cfb7f8:hover .brxe-product-add-to-cart,
.brxe-e71d6e:hover .brxe-product-add-to-cart,
.brxe-caaec3:hover .brxe-product-add-to-cart {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
/* mobil/dokunmatik: hover yok → buton hep görünür (erişilebilirlik) */
@media (hover: none) {
  .brxe-ewpxqu .brxe-product-add-to-cart,
  .brxe-fhnmyd .brxe-product-add-to-cart,
  .brxe-cfb7f8 .brxe-product-add-to-cart,
  .brxe-e71d6e .brxe-product-add-to-cart,
  .brxe-caaec3 .brxe-product-add-to-cart {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important;
  }
}

/* 2h) Carousel kartlarına (anasayfa Çok Satanlar/En Trend + ilgili ürünler)
   grid'deki gibi hover-lift. Swiper eşit-yükseklik tuttuğu için yapısal shrink
   yerine transform ile kaldırıyoruz (reflow yok, swiper'ı bozmaz). */
.brxe-ewpxqu .brxe-oiapfy,
.brxe-fhnmyd .brxe-oiapfy,
.brxe-caaec3 .brxe-c00001 {
  transition: transform .25s ease, box-shadow .25s ease;
}
.brxe-ewpxqu:hover .brxe-oiapfy,
.brxe-fhnmyd:hover .brxe-oiapfy,
.brxe-caaec3:hover .brxe-c00001 {
  transform: translateY(-8px);
}

/* -------------------------------------------------------------------------
   4) GÜVEN / USP ŞERİDİ (hero altı) — Bricks section .lyn-usp
   Bölüm = section(.lyn-usp) > container(.brxe-lyncnt) > 4x div(icon+başlık+alt)
   ------------------------------------------------------------------------- */
.lyn-usp {
  background-color: var(--lyn-oat);
  padding: var(--lyn-s5) var(--lyn-s4);
  border-top: 1px solid var(--lyn-line);
  border-bottom: 1px solid var(--lyn-line);
}
.lyn-usp > .brxe-container {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--lyn-s5);
  max-width: 1180px;
  margin: 0 auto;
  width: 100%;
}
.lyn-usp .brxe-div {
  flex: 1 1 200px;
  min-width: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.lyn-usp .brxe-div p { margin: 0; line-height: 1.35; }
.lyn-usp .brxe-icon { margin-bottom: 4px; }
@media (max-width: 600px) {
  .lyn-usp > .brxe-container { gap: var(--lyn-s4); }
  .lyn-usp .brxe-div { flex: 1 1 40%; min-width: 130px; }
}

/* -------------------------------------------------------------------------
   5) "İndirimdekiler" filtre toggle (redesign.js enjekte eder)
   ------------------------------------------------------------------------- */
.lyn-sale-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid var(--lyn-line);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--lyn-ink);
  font-size: 14px;
  font-weight: 600;
  transition: background-color .2s ease, border-color .2s ease;
}
.lyn-sale-toggle:hover { border-color: var(--lyn-ink); }
.lyn-sale-toggle__box {
  width: 18px; height: 18px; flex: 0 0 18px;
  border: 2px solid #b9b9b9; border-radius: 4px;
  position: relative; transition: all .2s ease;
}
.lyn-sale-toggle.is-active { background: var(--lyn-ink); border-color: var(--lyn-ink); color: #fff; }
.lyn-sale-toggle.is-active .lyn-sale-toggle__box { background: #fff; border-color: #fff; }
.lyn-sale-toggle.is-active .lyn-sale-toggle__box::after {
  content: ""; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid var(--lyn-ink);
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* -------------------------------------------------------------------------
   6) ÜRÜN DETAY — güven rozetleri (satın-alma alanı, .lyn-pdp-trust)
   ------------------------------------------------------------------------- */
.lyn-pdp-trust {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0;
  padding: 14px 8px;
  border: 1px solid var(--lyn-line);
  border-radius: 10px;
  background: var(--lyn-oat);
}
.lyn-pdp-trust .brxe-div {
  flex: 1 1 80px; min-width: 68px;
  display: flex; flex-direction: column; align-items: center;
  gap: 6px; text-align: center;
}
.lyn-pdp-trust .brxe-text-basic { line-height: 1.25; }

/* -------------------------------------------------------------------------
   7) İletişim formu — honeypot alanını gizle (spam; kullanıcı görmemeli)
   ------------------------------------------------------------------------- */
.brxe-form .form-group:has(input[name*="hnyptf"]) { display: none !important; }

/* -------------------------------------------------------------------------
   8) MOBİL yapışkan "Sepete Ekle" çubuğu (ürün detay)
   ------------------------------------------------------------------------- */
.lyn-sticky-atc {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
  display: none;
  align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border-top: 1px solid var(--lyn-line);
  box-shadow: 0 -4px 16px rgba(31,42,38,.10);
  transform: translateY(100%);
  transition: transform .25s ease;
}
.lyn-sticky-atc.is-visible { transform: translateY(0); }
.lyn-sticky-atc__price { font-weight: 800; color: var(--lyn-ink); font-size: 16px; white-space: nowrap; }
.lyn-sticky-atc__price del { font-weight: 400; color: #9aa39a; font-size: 13px; margin-right: 4px; }
.lyn-sticky-atc__price ins { text-decoration: none; }
.lyn-sticky-atc__btn {
  flex: 1 1 auto; max-width: 62%;
  background: var(--lyn-black); color: #fff; border: none; border-radius: 8px;
  padding: 14px 18px; font-weight: 700; font-size: 15px; cursor: pointer;
}
@media (max-width: 991px) { .lyn-sticky-atc { display: flex; } }

/* -------------------------------------------------------------------------
   9) ANASAYFA — kategori vitrini (.lyn-cat)
   ------------------------------------------------------------------------- */
.lyn-cat { padding: 48px 16px; max-width: 1280px; margin: 0 auto; width: 100%; }
.lyn-cat .brxe-heading, .lyn-cat h2 {
  text-align: center; font-size: 26px; font-weight: 700;
  color: var(--lyn-ink); margin-bottom: 28px;
}
.lyn-cat > .brxe-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px; max-width: 100%;
}
.lyn-cat-tile {
  display: flex !important; flex-direction: column; align-items: center;
  gap: 10px; text-decoration: none;
}
.lyn-cat-tile img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: 12px; transition: transform .3s ease;
}
.lyn-cat-tile:hover img { transform: scale(1.04); }
.lyn-cat-tile span, .lyn-cat-tile .brxe-text-basic {
  color: var(--lyn-ink); font-weight: 600; font-size: 15px; text-align: center;
}
@media (max-width: 991px) { .lyn-cat > .brxe-container { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------------------
   10) LEGAL / klasik içerik sayfaları (KVKK, iade, mesafeli satış, blog...)
   Tam genişlik & sıkışık → okunabilir sütun + tipografi (içerik değişmez)
   ------------------------------------------------------------------------- */
article.wordpress {
  max-width: 820px !important;
  margin: 40px auto 56px !important;
  padding: 0 20px !important;
}
article.wordpress p,
article.wordpress li {
  line-height: 1.75;
  color: #3a4540;
  font-size: 15px;
}
article.wordpress p { margin-bottom: 16px; }
article.wordpress h1,
article.wordpress h2,
article.wordpress h3,
article.wordpress h4 {
  color: var(--lyn-ink);
  margin: 30px 0 12px;
  line-height: 1.3;
  font-weight: 700;
}
article.wordpress ul,
article.wordpress ol { margin: 0 0 18px 22px; }
article.wordpress li { margin-bottom: 6px; }
article.wordpress a { color: var(--lyn-sage); text-decoration: underline; }
article.wordpress strong { color: var(--lyn-ink); }

/* -------------------------------------------------------------------------
   11) ERİŞİLEBİLİRLİK — klavye odak halkaları (:focus-visible)
   Fare kullanıcısını etkilemez; klavye/erişilebilirlik için net odak.
   ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.brxe-product-add-to-cart:focus-visible,
.single_add_to_cart_button:focus-visible,
.lyn-cat-tile a:focus-visible {
  outline: 2px solid var(--lyn-sage) !important;
  outline-offset: 2px !important;
  border-radius: 4px;
}