/** Shopify CDN: Minification failed

Line 165:11 Unexpected "4"

**/
/* ============================================================
   BÖLÜM 1 — GENEL (her sayfada geçerli)
   ============================================================ */
/* NOT: burada daha önce `.product-sticky-cart { display: none; }` vardı ve
   yapışkan sepet çubuğunu her yerde kapatıyordu. Muhtemel sebep mobilde alt
   dock ile üst üste binmesiydi; masaüstünde ise dock zaten görünmüyor.
   Çubuk BÖLÜM 18'de yeniden açıldı ve mobilde dock'un üstüne alındı. */

/* Judge.me yorumlar */
.jdgm-rev__pics { margin-top: 0 !important; padding-top: 0 !important; }
.jdgm-carousel-item__body { padding-bottom: 0 !important; }
.jdgm-carousel-item { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.jdgm-widget { padding-bottom: 0 !important; margin-bottom: 0 !important; }
.jdgm-rev__pic {
  width: 200px !important; height: 200px !important; min-width: 200px !important;
}
.jdgm-rev__pic img {
  width: 200px !important; height: 200px !important; object-fit: cover !important;
}
.jdgm-star { color: #f5a623 !important; }

/* Tipografi */
h1, h2, h3, .card__heading { letter-spacing: 0.08em !important; }
.card__heading { font-size: 15px !important; text-transform: none !important; }


/* ============================================================
   BÖLÜM 2 — SADECE ÜRÜN SAYFASI
   ============================================================ */
body.template-product .product__media,
body.template-product .product__media-item,
body.template-product .product__media-list {
  background: #f6f6f6 !important;
}
body.template-product .product__media img {
  mix-blend-mode: multiply;
}

/* Renk kartları: boyut ve aralık (mobil) */
@media screen and (max-width: 749px) {
  body.template-product fieldset.variant-input-wrapper label.color__swatch {
    flex: 0 0 18vw !important;
    width: 18vw !important;
    max-width: 18vw !important;
    height: 18vw !important;
  }
  body.template-product fieldset.variant-input-wrapper:has(label.color__swatch) {
    gap: 4px !important;
  }
}

@media screen and (min-width: 750px) {
  body.template-product fieldset.variant-input-wrapper label.color__swatch {
    flex: 0 0 110px !important;
    width: 110px !important;
    max-width: 110px !important;
    height: 110px !important;
  }
  body.template-product fieldset.variant-input-wrapper:has(label.color__swatch) {
    gap: 4px !important;
  }
}

/* Kese / harf şeridi: seçili çerçeve kesilmesin */
body.template-product .bnh-po-serit {
  padding-top: 6px !important;
  padding-bottom: 10px !important;
  overflow-y: visible !important;
}
body.template-product .bnh-po-serit > .po-option--swatch-wrapper,
body.template-product .bnh-po-serit > .po-option--button-wrapper {
  overflow: visible !important;
}


/* ============================================================
   BÖLÜM 3 — ÜRÜN KARTLARI (tüm ızgaralar)
   ============================================================ */
ul:has(> li .card--product) {
  gap: 0 !important;
  column-gap: 0 !important;
  row-gap: 0 !important;
  border-top: 1px solid #e8e8e8;
  border-left: 1px solid #e8e8e8;
}
li:has(.card--product) {
  border-right: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  margin: 0 !important;
  padding: 0 !important;
}

.card--product,
.card--product .card__inner {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.card--product .card__media,
.card--product .media {
  border-radius: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  background: #f6f6f6 !important;
}
.card__inner {
  background: #f6f6f6 !important;
}
.card--product .card__media img,
.card--product .media img {
  width: 100% !important;
  object-fit: cover !important;
  mix-blend-mode: multiply;
}

/* Favori / sepet rozetleri */
.card--product .urun-sosyal-kanit {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  gap: 2px 10px !important;
  margin: 2px 0 4px !important;
}
.card--product .urun-sosyal-kanit svg {
  width: 11px !important;
  height: 11px !important;
}
.card--product .usk-favori,
.card--product .usk-sepet {
  gap: 3px !important;
  letter-spacing: 0 !important;
}


/* ============================================================

/* ------------------------------------------------------------
   İSTİSNA: ürün sayfasındaki dar "tamamlayıcı ürünler" listesi.
   Bu liste ürün bilgisi sütununun içinde, tek sıra hâlinde
   duruyor; ızgara çizgileri ve gri zemin orada yanlış duruyor.
   ------------------------------------------------------------ */
.complementary-products ul:has(> li .card--product) {
  border-top: 0;
  border-left: 0;
}
.complementary-products li:has(.card--product) {
  border-right: 0;
  border-bottom: 0;
}
.complementary-products .card--product .card__media,
.complementary-products .card--product .media,
.complementary-products .card__inner {
  background: transparent !important;
}
.complementary-products .card--product .card__media img,
.complementary-products .card--product .media img {
  mix-blend-mode: normal;
}

   BÖLÜM 4 — İNCELE BUTONU (simetrik 16px boşluk)
   ============================================================ */
li:has(.bnh-incele) {
  display: flex !important;
  flex-direction: column !important;
}
li:has(.bnh-incele) .card-wrapper {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.card-information:has(.bnh-incele) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-bottom: 16px !important;
  box-sizing: border-box !important;
}
.card-information:has(.bnh-incele) > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
/* Fiyat ile buton arasına üst boşluk */
.card-information:has(.bnh-incele) .price {
  margin-bottom: 16px !important;
}

.bnh-incele {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: auto 0 0 !important;
  padding: 10px 0;
  border: 1px solid #1a1a1a;
  color: #1a1a1a !important;
  font-size: 10px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-decoration: none !important;
  background: transparent;
  transition: background .2s, color .2s;
}
.bnh-incele:hover {
  background: #1a1a1a;
  color: #fff !important;
}

/* ============================================================
   BÖLÜM 5 — KOLEKSİYON / ARAMA IZGARASI (masaüstü düzeni)
   ------------------------------------------------------------
   Sorun: bir uygulama stylesheet'i (tema dışı) `.product-grid`
   üzerine max-width:1180px ve `.grid__item` üzerine flex:0 0 20%
   dayatıyor. Bu yüzden masaüstünde 5 dar sütun oluşuyor ve
   konteyner sayfa genişliğini kullanmıyor.

   Çözüm: sütun sayısını kırılım noktalarında kesinleştir.
   Sadece #product-grid hedeflenir (koleksiyon + arama sayfaları).
   Ana sayfadaki slider'lar (featured-collection, recently-viewed,
   product-recommendations) ETKİLENMEZ.

   !important gereklidir: dayatan kural tema dışı bir dosyada.
   ============================================================ */

ul#product-grid.product-grid {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobil: 2 sütun */
ul#product-grid.product-grid > .grid__item {
  flex: 0 0 50% !important;
  max-width: 50% !important;
  width: auto !important;
}

/* Tablet: 3 sütun */
@media screen and (min-width: 750px) {
  ul#product-grid.product-grid > .grid__item {
    flex: 0 0 33.3333% !important;
    max-width: 33.3333% !important;
  }
}

/* Masaüstü: 4 sütun — çantalar için daha büyük görsel */
@media screen and (min-width: 990px) {
  ul#product-grid.product-grid > .grid__item {
    flex: 0 0 25% !important;
    max-width: 25% !important;
  }
}

/* Tek sütun mobil tercihi seçiliyse ona saygı göster */
@media screen and (max-width: 749px) {
  ul#product-grid.product-grid.grid--1-col-mobile > .grid__item {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}

/* ------------------------------------------------------------
   BÖLÜM 5b — DİĞER ÜRÜN IZGARALARI (ana sayfa, öneriler)
   Aynı uygulama kuralı ana sayfadaki ızgaraları da 1180px /
   %20 sütuna sıkıştırıyor. Burada kuralı nötrleriz; tema kendi
   grid--*-col-tablet / grid--*-col-desktop sınıflarını kullanır.
   Slider'lar (mobil kaydırmalı bölümler) hariç tutulur.
   Koleksiyon ızgarası BÖLÜM 5'teki #product-grid kuralıyla
   yönetilir (id seçicisi daha spesifiktir, o kazanır).
   ------------------------------------------------------------ */

.product-grid.grid:not(.slider) {
  max-width: none !important;
}

.product-grid.grid:not(.slider) > .grid__item {
  flex-basis: auto !important;
  max-width: none !important;
}

/* ============================================================
   BÖLÜM 6 — FİLTRE / SIRALAMA / SAYFALAMA KONTROLLERİ
   ------------------------------------------------------------
   Tema `colors_accent` (#faeaa1) açık sarıyı buton rengi olarak
   kullanıyor; ancak asıl CTA'lar (SEPETE EKLE, İNCELE) siyah/beyaz.
   Sarı sadece filtre, sayfalama ve sepet rozetinde kalıyor ve
   kazara eklenmiş gibi duruyor.

   NOT: Sarıyı tamamen kaldırmak isterseniz tek değişiklik yeterli:
   config/settings_data.json -> "colors_accent"
   Bu blok yalnızca koleksiyon sayfası kontrollerini kapsar.
   ============================================================ */

.facets__open,
.mobile-facets__open,
.facets__form button.button,
.mobile-facets__footer button.button,
.facets-vertical .facets__open {
  background: #fff !important;
  color: #1a1a1a !important;
  border: 1px solid #1a1a1a !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  transition: background .2s, color .2s;
}

.facets__open:hover,
.mobile-facets__open:hover,
.facets__form button.button:hover,
.mobile-facets__footer button.button:hover {
  background: #1a1a1a !important;
  color: #fff !important;
}

/* Sıralama açılır menüsü ile aynı yükseklik/hiza */
.facet-filters__field select,
.facets__summary {
  border-radius: 0 !important;
}

/* Sayfalama: aktif sayfa sarı yerine siyah */
.pagination__item--current,
.pagination__item[aria-current="page"] {
  background: #1a1a1a !important;
  color: #fff !important;
  border-radius: 0 !important;
}

/* ============================================================
   BÖLÜM 7 — SEPET ÇEKMECESİ (cart drawer) KATMAN HATALARI
   ------------------------------------------------------------
   HATA 1: `sticky-header` ve duyuru çubuğu (`.announcement-bar`)
   ikisi de z-index:30. Eşitlikte DOM sırası kazanır ve duyuru
   çubuğu sonra geldiği için çekmecenin ÜSTÜNE çiziliyordu.
   Çekmecenin kendi z-index:100 değeri sticky-header'ın yığın
   bağlamı (stacking context) içinde hapsolduğu için yetmiyor.
   Çözüm: çekmece açıkken başlık bölümünü yukarı al.

   HATA 2: masaüstünde öneriler paneli z-index:-1 ile
   tanımlanmış; sayfa içeriği panelin içinden görünüyordu.
   ============================================================ */

body:has(.cart-drawer-container[open]) sticky-header.header-wrapper,
body:has(.cart-drawer-container[open]) .header-wrapper,
.mini-cart--open sticky-header.header-wrapper,
.mini-cart--opening sticky-header.header-wrapper,
.mini-cart--open .header-wrapper,
.mini-cart--opening .header-wrapper {
  z-index: 101 !important;
}

/* Duyuru çubuğunu çekmece açıkken geri plana al (ikinci güvence) */
body:has(.cart-drawer-container[open]) .announcement-bar,
.mini-cart--open .announcement-bar,
.mini-cart--opening .announcement-bar {
  z-index: 1 !important;
}

@media screen and (min-width: 750px) {
  .cart-drawer .cart-recommendations {
    z-index: 1 !important;
  }
}

/* Toplam satırı dar ekranlarda taşmasın */
.mini-cart .totals,
.mini-cart .subtotal {
  gap: 1.2rem;
  flex-wrap: nowrap;
}

.mini-cart .subtotal > *:last-child {
  white-space: nowrap;
  text-align: right;
}

/* ============================================================
   BÖLÜM 8 — MOBİL KART METİNLERİ (fiyat üst üste binmesi)
   ------------------------------------------------------------
   .price `display:flex` ve `flex-wrap` tanımsız. Fiyat aralığı
   (ör. "2,726.36TL – 4,900.00TL") 2 sütunlu mobil ızgarada
   ~170px'e sığmadığı için satır kaydıramıyor ve taşıyor/üst üste
   biniyor. Ayırıcı tire ikinci price-money'nin ::before'u.

   Çözüm: mobilde fiyatın satır kaydırmasına izin ver, her tutarı
   kendi içinde bölünmez tut, 2 sütunda punto biraz küçült.
   ============================================================ */

@media screen and (max-width: 749px) {
  .card-information .price {
    flex-wrap: wrap;
    row-gap: 0.2rem;
    column-gap: 0.4rem;
  }

  .card-information .price price-money,
  .card-information .price bdi {
    white-space: nowrap;
  }

  .card-information .price .price-item {
    display: inline;
  }

  /* 2 sütunlu mobil ızgarada fiyat puntosunu düşür */
  .product-grid:not(.grid--1-col-mobile) .card-information .price bdi {
    font-size: calc(var(--font-price-scale) * 1.5rem);
    letter-spacing: 0.04em;
  }

  /* Uzun başlıklar ("Askılar - Parliament") kartı taşırmasın */
  .card-information__wrapper {
    min-width: 0;
  }

  .card-information .card-information__text {
    overflow-wrap: anywhere;
  }

  /* Sosyal kanıt satırı dar kartta düzgün sarsın */
  .card--product .urun-sosyal-kanit {
    flex-wrap: wrap;
  }
}

/* ============================================================
   BÖLÜM 9 — SEPETTE "ÖZELLEŞTİRMEYİ DÜZENLE" BAĞLANTISI
   ============================================================ */

.bnh-line-edit {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a1a1a;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  padding-bottom: 1px;
}

.bnh-line-edit:hover {
  opacity: 0.6;
}

/* ============================================================
   BÖLÜM 10 — SEPET ÖNERİLERİ BAŞLIĞI SIĞMIYOR
   ------------------------------------------------------------
   .cart-recommendations .title `white-space:nowrap` + 0.3rem
   letter-spacing ile tanımlı ve absolute konumlu. 320px'lik
   masaüstü öneri panelinde "BUNLARI DA BEĞENEBİLİRSİNİZ"
   (27 karakter) sığmıyor ve kesiliyor.
   ============================================================ */

/* NOT: component-cart-recommendations.css bölüm içinden (body) yüklendiği
   için bnh-ozel.css'ten SONRA geliyor. Aynı spesifiklikte kaynak sırası
   kazanıyor; bu yüzden burada spesifiklik yükseltilip !important kullanıldı. */
.cart-drawer .cart-recommendations .title,
.mini-cart .cart-recommendations .title,
.cart-recommendations .title {
  white-space: normal !important;
  letter-spacing: 0.1em !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  max-width: calc(100% - 3rem) !important;
  text-align: start !important;
  overflow-wrap: anywhere;
}

/* ============================================================
   BÖLÜM 11 — LÜKS DEĞİŞKENLER (tüm BNH bölümlerinde ortak)
   ------------------------------------------------------------
   Tek bir yerden yönetilen marka tokenları. Buradaki değerleri
   değiştirmek aşağıdaki tüm bölümleri birlikte günceller.
   ============================================================ */
:root {
  --nb-ink: #1a1b18;
  --nb-ink-soft: #5c5f5a;
  --nb-ink-faint: #8d8f89;
  --nb-rule: #e4e0d8;
  --nb-rule-soft: #efece5;
  --nb-paper: #ffffff;
  --nb-paper-warm: #faf8f4;
  --nb-brass: #c9a96e;
  --nb-brass-deep: #a8853f;
  --nb-label: 0.155em; /* mikro etiket harf aralığı */
}

/* Ortak mikro etiket — büyük harf, geniş aralık, ince */
.nb-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink-faint);
  line-height: 1.4;
}

/* ============================================================
   BÖLÜM 12 — GÜVEN ŞERİDİ (footer üstü)
   ------------------------------------------------------------
   Dört sütun, ince çizgilerle ayrılmış. Mobilde 2x2.
   ============================================================ */
.nb-assurance {
  border-top: 1px solid var(--nb-rule);
  background: var(--nb-paper-warm);
}
.nb-assurance__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-assurance__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px;
  border-inline-start: 1px solid var(--nb-rule);
}
.nb-assurance__item:first-child { border-inline-start: 0; }
.nb-assurance__icon {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  color: var(--nb-brass-deep);
  margin-top: 1px;
}
.nb-assurance__icon svg { width: 100%; height: 100%; display: block; }
.nb-assurance__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.nb-assurance__title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
  line-height: 1.3;
}
.nb-assurance__text {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nb-ink-soft);
}

@media screen and (max-width: 989px) {
  .nb-assurance__list { grid-template-columns: repeat(2, 1fr); }
  .nb-assurance__item { padding: 20px 16px; }
  .nb-assurance__item:nth-child(odd) { border-inline-start: 0; }
  .nb-assurance__item:nth-child(n + 3) { border-top: 1px solid var(--nb-rule); }
}
@media screen and (max-width: 480px) {
  .nb-assurance__item { gap: 10px; padding: 18px 10px; }
  .nb-assurance__icon { width: 22px; height: 22px; }
  .nb-assurance__text { font-size: 11.5px; }
}

/* ============================================================
   BÖLÜM 13 — FOOTER: BÜLTEN VE ÖDEME İKONLARI
   ------------------------------------------------------------
   Tema formu hazırdı, yalnızca kapalıydı. Burada lüks bir
   görünüme çekiliyor: alt çizgili tek satır alan + siyah buton.
   ============================================================ */

/* Başlıklar */
.footer .accordion__title,
.footer-block--newsletter .accordion__title {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
}

.footer-block--newsletter .footer-block__details-content { max-width: 420px; }

/* Bülten açıklaması */
.footer__newsletter + .footer__newsletter-text,
.footer-block__newsletter .rte p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--nb-ink-soft);
}

/* Alan: kutu yerine alt çizgi */
.footer__newsletter .field { position: relative; }
.footer__newsletter .field__input {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--nb-rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 12px 0 !important;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--nb-ink);
  transition: border-color 0.25s ease;
}
.footer__newsletter .field__input::placeholder { color: var(--nb-ink-faint); }
.footer__newsletter .field__input:focus,
.footer__newsletter .field__input:focus-visible {
  border-bottom-color: var(--nb-brass-deep) !important;
  outline: none !important;
}
.footer__newsletter .field:after,
.footer__newsletter .field:before { display: none !important; }

/* Gönder butonu */
.footer__newsletter .newsletter-form__button {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  min-width: 44px;
  color: var(--nb-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.footer__newsletter .newsletter-form__button:hover { color: var(--nb-brass-deep); }
.footer__newsletter .newsletter-form__button .icon { width: 16px; height: 16px; }

/* Ödeme ikonları — gri hatlı, hover'da renkli */
.footer__payment { margin-top: 0; }
.footer__payment .list-payment {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.footer__payment .list-payment__item {
  padding: 0;
  display: flex;
  align-items: center;
}
.footer__payment .list-payment__item svg {
  height: 24px;
  width: auto;
  border: 1px solid var(--nb-rule-soft);
  border-radius: 3px;
  opacity: 0.75;
  filter: saturate(0.15);
  transition: opacity 0.2s ease, filter 0.2s ease;
}
.footer__payment .list-payment__item:hover svg { opacity: 1; filter: none; }

@media screen and (max-width: 749px) {
  .footer__payment .list-payment { justify-content: center; }
}

/* Footer bağlantıları — sakin, brass hover */
.footer .list-menu__item--link,
.footer .copyright__content a {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--nb-ink-soft);
  transition: color 0.2s ease;
}
.footer .list-menu__item--link:hover,
.footer .copyright__content a:hover { color: var(--nb-brass-deep); }

/* ============================================================
   BÖLÜM 14 — KIRINTI NAVİGASYONU (breadcrumbs)
   ------------------------------------------------------------
   Başlığın hemen altında, tek satır. Sessiz kalır: küçük punto,
   geniş harf aralığı, yalnızca aktif sayfa koyu.
   ============================================================ */
.nb-crumbs {
  border-bottom: 1px solid var(--nb-rule-soft);
  background: var(--nb-paper);
}
.nb-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 8px;
  list-style: none;
  margin: 0;
  padding: 13px 0;
}
.nb-crumbs__item { display: inline-flex; align-items: center; min-width: 0; }
.nb-crumbs__link,
.nb-crumbs__current {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  line-height: 1.4;
  white-space: nowrap;
}
.nb-crumbs__link {
  color: var(--nb-ink-faint);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nb-crumbs__link:hover { color: var(--nb-brass-deep); }
.nb-crumbs__current {
  color: var(--nb-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 46ch;
}
.nb-crumbs__sep { color: var(--nb-rule); font-size: 10px; }

/* Ürün sayfasında başlık bloğu zaten üstte boşluk bırakıyor */
.nb-crumbs + #MainContent .product { padding-top: 0; }

@media screen and (max-width: 749px) {
  .nb-crumbs__list { padding: 10px 0; }
  .nb-crumbs__link, .nb-crumbs__current { font-size: 10px; }
  .nb-crumbs__current { max-width: 22ch; }
}

/* ============================================================
   BÖLÜM 15 — 404 SAYFASI
   ------------------------------------------------------------
   Çıkmaz sokak yerine yön veren bir sayfa: arama, koleksiyon
   bağlantıları ve öneriler. Editoryal, geniş boşluklu düzen.
   ============================================================ */
.nb-404 { padding: clamp(48px, 8vw, 96px) 0 clamp(56px, 9vw, 110px); }

.nb-404__hero {
  max-width: 620px;
  margin: 0 auto clamp(48px, 7vw, 84px);
  text-align: center;
}
.nb-404__code {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--nb-brass-deep);
  margin: 0 0 18px;
}
.nb-404__title {
  font-size: clamp(26px, 4.2vw, 42px);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: 0.01em;
  color: var(--nb-ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.nb-404__text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--nb-ink-soft);
  margin: 0 auto 34px;
  max-width: 46ch;
}

/* Arama alanı */
.nb-404__search {
  position: relative;
  max-width: 440px;
  margin: 0 auto;
}
.nb-404__search-input {
  width: 100%;
  height: 52px;
  padding: 0 52px 0 18px;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--nb-ink);
  background: var(--nb-paper);
  border: 1px solid var(--nb-rule);
  border-radius: 0;
  transition: border-color 0.25s ease;
  -webkit-appearance: none;
  appearance: none;
}
.nb-404__search-input::placeholder { color: var(--nb-ink-faint); }
.nb-404__search-input:focus,
.nb-404__search-input:focus-visible {
  outline: none;
  border-color: var(--nb-ink);
}
.nb-404__search-button {
  position: absolute;
  inset-inline-end: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  color: var(--nb-ink-soft);
  cursor: pointer;
  transition: color 0.2s ease;
}
.nb-404__search-button:hover { color: var(--nb-brass-deep); }
.nb-404__search-button svg { width: 18px; height: 18px; }

/* Bloklar */
.nb-404__block {
  border-top: 1px solid var(--nb-rule-soft);
  padding-top: 26px;
  margin-bottom: clamp(40px, 6vw, 68px);
}
.nb-404__eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink-faint);
  margin: 0 0 22px;
}

/* Koleksiyon bağlantıları */
.nb-404__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-404__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--nb-rule);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-ink);
  text-decoration: none;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.nb-404__link:hover { border-color: var(--nb-ink); color: var(--nb-brass-deep); }

/* Ürün önerileri */
.nb-404__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-404__card-link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}
.nb-404__card-media {
  display: block;
  overflow: hidden;
  background: var(--nb-paper-warm);
  aspect-ratio: 4 / 5;
}
.nb-404__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.nb-404__card-link:hover .nb-404__card-media img { transform: scale(1.035); }
.nb-404__card-title {
  font-size: 12.5px;
  letter-spacing: 0.05em;
  color: var(--nb-ink);
  line-height: 1.4;
}
.nb-404__card-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12.5px;
  color: var(--nb-ink-soft);
  font-variant-numeric: tabular-nums;
}
.nb-404__price-now { color: var(--nb-ink); }
.nb-404__price-was { color: var(--nb-ink-faint); font-size: 11.5px; }

/* Alt bölüm */
.nb-404__foot {
  border-top: 1px solid var(--nb-rule-soft);
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
}
.nb-404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 38px;
  background: var(--nb-ink);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--nb-ink);
  transition: background 0.22s ease, color 0.22s ease;
}
.nb-404__cta:hover { background: transparent; color: var(--nb-ink); }
.nb-404__contact { font-size: 12.5px; color: var(--nb-ink-faint); margin: 0; }

@media screen and (max-width: 989px) {
  .nb-404__grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .nb-404__card-media img { transition: none; }
}

/* Ödeme yöntemleri — Shopify ikon üretmediğinde metin rozetleri */
.nb-paylist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nb-paylist__item {
  border: 1px solid var(--nb-rule);
  padding: 5px 11px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--nb-ink-soft);
  white-space: nowrap;
  line-height: 1.4;
}
@media screen and (max-width: 749px) {
  .nb-paylist { justify-content: center; }
}

/* ============================================================
   BÖLÜM 16 — MARKA SAYFALARI (Hakkımızda, SSS, Kargo, İletişim)
   ------------------------------------------------------------
   Editoryal ölçek: dar satır genişliği, geniş boşluk, ince
   çizgiler, brass vurgular. Yalnızca sayfa şablonlarında geçerli.
   ============================================================ */
.template-page .rich-text__blocks,
.template-page .faq,
.template-page .contact { --nb-measure: 62ch; }

/* Üst etiket (subheading) — mikro etiket görünümü */
.template-page .rich-text__subheading,
.template-page .image-with-text__subheading {
  font-size: 10px !important;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--nb-brass-deep) !important;
  margin-bottom: 14px;
}

/* Başlıklar */
.template-page .rich-text__heading,
.template-page .image-with-text__heading {
  font-weight: 300;
  letter-spacing: 0.005em;
  line-height: 1.14;
  text-wrap: balance;
}

/* Gövde metni — okunur ölçü */
.template-page .rich-text__text,
.template-page .image-with-text__text {
  max-width: var(--nb-measure);
}
.template-page .rich-text__text p,
.template-page .image-with-text__text p {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--nb-ink-soft);
}
.template-page .rich-text__text p + p,
.template-page .image-with-text__text p + p { margin-top: 1.1em; }

.template-page .rte a,
.template-page .rich-text__text a {
  color: var(--nb-ink);
  text-decoration: underline;
  text-decoration-color: var(--nb-brass);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.template-page .rte a:hover,
.template-page .rich-text__text a:hover { color: var(--nb-brass-deep); }

/* Çok sütunlu değer bloğu — kart değil, çizgiyle ayrılmış sütun */
.template-page .multicolumn-card,
.template-page .multicolumn-list__item .multicolumn-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--nb-ink);
  padding-top: 18px;
}
.template-page .multicolumn-card__info { padding: 0; }
.template-page .multicolumn-card__info h3,
.template-page .multicolumn-card__info .h4 {
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
  margin-bottom: 10px;
}
.template-page .multicolumn-card__info p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--nb-ink-soft);
}

/* SSS akordeonu — hairline satırlar, brass artı işareti */
.template-page .faq .accordion,
.template-page .faq details {
  border: 0;
  border-bottom: 1px solid var(--nb-rule);
  background: transparent;
  border-radius: 0;
  margin: 0;
}
.template-page .faq summary {
  padding: 20px 0;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.template-page .faq summary .accordion__title,
.template-page .faq summary h3,
.template-page .faq summary .h4 {
  font-size: 15px !important;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--nb-ink);
  line-height: 1.45;
  margin: 0;
}
.template-page .faq details[open] summary .accordion__title,
.template-page .faq details[open] summary h3 { color: var(--nb-brass-deep); }
.template-page .faq summary .icon-caret,
.template-page .faq summary .icon { color: var(--nb-ink-faint); flex: 0 0 auto; }
.template-page .faq .accordion__content {
  padding: 0 0 22px;
  max-width: var(--nb-measure);
}
.template-page .faq .accordion__content p {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--nb-ink-soft);
}

/* İletişim kartları */
.template-page .contact__info-item,
.template-page .contact-info__item {
  border-top: 1px solid var(--nb-rule);
  padding-top: 16px;
}
.template-page .contact h3,
.template-page .contact .h4 {
  font-size: 10.5px !important;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink-faint);
}

/* Form alanları — alt çizgili, sakin */
.template-page .contact .field__input,
.template-page .contact .select__select,
.template-page .contact textarea {
  border-radius: 0;
  border-color: var(--nb-rule);
  font-size: 14px;
}
.template-page .contact .field__input:focus,
.template-page .contact textarea:focus { border-color: var(--nb-ink); }

/* Sayfa butonları — siyah dolgu, geniş harf aralığı */
.template-page .button:not(.button--tertiary) {
  border-radius: 0;
  min-height: 50px;
  padding-inline: 34px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================================
   BÖLÜM 17 — DOKUNMA HEDEFLERİ (mobil)
   ------------------------------------------------------------
   Denetimde ürün sayfasında 40px altında 36 etkileşimli öğe
   bulundu. Apple/Google rehberi 44px. Görsel boyut korunur,
   dokunma alanı ::after ile büyütülür.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
  .product-form__input label,
  .product-form__input .swatch,
  .po-option__value,
  .po-option__button-media,
  .po-option__swatch-media,
  .pagination__item,
  .facets__label,
  .header__icon,
  .footer .list-menu__item--link,
  .nb-crumbs__link {
    position: relative;
  }
  .product-form__input label::after,
  .po-option__button-media::after,
  .po-option__swatch-media::after,
  .pagination__item::after,
  .facets__label::after,
  .footer .list-menu__item--link::after,
  .nb-crumbs__link::after {
    content: "";
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
  /* Alt çizgi/kenarlık gösteren öğelerde görsel bozulmayı önle */
  .product-form__input label::after,
  .po-option__button-media::after,
  .po-option__swatch-media::after { background: transparent; border: 0; }
}


/* ============================================================
   BÖLÜM 18 — YAPIŞKAN SEPET ÇUBUĞU
   ------------------------------------------------------------
   Ürün sayfasında "Sepete ekle" ekranın ~1.7 boyu aşağıda kalıyor
   (harf seçimi, kese rengi, not alanı ve aksesuarlar arada).
   Çubuk her kaydırmada satın alma butonunu erişilebilir tutuyor.
   ============================================================ */
.product-sticky-cart {
  border-top: 1px solid var(--nb-rule);
}
.product-sticky-cart::after { display: none; } /* dağınık gölge halkası */

.sticky-cart {
  align-items: center;
  padding-top: 12px;
  padding-bottom: 12px;
}
.sticky-cart__content-heading .h4 {
  font-size: 13px !important;
  letter-spacing: 0.06em !important;
  text-transform: none !important;
}
.sticky-cart__content-heading .price {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.sticky-cart__form .button {
  border-radius: 0;
  min-height: 46px;
  padding-inline: 28px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sticky-cart__content-image img { border-radius: 0; }

/* Mobilde alt dock'un üstüne otur; masaüstünde dock zaten yok */
@media screen and (max-width: 749px) {
  .product-sticky-cart {
    bottom: var(--mobile-dock-height, 0px);
  }
  .sticky-cart {
    column-gap: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .sticky-cart__form .button {
    min-height: 44px;
    padding-inline: 18px;
    font-size: 10.5px;
    letter-spacing: 0.12em;
  }
}

/* WhatsApp balonu satın alma butonunun üstüne binmesin */
.template-product animate-sticky[animate] ~ * [class*="whatsapp"],
.template-product animate-sticky[animate] ~ div[id*="whatsapp"],
.template-product animate-sticky[animate] ~ div[class*="wa-"] {
  bottom: 92px !important;
}

/* Çubuktaki renk seçici 12 varyantla 225px'e çıkıp ekranın dörtte birini
   kaplıyordu. Tek satırda, yatay kaydırmalı hâle getiriliyor. */
.sticky-cart__form .product-form__buttons {
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.sticky-cart__form variant-selects,
.sticky-cart__form variant-radios {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  max-height: 46px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  min-width: 0;
  flex: 1 1 auto;
}
.sticky-cart__form variant-selects::-webkit-scrollbar,
.sticky-cart__form variant-radios::-webkit-scrollbar { display: none; }
.sticky-cart__form .product-form__input {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
  flex: 0 0 auto;
}
.sticky-cart__form .product-form__input > legend,
.sticky-cart__form .product-form__input .form__label { display: none !important; }
.sticky-cart__form .product-form__input label,
.sticky-cart__form .product-form__input .swatch {
  flex: 0 0 auto;
  margin: 0 !important;
}
.sticky-cart__form .product-form__submit { flex: 0 0 auto; }

/* Ürün adı çubukta tek satır kalsın */
.sticky-cart__content-heading .h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}

/* Buton flex içinde esneyip 195px'e uzuyordu; sabitleniyor. */
.sticky-cart__form .product-form__buttons {
  height: 46px;
  max-height: 46px;
}
.sticky-cart__form .product-form__submit,
.sticky-cart__form .product-form__submit.button {
  height: 46px !important;
  max-height: 46px !important;
  min-height: 46px !important;
  align-self: center;
  flex: 0 0 auto;
}
.sticky-cart__form .product-form__submit .icon {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}
.sticky-cart { max-height: 74px; }
.sticky-cart__content-image,
.sticky-cart__content-image img { height: 50px; width: 50px; object-fit: cover; }
@media screen and (max-width: 749px) {
  .sticky-cart { max-height: 62px; }
  .sticky-cart__form .product-form__buttons,
  .sticky-cart__form .product-form__submit,
  .sticky-cart__form .product-form__submit.button {
    height: 44px !important; max-height: 44px !important; min-height: 44px !important;
  }
  .sticky-cart__form variant-selects,
  .sticky-cart__form variant-radios { max-height: 44px; }
}

/* ============================================================
   BÖLÜM 19 — GÜVENCE SATIRI (ana sayfa)
   ------------------------------------------------------------
   Tema dışı bir uygulama stylesheet'i `.grid__item` üzerine
   flex-basis/max-width: 20% koyuyor. Güvence bölümünde dış
   sarmalayıcı da bir .grid__item olduğu için tüm liste sayfanın
   %20'sine sıkışıp kelime kelime alt alta iniyordu.
   ============================================================ */
.guarantees .grid > .grid__item--full-width,
.guarantees .grid > slider-component.grid__item {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}
.guarantees ul.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0;
  padding: 0;
  border-inline-start: 1px solid var(--nb-rule);
}
.guarantees ul.grid > .grid__item {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-inline-end: 1px solid var(--nb-rule);
}
.guarantees .guarantee__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 22px;
  height: 100%;
}
.guarantees .guarantee__icon svg,
.guarantees .guarantee__icon img {
  width: 26px;
  height: 26px;
  color: var(--nb-brass-deep);
}
.guarantees .guarantee__title,
.guarantees .guarantee__item h3,
.guarantees .guarantee__item .h4 {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
  margin: 0;
  line-height: 1.35;
}
.guarantees .guarantee__item .rte,
.guarantees .guarantee__item p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--nb-ink-soft);
  margin: 0;
  max-width: 26ch;
}

@media screen and (max-width: 989px) {
  .guarantees ul.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guarantees ul.grid > .grid__item:nth-child(n + 3) { border-top: 1px solid var(--nb-rule); }
  .guarantees .guarantee__item { padding: 20px 14px; }
}

/* Bölüm ayarındaki colors_icon varsayılanı beyaz olduğu için ikonlar
   neredeyse görünmüyordu. */
.guarantees .guarantee__icon svg,
.guarantees .guarantee__icon svg * {
  color: var(--nb-brass-deep) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
  opacity: 1 !important;
}
.guarantees .guarantee__icon svg [fill="none"] { fill: none !important; }

/* ============================================================
   BÖLÜM 20 — GÖRSEL + METİN BÖLÜMLERİ
   ------------------------------------------------------------
   BÖLÜM 19'daki aynı uygulama kuralı (.grid__item %20) burada da
   vuruyordu: görsel sütunu 278px'e iniyor, metin kelime kelime
   alt alta diziliyordu.
   ============================================================ */
.image-with-text > .grid,
.image-with-text.grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 0;
}
.image-with-text > .grid > .grid__item,
.image-with-text > .grid__item {
  flex: none !important;
  max-width: none !important;
  width: auto !important;
  min-width: 0;
}
.image-with-text .image-with-text__content {
  max-width: 52ch;
  padding: clamp(24px, 4vw, 56px);
}
.image-with-text .image-with-text__content > * { max-width: 100%; }

@media screen and (max-width: 749px) {
  .image-with-text > .grid,
  .image-with-text.grid { grid-template-columns: minmax(0, 1fr); }
  .image-with-text .image-with-text__content { padding: 24px 0; }
}

/* ============================================================
   BÖLÜM 21 — KOLEKSİYON KARTLARI (ana sayfa)
   ------------------------------------------------------------
   Görsellerin üzerinde markanın kendi İngilizce başlığı zaten
   basılı. Tema ayrıca Türkçe adı yazıyor; iki başlık üst üste
   gelmesin diye Türkçe etiket alta, ince bir şeride alınıyor.
   ============================================================ */
.card--collection .card__content,
.card--collection .card__information {
  padding: 0;
}
.card--collection .card__heading,
.card--collection .card__heading a {
  font-size: 11px !important;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.card-wrapper .card--collection .card__inner + .card__content .card__heading {
  color: var(--nb-ink);
}
/* Karartma katmanını yumuşat: fotoğraf griye boğulmasın */
.card--collection .card__inner:after,
.card--collection .media:after {
  background: linear-gradient(to bottom, rgba(0,0,0,0) 45%, rgba(0,0,0,0.42) 100%) !important;
}

/* ============================================================
   BÖLÜM 22 — AÇILIŞ ANİMASYONU GÜVENLİK AĞI
   ------------------------------------------------------------
   use-animate öğeleri opacity:0 ile başlıyor ve görünürlük
   gözlemcisi tetiklenmezse içerik kalıcı olarak görünmez kalıyor.
   JS tarafına da bir zaman aşımı eklendi; bu kural son savunma:
   1.5 saniye sonra her şey görünür olur. Hiçbir görsel kaybolmasın.
   ============================================================ */
@keyframes nb-reveal { to { opacity: 1; transform: none; } }

use-animate:not([animate]),
use-animate:not([animate]) img,
.image-animate:not([animate]) img {
  animation: nb-reveal 0.01s linear 1.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
  use-animate:not([animate]),
  use-animate:not([animate]) img,
  .image-animate:not([animate]) img {
    opacity: 1 !important;
    transform: none !important;
    animation: none;
  }
}

/* ============================================================
   BÖLÜM 23 — SEPET SSS
   ------------------------------------------------------------
   Stil, bölümün kendi <style> etiketinden buraya taşındı ve
   sitenin geri kalanıyla aynı dile getirildi: bej kutu ve altın
   sol çizgi yerine ince ayraçlar, brass yalnızca +/- işaretinde.
   ============================================================ */
.nb-sss {
  margin: 28px 0 4px;
  border-top: 1px solid var(--nb-rule);
}
.nb-sss details {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--nb-rule-soft);
  border-radius: 0;
  margin: 0;
}
.nb-sss summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 13px 0;
  font-size: 13.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--nb-ink);
  line-height: 1.45;
}
.nb-sss summary::-webkit-details-marker { display: none; }
.nb-sss summary::after {
  content: "+";
  flex: 0 0 auto;
  font-size: 15px;
  line-height: 1;
  color: var(--nb-brass-deep);
  transition: transform 0.22s ease;
}
.nb-sss details[open] summary { color: var(--nb-brass-deep); }
.nb-sss details[open] summary::after { transform: rotate(45deg); }
.nb-sss .nb-cevap {
  padding: 0 0 16px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--nb-ink-soft);
  max-width: 62ch;
}
.nb-sss .nb-cevap a {
  color: var(--nb-ink);
  text-decoration: underline;
  text-decoration-color: var(--nb-brass);
  text-underline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .nb-sss summary::after { transition: none; }
}

/* ============================================================
   BÖLÜM 24 — SAĞ ALT YÜZEN ÖĞELER
   ------------------------------------------------------------
   WhatsApp balonu, geri-yukarı oku ve yapışkan sepet çubuğu
   hepsi sağ alt köşeye sabitleniyor ve üst üste biniyordu.
   Balon yukarı alınıyor; mobilde alt dock ve yapışkan çubuk
   varken daha da yukarı çıkıyor.
   ============================================================ */
:root { --nb-float-gap: 24px; }

[class*="whatsapp"][class*="float"],
[id*="whatsapp"][class*="float"],
.wa-widget, .wa__floating_chat_box, .whatsapp-chat-widget,
#whatsapp-chat-widget, .wtz-widget, [class*="whatzi"] {
  z-index: 90 !important;
  bottom: var(--nb-float-gap) !important;
}

/* Ürün sayfasında yapışkan sepet çubuğu açıkken balonu kaldır */
.template-product .wa-widget,
.template-product [class*="whatzi"],
.template-product .whatsapp-chat-widget,
.template-product [class*="whatsapp"][class*="float"] {
  bottom: calc(var(--nb-float-gap) + 78px) !important;
}

/* Mobilde alt dock da var */
@media screen and (max-width: 749px) {
  :root { --nb-float-gap: 16px; }
  .wa-widget, [class*="whatzi"], .whatsapp-chat-widget,
  [class*="whatsapp"][class*="float"] {
    bottom: calc(var(--mobile-dock-height, 56px) + 16px) !important;
  }
  .template-product .wa-widget,
  .template-product [class*="whatzi"],
  .template-product .whatsapp-chat-widget,
  .template-product [class*="whatsapp"][class*="float"] {
    bottom: calc(var(--mobile-dock-height, 56px) + 74px) !important;
  }
}

/* Geri-yukarı oku balonun soluna geçsin */
.back-to-top, [class*="scroll-to-top"], [class*="back-to-top"] {
  z-index: 89 !important;
  inset-inline-end: 88px !important;
}

/* ============================================================
   BÖLÜM 25 — ANA SAYFA MÜŞTERİ YORUMLARI (Judge.me)
   ------------------------------------------------------------
   Uygulamanın "testimonials carousel" bloğu tek seferde tek kart
   gösteriyordu. Mağazadaki yorumların neredeyse tamamı yalnızca
   yıldızlı (yazısız) olduğu için o tek kart 318px'lik boş gri bir
   kutu olarak kalıyordu.

   Kartlar mutlak konumdan çıkarılıp bir ızgaraya alındı: aynı alan
   artık 8 doğrulanmış yorumla doluyor. Karusel oklarına gerek
   kalmadı. Yorum metni olan kayıtlar geldiğinde .jdgm-text içinde
   normal şekilde görünmeye devam eder.
   ============================================================ */

.jdgm-testimonials-carousel {
  max-width: 1180px;
  margin-inline: auto;
}

/* --- Başlık ve ortalama puan --- */
.jdgm-testimonials-carousel .jdgm-header {
  padding-bottom: 28px;
}
.jdgm-testimonials-carousel .jdgm-title {
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: 0.09em !important;
  color: var(--nb-ink) !important;
  margin-bottom: 12px !important;
}
.jdgm-testimonials-carousel .jdgm-header-info {
  gap: 18px;
  align-items: center;
}
.jdgm-testimonials-carousel .jdgm-rating-text {
  font-size: 12px !important;
  letter-spacing: var(--nb-label) !important;
  text-transform: uppercase;
  color: var(--nb-ink) !important;
}
.jdgm-testimonials-carousel .jdgm-verified-text {
  font-size: 11px !important;
  letter-spacing: var(--nb-label) !important;
  text-transform: uppercase;
  opacity: 0.65;
}
.jdgm-testimonials-carousel .jdgm-verified-badge-header svg {
  color: var(--nb-brass-deep);
  opacity: 0.9;
}
.jdgm-testimonials-carousel .jdgm-verified-badge-header svg path {
  fill: var(--nb-brass-deep) !important;
}
/* Ortalama puan künyesi bnh-reviews.js tarafından yeniden yazılıyor */
.jdgm-testimonials-carousel .jdgm-rating-star {
  display: none !important;
}

/* --- Karusel yerine ızgara --- */
.jdgm-testimonials-carousel .jdgm-content {
  display: block !important;
  height: auto !important;
}
.jdgm-testimonials-carousel .jdgm-testimonials-container {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  height: auto !important;
  background: var(--nb-rule);
  border: 1px solid var(--nb-rule);
}
.jdgm-testimonials-carousel .jdgm-carousel-item {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  transition: none !important;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
  padding: 30px 22px !important;
}
/* Masaüstünde iki sıra yeter. bnh-reviews.js sıralamayı devraldığında
   .nb-ready gelir ve gizleme .nb-hide üzerinden yapılır. */
.jdgm-testimonials-carousel .jdgm-testimonials-container:not(.nb-ready) .jdgm-carousel-item:nth-child(n + 9) {
  display: none !important;
}
.jdgm-testimonials-carousel .jdgm-carousel-item.nb-hide {
  display: none !important;
}

/* --- Kart içeriği --- */
.jdgm-testimonials-carousel .jdgm-card-content {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  text-align: center;
}
/* Süs tırnakları metinsiz kartlarda anlamsız kalıyor */
.jdgm-testimonials-carousel .jdgm-quote-marks {
  display: none !important;
}
/* Ürün adı: yazılı yorumlarda künye satırı, yazısızlarda gövdenin
   kendisi (uygulama gövdeye ürün adını basıyor), o yüzden çiftlenmesin */
.jdgm-testimonials-carousel .jdgm-product-name {
  display: none !important;
}
.jdgm-testimonials-carousel .nb-has-text .jdgm-product-name {
  display: block !important;
  order: 4;
  margin: 0 !important;
  font-size: 10px !important;
  letter-spacing: var(--nb-label) !important;
  text-transform: uppercase;
  color: var(--nb-brass-deep) !important;
  text-decoration: none !important;
}
/* Yazısız kartta gövde = ürün adı; künye gibi göster */
.jdgm-testimonials-carousel .nb-no-text .jdgm-text p {
  font-size: 11px !important;
  letter-spacing: var(--nb-label) !important;
  text-transform: uppercase;
  color: var(--nb-brass-deep) !important;
}
.jdgm-testimonials-carousel .jdgm-text {
  margin: 0 !important;
  order: 2;
}
.jdgm-testimonials-carousel .jdgm-text p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em;
  color: var(--nb-ink) !important;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jdgm-testimonials-carousel .jdgm-rating-section {
  order: 1;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
}
.jdgm-testimonials-carousel .jdgm-rating-section .jdgm-stars {
  order: 1;
  font-size: 13px !important;
}
.jdgm-testimonials-carousel .jdgm-reviewer-info {
  order: 3;
}
.jdgm-testimonials-carousel .jdgm-reviewer-name {
  font-size: 10.5px !important;
  letter-spacing: var(--nb-label) !important;
  text-transform: uppercase;
  color: var(--nb-ink) !important;
  opacity: 0.6;
  font-weight: 400 !important;
}
/* Yıldızlar pirinç tonunda */
.jdgm-testimonials-carousel .jdgm-star.jdgm--on,
.jdgm-testimonials-carousel .jdgm-star.jdgm--half {
  color: var(--nb-brass-deep) !important;
}
.jdgm-testimonials-carousel .jdgm-star.jdgm--off {
  color: var(--nb-rule) !important;
}

/* --- Oklar gerekmiyor --- */
.jdgm-testimonials-carousel .jdgm-arrows,
.jdgm-testimonials-carousel .jdgm-arrows--bottom,
.jdgm-testimonials-carousel .jdgm-arrow {
  display: none !important;
}

@media screen and (max-width: 989px) {
  .jdgm-testimonials-carousel .jdgm-testimonials-container {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .jdgm-testimonials-carousel .jdgm-testimonials-container:not(.nb-ready) .jdgm-carousel-item:nth-child(n + 7) {
    display: none !important;
  }
}
@media screen and (max-width: 749px) {
  .jdgm-testimonials-carousel .jdgm-testimonials-container {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jdgm-testimonials-carousel .jdgm-carousel-item {
    padding: 22px 14px !important;
  }
  .jdgm-testimonials-carousel .jdgm-testimonials-container:not(.nb-ready) .jdgm-carousel-item:nth-child(n + 5) {
    display: none !important;
  }
  .jdgm-testimonials-carousel .jdgm-title {
    margin-bottom: 10px !important;
  }
  .jdgm-testimonials-carousel .jdgm-header-info {
    flex-wrap: wrap;
    gap: 10px;
  }
}

/* ============================================================
   BÖLÜM 26 — MODEL ŞERİDİ (koleksiyon sayfaları)
   ------------------------------------------------------------
   Izgara her varyantı ayrı kart olarak basıyor. El Çantaları'nda
   6 model 48 karta çıkıyor ve aynı çanta arka arkaya tekrar
   ediyor. Şerit modelleri başa alıyor; seçilen modelin renkleri
   ızgarada kalıyor, geri kalanı gizleniyor.
   ============================================================ */
.bnh-models {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 28px;
  padding-top: 4px;
}
.bnh-models__track {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.bnh-models__track::-webkit-scrollbar {
  display: none;
}

/* --- tek model --- */
.bnh-models__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 96px;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  color: var(--nb-ink);
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.bnh-models__chip[hidden] {
  display: none !important;
}
.bnh-models__thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #f6f6f6;
}
/* Ürün görselleri kâh stüdyo kâh çekim; kare kırpma çantayı kesiyor,
   bu yüzden tamamı sığdırılıyor. */
.bnh-models__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
  mix-blend-mode: multiply;
  transition: transform 0.4s ease;
}
/* "Tümü" karesi */
.bnh-models__thumb--all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid var(--nb-rule);
  color: var(--nb-rule);
  transition: color 0.2s ease, border-color 0.2s ease;
}
.bnh-models__chip:hover .bnh-models__thumb--all,
.bnh-models__chip.is-active .bnh-models__thumb--all {
  color: var(--nb-brass-deep);
}
.bnh-models__name {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  text-align: center;
  color: var(--nb-ink);
  opacity: 0.5;
  transition: opacity 0.2s ease;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bnh-models__chip:hover .bnh-models__name { opacity: 0.85; }
.bnh-models__chip:hover .bnh-models__thumb img { transform: scale(1.04); }

.bnh-models__chip.is-active {
  border-bottom-color: var(--nb-brass-deep);
}
.bnh-models__chip.is-active .bnh-models__name {
  opacity: 1;
  color: var(--nb-ink);
}
.bnh-models__chip.is-active .bnh-models__thumb--all {
  border-color: var(--nb-brass-deep);
}
.bnh-models__chip:focus-visible {
  outline: 1px solid var(--nb-brass-deep);
  outline-offset: 3px;
}

/* --- oklar --- */
.bnh-models__nav {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -18px;
  width: 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--nb-ink);
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.bnh-models__nav:hover { opacity: 1; }
.bnh-models__nav[hidden] { display: none; }
.bnh-models__nav[disabled] {
  opacity: 0.15;
  cursor: default;
  pointer-events: none;
}

/* --- ızgarada gizlenen kartlar ---
   base.css'te `#ProductGridContainer li.grid__item { display: flex !important }`
   var. Kimlik seçicisi taşıdığı için sınıf tabanlı kural onu geçemiyor;
   aynı kimlikle yazılması şart. */
#ProductGridContainer li.grid__item.nb-model-hidden,
#product-grid li.grid__item.nb-model-hidden,
.grid__item.nb-model-hidden {
  display: none !important;
}

@media screen and (max-width: 749px) {
  .bnh-models {
    margin-bottom: 20px;
    gap: 0;
    /* şerit kenardan kenara aksın, sayfa payı kaymasın */
    margin-inline: 0;
  }
  .bnh-models__track {
    gap: 3px;
    padding-inline: 0;
  }
  .bnh-models__chip {
    width: 76px;
    gap: 7px;
    padding-bottom: 8px;
  }
  .bnh-models__name {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
  .bnh-models__nav { display: none; }
}

/* ============================================================
   BÖLÜM 27 — MOBİL MENÜ ÜSTÜNDEKİ DUYURU ŞERİDİ
   ------------------------------------------------------------
   Mobilde menüyü açınca siyah duyuru şeridi ("KAPIDA ÖDEME
   İMKANI") menünün ortasından geçiyordu.

   Sebep: .header-wrapper ve .announcement-bar'ın ikisi de
   z-index: 30. Bölüm sarmalayıcıları konumlandırılmadığı için
   ikisi doğrudan yarışıyor; duyuru şeridi DOM'da sonra geldiği
   için üstte kalıyor. Çekmecenin kendi z-index: 100 değeri işe
   yaramıyor, çünkü .header-wrapper'ın yığın bağlamının içinde
   sıkışıyor.

   Duyuru şeridi başlığın altında duruyor, yapışkan da değil;
   bir alt basamağa alınması güvenli.
   ============================================================ */
/* section-announcement-bar.css bölüm içinde, bu dosyadan SONRA
   yüklendiği için !important gerekiyor. */
announcement-bar .announcement-bar,
.announcement-bar {
  z-index: 10 !important;
}

/* Çekmece/arama/sepet açıkken başlık her hâlükârda en üstte */
.menu-drawer--open .header-wrapper,
.menu-drawer--opening .header-wrapper,
.menu-drawer--closing .header-wrapper,
.menu-mobile--open .header-wrapper,
.menu-mobile--opening .header-wrapper,
.menu-mobile--closing .header-wrapper,
.search-modal--open .header-wrapper,
.mini-cart--open .header-wrapper,
.mini-cart--opening .header-wrapper {
  z-index: 60 !important;
}

/* ============================================================
   BÖLÜM 28 — ÜRÜN GALERİSİ
   ------------------------------------------------------------
   Önceki hâl: masaüstünde 19 görsel tek tek, küçük görsel şeridi
   kapalı ve ok düğmeleri görünmezdi — yani gezinmenin hiçbir yolu
   yoktu. Mobilde ise 19 nokta vardı.

   templates/product.json'da açılanlar:
     show_thumbnails / show_mobile_thumbnails → küçük görsel şeridi
     hide_variants → galeri seçilen renge göre daralıyor
                     (19 kare yerine seçili renk + 7 ortak çekim)

   Burada şeridin ölçüsü ve markanın çizgisi ayarlanıyor.
   ============================================================ */

/* Şerit medya sütununun tamamını kullansın (tema 25.6rem ile
   sınırlıyordu, sekiz kare 270px'e sıkışıyordu). */
.thumbnail-list,
.thumbnail-list[data-media-count="2"],
.thumbnail-list[data-media-count="3"],
.thumbnail-list[data-media-count="4"],
.thumbnail-list.slider--tablet-up[data-media-count="2"],
.thumbnail-list.slider--tablet-up[data-media-count="3"] {
  max-width: 100% !important;
}
.thumbnail-slider .thumbnail-list {
  gap: 6px !important;
  padding-bottom: 2px;
}

@media screen and (min-width: 750px) {
  .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide,
  .thumbnail-list__item.slider__slide {
    width: 80px !important;
  }
  .product__media-wrapper .thumbnail-slider {
    margin-top: 10px;
  }
}
@media screen and (max-width: 749px) {
  .thumbnail-list__item.slider__slide {
    width: 64px !important;
  }
}

/* Kare, keskin köşeli, ince çerçeveli; seçili olan pirinç */
.thumbnail {
  border-radius: 0 !important;
}
.thumbnail::after {
  box-shadow: inset 0 0 0 1px var(--nb-rule) !important;
  border-radius: 0 !important;
}
.thumbnail[aria-current]::after {
  box-shadow: inset 0 0 0 1.5px var(--nb-brass-deep) !important;
}
.thumbnail img {
  border-radius: 0 !important;
}

/* Masaüstünde büyük görselin ok düğmeleri görünür olsun */
@media screen and (min-width: 990px) {
  .product__media-wrapper .slider-buttons .slider-button {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--nb-rule);
    border-radius: 0;
    color: var(--nb-ink);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .product__media-wrapper:hover .slider-buttons .slider-button {
    opacity: 1;
  }
  .product__media-wrapper .slider-buttons .slider-button[disabled] {
    opacity: 0 !important;
  }
}

/* Yapışkan medya sütunu: büyük görsel + şerit ekrana sığsın.
   Kare oranda görsel 700px'i buluyor, şeritle birlikte 780px'e
   çıkıyor ve küçük görseller dizüstü ekranlarda alt kenara
   yapışıyordu. */
@media screen and (min-width: 990px) {
  .product--thumbnail_slider .product__media-gallery {
    top: 16px;
  }
  /* Tema kareyi padding-bottom: 100% ile kuruyor; padding max-height
     ile sınırlanmadığı için önce yükseklik hesabını devralıyoruz. */
  .product--thumbnail_slider .product__media-list .media {
    padding-bottom: 0 !important;
    aspect-ratio: 1 / 1;
    height: auto;
    max-height: calc(100vh - 210px);
  }
  .product--thumbnail_slider .product__media-list .media img {
    object-fit: contain;
  }
}

/* Mobilde küçük görsel şeridi zaten parmakla kaydırılıyor; ok
   düğmesi ilk karenin üstüne biniyordu. */
@media screen and (max-width: 749px) {
  .thumbnail-slider .slider-button {
    display: none !important;
  }
}

/* ============================================================
   BÖLÜM 29 — GÖRSEL BÜYÜTME PENCERESİ
   ------------------------------------------------------------
   Ürün görseline tıklayınca açılan pencere iki yönden bozuktu:

   1) Tema her görseli `width: 100%` veriyor. Kare görseller
      ekran genişliği kadar YÜKSEK oluyor (1502px), üstelik
      görsel kutusu ekrandan biraz taşıp yatay kaydırma
      çıkarıyordu.
   2) Küçük görsel şeridinde uyguladığımız varyant eleme burada
      çalışmıyor: sınıf <img>'in kendisine basılıyor ve
      `:first-child` her görsel için doğru çıkıyor. Sonuç
      19 kare, 33.000 piksellik bir sütun.

   Artık bir görsel = bir ekran, yatay kaydırma yok, ve pencere
   de seçili rengi + ortak çekimleri gösteriyor.
   ============================================================ */

.product-media-modal__content {
  overflow-x: hidden;
}

.product-media-modal__content > * {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

/* Görsel kutusunun yüksekliğini ekrana sabitliyoruz; görsel
   tema tarafından kutuya mutlak konumla yerleştiği için
   yerleşimine dokunmuyoruz, yalnızca `contain` ile içine
   sığdırıyoruz (yoksa lazy-image yüklenmiyor). */
.product-media-modal__content .media {
  padding-bottom: 0 !important;
  height: var(--nb-lb-stage-h, min(calc(100svh - 24px), calc(100vh - 24px)));
  /* Ana görseller 1080px; bunun ötesine büyütmek yalnızca
     bulanıklaştırıyor. */
  max-width: min(100%, 1080px);
  margin-inline: auto;
  overflow: hidden;
}

.product-media-modal__content .media img {
  object-fit: contain !important;
}

/* Aynı modelin diğer renkleri pencerede tekrar etmesin; ilk
   (seçili) varyant kalsın, sonrakiler gizlensin. */
.product-media-modal__content .media-wrapper:has(img.product__media-item--variant)
  ~ .media-wrapper:has(img.product__media-item--variant) {
  display: none !important;
}

/* Pencerenin zemini ürün sayfasındaki gri fonla aynı olsun;
   görselin arkasında beyaz bir sütun görünmesin. */
.product-media-modal {
  background-color: #f6f6f6;
}
.product-media-modal__content .media-wrapper,
.product-media-modal__content .media {
  background: transparent !important;
}

/* ============================================================
   BÖLÜM 30 — BÜYÜTME PENCERESİ: SEÇİCİ
   ------------------------------------------------------------
   Pencere artık dikey bir yığın değil: tek seferde tek görsel,
   solda küçük görsel şeridi, iki yanda ok. (Mobilde şerit alta
   iner.) Davranış assets/bnh-lightbox.js içinde.

   Şerit kurulmadan önce (JS yetişmediyse) sayfa eski hâliyle,
   kaydırmalı olarak çalışmaya devam eder.
   ============================================================ */

.product-media-modal__content.nb-lb-stage {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Yalnızca seçili görsel sahnede */
.nb-lb-stage > .nb-lb-item {
  display: none !important;
}
.nb-lb-stage > .nb-lb-item.nb-lb-current {
  display: block !important;
}

/* --- küçük görsel şeridi --- */
.nb-lb-rail {
  position: fixed;
  z-index: 3;
  display: flex;
  gap: 6px;
  scrollbar-width: none;
}
.nb-lb-rail::-webkit-scrollbar { display: none; }

.nb-lb-thumb {
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--nb-rule);
  border-radius: 0;
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  transition: border-color 0.2s ease, opacity 0.2s ease;
  opacity: 0.7;
}
.nb-lb-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.nb-lb-thumb:hover { opacity: 1; }
.nb-lb-thumb.is-active {
  border-color: var(--nb-brass-deep);
  opacity: 1;
}
.nb-lb-thumb--video::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: translate(-40%, -50%);
  border-left: 9px solid var(--nb-ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  opacity: 0.75;
}

/* --- oklar --- */
.nb-lb-arrow {
  position: fixed;
  z-index: 3;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--nb-rule);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.94);
  color: var(--nb-ink);
  cursor: pointer;
  transition: background 0.2s ease;
}
.nb-lb-arrow:hover { background: #fff; }

/* --- masaüstü: şerit solda --- */
@media screen and (min-width: 750px) {
  .nb-lb-rail {
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    flex-direction: column;
    max-height: calc(100svh - 40px);
    overflow-y: auto;
    width: 84px;
  }
  .nb-lb-thumb {
    width: 84px;
    height: 84px;
  }
  .nb-lb-arrow--prev { left: 124px; }
  .nb-lb-arrow--next { right: 20px; }

  .product-media-modal__content.nb-lb-stage {
    padding-left: 124px;
    padding-right: 76px;
  }
  .nb-lb-stage {
    --nb-lb-stage-h: min(calc(100svh - 32px), calc(100vh - 32px));
  }
}

/* --- mobil: şerit altta --- */
@media screen and (max-width: 749px) {
  .nb-lb-rail {
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    overflow-x: auto;
    background: #f6f6f6;
    border-top: 1px solid var(--nb-rule);
  }
  .nb-lb-thumb {
    width: 60px;
    height: 60px;
  }
  .nb-lb-arrow {
    width: 38px;
    height: 38px;
    top: auto;
    bottom: 108px;
    transform: none;
  }
  .nb-lb-arrow--prev { left: 12px; }
  .nb-lb-arrow--next { right: 12px; }

  .nb-lb-stage {
    --nb-lb-stage-h: calc(100svh - 108px);
    align-items: flex-start;
  }
}

/* ============================================================
   BÖLÜM 31 — HEDİYE KARTI
   ------------------------------------------------------------
   "Hediye 2. Renk Keseyi Seçiniz" alanı müşteriye ne kazandığını
   söylemiyordu. Kese tek başına satılan bir ürün; üstü çizili
   fiyat hediyenin gerçek değerini görünür kılıyor.

   Başlık, değer satırı ve renk kutuları TEK kart içinde: ayrı
   ayrı kutular hediyenin renklerle ilgisini kopartıyordu.
   Fiyat sabit değil; bnh-gift-value.js ilgili ürünün mağazadaki
   fiyatını okuyor.
   ============================================================ */
.po-stack.bnh-has-gift-value {
  background: #fbf7ef;
  border: 1px solid var(--nb-brass);
  border-inline-start-width: 3px;
  padding: 15px 16px 16px;
  margin-block: 6px 18px;
}

/* Kartın başlığı: uygulamanın kendi etiketi */
.bnh-has-gift-value .po-label-container {
  margin-bottom: 0;
}
.bnh-has-gift-value label.po-label {
  color: var(--nb-ink);
}

/* Değer satırı — kartın içinde, kendi çerçevesi yok */
.bnh-gift-band {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 9px 0 14px;
  padding: 0 0 13px;
  border-bottom: 1px solid var(--nb-brass);
  border-image: linear-gradient(
      to right,
      var(--nb-brass),
      rgba(201, 169, 110, 0.25)
    ) 1;
}

.bnh-gift-band__icon {
  flex: 0 0 auto;
  display: flex;
  color: var(--nb-brass-deep);
}

.bnh-gift-band__text {
  flex: 1 1 auto;
  min-width: 0;
}
.bnh-gift-band__line {
  font-size: 13px;
  line-height: 1.35;
  color: var(--nb-ink);
}

.bnh-gift-band__price {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.bnh-gift-band__price s {
  font-size: 15px;
  color: var(--nb-ink);
  opacity: 0.5;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.bnh-gift-band__price b {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-brass-deep);
}

/* Renk kutuları kartın gövdesi */
.bnh-has-gift-value .po-option--container {
  margin: 0 !important;
}

@media screen and (max-width: 749px) {
  .po-stack.bnh-has-gift-value {
    padding: 13px 13px 14px;
  }
  .bnh-gift-band {
    flex-wrap: wrap;
    gap: 9px;
    margin: 8px 0 12px;
    padding-bottom: 11px;
  }
  .bnh-gift-band__line { font-size: 12px; }
  .bnh-gift-band__price {
    width: 100%;
    padding-inline-start: 33px;
  }
}

/* ============================================================
   BÖLÜM 32 — YATAY SEÇENEK SATIRLARI ("Bu Ürüne Özel Teklif")
   ------------------------------------------------------------
   Uygulamanın bu satırları üç yerde aksıyordu:
     - küçük görselin etrafında ince bir çerçeve vardı ve görsel
       (46x64) 48x48'lik kutuya sığmadığı için taşıyordu;
     - satır 58px yüksekliğinde, yatay boşluğu olmayan bir
       şeritti — dokunması zordu;
     - onay kutusu görünmez (opacity: 0) olduğu için satırın
       seçilebilir olduğu anlaşılmıyordu.

   Satır artık tam genişlikte, yüksek ve tıklanabilir bir kart;
   sağ tarafta gerçek bir işaret kutusu var.

   NOT: ürün şablonundaki custom_liquid bu sınıflara !important
   ile müdahale ediyor; buradaki kurallar da !important taşımak
   zorunda.
   ============================================================ */
.po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  min-height: 76px !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--nb-rule) !important;
  border-radius: 0 !important;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row:hover {
  border-color: var(--nb-brass);
}
.po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row:has(input:checked) {
  border-color: var(--nb-brass-deep) !important;
  background: #fbf7ef !important;
}

/* Görselin çerçevesi kalktı, görsel kutusuna sığıyor */
.po-option--swatch-wrapper-with-title label.bnh-offer-row .po-option__swatch-media {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f6f6f6 !important;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.po-option--swatch-wrapper-with-title label.bnh-offer-row .po-option__image-value {
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  mix-blend-mode: multiply;
}

.po-option--swatch-wrapper-with-title label.bnh-offer-row .po_description {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.po-option--swatch-wrapper-with-title label.bnh-offer-row .po-option__swatch-label--horizontal {
  margin: 0 !important;
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--nb-ink);
}

/* Fiyat satırı — bnh-gift-value.js parçalara ayırıyor */
.bnh-offer-price {
  margin: 0 !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}
.bnh-offer-price s {
  color: var(--nb-ink);
  opacity: 0.45;
  text-decoration-thickness: 1px;
  font-variant-numeric: tabular-nums;
}
.bnh-offer-price b {
  font-weight: 600;
  color: var(--nb-ink);
  font-variant-numeric: tabular-nums;
}

/* Görünmez onay kutusunun yerine gerçek bir işaret */
.po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row::after {
  content: '';
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin-inline-start: auto;
  border: 1px solid var(--nb-rule);
  background: #fff no-repeat center;
  background-size: 12px 12px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row:has(input:checked)::after {
  border-color: var(--nb-brass-deep);
  background-color: var(--nb-brass-deep);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 3' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E");
}

@media screen and (max-width: 749px) {
  .po-option--swatch-wrapper-with-title label.po-option__value--horizontal.bnh-offer-row {
    gap: 11px !important;
    padding: 11px 12px !important;
    min-height: 70px !important;
  }
  .po-option--swatch-wrapper-with-title label.bnh-offer-row .po-option__swatch-media {
    flex: 0 0 50px !important;
    width: 50px !important;
    height: 50px !important;
  }
  .po-option--swatch-wrapper-with-title label.bnh-offer-row .po-option__swatch-label--horizontal {
    font-size: 12.5px;
  }
  .bnh-offer-price { font-size: 12px; gap: 6px; }
}

/* ============================================================
   BÖLÜM 33 — ANA SAYFA KATEGORİ VİTRİNİ
   ------------------------------------------------------------
   Ana sayfa artık bir vitrin gibi: üstte kategori şeridi, altında
   o kategorinin ürünleri. Seçim tarayıcıda, sayfa yenilenmiyor.

   Izgara için tema sınıfları KULLANILMIYOR: bir uygulama stil
   dosyası .grid__item'a flex: 0 0 20% dayatıyor ve tema
   ızgaralarını bozuyor.
   ============================================================ */
.bnh-shop__head {
  text-align: center;
  margin-bottom: 22px;
}
.bnh-shop__heading {
  margin: 0 0 6px;
  letter-spacing: 0.08em;
}
.bnh-shop__sub {
  margin: 0;
  font-size: 13px;
  color: var(--nb-ink);
  opacity: 0.6;
}

/* --- kategori şeridi --- */
.bnh-shop__nav {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 26px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--nb-rule);
}
.bnh-shop__track {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  flex: 1 1 auto;
  min-width: 0;
}
.bnh-shop__track::-webkit-scrollbar { display: none; }

.bnh-shop__chip {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  width: 104px;
  padding: 0 0 10px;
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  color: var(--nb-ink);
  transition: border-color 0.2s ease;
}
.bnh-shop__chip-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #f6f6f6;
}
.bnh-shop__chip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}
.bnh-shop__chip-thumb--all {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid var(--nb-rule);
  color: var(--nb-rule);
  transition: color 0.2s ease;
}
.bnh-shop__chip-name {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  text-align: center;
  opacity: 0.55;
  transition: opacity 0.2s ease;
}
.bnh-shop__chip:hover .bnh-shop__chip-name { opacity: 0.9; }
.bnh-shop__chip:hover .bnh-shop__chip-thumb img { transform: scale(1.05); }
.bnh-shop__chip.is-active { border-bottom-color: var(--nb-brass-deep); }
.bnh-shop__chip.is-active .bnh-shop__chip-name { opacity: 1; }
.bnh-shop__chip.is-active .bnh-shop__chip-thumb--all { color: var(--nb-brass-deep); border-color: var(--nb-brass-deep); }
.bnh-shop__chip:focus-visible { outline: 1px solid var(--nb-brass-deep); outline-offset: 3px; }

.bnh-shop__nav-arrow {
  flex: 0 0 auto;
  align-self: center;
  margin-top: -14px;
  width: 28px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--nb-ink);
  opacity: 0.55;
}
.bnh-shop__nav-arrow:hover { opacity: 1; }
.bnh-shop__nav-arrow[hidden] { display: none; }
.bnh-shop__nav-arrow[disabled] { opacity: 0.15; pointer-events: none; }

/* --- ürün ızgarası --- */
.bnh-shop__grid {
  display: grid;
  grid-template-columns: repeat(var(--bnh-shop-cols, 4), minmax(0, 1fr));
  gap: 1px;
  background: var(--nb-rule);
  border: 1px solid var(--nb-rule);
  margin: 0;
  padding: 0;
  list-style: none;
}
.bnh-shop__item {
  background: #fff;
  min-width: 0;
}
.bnh-shop__item--hidden { display: none !important; }

.bnh-shop__more {
  margin-top: 22px;
  text-align: center;
}
.bnh-shop__more-link {
  display: inline-block;
  font-size: 10.5px;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--nb-brass);
  padding-bottom: 4px;
}
.bnh-shop__more-link:hover { color: var(--nb-brass-deep); }

@media screen and (max-width: 989px) {
  .bnh-shop__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 749px) {
  .bnh-shop__grid {
    grid-template-columns: repeat(var(--bnh-shop-cols-mobile, 2), minmax(0, 1fr));
  }
  .bnh-shop__chip { width: 78px; gap: 7px; }
  .bnh-shop__chip-name { font-size: 9px; letter-spacing: 0.1em; }
  .bnh-shop__nav { margin-bottom: 20px; }
  .bnh-shop__nav-arrow { display: none; }
}

/* Başlangıçta gizlenen satırlar + "daha fazla" düğmesi */
.bnh-shop__item--capped { display: none !important; }
.bnh-shop__reveal {
  margin-top: 18px;
  text-align: center;
}
.bnh-shop__reveal[hidden] { display: none; }
.bnh-shop__reveal-btn {
  min-height: 46px;
  padding: 0 30px;
  background: none;
  border: 1px solid var(--nb-ink);
  border-radius: 0;
  cursor: pointer;
  font-size: 10.5px;
  letter-spacing: var(--nb-label);
  text-transform: uppercase;
  color: var(--nb-ink);
  transition: background 0.2s ease, color 0.2s ease;
}
.bnh-shop__reveal-btn:hover {
  background: var(--nb-ink);
  color: #fff;
}

/* ============================================================
   BÖLÜM 34 — DAR KARTLARDA FİYAT ARALIĞI
   ------------------------------------------------------------
   Varyantları farklı fiyatta olan ürünlerde kart "2,453.64TL –
   4,467.00TL" basıyor. Mobilde kart 172px; iki fiyat 200px'in
   üstünde yer kaplıyor ve tema `flex-wrap: nowrap` verdiği için
   kartın dışına taşıp üst üste biniyordu.

   Dar ekranda yalnızca alt sınır gösteriliyor: "2,453.64TL'den".
   Bilgi kaybı yok, satır taşmıyor.
   ============================================================ */
.card-wrapper .price dl,
.card-wrapper .price .price-item {
  flex-wrap: wrap;
}
.card-wrapper .price {
  font-variant-numeric: tabular-nums;
}

@media screen and (max-width: 749px) {
  .card-wrapper .price__regular .price-item:has(price-money + price-money) price-money + price-money {
    display: none;
  }
  .card-wrapper .price__regular .price-item:has(price-money + price-money) price-money:first-of-type::after {
    content: '’den';
    margin-inline-start: 2px;
    font-size: 0.78em;
    opacity: 0.55;
  }
}

/* ============================================================
   BÖLÜM 35 — ANA SAYFA ÜRÜN IZGARALARI
   ------------------------------------------------------------
   "En Çok Satanlar", "El Çantaları" ve "Aksesuarlar" tema
   ızgarasını kullanıyor: display:flex + `flex: 1 0 auto`. Kartlar
   kendi doğal genişliğinde kalıyor (276px), sayfa genişliği 1400px
   olunca iki yanda büyük boşluk kalıyor ve bölüm dar/eski
   görünüyordu. Ayrıca sütun sayısı bölümden bölüme değişiyordu
   (kimi 3, kimi 4).

   Hepsi yukarıdaki kategori vitriniyle aynı dile getiriliyor:
   sütunları dolduran gerçek bir ızgara, hücre araları saç teli
   çizgi.
   ============================================================ */
.template-index .product-grid.grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--nb-rule);
  border: 1px solid var(--nb-rule);
}
.template-index .product-grid.grid > .grid__item {
  flex: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff;
}

@media screen and (max-width: 989px) {
  .template-index .product-grid.grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media screen and (max-width: 749px) {
  .template-index .product-grid.grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   BÖLÜM 36 — ANA GÖRSEL: MOBİLDE METİN GÖRSELİN ALTINDA
   ------------------------------------------------------------
   Mobilde başlık ve açıklama fotoğrafın üstünde duruyordu; koyu
   metin açık gri stüdyo fonuna binince okunmuyordu (üstelik eski
   görselin içine gömülü "HANDBAGS" yazısı da başlığın üstüne
   geliyordu). Artık metin fotoğrafın altında.

   Tema, metin alta indiğinde bölümün renk değişkenlerini yalnızca
   750px üstünde tanımlıyor; mobilde buton varsayılan sarıya
   düşüyordu. Marka rengini burada geri veriyoruz.
   ============================================================ */
@media screen and (max-width: 749px) {
  .slideshow__box .slideshow__button .button {
    --color-button-background: 26, 27, 24;
    --color-button-text: 255, 255, 255;
    --color-button-border: 26, 27, 24;
    background-color: var(--nb-ink);
    color: #ffffff;
    border-color: var(--nb-ink);
  }
  /* Metin bloğu sayfa payıyla hizalansın */
  .slideshow--mobile-below .slideshow__box,
  .slideshow__box {
    --nb-hero-gap: 0px;
  }
}

/* Mobile gallery dots and letter strips — September 2026. */
@media screen and (max-width: 749px) {
 .product__media-wrapper .product__media img { object-fit: contain !important; }
 .product__media-wrapper .thumbnail-slider { display: block !important; position: relative !important; margin: 8px 0 12px !important; padding: 0 !important; width: 100%; max-width: 100%; }
 .product__media-wrapper .thumbnail-slider .thumbnail-list { display: flex !important; flex-wrap: nowrap !important; gap: 0 !important; width: max-content !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; overflow-x: auto; scrollbar-width: none; scroll-padding: 0; }
 .product__media-wrapper .thumbnail-slider .thumbnail-list::-webkit-scrollbar { display: none; }
 .product__media-wrapper .thumbnail-slider li { flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; height: 28px !important; padding: 0 !important; margin: 0 !important; }
 .product__media-wrapper .thumbnail-slider li::before,
 .product__media-wrapper .thumbnail-slider li::after,
 .product__media-wrapper .thumbnail-slider button::before,
 .product__media-wrapper .thumbnail-slider button::after { content: none !important; }
 .product__media-wrapper .thumbnail-slider button.thumbnail { position: relative !important; inset: auto !important; width: 18px !important; height: 28px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: radial-gradient(circle, #cdd1d1 0 3px, transparent 3.5px) !important; opacity: 1 !important; transform: none !important; }
 .product__media-wrapper .thumbnail-slider button.thumbnail[aria-current="true"] { background: radial-gradient(circle, #34454a 0 4px, transparent 4.5px) !important; }
 .product__media-wrapper .thumbnail-slider button.thumbnail:focus-visible { outline: 2px solid #34454a; outline-offset: -2px; }
 .product__media-wrapper .thumbnail-slider img,
 .product__media-wrapper .thumbnail-slider .thumbnail__badge,
 .product__media-wrapper .thumbnail-slider .slider-button { display: none !important; }
 .product__info-container fieldset[data-option-slug*="harf"] { display: block !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 2px 0 8px !important; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
 .product__info-container fieldset[data-option-slug*="harf"] legend { float: none; display: block; width: 100%; margin-bottom: 10px; }
 .product__info-container fieldset[data-option-slug*="harf"] label { position: relative !important; inset: auto !important; transform: none !important; display: inline-flex !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 8px 0 0 !important; padding: 0 !important; align-items: center; justify-content: center; vertical-align: top; background: #fff !important; color: #202124 !important; border: 1px solid #d0d2d5 !important; border-radius: 3px !important; box-shadow: none !important; }
 .product__info-container fieldset[data-option-slug*="harf"] label::before,
 .product__info-container fieldset[data-option-slug*="harf"] label::after { content: none !important; }
 .product__info-container fieldset[data-option-slug*="harf"] input:checked + label { background: #202124 !important; color: #fff !important; border-color: #202124 !important; }
 .product__info-container fieldset[data-option-slug*="harf"] input:focus-visible + label { outline: 2px solid #34454a; outline-offset: 2px; }
 .bss-po-product-page .po-option--type-button__inline:has(> .po-option--button-wrapper:nth-of-type(8)) { display: flex !important; flex-wrap: nowrap !important; gap: 8px !important; overflow-x: auto !important; width: 100%; max-width: 100%; padding-bottom: 8px; }
 .bss-po-product-page .po-option--type-button__inline:has(> .po-option--button-wrapper:nth-of-type(8)) > .po-option--button-wrapper { flex: 0 0 44px !important; width: 44px !important; min-width: 44px !important; margin: 0 !important; }
}

@media screen and (max-width: 749px) {
 .product__media-wrapper .thumbnail-slider,
 .product__media-wrapper .thumbnail-slider .thumbnail-list,
 .product__media-wrapper .thumbnail-slider li { background: transparent !important; box-shadow: none !important; filter: none !important; border: 0 !important; }
 .product__media-wrapper .thumbnail-slider svg,
 .product__media-wrapper .thumbnail-slider button.thumbnail > * { display: none !important; }
}
@media screen and (max-width: 749px) { .product__media-wrapper .thumbnail-slider .deferred-media__poster-button { display: none !important; } }