/** Shopify CDN: Minification failed

Line 1715:0 Expected identifier but found "-"
Line 1716:0 Expected identifier but found "+"
Line 6320:18 Expected identifier but found whitespace
Line 7025:0 Expected "}" to go with "{"

**/
@font-face {
  font-family: 'Canela';
  src: url('/cdn/shop/files/Canela-Thin.woff2?v=1771006599') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Sainte Colombe';
  src: url('/cdn/shop/files/SainteColombe-Light.woff2?v=1765406594') format('woff2'),
       url('/cdn/shop/files/SainteColombe-Light.woff?v=1765406594') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}



/* FabbHome - Product page styles */

/* Ürün başlığı tipografisini temanın üstüne yaz */
  .product-info__block-item[data-block-type="title"] .product-title {
    font-family: inherit !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.16em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
  }

  /* Prestige'in kendi ATC bloğunu gizle */
  .product-info__block-item[data-block-type="buy-buttons"] {
    display: none !important;
  }

  /* (İstersen) tema quantity + variant picker'ı da gizleyelim
     çünkü bu ürünlerde ölçü/malzeme hesabını wizard yapıyor */
  .product-info__block-item[data-block-type="quantity-selector"],
  .product-info__block-item[data-block-type="variant-picker"] {
    display: none !important;
  }

  /* ============================
     SAMPLE MATERIAL MODAL (STEP 1)
     ============================ */
  .fh-sample-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
  }
  .fh-sample-modal.is-open {
    display: flex;
  }

  .fh-sample-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
  }

  .fh-sample-modal__panel {
    position: relative;
    max-width: 760px;
    width: 100%;
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 32px 24px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.25);
    z-index: 1;
  }

  .fh-sample-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }

  .fh-sample-modal__title {
    font-size: 20px;
    font-weight: 500;
  }

  .fh-sample-modal__close {
    border: 0;
    background: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
  }

  .fh-sample-modal__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }

  .fh-sample-card {
    border: 1px solid #dedede;
    padding: 16px 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #ffffff;
  }

  .fh-sample-card.is-active {
    border-color: #364640;
    box-shadow: 0 0 0 1px #364640;
  }

  .fh-sample-card__label {
    font-size: 13px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }

  .fh-sample-card__tag {
    font-size: 13px;
    opacity: 0.8;
  }

  .fh-sample-modal__footer {
    display: flex;
    justify-content: flex-end;
  }

  .fh-sample-modal__btn {
    border: 0;
    padding: 12px 34px;
    background: #364640;
    color: #ffffff;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
  }

  @media (max-width: 768px) {
    .fh-sample-modal__panel {
      margin: 0 16px;
      padding: 20px 18px;
    }
    .fh-sample-modal__grid {
      grid-template-columns: 1fr;
    }
  }

#fh-product-root {
  margin-bottom: 1.5rem;
}

.fh-product {
  font-family: inherit;
}

/* Wall size layout */
.fh-wall-size__row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.fh-wall-field {
  flex: 1 1 0;
  min-width: 160px;
}

.fh-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.fh-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  border: 1px solid #ccc;
  font-size: 10px;
  line-height: 1;
}

/* input + unit dropdown birlikte */
.fh-input-with-unit {
  display: flex;
  align-items: stretch;
}

.fh-input-with-unit input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #d0d0d0;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 14px;
}

.fh-input-with-unit select {
  padding: 0 10px;
  border: 1px solid #d0d0d0;
  border-radius: 0 4px 4px 0;
  font-size: 13px;
  background: #fff;
  cursor: pointer;
}

/* Alan özeti */
.fh-area-summary {
  margin-top: 8px;
  font-size: 13px;
  color: #555;
}

.fh-area-label {
  font-weight: 500;
}

/* Mobile */
@media (max-width: 768px) {
  .fh-wall-size__row {
    flex-direction: column;
  }

  .fh-input-with-unit input {
    font-size: 13px;
  }
}


/* ==========================
   FabbHome – STEP 1 Color UI
   ========================== */

.fh-color-step {
  margin: 24px 0 28px;
}

.fh-color-step__header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.fh-color-step__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777777;
  margin-top: 4px;
}

.fh-color-step__title-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fh-color-step__title {
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.fh-color-step__subtitle {
  font-size: 13px;
  line-height: 1.5;
  color: #777777;
  margin: 0;
}

.fh-color-step__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fh-color-step__current {
  font-size: 13px;
}

.fh-color-step__current-label {
  font-weight: 500;
  margin-bottom: 4px;
}

.fh-color-step__current-empty {
  color: #888888;
}

.fh-color-step__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
}

.fh-color-step__open-btn {
  border: 1px solid #14352f;
  background: transparent;
  padding: 8px 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.fh-color-step__open-btn:hover {
  background: #14352f;
  color: #ffffff;
}

.fh-color-step__note {
  font-size: 12px;
  color: #888888;
}


/* =========================================
   FH COLOR PANEL – DROPDOWN TARZ PANEL
   ========================================= */

.fh-color-modal {
  position: fixed;
  display: none;              /* kapalı başlasın */
  z-index: 9999;
  width: 560px;               /* panel genişliği */
  max-width: calc(100vw - 32px); /* sağ/sol 16px boşluk */
}

/* Açıkken görünür */
.fh-color-modal.fh-color-modal--open {
  display: block;
}

/* Arka plan perdesi: dropdown tarzı, o yüzden gizli */
.fh-color-modal__backdrop {
  display: none;
}

/* Panel kutusu */
.fh-color-modal__dialog {
  position: relative;
  width: 100%;
  max-height: 70vh;

  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

  padding: 20px 24px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fh-color-modal__header {
  margin-bottom: 16px;
}

.fh-color-modal__content {
  flex: 1;
  overflow: auto;
  padding-right: 4px;
}

.fh-color-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}

.fh-color-modal__close {
  position: absolute;
  top: 10px;
  right: 14px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

.fh-color-modal__btn-cancel,
.fh-color-modal__btn-apply {
  min-width: 120px;
  padding: 8px 16px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 0;
  border: 1px solid #111111;
  background: #ffffff;
  cursor: pointer;
}

.fh-color-modal__btn-apply {
  background: #17352f;
  color: #ffffff;
  border-color: #17352f;
}

.fh-color-modal__btn-apply:hover {
  opacity: 0.92;
}

.fh-color-modal__btn-cancel:hover {
  background: #f7f7f7;
}

/* ==========================
   Palette list (swatch + name)
   ========================== */

.fh-color-palette {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Üstteki büyük swatch barı */
.fh-color-palette__top-row {
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #eeeeee;
}

.fh-color-palette__top-swatch {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 2px solid #dddddd;
  background: #f7f7f7;
}

.fh-color-palette__top-swatch--empty {
  background: #f7f7f7;
}

/* Asıl liste – 4 kolon */
.fh-color-palette__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  max-height: 340px;
  overflow: auto;
  padding-right: 6px;
  margin-top: 10px;
}

.fh-color-palette__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px;
  border: none;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.fh-color-palette__item:hover {
  background: #f7f7f7;
}

.fh-color-palette__swatch {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.fh-color-palette__item--selected .fh-color-palette__swatch {
  box-shadow: 0 0 0 2px #17352f;
}

.fh-color-palette__name {
  font-size: 13px;
}

/* Mobile: 2 kolon */
@media (max-width: 768px) {
  .fh-color-modal__dialog {
    width: calc(100% - 24px);
    padding: 20px 18px 18px;
  }

  .fh-color-palette__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* Ürün sayfasında sadece SVG kaynağı olan slide'ı sakla
   (kategori / koleksiyon sayfalarını etkilemez) */
.fh-svg-source-hidden {
  display: none !important;
}

/* ============================
   FabbHome - STEP 1 Color UI
   ============================ */

.fh-color-step {
  margin: 24px 0 32px;
  padding: 0;
  border: none;
  background: transparent;
}

.fh-color-step__header {
  margin-bottom: 18px;
}

.fh-color-step__main-title {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  margin: 0;
}

/* Baloncukların container'ı – genişliğe göre otomatik sütun sayısı */
.fh-color-step__slots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(72px, 1fr));
  column-gap: 16px;
  row-gap: 18px;
  align-items: flex-start;
  max-width: 100%;
}

/* Tek baloncuk */
.fh-color-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border-radius: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 12px;
  line-height: 1.2;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}

/* Daire */
.fh-color-slot__circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
  flex-shrink: 0;
}

/* İsim altta */
.fh-color-slot__label {
  margin-top: 4px;
  text-align: center;
  max-width: 80px;
  white-space: normal;
  word-break: break-word;
}

/* Hover & active */
.fh-color-slot:hover {
  transform: translateY(-2px);
}

.fh-color-slot.is-active .fh-color-slot__circle {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 0 0 2px rgba(20, 53, 47, 0.45);
}

/* Debug yazısını gizle (Active color group vs.) */
.fh-color-step__debug {
  display: none;
}

/* Mobile: biraz daha sıklaştır */
@media (max-width: 768px) {
  .fh-color-step__slots {
    grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
    column-gap: 12px;
    row-gap: 14px;
  }

  .fh-color-slot__circle {
    width: 58px;
    height: 58px;
  }
}




/* İsim altına gelsin */
.fh-color-slot__label {
  margin-top: 4px;
  text-align: center;
  max-width: 90px;
  white-space: normal;
  word-break: break-word;
}

/* Hover & active state – çok hafif */
.fh-color-slot:hover {
  transform: translateY(-2px);
}

.fh-color-slot.is-active .fh-color-slot__circle {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.9) inset,
    0 0 0 2px rgba(20, 53, 47, 0.45);
}

/* Debug yazısını gizle (Active color group vs.) */
.fh-color-step__debug {
  display: none;
}

/* Mobile: baloncuklar sarma yapsın, biraz küçülsün */
@media (max-width: 768px) {
  .fh-color-step__slots {
    flex-wrap: wrap;
    gap: 18px;
  }

  .fh-color-slot__circle {
    width: 64px;
    height: 64px;
  }
}



/* ==========================================
   FabbHome - Modal Color Picker (center-right)
   ========================================== */

.fh-color-modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.fh-color-modal.is-visible {
  display: block;
}



.fh-color-modal__overlay {
  position: absolute;
  inset: 0;
  backdrop-filter: none;     /* blur yok */
  background: transparent;   /* kararma yok */
  opacity: 0;
  pointer-events: none;      /* overlay tıklaması da devre dışı */
  transition: none;
}

.fh-color-modal.is-visible .fh-color-modal__overlay {
  opacity: 0;                /* yine görünmez */
}



/* Popup'ı ürünün sağ tarafında konumlandır */
.fh-color-modal__content {
  position: fixed;
  top: 300px;         /* biraz aşağı */
  right: 325px;        /* sağdan boşluk */
  left: auto;
  transform: none;
  width: 520px;
  max-width: 90vw;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0,0,0,.12);
  padding: 28px 32px;
  z-index: 999999;
}



@keyframes fhModalFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fh-color-modal__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fh-color-modal__title {
  font-size: 16px;
  font-weight: 600;
}

.fh-color-modal__close {
  background: none;
  border: none;
  font-size: 26px;
  cursor: pointer;
  opacity: .5;
  transition: opacity .15s ease;
}

.fh-color-modal__close:hover {
  opacity: .8;
}

.fh-color-modal__subtitle {
  margin-top: 8px;
  margin-bottom: 16px;
  opacity: .7;
  font-size: 13px;
}

.fh-color-modal__slots {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  margin-bottom: 18px;
  align-items: center;
  padding-right: 18px;                 /* senin hizayı düzelten değer */
  padding-bottom: 12px;                /* çizgiyle grid arasında nefes payı */
  border-bottom: 1px solid rgba(0,0,0,.08); /* kaybolan çizgiyi buraya aldık */
}



/* Dominant renk placeholder'ları buton gibi davransın */
.fh-modal-dominant {
  display: flex;
  align-items: center;
}


.fh-modal-slot {
  width: 28px;
  height: 28px;
  background: #eee;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.1);
}

.fh-color-modal__grid {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
}

.fh-color-modal__footer {
  margin-top: 24px;
  display: flex;
  justify-content: space-between;
}

.fh-color-modal__btn-cancel,
.fh-color-modal__btn-apply {
  padding: 12px 24px;
  border-radius: 6px;
  border: 1px solid #ccc;
  cursor: pointer;
  font-size: 14px;
}

.fh-color-modal__btn-apply {
  background: #0b3b2d;
  border-color: #0b3b2d;
  color: #fff;
}

/* Color modal footer'ını gizle (Cancel / Apply Colors) */
.fh-color-modal__footer {
  display: none;
}


.fh-color-modal__content {
  display: flex;
  flex-direction: column;
  max-height: 80vh;     /* içerik taşmasını engeller */
  overflow: hidden;     /* scroll sadece içeride */
}



.fh-color-modal__grid {
  flex: 1;               /* en kritik satır */
  overflow-y: auto;
  max-height: none;      /* eski kısıtlamayı kaldır */
  padding-right: 6px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Üst sabit renk barının altındaki ince çizgi */
.fh-color-modal__slots-divider {
  width: 100%;
  border-bottom: 1px solid rgba(0,0,0,.08);
  margin: 12px 0 18px 0;  /* üst 12px / alt 18px spacing */
}



/* ============================
   FabbHome - Color Library Grid
   ============================ */

.fh-color-modal__grid {
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 4px;
}

.fh-color-grid-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 12px;
}


/* Renk chip görünümü */
.fh-color-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
}

.fh-color-chip__circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.10); /* çok hafif gri, siyah çizgi yok */
  flex-shrink: 0;
}

.fh-color-chip__label {
  line-height: 1.2;
  max-width: 90px;           /* uzun isimler için */
  white-space: normal;
  word-break: break-word;    /* gerekiyorsa kelimeyi bölsün */
}

.fh-color-chip:hover .fh-color-chip__circle {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.06);
}

.fh-color-chip.is-selected .fh-color-chip__circle {
  border-color: #0b3b2d;                 /* sadece seçilende koyu çerçeve */
  box-shadow: 0 0 0 2px rgba(11, 59, 45, 0.35);
}




.fh-mockup-pattern {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: repeat;
  /* Pattern ölçeği –  height kısmını 200 / 260 / 320 ile oynayarak ayarlarız */
  background-size: auto 260px;
}


.fh-color-modal__custom-hex {
  flex-shrink: 0;
  border-top: 1px solid rgba(0,0,0,.08);
  padding-top: 14px;
  margin-top: 8px;
}

.fh-color-modal__custom-hex-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fh-color-modal__custom-hex-input {
  width: 110px;
  height: 34px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.fh-color-modal__custom-hex-apply {
  height: 34px;
  padding: 0 14px;
  border-radius: 6px;
  background: #0b3b2d;
  color: #fff;
  border: none;
  cursor: pointer;
}


/* === Modal kutusunu prestige dropdown gibi yapalım === */
.fh-color-modal__content {
  background: #FAF8F6; /* Prestige tema arka plan tonu */
  border-radius: 0 !important; /* Köşeleri düz */
  box-shadow: 0 6px 25px rgba(0,0,0,0.08); /* Daha soft shadow */
  padding: 24px 28px;
}

.fh-color-modal__custom-hex-input,
.fh-color-modal__custom-hex-apply {
  border-radius: 0 !important;
}

/* === Modal kutusunu Prestige dropdown ile birebir aynı yap === */
.fh-color-modal__content {
  background: #FAF8F6 !important; /* aynı zemin */
  border-radius: 0 !important;
  border: 1px solid rgba(0,0,0,0.12) !important; /* daha koyu ve keskin */
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.7), /* iç çizgi */
    0 3px 12px rgba(0,0,0,0.10);           /* dış gölge */
}


/* ==========================================
   FabbHome – Gallery mockups (left column)
   ========================================== */

.fh-product-mockups {
  margin-top: 0px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.fh-product-mockups__item {
  width: 100%;
}

/* Ana kutu – yüksekliği FRONT img belirliyor */
.fh-mockup-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 0; /* header'dan bağımsız, ekstra katman açmıyoruz */
}

/* FRONT – normal img, oranı bu belirler */
.fh-mockup-front {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
}

/* OVERLAY – front'un üzerine yatan katman */
.fh-mockup-overlay {
  position: absolute;
  inset: 0;            /* top:0; right:0; bottom:0; left:0 */
  pointer-events: none;
}

/* Pattern (SVG'den gelen desen) */
.fh-mockup-pattern {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-repeat: repeat;
  background-size: auto 260px; /* desen ölçeği, sonra ince ayar yaparız */
  background-position: center;
}

/* Wall mask PNG – front ile aynı boyutta cover */
.fh-mockup-wall-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 2;
}

/* Shadow PNG – üstte, multiply ile */
.fh-mockup-shadow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
  z-index: 3;
}

/* ==========================================
   FabbHome – Gallery mockups (left column)
   (override – sadece galerideki sofa için)
   ========================================== */

.fh-product-mockups {
  margin-top: 0px; /* SVG’ye yakın dursun, istersen 16 yaparız */
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.fh-product-mockups__item {
  width: 100%;
}

/* Ana kutu – oranı padding-top ile veriyoruz */
.fh-product-mockups .fh-mockup-inner {
  position: relative;
  width: 100%;
  padding-top: 150%;  /* 4:3 oran; çok dik gelirse 70–80 arası oynarız */
  overflow: hidden;
}

/* Duvar alanı – tüm sahneyi kaplar */
.fh-product-mockups .fh-mockup-wall {
  position: absolute;
  inset: 0;
}

/* Ortak layer: 3 PNG de bunu kullanıyor */
.fh-product-mockups .fh-mockup-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Pattern: duvarın ÜSTÜNE, multiply ile gelsin */
.fh-product-mockups .fh-mockup-pattern {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-repeat: repeat;
  background-size: auto 260px; /* desen boyu – sonra ince ayar */
  background-position: center;
  mix-blend-mode: multiply;
}

/* Wall PNG – baz layer */
.fh-product-mockups .fh-mockup-wall-img {
  z-index: 1;
}

/* Gölge PNG – pattern'in üstünde */
.fh-product-mockups .fh-mockup-shadow {
  z-index: 3;
  mix-blend-mode: multiply;
}

/* Sofa/front – en üstte, her şeyi tamamlıyor */
.fh-product-mockups .fh-mockup-front {
  z-index: 4;
}


/* SVG OLMAYAN ÜRÜNLERDE STEP-2 BACK BUTONUNU GİZLE */
html.fh-no-color-step .fh-btn-row--step2 [data-fh-back] {
  display: none;
}


.fh-cart-attrs {
  margin-top: 6px;
  font-size: 13px;
}

.fh-cart-attr-row {
  display: flex;
  gap: 4px;
}

.fh-cart-attr-label {
  font-weight: 500;
}

.fh-cart-attr-value {
  opacity: 0.8;
}










/* Cart – color chips layout */
.fh-cart-colors {
  margin-top: 4px;
  margin-left: 0.1rem;  /* COLORS + renkler, Material metniyle aynı hizada olsun */
  padding-left: 0;
}

.fh-cart-colors__label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #777;
  margin-right: 0.5rem;
}

.fh-cart-colors__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.9rem; /* bir tık daha ferah */
}

.fh-cart-color-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem; /* isimler çok ufak durmasın */
}

/* ⭐ PREMİUM BOYUT — renk dot’larını büyüttük */
.fh-cart-color-chip__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 0.5px solid rgba(0, 0, 0, 0.28); /* hafif kalın, daha premium */
}


/* Cart – SVG renkli önizleme boyutu */
.line-item__media.fh-cart-svg {
  max-width: 120px;
  width: 120px;
  height: auto;
  display: block;
}



/* ============================
   FabbHome – Cart SVG hizalama
   ============================ */

/* 1) Tüm cart line-item'ları yukarı hizala (sayfa + drawer) */
.order-summary__body .line-item,
.cart-drawer .line-item,
.ajax-cart .line-item {
  align-items: flex-start !important;
}

/* 2) SVG'nin gerçekten büyümesi için inline width/height'i ez */
svg.fh-cart-svg {
  width: 220px !important;   /* istersen 240-260 yapabilirsin */
  height: auto !important;
  display: block;
  margin-top: 0;
}

/* 3) Hücrelerin ortadan hizalamasını iptal et (garanti) */
.order-summary__body td,
.cart-drawer td,
.ajax-cart td {
  vertical-align: top;
}







/* Layout: üst satır (görsel + info) */
.fh-cart-line {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

.fh-cart-media {
  flex: 0 0 auto;
}

.fh-cart-info {
  flex: 1 1 auto;
}

/* COLORS bloğu artık alt satır: full width */
.fh-cart-colors {
  margin-top: 0.5rem;
}

.fh-cart-colors__list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  align-items: center;
}

/* Ölçü/malzeme bullet’ları (zaten eklediysen bırak) */
.fh-cart-dimensions {
  margin: 0.35rem 0 0.8rem;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: #555;
}

.fh-cart-dimensions li {
  list-style: none;
}

.fh-cart-dimensions li::before {
  content: "•";
  display: inline-block;
  margin-right: 0.35rem;
}



/* SAMPLE POPUP VISIBILITY */
.fh-sample-modal {
  display: none;
}

.fh-sample-modal.is-open {
  display: flex;
}


/* FabbHome – line item SKU style */
.fh-line-item-sku {
  margin-top: 0.1rem;
}

.fh-line-item-sku__label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 0.25rem;
}

.fh-line-item-sku__value {
  font-weight: 500;
}



/* FabbHome – Wallpaper mega menu layout */

.mega-menu--wallpaper .fh-mega {
  padding: 16px 0 12px;
}

.mega-menu--wallpaper .fh-mega__columns {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 24px;
  align-items: flex-start;
}

.mega-menu--wallpaper .fh-mega__linklist {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
}

.mega-menu--wallpaper .fh-mega__heading {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}

.mega-menu--wallpaper .fh-mega__items {
  margin-top: 6px;
}

.mega-menu--wallpaper .fh-mega__item-link {
  font-size: 13px;
}

/* Sağ tarafta 2 dikey görsel görünümü */
.mega-menu--wallpaper .fh-mega__images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.mega-menu--wallpaper .fh-mega__images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Trend satırı */
.mega-menu--wallpaper .fh-mega__footer {
  margin-top: 12px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}


/* ============================
   FABH – WALLPAPER MEGA MENU (CLEAN FINAL)
   ============================ */

/* Mega menüyü geniş yap */
.fh-mega--wallpaper {
  width: 90vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 32px 72px 40px;
}

/* Sol 4 kolon + sağ görseller */
.fh-mega--wallpaper .fh-mega__columns {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
}

/* Sol taraf: Color / Style / Pattern / Room – her zaman tek satır */
.fh-mega--wallpaper .fh-mega__linklist {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 60%;
  margin: 0;
  padding: 0;
  gap: 56px; /* kolonlar arası boşluk */
}

/* Sağ taraf: görseller */
.fh-mega--wallpaper .fh-mega__images {
  flex: 1 1 40%;
}

/* Başlık kolonları + dikey çizgi */
.fh-mega--wallpaper .fh-mega__group {
  position: relative;
  padding-left: 24px; /* çizgi ile metin arası */
  flex: 1 1 0;
}

.fh-mega--wallpaper .fh-mega__group::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: -4px;        /* ALL satırlarının biraz altına kadar insin */
  width: 1px;
  background: #ece3d8; /* Prestige tonu */
}

/* Color / Style / Pattern içi 2 sütun grid */
.fh-mega--wallpaper .fh-mega__items-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
}

/* ALL COLORS / ALL STYLES / ALL PATTERNS – kolonların altında tek satır */
.fh-mega--wallpaper .fh-mega__all-link {
  display: block;
  margin-top: 14px;      /* Purple / Farmhouse / Herringbone'den sonra boşluk */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

/* ROOM kolonunda ALL ROOMS – Nursery’den sonra daha aşağıda ve kalın */
.fh-mega--wallpaper .fh-mega__group--room .fh-mega__items li:last-child {
  margin-top: 54.7px;      /* aradaki boşluk – 22–30 arası oynatabilirsin */
}

.fh-mega--wallpaper .fh-mega__group--room .fh-mega__items li:last-child .fh-mega__item-link {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
}

/* Uzun label'lar (Check & Plaid vs.) tek satırda kalsın */
.fh-mega--wallpaper .fh-mega__item-link {
  white-space: nowrap;
}


/* ===========================================
   Mega menu group headings (Color, Style...)
   =========================================== */

.fh-mega--wallpaper .fh-mega__heading {
  font-family: 'SainteColombe-Medium', serif;
  font-weight: 500;
  font-size: 16px;
  color: #000;
  text-transform: lowercase;     /* önce hepsini küçült */
}

.fh-mega--wallpaper .fh-mega__heading::first-letter {
  text-transform: uppercase;     /* ilk harf tekrar büyük */
}

/* Normal item satırları (Black, Boho, Bathroom...) 
   temanın varsayılan fontuna dönsün */
.fh-mega--wallpaper .fh-mega__items a {
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
}



/* ======================================================
   FH – Product info panel width (Laptop compact)
   Put at VERY END of fh-product.css
====================================================== */

@media (min-width: 1000px) and (max-width: 1440px) {

  

  /* İçerik rahatça küçülebilsin */
  .shopify-section--main-product safe-sticky.product-info *{
    min-width: 0 !important;
  }

  /* placeholder taşmasın */
  .shopify-section--main-product safe-sticky.product-info input::placeholder{
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}


/* ======================================================
   FH – Balanced 2-column scaling (gallery + info shrink together)
   Put at VERY END of fh-product.css
====================================================== */

@media (min-width: 1000px) and (max-width: 1440px) {

  .shopify-section--main-product .product{
    /* İKİSİ DE küçülsün: sol ve sağ clamp ile */
    grid-template-columns:
      minmax(0, clamp(420px, 52vw, 760px))
      minmax(0, clamp(320px, 36vw, 560px)) !important;
    column-gap: clamp(18px, 2.2vw, 40px) !important;
  }

  /* Sağ panel küçülebilsin */
  .shopify-section--main-product safe-sticky.product-info,
  .shopify-section--main-product safe-sticky.product-info *{
    min-width: 0 !important;
  }
}

/* Daha küçük laptop: ikisini de biraz daha kompakt yap */
@media (min-width: 1000px) and (max-width: 1150px) {
  .shopify-section--main-product .product{
    grid-template-columns:
      minmax(0, clamp(380px, 50vw, 680px))
      minmax(0, clamp(300px, 38vw, 480px)) !important;
    column-gap: 22px !important;
  }
}

/* ======================================================
   FH – Step-2 buttons (small laptop): Back + Sample row, ATC full row
====================================================== */
@media (min-width: 1000px) and (max-width: 1150px){

  /* Wrapper: 2 kolonlu grid */
  .fh-wizard.is-step-2 .fh-step.fh-step--2 .fh-btn-row--step2{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  /* Tüm butonlar full genişlik */
  .fh-wizard.is-step-2 .fh-step.fh-step--2 .fh-btn-row--step2 .fh-btn{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Add to cart: 2 kolonu kaplasın ve alta insin */
  .fh-wizard.is-step-2 .fh-step.fh-step--2 .fh-btn-row--step2 [data-fh-add-to-cart],
  .fh-wizard.is-step-2 .fh-step.fh-step--2 .fh-btn-row--step2 .fh-btn--add-to-cart{
    grid-column: 1 / -1 !important;
  }
}


/* =========================================================
   FH – Prestige MOBILE: product grid + gallery stack fix
   Breakpoint: <= 749px
   ========================================================= */
@media (max-width: 749px) {

  /* 0) EN KRİTİK: sağ boşluğu yaratan 2-kolon product grid'i tek kolona zorla */
  .product {
    grid-template-columns: 1fr !important;
  }
  .product > * {
    min-width: 0 !important; /* grid children overflow/width buglarını engeller */
  }

  /* 1) Gallery wrapper tam genişlik */
  product-gallery.product-gallery,
  .product-gallery__image-list,
  .product-gallery__image-list > .contents {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* 2) Yatay scroll + snap iptal, dikey akış */
  scroll-carousel.product-gallery__carousel.scroll-area {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  /* 3) Slide’ları dikey stack yap */
  scroll-carousel.product-gallery__carousel.scroll-area > .product-gallery__media {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    scroll-snap-align: none !important;
    margin: 0 0 12px 0 !important;
  }

  /* 4) Medyalar ekrana %100 otursun */
  .product-gallery__media img,
  .product-gallery__media video,
  .product-gallery__media model-viewer,
  .product-gallery__media svg {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  /* 5) Pagination dots gizle (Prestige varyasyonları) */
  .flickity-page-dots,
  .product-gallery__dots,
  .slider-dots,
  .pagination-dots {
    display: none !important;
  }
}

/* =========================================================
   FH – Tablet/Touch devices: force 1-column product layout
   Applies up to 1024px ONLY on touch (prevents affecting desktop)
   ========================================================= */
@media (max-width: 1024px) and (hover: none) and (pointer: coarse) {

  /* Sağdaki boşluğu yapan 2-kolon product grid -> tek kolon */
  .product {
    grid-template-columns: 1fr !important;
  }
  .product > * { min-width: 0 !important; }

  /* Gallery tam genişlik */
  product-gallery.product-gallery,
  .product-gallery__image-list,
  .product-gallery__image-list > .contents {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* scroll-carousel yatay/snap iptal + dikey akış */
  scroll-carousel.product-gallery__carousel.scroll-area {
    display: block !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  scroll-carousel.product-gallery__carousel.scroll-area > .product-gallery__media {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    scroll-snap-align: none !important;
    margin: 0 0 12px 0 !important;
  }

  /* dots gizle */
  .product-gallery__dots,
  .flickity-page-dots,
  .slider-dots,
  .pagination-dots {
    display: none !important;
  }
}


/* FH – Mobile gallery: horizontal swipe, full-width slides, NO snap */
@media (max-width: 749px) {
  /* Carousel layout vars (Prestige uses these CSS vars) */
  .product-gallery {
    --product-gallery-carousel-grid: auto / auto-flow 100%;
    --product-gallery-carousel-gap: 0px;
    --product-gallery-carousel-scroll-snap-type: none;
  }

  /* Ensure only one slide width is visible */
  .product-gallery__carousel {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .product-gallery__media {
    scroll-snap-align: none;
  }
}

/* FH – Mobile gallery FIX: force horizontal swipe (1 slide), prevent stacked "open" slides */
@media (max-width: 749px) {
  /* Override any snippet-level vars */
  .product-gallery {
    --product-gallery-carousel-grid: auto / auto-flow 100% !important;
    --product-gallery-carousel-gap: 0px !important;
    --product-gallery-carousel-scroll-snap-type: none !important;
  }

  /* Make sure the carousel clips extra slides (prevents "open" look) */
  .product-gallery__carousel,
  .product-gallery__carousel.scroll-area {
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  /* Force true horizontal grid behavior even if vars were set to row */
  scroll-carousel.product-gallery__carousel {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: 100% !important;
    grid-template-columns: unset !important;
  }

  /* Each media takes full width (one slide at a time) */
  .product-gallery__media {
    width: 100% !important;
    min-width: 100% !important;
    scroll-snap-align: none !important;
  }
}


/* =========================================================
   FH – MOBILE: keep HORIZONTAL swipe gallery (OVERRIDE)
   Fixes: "mockup açık geliyor" (actually 2nd slide dropping below)
   ========================================================= */
@media (max-width: 749px) {
  scroll-carousel.product-gallery__carousel.scroll-area{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-snap-type:none !important;
    -webkit-overflow-scrolling:touch !important;
- touch-action:pan-x !important;
+ touch-action: manipulation !important;

  }

  scroll-carousel.product-gallery__carousel.scroll-area > .product-gallery__media{
    flex:0 0 100% !important;
    width:100% !important;
    max-width:100% !important;
    margin:0 !important;
    scroll-snap-align:none !important;
  }
}

/* FH – Gallery thumbnails: fixed square boxes */
.product-gallery__thumbnail{
  width: 64px !important;
  height: 64px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border-radius: 0 !important; /* istersen 8px yaparız */
  overflow: hidden !important;
}

.product-gallery__thumbnail img,
.product-gallery__thumbnail svg{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important; /* cover = dolu kare, contain = boşluklu */
  display: block !important;
}

/* FH – Mobile: hide gallery thumbnails (keep swipe gallery) */
@media (max-width: 749px){
  .product-gallery__thumbnail-list{
    display:none !important;
  }
}


/* =========================================================
   FH – Mobile color UX
   - Outside swatches: single-row horizontal scroll
   - Color modal: full-screen under header, only inside scroll
   ========================================================= */

@media (max-width: 999px){

  /* ---------- OUTSIDE (page) swatches: single row scroll ---------- */
  .fh-color-step__slots{
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 14px !important;
    padding: 6px 2px 10px !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
  }
  .fh-color-step__slots .fh-color-slot{
    scroll-snap-align: start !important;
    flex: 0 0 auto !important;
  }
  .fh-color-step__slots .fh-color-slot__dot{
    width: 64px !important;
    height: 64px !important;
    border-width: 1px !important;
    border-color: rgba(0,0,0,.14) !important; /* daha soft */
    box-shadow: none !important;
  }
  .fh-color-step__slots .fh-color-slot--active .fh-color-slot__dot{
    border-color: rgba(0,0,0,.35) !important;
  }
  .fh-color-step__slots .fh-color-slot__label{
    max-width: 86px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 12px !important;
    line-height: 1.15 !important;
  }

  /* ---------- MODAL: fixed full screen (header üstte kalabilir) ---------- */
  .fh-color-modal{
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999 !important;
    overflow: hidden !important;
  }

  /* backdrop/overlay zaten varsa tam ekrana yay */
  .fh-color-modal__overlay,
  .fh-color-modal__backdrop{
    position: absolute !important;
    inset: 0 !important;
  }

  /* modal kutusu: full screen */
  .fh-color-modal__dialog,
  .fh-color-modal__content,
  .fh-color-modal__panel{
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* modal header: üstte sabit kalsın */
  .fh-color-modal__header{
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
  }

  /* asıl scroll alanı: renk grid */
  .fh-color-modal__grid{
    flex: 1 1 auto !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    padding: 16px !important;
  }

  /* grid içindeki item’lar (JS genelde .fh-color-slot basıyor) */
  .fh-color-modal__grid .fh-color-slot{
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0 !important;
  }
  .fh-color-modal__grid .fh-color-slot__dot{
    width: 26px !important;
    height: 26px !important;
    border-width: 1px !important;
    border-color: rgba(0,0,0,.12) !important; /* belirgin çizgiyi azalt */
    box-shadow: none !important;
    flex: 0 0 auto !important;
  }
  .fh-color-modal__grid .fh-color-slot__label{
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important; /* sağdaki isimler taşmasın */
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  /* alt custom hex kısmı: altta sabit kalsın */
  .fh-color-modal__footer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
  }
}


/* ======================================================
   FH – WIZARD CORE (Step visibility + Buttons)
   (Put at VERY END of fh-product.css)
====================================================== */

/* Step show/hide (core) */
.fh-step { display: none; }

.fh-wizard[data-fh-current-step="1"] .fh-step--1 { display: block; }
.fh-wizard[data-fh-current-step="2"] .fh-step--2 { display: block; }

/* Make step separation visible (fix “step-1 step-2 ayrımı kalmadı”) */
.fh-step--2{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.12);
}

/* Step title */
.fh-step-header{ margin-bottom: 14px; }
.fh-step-label{
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #8a8a8a;
}

/* Buttons look like real buttons (fix “link gibi oldu”) */
.fh-btn-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}

.fh-btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  padding: 14px 18px;

  font: inherit;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;

  /* ONLY color/background/border change */
  border: 1px solid #003A43;
  background: transparent;
  color: #003A43;

  cursor: pointer;
  text-decoration: none;
  line-height: 1.1;
}

.fh-btn--primary{
  /* ONLY color/background change */
  background: #003A43;
  color: #fff;
}

/* Hover / focus-visible (ONLY color/background/border/outline) */
.fh-btn:hover,
.fh-btn:focus-visible{
  background: #A68945;
  border-color: #A68945;
  color: #fff;
  outline: none;
}

/* primary hover also gold */
.fh-btn--primary:hover,
.fh-btn--primary:focus-visible{
  background: #A68945;
  border-color: #A68945;
  color: #fff;
  outline: none;
}


.fh-btn-row--step2{
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.fh-btn-row--step2 .fh-btn{
  width: auto;
  flex: 0 0 auto;
}

.fh-btn-row--step2 .fh-btn[data-fh-back]{
  padding-inline: 22px;
  white-space: nowrap;
}

.fh-btn-row--step2 .fh-btn[data-fh-buy-sample-step2]{
  flex: 0 0 160px;
}

.fh-btn-row--step2 .fh-btn[data-fh-add-to-cart]{
  flex: 1 1 auto;
}


/* ======================================================
   FH – STEP 2 MOBILE POLISH (sizes 2-col, materials 2x2, buttons layout)
====================================================== */

/* 1) Width + Height yanyana (mobil) */
@media (max-width: 749px) {
  .fh-step2__row{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex-direction: unset !important; /* fh-step2 içindeki column override'ını kır */
  }

  .fh-step2__field{
    min-width: 0 !important;
  }
}

/* Çok dar ekranlarda tekrar alt alta */
@media (max-width: 360px) {
  .fh-step2__row{
    grid-template-columns: 1fr !important;
  }
}

/* 2) Material butonları 2x2 grid */
@media (max-width: 749px) {
  .fh-step2__materials{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    flex-direction: unset !important; /* fh-step2 içindeki column override'ını kır */
  }

  .fh-step2__material{
    width: 100% !important;
  }
}

/* 3) Step-2 butonları: Back + Buy Sample üstte eşit, ATC altta full */
@media (max-width: 999px) {
  .fh-wizard[data-fh-current-step="2"] .fh-btn-row--step2{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .fh-wizard[data-fh-current-step="2"] .fh-btn-row--step2 .fh-btn{
    width: 100% !important;
    min-width: 0 !important;
  }

  .fh-wizard[data-fh-current-step="2"] .fh-btn-row--step2 [data-fh-add-to-cart]{
    grid-column: 1 / -1 !important;
  }
}


/* =========================================================
   FH – STEP 2 Mobile polish (labels, unit select, header)
   ========================================================= */

/* 1) STEP 2 başlığını (STEP 2 • WALL SIZE & MATERIAL) gizle */
@media (max-width: 749px) {
  .fh-step-header { 
    display: none !important; 
  }

  /* 2) Başlığın üstündeki “fazla çizgi / boşluk” hissini azalt */
  .fh-step.fh-step--2 {
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
  }
}

/* 3) WALL WIDTH / WALL HEIGHT label’larını küçült */
@media (max-width: 749px) {
  .fh-field-label,
  .fh-step2__label{
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }
}

/* 4) Unit select (ft/in/cm) görünmüyordu → geri getir */
@media (max-width: 749px) {
  .fh-input-wrap,
  .fh-step2__input-wrap{
    display: flex !important;
    align-items: stretch !important;
  }

  .fh-input-wrap select,
  .fh-step2__select{
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 56px !important;
    min-width: 56px !important;
    flex: 0 0 56px !important;
  }

  .fh-input-wrap input,
  .fh-step2__input,
  .fh-step2__input[type="number"]{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}


/* =========================================================
   FH – Mobile: remove zoom icon + show "Swipe to view →"
   ========================================================= */
@media (max-width: 999px){

  /* 1) Hide zoom / magnifier button (Prestige variants) */
  .product-gallery__zoom,
  .product-gallery__zoom-button,
  .product-gallery [data-action="open-lightbox"],
  .product-gallery [data-open-lightbox],
  .product-gallery button[aria-label*="Zoom"],
  .product-gallery a[aria-label*="Zoom"],
  .product-gallery button[aria-label*="zoom"],
  .product-gallery a[aria-label*="zoom"],
  .product-gallery button[aria-label*="Enlarge"],
  .product-gallery a[aria-label*="Enlarge"],
  .product-gallery button[aria-label*="enlarge"],
  .product-gallery a[aria-label*="enlarge"],
  .product-gallery .tap-area[aria-label*="Zoom"],
  .product-gallery .tap-area[aria-label*="zoom"]{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* 2) Swipe hint */
  .product-gallery{
    position: relative !important;
  }


  /* Swipe hint: show briefly, wiggle, then hide */
  .product-gallery{
    position: relative !important;
  }

  .product-gallery::after{
    content: "Swipe to view \2192";
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 40;

    font-size: 13px;
    letter-spacing: .02em;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.40);
border: 1px solid rgba(255,255,255,.55);
color: rgba(0,0,0,.78);
text-shadow: 0 1px 0 rgba(255,255,255,.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(0,0,0,.18);

    pointer-events: none;

    /* start visible */
    opacity: 0;
    transform: translateX(0);

    /* 1) fade/slide in quickly
       2) subtle wiggle
       3) stay a bit
       4) fade out and become invisible */
    animation:
      fhSwipeIn 240ms ease-out 120ms forwards,
      fhSwipeWiggle 900ms ease-in-out 420ms 2,
      fhSwipeOut 420ms ease-in 2600ms forwards;
  }

  @keyframes fhSwipeIn{
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes fhSwipeWiggle{
    0%   { transform: translateX(0); }
    25%  { transform: translateX(4px); }
    50%  { transform: translateX(0); }
    75%  { transform: translateX(4px); }
    100% { transform: translateX(0); }
  }

  @keyframes fhSwipeOut{
    to { opacity: 0; transform: translateX(0); visibility: hidden; }
  }
}


/* =========================================================
   FH – Color swatches (mobile): prevent clipping + fix focus ring
   ========================================================= */
@media (max-width: 999px){

  /* 1) Left swatch not cut: give scroll area side padding */
  .fh-color-step__slots{
    padding-left: 16px !important;
    padding-right: 16px !important;
    scroll-padding-left: 16px;
    scroll-padding-right: 16px;
    box-sizing: border-box;
  }

  /* 2) If selected chip moves up, don't clip from top */
  .fh-color-step__slots{
    padding-top: 10px !important;
    overflow: visible !important;
  }

  /* Also make each chip area safe */
  .fh-color-chip,
  .fh-color-step__slots button{
    overflow: visible !important;
  }

  /* 3) Blue outline after ESC (focus ring) */
  .fh-color-chip:focus,
  .fh-color-chip:focus-visible,
  .fh-color-step__slots button:focus,
  .fh-color-step__slots button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  /* Optional: keep a soft, on-brand focus for accessibility (mouse won't show) */
  .fh-color-step__slots button:focus-visible{
    box-shadow: 0 0 0 2px rgba(54,70,64,.55) !important;
    border-radius: 12px;
  }
}



/* =========================================================
   FH – Color swatches FINAL FIX
   - no horizontal page scroll
   - labels left-aligned block
   - NO focus outline ever
   ========================================================= */
@media (max-width: 999px){

  /* 1) Stop page from sliding horizontally */
  body{
    overflow-x: hidden !important;
  }

  /* Only swatch row scrolls horizontally */
  .fh-color-step__slots{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;

    padding-left: 16px;
    padding-right: 16px;
    padding-top: 12px;
    box-sizing: border-box;
  }

  /* Prevent swatch row from extending layout width */
  .fh-color-step{
    overflow-x: hidden !important;
  }

  /* 2) Swatch items: fixed block + left-aligned label */
  .fh-color-chip{
    flex: 0 0 auto;
    width: 72px; /* sabit kolon hissi */
    align-items: flex-start;
    text-align: left;
  }

  .fh-color-chip__label{
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 6px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }

  /* 3) ABSOLUTELY NO focus ring (ESC dahil) */
  .fh-color-chip,
  .fh-color-chip *{
    outline: none !important;
    box-shadow: none !important;
  }

  .fh-color-chip:focus,
  .fh-color-chip:focus-visible,
  .fh-color-chip:active,
  .fh-color-step__slots button:focus,
  .fh-color-step__slots button:focus-visible,
  .fh-color-step__slots button:active{
    outline: none !important;
    box-shadow: none !important;
  }
}


/* =========================================================
   FH – Swatch row: force horizontal scroll (no stretching)
   ========================================================= */
@media (max-width: 999px){
  .fh-color-step__slots{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important; /* <-- yayılmayı kapatır */
    align-items: flex-start !important;
    gap: 18px !important;                  /* <-- aralık sabit */
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-x !important;        /* <-- iOS/Android swipe garanti */
  }

  /* Chip’ler asla satırı doldurmasın, taşsın ki scroll olsun */
  .fh-color-step__slots .fh-color-chip{
    flex: 0 0 auto !important;
    width: 84px !important;       /* istersen 78/90 yaparız */
    max-width: 84px !important;
  }
}


/* =========================================================
   FH – Swatch row: force TRUE left start (fix first chip spacing)
   ========================================================= */
@media (max-width: 999px){

  /* container kesin soldan başlasın */
  .fh-color-step__slots{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* chip'lerde olası margin/auto hizalamaları sıfırla */
  .fh-color-step__slots .fh-color-chip{
    margin: 0 !important;
  }

  /* özellikle ilk elemanda ekstra boşluk olmasın */
  .fh-color-step__slots .fh-color-chip:first-child{
    margin-left: 0 !important;
  }
}




/* =========================================================
   FH – MOBILE Color Popup FINAL (under header, full screen)
   Put at VERY END of fh-product.css
   ========================================================= */

/* header yüksekliği farklıysa sadece bunu değiştir */
:root{ --fh-header-offset: 64px; } /* 56-88 arası olabilir */

@media (max-width: 999px){

  /* modal wrapper */
  .fh-color-modal{
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--fh-header-offset) !important;
    bottom: 0 !important;
    inset: auto !important;              /* eski inset:0 tanımlarını kır */
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    z-index: 999999 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* overlay/backdrop: görünmez kalsın ama tıklamayı engellemesin */
  .fh-color-modal__overlay,
  .fh-color-modal__backdrop{
    display: none !important;
  }

  /* içerik kutusu: full screen panel */
  .fh-color-modal__dialog,
  .fh-color-modal__content,
  .fh-color-modal__panel{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    background: #fff !important;
    overflow: hidden !important;

    display: grid !important;
    grid-template-rows: auto auto 1fr auto !important; /* header + radios + list + hex */
  }

  /* header satırı */
  .fh-color-modal__header{
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
    background: #fff !important;
  }

  /* close: ESC sonrası mavi outline olmasın */
  .fh-color-modal__close,
  .fh-color-modal__close:focus,
  .fh-color-modal__close:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }

  /* üstteki White/Black satırı (eğer markup varsa) */
  .fh-color-modal__radios{
    padding: 10px 16px 12px !important;
    border-bottom: 1px solid rgba(0,0,0,.08) !important;
  }

  /* asıl liste / grid alanı tek scroll */
  .fh-color-modal__grid{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px 18px !important;
  }

  /* item: dot + text bloklu */
  .fh-color-grid-list,
  .fh-color-modal__grid .fh-color-grid-list{
    display: contents !important;
  }

  .fh-color-chip{
    display: grid !important;
    grid-template-columns: 26px 1fr !important;
    column-gap: 10px !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .fh-color-chip__circle{
    width: 22px !important;
    height: 22px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(0,0,0,.18) !important;
  }

  .fh-color-chip__label{
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;
    line-height: 1.15 !important;
  }

  /* Custom HEX alanı altta sabit */
  .fh-color-modal__custom-hex,
  .fh-color-modal__footer{
    position: sticky !important;
    bottom: 0 !important;
    z-index: 2 !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
    padding: 12px 16px 16px !important;
    margin: 0 !important;
  }
}



/* =========================================================
   FH – Color modal OPEN fix (modal açılmıyor sorunu)
   Put at VERY END of fh-product.css
   ========================================================= */

.fh-color-modal{
  display: none; /* default kapalı (JS açınca aşağıdakiler devreye girecek) */
}

/* JS hangi yöntemi kullanırsa kullansın "açık" yakalayalım */
.fh-color-modal.is-open,
.fh-color-modal.open,
.fh-color-modal[data-open="true"],
.fh-color-modal[open],
.fh-color-modal[aria-hidden="false"]{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* İç panelin de görünür olduğundan emin ol */
.fh-color-modal.is-open .fh-color-modal__content,
.fh-color-modal[open] .fh-color-modal__content,
.fh-color-modal[aria-hidden="false"] .fh-color-modal__content{
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


/* =========================================================
   FH – Color Modal (REAL FIX)
   Modal açılıyor ama görünmüyor sorununu çözer
   Put at VERY END of fh-product.css
   ========================================================= */

/* Prestige header değişkenleri varsa onları kullan */
:root{
  --fh-header-offset: calc(var(--announcement-bar-height, 0px) + var(--header-height, 64px));
}

@media (max-width: 999px){

  /* Modal KAPALI iken tamamen kapansın */
  .fh-color-modal[data-fh-color-modal]{
    display: none !important;
  }

  /* Modal AÇIK iken (is-visible) full-screen header altına yapışsın */
  .fh-color-modal.is-visible[data-fh-color-modal]{
    display: block !important;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: var(--fh-header-offset) !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    z-index: 999999 !important;

    background: #fff !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;

    overflow: hidden !important;
    pointer-events: auto !important;
  }

  /* İçeride ne varsa görünür olsun (bazı eski CSS'ler opacity/transform basıyor olabilir) */
  .fh-color-modal.is-visible[data-fh-color-modal] *{
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* İçteki scroll alanı: modal içi kaydırma garanti */
  .fh-color-modal.is-visible[data-fh-color-modal]{
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ESC/close sonrası mavi outline olmasın */
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus,
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}



/* =========================================================
   FH – Color Modal Mobile FINAL v2
   - fixed viewport bug (safe-sticky transform) fix
   - header altında kilitli + tam ekran
   ========================================================= */

:root{
  /* Announcement + header toplamı. Gerekirse sadece bunu oynat (72-120 arası) */
  --fh-header-offset: 112px;
}

@media (max-width: 999px){

  /* 1) SAFE-STICKY transform yüzünden fixed "viewport" olmuyor.
        Modern tarayıcılarda :has() ile sadece modal açıkken transform'u kapatıyoruz. */
  safe-sticky.product-info:has(.fh-color-modal.is-visible),
  .product-info:has(.fh-color-modal.is-visible){
    transform: none !important;
    will-change: auto !important;
  }

  /* 2) Modal açıkken: gerçek tam ekran */
  .fh-color-modal.is-visible[data-fh-color-modal]{
    position: fixed !important;

    /* iOS/Android güvenli tam ekran */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;

    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;

    z-index: 999999 !important;
    background: #fff !important;

    /* Header arkasında kalmasın: içerik aşağıdan başlasın */
    padding-top: var(--fh-header-offset) !important;
    box-sizing: border-box !important;

    overflow: hidden !important;
  }

  /* İç içerik tek scroll */
  .fh-color-modal.is-visible[data-fh-color-modal]{
    display: block !important;
  }
  .fh-color-modal.is-visible[data-fh-color-modal] > *{
    max-height: calc(100dvh - var(--fh-header-offset)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Close/ESC sonrası mavi outline olmasın */
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus,
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}



/* =========================================================
   FH – Color Modal FINAL v5 (simplified)
   ========================================================= */

:root{
  --fh-header-height: 120px; /* Header + announcement bar toplamı */
}

@media (max-width: 999px){

  /* Modal wrapper (KAPALIYKEN) */
  .fh-color-modal[data-fh-color-modal]{ display: none !important; }

  /* Modal açıkken: Full-screen, header altına kilitli */
  .fh-color-modal.is-visible[data-fh-color-modal]{
    display: flex !important;
    flex-direction: column !important;

    position: fixed !important;
    top: var(--fh-header-height) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: auto !important;

    background: #fff !important;
    z-index: 999999 !important;
    padding-top: 16px !important; /* İçerik ile üst boşluk */

    overflow: hidden !important;
  }

  /* Grid/list düzeni: Yalnızca renkler scroll olacak */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__list,
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    padding: 16px !important;

    overflow: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: 70vh !important;
  }

  /* Renk etiketleri (2 satır olacak şekilde) */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-slot__label{
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important; /* Maksimum 2 satır */
    overflow: hidden !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
  }

  /* Custom HEX footer sabit */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__custom-hex{
    position: sticky !important;
    bottom: 0 !important;
    padding: 16px !important;
    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
  }

  /* Close butonunda outline olmasın */
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus,
  .fh-color-modal.is-visible[data-fh-color-modal] button:focus-visible{
    outline: none !important;
    box-shadow: none !important;
  }
}




/* =========================================
   FH – Color Modal MOBILE: label wrap + tighter spacing
   Put at VERY END of fh-product.css
   ========================================= */
@media (max-width: 999px){

  /* Grid satır boşluklarını sıklaştır */
  .fh-color-grid-list{
    row-gap: 8px !important;   /* önce 12px idi */
    column-gap: 18px !important;
  }

  /* Chip iç padding'ini azalt → satırlar arası boşluk azalır */
  .fh-color-chip{
    padding: 2px 0 !important;
    align-items: center !important;
  }

  /* ✅ EN KRİTİK: kelimeyi ortadan bölme (Cotton → Cotto/n olmasın) */
  .fh-color-chip__label{
    max-width: 100% !important;
    white-space: normal !important;

    word-break: normal !important;      /* break-word’u ez */
    overflow-wrap: normal !important;   /* mümkünse boşluklardan kırılsın */
    hyphens: auto !important;

    line-height: 1.15 !important;

    /* maksimum 2 satır */
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
  }
}


@media (max-width: 999px){
  .fh-color-chip__label{
    /* uzun tek kelimeler sığmazsa KIRILSIN (ama gereksiz yere bölünmesin) */
    overflow-wrap: break-word !important;  /* <= kritik */
    word-break: normal !important;

    /* son harf kırpılma hissini azalt */
    padding-right: 2px !important;

    /* biraz daha rahat satır yüksekliği */
    line-height: 1.2 !important;
  }
}


/* =========================================
   FH – Color Modal MOBILE: full-width grid + clean label wrap + scrollbar padding
   (Paste at VERY END of fh-product.css)
   ========================================= */
@media (max-width: 999px){

  /* Scrollbar metnin üstüne binmesin (sağa biraz alan aç) */
  .fh-color-grid-scroll{
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* Kenarlardaki gereksiz boşluğu azalt → grid daha geniş görünür */
  .fh-color-grid-wrap{
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Grid: 3 kolon, soldan bloklu hizalı */
  .fh-color-grid-list{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    column-gap: 14px !important;
    row-gap: 10px !important;

    justify-items: start !important; /* item’lar soldan başlasın */
  }

  /* Her chip soldan bloklu dursun */
  .fh-color-chip{
    width: 100% !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 2px 0 !important;
    gap: 10px !important;
  }

  /* Label: max 2 satır, "..." yok, kelime ortasından bölme yok (ama çok uzun tek kelimeyi kırabilir) */
  .fh-color-chip__label{
    text-align: left !important;
    white-space: normal !important;

    word-break: normal !important;          /* Cotto/n olmasın */
    overflow-wrap: anywhere !important;     /* tek kelime çok uzunsa mecburen kırılsın */

    line-height: 1.15 !important;
    max-height: calc(1.15em * 2) !important; /* max 2 satır */
    overflow: hidden !important;

    text-overflow: clip !important;          /* ... istemiyoruz */
  }
}


/* =========================================
   FH – Color Modal MOBILE: single-word = 1 line, two-words can wrap
   Paste at VERY END of fh-product.css
   ========================================= */
@media (max-width: 999px){

  /* Sol çizgiye daha bloklu dursun (kenar boşluklarını azalt) */
  .fh-color-grid-wrap{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Scrollbar metne binmesin (sağa pay) */
  .fh-color-grid-scroll{
    padding-right: 18px !important;
    box-sizing: border-box !important;
  }

  /* Grid: soldan başla, boşlukları azalt → hücre genişlesin */
  .fh-color-grid-list{
    justify-items: start !important;
    column-gap: 12px !important;
    row-gap: 12px !important;
  }

  /* Chip soldan hizalı ve bloklu */
  .fh-color-chip{
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 2px 0 !important;
  }

  /* ✅ LABEL KURALI:
     - tek kelime: ASLA bölünmesin (White/Black/Cotton/Canvas tek satır)
     - iki kelime: gerekirse SADECE boşluktan kırılsın (Tawny Birch)
  */
  .fh-color-chip__label{
    /* önceki clamp/ellipsis/hidden ayarlarını iptal */
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
    text-overflow: clip !important;

    /* kelime ortasından kırma YOK */
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    hyphens: none !important;

    /* iki kelime ise satır sonuna gelince boşluktan geçebilir */
    white-space: normal !important;

    line-height: 1.15 !important;
  }

  /* Üstteki White/Black satırı da aynı kurala uysun (genelde aynı sınıfı kullanıyor) */
  .fh-color-selected .fh-color-chip__label,
  .fh-color-top-row .fh-color-chip__label{
    white-space: nowrap !important; /* White/Black tek satır garanti */
  }
}


/* FH – Color Modal: chip dot + label align + tighter spacing */
@media (max-width: 999px){

  /* Baloncuk + yazı arası yaklaşsın */
  .fh-color-chip{
    gap: 8px !important;              /* 10 -> 8 */
    align-items: center !important;   /* dikey ortala */
  }

  /* Label dikeyde tam ortaya gelsin ve biraz daha kompakt dursun */
  .fh-color-chip__label{
    line-height: 1.1 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    transform: translateY(1px); /* çok az aşağı al, gözle merkezler */
  }
}



/* FH – Color Modal: bring label closer to swatch (horizontal) */
@media (max-width: 999px){

  /* Chip’in içinde ekstra boşluk/padding varsa sıfırla */
  .fh-color-chip{
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 6px !important;               /* daha da yaklaştır */
    justify-content: flex-start !important;
  }

  /* Baloncuk elemanının kendi margin’i varsa onu da sıfırla */
  .fh-color-chip :is(
    .fh-color-chip__swatch,
    .fh-color-chip__dot,
    .fh-color-chip__circle,
    .fh-color-chip__bullet
  ){
    margin-right: 0 !important;
  }

  /* Label’ın kendi sol boşluğu varsa sıfırla */
  .fh-color-chip__label{
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
}


/* =========================================
   FH – Color Modal MOBILE: REAL FIX (slot + label)
   Paste at VERY END of fh-product.css
   ========================================= */
@media (max-width: 999px){

  /* Grid’i biraz sola al + soldan hizala */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__grid,
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__list{
    padding-left: 10px !important;
    padding-right: 14px !important; /* scrollbar payı */
    gap: 14px !important;
    justify-items: start !important;
  }

  /* ✅ Baloncuk + yazıyı YAN YANA yap (sola bloklu) */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-slot{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
  }

  /* Mobilde baloncuk biraz küçülsün ki yer açılsın */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-slot__circle{
    width: 44px !important;
    height: 44px !important;
  }

  /* ✅ LABEL KURALI:
     - tek kelime: tek satır kalır (kelime ortasından bölme yok)
     - iki kelime: gerekiyorsa boşluktan 2 satıra iner
  */
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-slot__label{
    margin-top: 0 !important;
    text-align: left !important;
    line-height: 1.15 !important;

    max-width: 96px !important;         /* iki kelimeye izin ver */
    white-space: normal !important;

    word-break: keep-all !important;     /* Whi/te olmasın */
    overflow-wrap: normal !important;    /* kelimeyi bölme */

    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;    /* max 2 satır */
    overflow: hidden !important;
  }

  /* Üstteki White/Black satırı da aynı hizaya gelsin */
  .fh-color-palette__top-row .fh-color-slot{
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
  }
  .fh-color-palette__top-row .fh-color-slot__label{
    margin-top: 0 !important;
    max-width: none !important;
    white-space: nowrap !important;      /* White/Black tek satır */
  }
}



/* =========================================
   FH Color Modal – SINGLE title (mobile)
   Correct target: slots wrapper
   ========================================= */
@media (max-width: 999px){

  /* Slots alanına yer aç */
  .fh-color-modal.is-visible .fh-color-modal__slots{
    position: relative;
    padding-top: 28px !important;
  }

  /* TEK ve DOĞRU başlık */
  .fh-color-modal.is-visible .fh-color-modal__slots::before{
    content: "Select a new color";
    position: absolute;
    top: 0;
    left: 0;

    font-size: 22px;
    line-height: 1.1;
    font-weight: 400;

    padding-left: 12px;
  }
}



/* FH – Color Modal: push divider down for more space (mobile) */
@media (max-width: 999px){

  /* White / Black satırının altına biraz daha alan aç */
  .fh-color-modal.is-visible .fh-color-modal__slots{
    padding-bottom: 30px !important;
  }

  /* Divider çizgisini aşağı it (genelde border-bottom ile geliyor) */
  .fh-color-modal.is-visible .fh-color-modal__slots{
    border-bottom-width: 1px; /* garanti */
  }

  /* Eğer divider ayrı bir element ise (hr vs.) */
  .fh-color-modal.is-visible .fh-color-modal__slots + *{
    margin-top: 8px !important;
  }
}


/* FH – Color Modal MOBILE: remove gap between top divider (slots) and grid */
@media (max-width: 999px){

  /* content bir GRID: satırlar arası boşluğu sıfırla */
  .fh-color-modal__content{
    row-gap: 0 !important;
  }

  /* slots bloğunun alt boşluğu olmasın (divider altına yapışsın) */
  .fh-color-modal__slots{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* grid bloğu divider’a yapışsın */
  .fh-color-modal__grid{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Bazı durumlarda ilk çocukta ekstra boşluk oluyor */
  .fh-color-modal__grid > :first-child{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Eğer hâlâ 6-10px kalıyorsa: çok hafif yukarı çek (gözle tam çizgiye oturur) */
  .fh-color-modal__slots + .fh-color-modal__grid{
    margin-top: -8px !important;
  }
}


/* =========================================
   FH – LOCK BODY SCROLL WHEN COLOR MODAL IS OPEN (MOBILE) — STABLE
   ========================================= */
@media (max-width: 999px){

  /* Modal açıkken arka sayfayı kilitle (fixed kullanma, iOS'ta sorun çıkarabiliyor) */
  body:has(.fh-color-modal.is-visible){
    overflow: hidden !important;
    /* position: fixed KULLANMA */
    width: 100% !important;
  }

  /* Modal ve içi scroll/pan serbest */
  .fh-color-modal.is-visible{
    touch-action: pan-y pinch-zoom !important;
  }

  .fh-color-modal__grid{
    overflow: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y pinch-zoom !important;
  }
}




/* FH – Color Modal background = theme background */
@media (max-width: 999px){
  .fh-color-modal__content{
    background-color: #FAF8F6 !important;
  }
}


/* FH – Color Modal: FORCE Custom HEX area to theme background (kill any white boxes) */
@media (max-width: 999px){

  /* Custom HEX alanının içindeki her şey tema rengi olsun (beyaz ne varsa öldürür) */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex,
  .fh-color-modal.is-visible .fh-color-modal__custom-hex *{
    background-color: #FAF8F6 !important;
    background: #FAF8F6 !important;
    box-shadow: none !important;
  }

  /* Input okunabilir kalsın */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex input,
  .fh-color-modal.is-visible .fh-color-modal__custom-hex textarea{
    background: #fff !important;
  }

  /* Apply butonu zaten koyu yeşilse dokunma; değilse geri boyayalım */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex button{
    background: #163f35 !important;
    color: #fff !important;
  }
}





/* FH – Custom HEX: remove the white card look inside the section */
@media (max-width: 999px){

  /* Bölüm zemini */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex{
    background: #FAF8F6 !important;
  }

  /* İçerde beyaz yapan tüm wrapper'lar şeffaf olsun */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex-inner,
  .fh-color-modal.is-visible .fh-color-modal__custom-hex-label,
  .fh-color-modal.is-visible .fh-color-modal__custom-hex-row{
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* Row’un kendi padding/margin’i varsa kart hissi yapıyor; sıfırla */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex-row{
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Input beyaz kalsın istiyoruz (normal). Ama etrafındaki “kutu” görünümü gitsin */
  .fh-color-modal.is-visible .fh-color-modal__custom-hex-row input{
    background: #fff !important;
  }
}


@media (max-width: 999px){
  .fh-color-modal.is-visible[data-fh-color-modal] .fh-color-modal__custom-hex{
    background: #FAF8F6 !important;
  }
}


/* ======================================================
   FH – COLORS ONLY (DESKTOP + MOBILE)
   Petrol: #003A43
   Gold hover/accent: #A68945
   NOTE: High-specificity to override Step-2 inline <style>
   (NO layout/typography changes)
====================================================== */

/* ---------------- STEP BUTTONS (Step-1 + Step-2) ---------------- */
/* Outline buttons (Back / Buy Sample etc.) */
html body .fh-wizard button.fh-btn{
  background: transparent !important;
  color: #003A43 !important;
  border-color: #003A43 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Primary buttons (Next / Add to cart) */
html body .fh-wizard button.fh-btn.fh-btn--primary{
  background: #003A43 !important;
  color: #ffffff !important;
  border-color: #003A43 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover / focus-visible */
html body .fh-wizard button.fh-btn:hover,
html body .fh-wizard button.fh-btn:focus-visible{
  background: #A68945 !important;
  color: #ffffff !important;
  border-color: #A68945 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* ---------------- MATERIAL (Step-2) selected + hover ---------------- */
/* Your DOM: <div class="fh-step fh-step--2" data-fh-step="2"> ... 
            <div class="fh-step2__materials"> 
              <button class="fh-step2__material is-active"> ... */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material{
  border-color: #003A43 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active{
  background: #003A43 !important;
  border-color: #003A43 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:hover,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:focus-visible{
  background: #A68945 !important;
  border-color: #A68945 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

/* If there are inner wrappers, keep them white too */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active *,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:hover *{
  color: #ffffff !important;
}

/* ---------------- SAMPLE MODAL (Continue + link hover) ---------------- */
html body .fh-sample-modal button.fh-sample-modal__btn{
  background: #003A43 !important;
  color: #ffffff !important;
  border-color: #003A43 !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .fh-sample-modal button.fh-sample-modal__btn:hover,
html body .fh-sample-modal button.fh-sample-modal__btn:focus-visible{
  background: #A68945 !important;
  border-color: #A68945 !important;
  color: #ffffff !important;
  outline: none !important;
  box-shadow: none !important;
}

html body .fh-sample-modal a:hover,
html body .fh-sample-modal a:focus{
  color: #A68945 !important;
  outline: none !important;
}


/* FH – Premium hover feel (no layout/typography) */
.fh-wizard .fh-btn,
.fh-step2__material{
  transition:
    background-color 280ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color     280ms cubic-bezier(0.22, 1, 0.36, 1),
    color            180ms ease,
    box-shadow       280ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* “Luxury depth” on hover */
.fh-wizard .fh-btn:hover,
.fh-step2__material:hover{
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.12),
    0 8px 18px rgba(0,0,0,0.14);
}


/* ======================================================
   FH – Material hover logic (desktop + mobile)
   - Active (is-active): always Petrol even on hover
   - Non-active: Gold on hover
====================================================== */

html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):hover,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):focus-visible{
  background: #A68945 !important;
  border-color: #A68945 !important;
  color: #ffffff !important;
}

html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active:hover,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active:focus-visible{
  background: #003A43 !important;
  border-color: #003A43 !important;
  color: #ffffff !important;
}

html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):hover *,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active:hover *{
  color: #ffffff !important;
}
/* FH – Material premium feel (no layout) */
.fh-step2__material{
  transition: background-color 220ms ease, border-color 220ms ease, color 180ms ease;
}


/* ======================================================
   FH – Outline buttons should stay neutral (black)
   ====================================================== */

/* Default outline buttons: BLACK text + border */
.fh-wizard .fh-btn:not(.fh-btn--primary){
  color: #111111 !important;
  border-color: #111111 !important;
}

/* Hover on outline buttons = GOLD */
.fh-wizard .fh-btn:not(.fh-btn--primary):hover,
.fh-wizard .fh-btn:not(.fh-btn--primary):focus-visible{
  background: #A68945 !important;
  border-color: #A68945 !important;
  color: #ffffff !important;
}

/* ======================================================
   FH – MATERIAL TABS (FINAL OVERRIDE)
   Non-active: subtle/faded border
   Active: Petrol
   Hover (non-active only): Gold
   NO layout/typography changes
====================================================== */

/* Base selector EXACT to your DOM */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material{
  outline: none !important;
}

/* NON-ACTIVE (default): faded border + black text */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active){
  background: transparent !important;
  border-color: rgba(17,17,17,0.28) !important; /* subtle like old */
  color: #111111 !important;
}

/* Hover ONLY on non-active = GOLD */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):hover,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):focus-visible{
  background: #A68945 !important;
  border-color: #A68945 !important;
  color: #ffffff !important;
}

/* ACTIVE: Petrol always (even on hover/tap) */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active:hover,
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active:focus-visible{
  background: #003A43 !important;
  border-color: #003A43 !important;
  color: #ffffff !important;
}

/* Inner text safety */
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active) *{
  color: #111111 !important;
}
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material:not(.is-active):hover *{
  color: #ffffff !important;
}
html body .fh-step.fh-step--2[data-fh-step="2"] .fh-step2__materials button.fh-step2__material.is-active *{
  color: #ffffff !important;
}



/* =========================================
   FH – Remove Step-2 label + extra top divider
   ========================================= */

/* 1) "STEP 2 • WALL SIZE & MATERIAL" yazısını kaldır */
.fh-step-header[data-fh-step2-title],
.fh-step-header[data-fh-step2-title] .fh-step-label{
  display: none !important;
}

/* 2) Üstteki fazladan çizgilerden birini kaldır (bizim eklediğimiz border-top) */
.fh-wizard .fh-step--2{
  border-top: none !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}



/* =========================================
   Restore product accordions under ATC
   (Description / Shipping / Returns)
   ========================================= */

/* Prestige’de accordion blokları farklı data-block-type isimleriyle gelebiliyor */
body.template-product .product-info__block-item[data-block-type*="collapsible"],
body.template-product .product-info__block-item[data-block-type*="accordion"],
body.template-product .product-info__block-item[data-block-type*="description"],
body.template-product .product-info__block-item[data-block-type*="content"]{
  display: block !important;
}

/* Details/accordion yapısını da görünür yap */
body.template-product details,
body.template-product details[open],
body.template-product .accordion,
body.template-product .collapsible,
body.template-product .collapsible-content {
  display: block !important;
}

/* Bizim custom ATC/root alanından sonra biraz boşluk */
body.template-product #fh-product-root + *{
  margin-top: 16px;
}




/* FabbHome – Product configurator (wall size + material + subtotal) */

.fh-config {
  margin: 24px 0 32px;
  padding: 20px 24px;
  border: 1px solid #dedede;
  background-color: #f5f5f3;
  font-size: 13px;
  line-height: 1.5;
}

.fh-config__section {
  margin-bottom: 20px;
}

.fh-config__section:last-child {
  margin-bottom: 0;
}

/* Size */

.fh-config__size-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  margin-bottom: 8px;
}

.fh-config__size-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 10px;
}

.fh-config__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fh-config__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #b3b3b3;
  font-size: 11px;
  margin-left: 6px;
}

.fh-config__input-unit {
  display: flex;
  align-items: stretch;
  border: 1px solid #c7c7c7;
  background-color: #ffffff;
}

.fh-config__input-unit input[type="number"] {
  flex: 1 1 auto;
  border: 0;
  padding: 8px 10px;
  font-size: 13px;
  -moz-appearance: textfield;
}

.fh-config__input-unit input::-webkit-outer-spin-button,
.fh-config__input-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fh-config__input-unit select {
  flex: 0 0 56px;
  border: 0;
  border-left: 1px solid #c7c7c7;
  font-size: 13px;
  text-align-last: center;
  background-color: #f2f2f2;
}

.fh-config__note {
  margin-top: 8px;
  font-size: 12px;
  color: #777777;
}

.fh-config__area-row {
  margin-top: 10px;
  font-size: 12px;
}

.fh-config__area-label {
  font-weight: 500;
}

/* Material */

.fh-config__material-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 10px;
}

.fh-config__material-current {
  font-size: 13px;
}

.fh-config__material-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.fh-config__material-option {
  border: 1px solid #c7c7c7;
  background-color: #ffffff;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.fh-config__material-title {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fh-config__material-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.fh-config__material-option.is-active {
  background-color: #384741;
  border-color: #384741;
  color: #ffffff;
}

.fh-config__material-description {
  font-size: 12px;
  color: #555555;
}

/* Subtotal */

.fh-config__subtotal-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}

.fh-config__subtotal-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}

.fh-config__subtotal-value {
  font-size: 18px;
  font-weight: 500;
}

.fh-config__subtotal-note {
  margin-top: 6px;
  font-size: 12px;
  color: #777777;
}



/* --------------------------------------------------
   FabbHome – Product accordions under BUY SAMPLE
   (Description / Materials / Disclaimer / Shipping)
   -------------------------------------------------- */

/* Dış çerçeve: her satır */
.fh-accordion {
  border-top: 1px solid #e3e3e3;
  margin: 0;
  padding: 0;
}

/* Son satır için alt çizgi */
.fh-accordion:last-of-type {
  border-bottom: 1px solid #e3e3e3;
}

/* Başlık satırı (SUMMARY) */
.fh-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none; /* default üçgeni gizle */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

/* Safari / Chrome marker’ını gizle */
.fh-accordion > summary::-webkit-details-marker {
  display: none;
}


/* Açılan içerik */
.fh-accordion__content {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}
/* --------------------------------------------------
   FabbHome – BUY SAMPLE & ADD TO CART equal width
   -------------------------------------------------- */

.fh-actions {
  display: flex !important;
  gap: 16px !important; /* veya 12px istersen daha dar */
  width: 100%;
}


.fh-actions > * {
  flex: 1 1 50% !important;
  width: 50% !important;
}

/* BUY SAMPLE butonu solda hizalı kalsın diye */
.fh-actions > a.fh-btn {
  text-align: center !important;
}

/* ADD TO CART butonu da tam genişlik */
.fh-actions > button {
  width: 100% !important;
}
/* BUY SAMPLE görünümü düzelt */
.fh-actions a.fh-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 0 !important;
  border: 1px solid #2f3f3b !important; /* Add to cart butonunun rengi */
  height: 100% !important;
}

/* ------------------------------------------
   BUY SAMPLE & ADD TO CART text alignment fix
   ------------------------------------------ */

.fh-actions a.fh-btn,
.fh-actions button {
  font-family: inherit !important;
  font-size: 15px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------------
   FABBHOME ACCORDION
   ---------------------------------------------------- */

/* Her accordion satırı */
.fh-accordion {
  border-top: 1px solid #dcdcdc;
  transition: all 0.25s ease;
}

.fh-accordion:last-of-type {
  border-bottom: 1px solid #dcdcdc;
}

/* Başlık (summary) */
.fh-accordion > summary {
  position: relative;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  list-style: none;
}

/* Webkit marker gizleme */
.fh-accordion > summary::-webkit-details-marker {
  display: none;
}

/* + ikonunu iki ince çizgi ile oluştur */
.fh-accordion > summary::before,
.fh-accordion > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background-color: #2a2a2a; /* ince çizgi rengi */
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* Yatay çizgi */
.fh-accordion > summary::before {
  transform: translateY(-50%);
}

/* Dikey çizgi → + işareti */
.fh-accordion > summary::after {
  transform: translateY(-50%) rotate(90deg);
}

/* AÇILINCA: dikey çizgi yatay hale gelir → eksi görünümü */
.fh-accordion[open] > summary::after {
  transform: translateY(-50%) rotate(0deg);
}


/* İçerik – sade, tek fazlı animasyon (duraksama yok) */
.fh-accordion__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  transition:
    max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity    0.4s ease-out;
  /* transform YOK – ikinci kayma hissini yapan buydu */
}

/* <details open> olduğunda */
.fh-accordion[open] .fh-accordion__content {
  max-height: 800px;  /* içeriğinden büyük olsun, sorun değil */
  opacity: 1;
  /* transform YOK */
}


/* Fabb – Ürün sayfası: sol kolon gerçekten büyüsün (desktop) */
@media (min-width: 750px) {
  /* Ana grid: sol 2fr, sağ 1fr – zorunlu uygula */
  .product {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) !important;
    column-gap: 5rem !important;
    align-items: start;
  }

  /* Galeri kolonu grid içindeki alanını tam kullansın */
  .product-gallery {
    width: 100% !important;
    max-width: none !important;
  }

  .product-gallery__media {
    max-width: none !important;
  }
}


/* ------------------------------------------
   FabbHome – Config layout
   Kart kutuyu kaldır, çizgili görünüm yap
------------------------------------------- */

/* Dıştaki büyük kutuyu iptal et */
.fh-product-config {
  margin: 32px 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Eğer içeride ayrı bir kart div'i varsa (fh-config-panel gibi) onu da nötrle */
.fh-config-panel,
.fh-subtotal-box {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Her bölümün iç boşluğu + çizgiler */
.fh-section {
  margin: 0;
  padding: 20px 0;
  border: none;
}

/* Birbirini takip eden bölümler arasına çizgi koy */
.fh-section + .fh-section {
  border-top: 1px solid #e3e3e3;
}

/* Subtotal satırı: üstü çizgili, yan yana hizalı */
.fh-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0 6px;
  border-top: 1px solid #e3e3e3;
}

/* Subtotal açıklaması */
.fh-subtotal-note {
  font-size: 13px;
  color: #777;
  margin-bottom: 24px;
}

/* FH CONFIG için Prestige’in liquid kart stilini tamamen iptal et */
.product-info__block-item[data-block-id="liquid_gTE3UC"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bu item’ın pseudo border çizgilerini de kapat */
.product-info__block-item[data-block-id="liquid_gTE3UC"]::before,
.product-info__block-item[data-block-id="liquid_gTE3UC"]::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sadece bizim fh-config içeriğine çizgi ver */
.product-info__block-item[data-block-id="liquid_gTE3UC"] .fh-config {
  margin: 24px 0 32px !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  background: transparent !important;
}

.shopify-section-header-sticky,
.shopify-section--header,
#shopify-section-header,
#shopify-section-header .header-wrapper {
  border-bottom: 1px solid #E5E2DB !important;
}
/* Desktop mega menü açılınca üstünde ince çizgi olsun */
.header__submenu,
.header__dropdown,
.header__mega-menu,
.mega-menu,
.mega-menu__content {
  border-top: 1px solid #E5E2DB;
}

/* ============================
   FabbHome - Homepage Category Slider (6'lı, overlay arrow)
   ============================ */

.fh-home-slider {
  margin: 72px auto;
}

.fh-home-slider__header {
  text-align: center;
  margin-bottom: 32px;
}

.fh-home-slider__heading {
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.fh-home-slider__subheading {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* İç düzen – oklar overlay, içerik tam ortada */

.fh-home-slider__inner {
  position: relative;
  display: block;
  padding: 0 64px; /* oklar için kenar boşluğu */
}

/* Ok butonları – minimal, overlay */

.fh-home-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  padding: 0;
}

.fh-home-slider__arrow--prev {
  left: 16px;
}

.fh-home-slider__arrow--next {
  right: 16px;
}

.fh-home-slider__arrow-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: -1px;
}

.fh-home-slider__arrow:hover {
  background: #f6f6f6;
  border-color: #bfbfbf;
  transform: translateY(-50%) translateY(-1px);
}

/* Viewport */

.fh-home-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fh-home-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* Track – grid gibi, tam 6 kart göster */

.fh-home-slider__track {
  display: grid;
  grid-auto-flow: column;
  column-gap: 24px;
  grid-auto-columns: calc((100% - (5 * 24px)) / 6);
  /* 6 kolon: (toplam genişlik - 5 gap) / 6 */
}

/* Her item grid kolonunu tamamen doldurur */
.fh-home-slider__item {
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Tablet & mobile için kolon sayısını azaltalım */

@media screen and (max-width: 1023px) {
  .fh-home-slider__track {
    grid-auto-columns: calc((100% - (3 * 24px)) / 4); /* tablet: 4 kart */
  }
}

@media screen and (max-width: 749px) {
  .fh-home-slider__inner {
    padding: 0 48px;
  }

  .fh-home-slider__arrow {
    width: 34px;
    height: 34px;
  }

  .fh-home-slider__track {
    grid-auto-columns: calc((100% - (1 * 16px)) / 2); /* mobile: 2 kart */
    column-gap: 16px;
  }
}

/* Görsel alanı – kare, köşeli */

.fh-home-slider__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
}

.fh-home-slider__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.25s ease;
}

.fh-home-slider__item:hover .fh-home-slider__image {
  transform: scale(1.02);
}

/* Placeholder */

.fh-home-slider__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}

/* Alt başlık */

.fh-home-slider__label {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- FH slider desktop ince ayar: ortala + biraz küçült --- */
@media screen and (min-width: 1024px) {
  .fh-home-slider__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;   /* sağ/sol daha fazla boşluk, ama kartlar tam */
  }

  .fh-home-slider__track {
    column-gap: 20px;
    grid-auto-columns: calc((100% - (5 * 20px)) / 6);
    /* 6 kart tam sığsın, her biri biraz küçülmüş olsun */
  }
}

/* Ok karakterini tamamen gizle */
.fh-home-slider__arrow-icon {
  font-size: 0 !important;
}

.fh-home-slider__arrow {
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.fh-home-slider__arrow--prev {
  left: 24px;   /* eskiden -60px'ti */
}

.fh-home-slider__arrow--next {
  right: 24px;  /* eskiden -60px'ti */
}


.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
}

/* Kayma alanı */
.fh-home-slider__viewport {
  overflow: hidden;
  width: 100%;
}

/* Kart sıralaması */
.fh-home-slider__track {
  display: flex;
  gap: 16px;  /* boşluğu küçülttük = kartlar büyüdü */
}

/* 7 kare kart yan yana */
.fh-home-slider__item {
  flex: 0 0 calc((100% - 6 * 16px) / 7);
}

.fh-home-slider__image-wrapper {
  aspect-ratio: 1 / 1;  /* kare kart */
}



/* FH Category – sayfa genişliği ayarı  */
.fh-home-slider.page-width {
  max-width: 1400px;       /* istersen 1500 de yapabilirsin */
  margin-inline: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.fh-home-slider__inner {
  position: relative;
  margin-top: 32px;
}

.fh-home-slider__arrow {
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.fh-home-slider__arrow--prev {
  left: 12px;
}

.fh-home-slider__arrow--next {
  right: 12px;
}

.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
}

/* --- FH Category Slider – genişlik & hizalama (7 kare kutu) --- */

/* Bu section'ı global page-width sınırından çıkar, tam genişlik kullan */
section.fh-home-slider.page-width {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Asıl içerik alanını ortala ve genişlet */
.fh-home-slider__inner {
  position: relative;
  max-width: 1440px;          
  margin: 32px auto 0;        /* üstten boşluk + ortalama */
  padding: 0 40px;            /* sağ/sol marj – istersen 32/48 oynarız */
}

/* Viewport & track */
.fh-home-slider__viewport {
  overflow: hidden;
  width: 100%;
}

.fh-home-slider__track {
  display: flex;
  gap: 16px;                  /* boşluğu biraz azalttık ki kartlar büyüsün */
}

/* 7 kare kart yan yana, alanı doldurarak */
.fh-home-slider__item {
  flex: 0 0 calc((100% - 6 * 16px) / 7);
}

.fh-home-slider__image-wrapper {
  aspect-ratio: 1 / 1;        /* kare kutu */
}

/* --- FH Category Slider – Oklar (stabil) --- */

.fh-home-slider__inner {
  position: relative;
  max-width: 1440px;
  margin: 32px auto 0;
  padding: 0 40px;
  overflow: visible;            /* dışarı taşan oklar görünsün */
}

.fh-home-slider__arrow {
  position: absolute;
  top: 45%;                     /* biraz yukarıda */
  transform: translateY(-50%);  /* sadece Y ekseni */
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 50;
}

/* Sol ok: kutuların dışına, hafif mesafe ile */
.fh-home-slider__arrow--prev {
  left: -24px;                  /* dışarı taşıma */
}

/* Sağ ok */
.fh-home-slider__arrow--next {
  right: -24px;
}

.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Hover efekti – yerinden oynamadan hafif büyüme */
.fh-home-slider__arrow:hover .fh-home-slider__arrow-img {
  transform: scale(1.06);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
/* OK BUTONLARINI YAKLAŞTIR + BEYAZ GLOW İPTAL */
.fh-home-slider__arrow {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 50;
}

/* Sol ok */
.fh-home-slider__arrow--prev {
  left: -24px;      /* önce -32 px idi — kutulara yaklaştırdık */
}

/* Sağ ok */
.fh-home-slider__arrow--next {
  right: -24px;
}

/* SVG İKONU – beyaz glow / blur tamamen iptal */
.fh-home-slider__arrow-img {
  display: block;
  width: 40px;
  height: 40px;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: none !important;
  transition: transform 0.15s ease-out;
}

/* Hover efekti – yerinde hafif büyüme (asla glow değil) */
.fh-home-slider__arrow:hover .fh-home-slider__arrow-img {
  transform: scale(1.06);
}

/* FabbHome – Homepage Bestsellers */
.fh-bestsellers {
  padding: 56px 0 64px;
}

.fh-bestsellers__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;
}

.fh-bestsellers__eyebrow {
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 16px;
}

.fh-bestsellers__header {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.fh-bestsellers__tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #ddd;
}

.fh-bestsellers__tab {
  position: relative;
  border: none;
  background: none;
  padding: 8px 0 14px;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.6;
}

.fh-bestsellers__tab.is-active {
  opacity: 1;
}

.fh-bestsellers__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: #111;
}

/* Panels */
.fh-bestsellers__panels {
  margin-top: 16px;
}

.fh-bestsellers__panel {
  display: none;
}

.fh-bestsellers__panel.is-active {
  display: block;
}

.fh-bestsellers__empty {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

/* Slider */
.fh-bs-slider {
  position: relative;
  display: flex;
  align-items: center;
}

.fh-bs-slider__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}

.fh-bs-slider__viewport::-webkit-scrollbar {
  display: none;
}

.fh-bs-slider__track {
  display: flex;
  gap: 32px;
  padding: 8px 16px;
}

/* 4 ürün görünür olacak şekilde kart genişliği */
.fh-bs-slider__item {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Oklar */
.fh-bs-slider__arrow {
  border: none;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fh-bs-slider__arrow:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fh-bs-slider__arrow--prev {
  margin-right: 4px;
}

.fh-bs-slider__arrow--next {
  margin-left: 4px;
}

/* Slider container */
.fh-bs-slider {
  position: relative;
}

/* Viewport */
.fh-bs-slider__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fh-bs-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* Track */
.fh-bs-slider__track {
  display: flex;
  gap: 32px;
  padding: 0;
}

/* 4 kolon – tam oturan genişlik hesaplaması */
.fh-bs-slider__item {
  flex: 0 0 calc((100% - 3 * 32px) / 4);
  max-width: calc((100% - 3 * 32px) / 4);
}

/* 1400px – 3 kolon */
@media (max-width: 1400px) {
  .fh-bs-slider__track {
    gap: 24px;
  }
  .fh-bs-slider__item {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
    max-width: calc((100% - 2 * 24px) / 3);
  }
}

/* 960px – 2 kolon */
@media (max-width: 960px) {
  .fh-bs-slider__item {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

/* 640px – tek kolon */
@media (max-width: 640px) {
  .fh-bs-slider__track {
    gap: 16px;
    padding: 8px;
  }
  .fh-bs-slider__item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.product-card__media,
.product-card__media img,
.product-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.fh-bs-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fh-bs-slider__arrow--prev { left: 16px; }
.fh-bs-slider__arrow--next { right: 16px; }
.fh-bs-slider__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .fh-bs-slider__arrow { display: none; }
}


/* ---- BUY SAMPLE & NEXT butonları – Prestige siyah kayma fix ---- */

/* Önce Prestige'in siyah kayan overlay'ini kapatıyoruz */
.buy-buttons.fh-actions .fh-btn::before,
.buy-buttons.fh-actions .fh-next-button::before {
  content: none !important;
}




/* --------------------------------------------------
   FabbHome – Base product info + color group + actions
-------------------------------------------------- */

/* SKU / product code */
.fh-product-code {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}

/* Ana koleksiyon / type satırı */
.fh-product-main-collection {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Color group swatch bar */
.fh-color-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 14px 0;
}

.fh-color-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fh-color-group__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
  white-space: nowrap;
}

.fh-color-group__swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fh-color-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.fh-color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fh-color-swatch:hover {
  transform: translateY(-1px);
}

.fh-color-swatch--active {
  border-color: #000;
}

/* BUY SAMPLE + ADD TO CART satırı */
.fh-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 700px) {
  .fh-actions {
    flex-direction: row;
    align-items: stretch;
  }
}

/* FabbHome basic button (BUY SAMPLE) */
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center
  }


/* SVG OLMAYAN ÜRÜNLERDE (fh-no-color-step) BACK BUTONUNU GİZLE */
html.fh-no-color-step .fh-btn-row--step2 [data-fh-back] {
  display: none;
}

/* Back gizlenince kalan butonları sağa hizala (opsiyonel) */
html.fh-no-color-step .fh-btn-row--step2 {
  justify-content: flex-end;
}



/* =========================
   FH – TOPBAR
   ========================= */
.fh-topbar{
  background: #364640; /* senin yeşil tonuna yakın; istersen değiştiririz */
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: none;
}

.fh-topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: 12px;
}

.fh-topbar__list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fh-topbar__link{
  color: inherit;
  text-decoration: none;
  opacity: .95;
}

.fh-topbar__link:hover{ opacity: 1; text-decoration: underline; }

.fh-topbar__right{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* Sticky (JS yok, saf CSS) */
body .fh-topbar[data-fh-topbar]{
  position: sticky;
  top: 0;
  z-index: 60;
}


/* FH Topbar – global */
.fh-topbar--sticky{
  position: sticky;
  top: 0;
  z-index: 60;
}


/* =========================================================
   FH – CLICK BLOCKER FIX (Color modal / Sample modal)
   Put at VERY END of theme.css
   ========================================================= */

/* 1) Color modal: varsayılan durumda ASLA tıklama yakalamasın */
.fh-color-modal{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Daha önce eklenen "her şeye açık say" kurallarını nötralize et
   (özellikle aria-hidden="false" / open / data-open vb.) */
.fh-color-modal.is-open,
.fh-color-modal.open,
.fh-color-modal[data-open="true"],
.fh-color-modal[open],
.fh-color-modal[aria-hidden="false"]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2) Sadece GERÇEKTEN açıkken (is-visible) aktif olsun */
.fh-color-modal.is-visible{
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Modal içeriği tıklanabilir kalsın */
.fh-color-modal.is-visible .fh-color-modal__content,
.fh-color-modal.is-visible .fh-color-modal__dialog,
.fh-color-modal.is-visible .fh-color-modal__grid{
  pointer-events: auto !important;
}

/* 3) Sample modal da kapalıyken click blocker olmasın */
.fh-sample-modal{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.fh-sample-modal.is-open{
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.fh-sample-modal.is-open *{
  pointer-events: auto !important;
}


/* =========================================================
   FH – ATC / SAMPLE CLICK UNBLOCK (hard override)
   Put at VERY END of fh-product.css
   ========================================================= */

/* Modal sadece .is-visible iken aktif olsun.
   "open/aria-hidden/data-open" durumları click-blocker olmasın */
.fh-color-modal:not(.is-visible),
.fh-color-modal.is-open:not(.is-visible),
.fh-color-modal.open:not(.is-visible),
.fh-color-modal[data-open="true"]:not(.is-visible),
.fh-color-modal[open]:not(.is-visible),
.fh-color-modal[aria-hidden="false"]:not(.is-visible){
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Güvenlik: modalın içi de kapalıyken click yakalamasın */
.fh-color-modal:not(.is-visible) *{
  pointer-events: none !important;
}

/* Sample modal da kapalıyken click yakalamasın */
.fh-sample-modal:not(.is-open){
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* =========================
   FH – LOCALE MODAL (Topbar)
   ========================= */
html.fh-locale-modal-open { overflow: hidden; }

.fh-locale-modal[hidden]{ display:none !important; }

.fh-locale-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.fh-locale-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.fh-locale-modal__panel{
  position: absolute;
  top: 48px;           /* topbarın altı gibi düşün */
  left: 12px;
  width: min(420px, calc(100% - 24px));
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.fh-locale-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.fh-locale-modal__title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.fh-locale-form__row{
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.fh-locale-form__label{
  font-size: 12px;
  opacity: .8;
}

.fh-locale-form__select{
  width: 100%;
  height: 38px;
}

.fh-locale-form__confirm{
  width: 100%;
  height: 40px;
}







/* FH – Topbar Locale Modal (hard override) */
#fh-topbar-loc-modal[hidden]{ display:none !important; }

#fh-topbar-loc-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: block !important;
}

#fh-topbar-loc-modal .fh-locale-modal__backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.35) !important;
}

#fh-topbar-loc-modal .fh-locale-modal__panel{
  position: fixed !important;
  top: 56px !important;
  right: 16px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 32px)) !important;
  background:#fff !important;
  color:#111 !important;
  border-radius:12px !important;
  padding:16px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
}

@media (max-width:699px){
  #fh-topbar-loc-modal .fh-locale-modal__panel{
    left:16px !important;
    right:16px !important;
    width:auto !important;
  }
}

html.fh-loc-open, html.fh-loc-open body{ overflow:hidden !important; }



/* =========================
   FH – TOPBAR (final)
   ========================= */

[data-fh-topbar]{
  background:#ECE7E2 !important;
  color:#231F20 !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
}

[data-fh-topbar] .fh-topbar__inner{
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:0 16px !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
}

[data-fh-topbar] a,
[data-fh-topbar] button{
  color:inherit !important;
  text-decoration:none !important;
  opacity:.95 !important;
}

[data-fh-topbar] a:hover,
[data-fh-topbar] button:hover{
  opacity:1 !important;
  text-decoration:underline !important;
}



/* =========================================================
   FH – LOCALE MODAL (MOBILE ONLY) – full-width, comfy tap UI
   Desktop'a dokunmaz (sadece max-width: 999px)
========================================================= */
@media (max-width: 999px){

  /* Modal container: panel’i ekran içine düzgün oturt */
  .fh-locale-modal{
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Panel: kareyi iptal et, full-width hissi ver */
  .fh-locale-modal__panel{
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 92vh !important;

    aspect-ratio: auto !important;     /* ✅ kareyi iptal */
    overflow: auto !important;         /* ✅ içerik uzarsa scroll */
    -webkit-overflow-scrolling: touch !important;

    padding: 28px 18px 22px !important;
  }

  /* Close butonu dokunma alanı */
  .fh-locale-modal__close{
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 30px !important;
  }

  /* Başlık / açıklama: taşmayı engelle */
  .fh-locale-modal__title{
    font-size: 30px !important;
    line-height: 1.1 !important;
    white-space: normal !important;  /* ✅ tek satır kilidini kaldır */
    margin: 4px 0 12px !important;
  }
  .fh-locale-modal__desc{
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 auto 18px !important;
    max-width: 100% !important;
  }

  /* Label spacing */
  .fh-locale-form__label{
    margin: 14px 0 8px !important;
  }

  /* ✅ Mobile dropdown’lar full width (300px kilidini ezer) */
  .fh-dd{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
  }

  /* Trigger: daha rahat dokunma */
  .fh-dd-trigger{
    height: 56px !important;
    padding: 0 16px !important;
  }
  .fh-dd-trigger__text{
    font-size: 16px !important;
  }

  /* Açılan liste: mobile UX (scroll olabilir) */
  .fh-dd-menu{
    max-height: 46vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Item’lar: rahat dokunma */
  .fh-dd-item{
    padding: 14px 16px !important;
  }
  .fh-dd-item__text{
    font-size: 15px !important;
  }

  /* Continue butonu: full-width, rahat */
  .fh-locale-form__confirm{
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    margin: 18px auto 12px !important;
  }

  /* Alt link + note aralık */
  .fh-locale-modal__altlink{
    margin: 6px auto 10px !important;
  }
  .fh-locale-modal__note{
    margin: 10px auto 0 !important;
    max-width: 100% !important;
  }
}



/* FabbHome – Product configurator (wall size + material + subtotal) */

.fh-config {
  margin: 24px 0 32px;
  padding: 20px 24px;
  border: 1px solid #dedede;
  background-color: #f5f5f3;
  font-size: 13px;
  line-height: 1.5;
}

.fh-config__section {
  margin-bottom: 20px;
}

.fh-config__section:last-child {
  margin-bottom: 0;
}

/* Size */

.fh-config__size-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  margin-bottom: 8px;
}

.fh-config__size-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
  row-gap: 10px;
}

.fh-config__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fh-config__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #b3b3b3;
  font-size: 11px;
  margin-left: 6px;
}

.fh-config__input-unit {
  display: flex;
  align-items: stretch;
  border: 1px solid #c7c7c7;
  background-color: #ffffff;
}

.fh-config__input-unit input[type="number"] {
  flex: 1 1 auto;
  border: 0;
  padding: 8px 10px;
  font-size: 13px;
  -moz-appearance: textfield;
}

.fh-config__input-unit input::-webkit-outer-spin-button,
.fh-config__input-unit input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.fh-config__input-unit select {
  flex: 0 0 56px;
  border: 0;
  border-left: 1px solid #c7c7c7;
  font-size: 13px;
  text-align-last: center;
  background-color: #f2f2f2;
}

.fh-config__note {
  margin-top: 8px;
  font-size: 12px;
  color: #777777;
}

.fh-config__area-row {
  margin-top: 10px;
  font-size: 12px;
}

.fh-config__area-label {
  font-weight: 500;
}

/* Material */

.fh-config__material-header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  margin-bottom: 10px;
}

.fh-config__material-current {
  font-size: 13px;
}

.fh-config__material-options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.fh-config__material-option {
  border: 1px solid #c7c7c7;
  background-color: #ffffff;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.fh-config__material-title {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.fh-config__material-sub {
  display: block;
  margin-top: 3px;
  font-size: 11px;
}

.fh-config__material-option.is-active {
  background-color: #384741;
  border-color: #384741;
  color: #ffffff;
}

.fh-config__material-description {
  font-size: 12px;
  color: #555555;
}

/* Subtotal */

.fh-config__subtotal-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 14px;
}

.fh-config__subtotal-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
}

.fh-config__subtotal-value {
  font-size: 18px;
  font-weight: 500;
}

.fh-config__subtotal-note {
  margin-top: 6px;
  font-size: 12px;
  color: #777777;
}



/* --------------------------------------------------
   FabbHome – Product accordions under BUY SAMPLE
   (Description / Materials / Disclaimer / Shipping)
   -------------------------------------------------- */

/* Dış çerçeve: her satır */
.fh-accordion {
  border-top: 1px solid #e3e3e3;
  margin: 0;
  padding: 0;
}

/* Son satır için alt çizgi */
.fh-accordion:last-of-type {
  border-bottom: 1px solid #e3e3e3;
}

/* Başlık satırı (SUMMARY) */
.fh-accordion > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none; /* default üçgeni gizle */
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
}

/* Safari / Chrome marker’ını gizle */
.fh-accordion > summary::-webkit-details-marker {
  display: none;
}


/* Açılan içerik */
.fh-accordion__content {
  padding: 0 0 16px;
  font-size: 14px;
  line-height: 1.6;
}
/* --------------------------------------------------
   FabbHome – BUY SAMPLE & ADD TO CART equal width
   -------------------------------------------------- */

.fh-actions {
  display: flex !important;
  gap: 16px !important; /* veya 12px istersen daha dar */
  width: 100%;
}


.fh-actions > * {
  flex: 1 1 50% !important;
  width: 50% !important;
}

/* BUY SAMPLE butonu solda hizalı kalsın diye */
.fh-actions > a.fh-btn {
  text-align: center !important;
}

/* ADD TO CART butonu da tam genişlik */
.fh-actions > button {
  width: 100% !important;
}
/* BUY SAMPLE görünümü düzelt */
.fh-actions a.fh-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 16px 0 !important;
  border: 1px solid #2f3f3b !important; /* Add to cart butonunun rengi */
  height: 100% !important;
}

/* ------------------------------------------
   BUY SAMPLE & ADD TO CART text alignment fix
   ------------------------------------------ */

.fh-actions a.fh-btn,
.fh-actions button {
  font-family: inherit !important;
  font-size: 15px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
}

/* ----------------------------------------------------
   FABBHOME ACCORDION
   ---------------------------------------------------- */

/* Her accordion satırı */
.fh-accordion {
  border-top: 1px solid #dcdcdc;
  transition: all 0.25s ease;
}

.fh-accordion:last-of-type {
  border-bottom: 1px solid #dcdcdc;
}

/* Başlık (summary) */
.fh-accordion > summary {
  position: relative;
  padding: 20px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 400;
  list-style: none;
}

/* Webkit marker gizleme */
.fh-accordion > summary::-webkit-details-marker {
  display: none;
}

/* + ikonunu iki ince çizgi ile oluştur */
.fh-accordion > summary::before,
.fh-accordion > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 14px;
  height: 1px;
  background-color: #2a2a2a; /* ince çizgi rengi */
  transform-origin: center;
  transition: transform 0.25s ease;
}

/* Yatay çizgi */
.fh-accordion > summary::before {
  transform: translateY(-50%);
}

/* Dikey çizgi → + işareti */
.fh-accordion > summary::after {
  transform: translateY(-50%) rotate(90deg);
}

/* AÇILINCA: dikey çizgi yatay hale gelir → eksi görünümü */
.fh-accordion[open] > summary::after {
  transform: translateY(-50%) rotate(0deg);
}


/* İçerik – sade, tek fazlı animasyon (duraksama yok) */
.fh-accordion__content {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  transition:
    max-height 0.5s cubic-bezier(0.25, 1, 0.5, 1),
    opacity    0.4s ease-out;
  /* transform YOK – ikinci kayma hissini yapan buydu */
}

/* <details open> olduğunda */
.fh-accordion[open] .fh-accordion__content {
  max-height: 800px;  /* içeriğinden büyük olsun, sorun değil */
  opacity: 1;
  /* transform YOK */
}


/* Fabb – Ürün sayfası: sol kolon gerçekten büyüsün (desktop) */
@media (min-width: 750px) {
  /* Ana grid: sol 2fr, sağ 1fr – zorunlu uygula */
  .product {
    display: grid !important;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr) !important;
    column-gap: 5rem !important;
    align-items: start;
  }

  /* Galeri kolonu grid içindeki alanını tam kullansın */
  .product-gallery {
    width: 100% !important;
    max-width: none !important;
  }

  .product-gallery__media {
    max-width: none !important;
  }
}


/* ------------------------------------------
   FabbHome – Config layout
   Kart kutuyu kaldır, çizgili görünüm yap
------------------------------------------- */

/* Dıştaki büyük kutuyu iptal et */
.fh-product-config {
  margin: 32px 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Eğer içeride ayrı bir kart div'i varsa (fh-config-panel gibi) onu da nötrle */
.fh-config-panel,
.fh-subtotal-box {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Her bölümün iç boşluğu + çizgiler */
.fh-section {
  margin: 0;
  padding: 20px 0;
  border: none;
}

/* Birbirini takip eden bölümler arasına çizgi koy */
.fh-section + .fh-section {
  border-top: 1px solid #e3e3e3;
}

/* Subtotal satırı: üstü çizgili, yan yana hizalı */
.fh-subtotal-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 20px 0 6px;
  border-top: 1px solid #e3e3e3;
}

/* Subtotal açıklaması */
.fh-subtotal-note {
  font-size: 13px;
  color: #777;
  margin-bottom: 24px;
}

/* FH CONFIG için Prestige’in liquid kart stilini tamamen iptal et */
.product-info__block-item[data-block-id="liquid_gTE3UC"] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Bu item’ın pseudo border çizgilerini de kapat */
.product-info__block-item[data-block-id="liquid_gTE3UC"]::before,
.product-info__block-item[data-block-id="liquid_gTE3UC"]::after {
  content: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Sadece bizim fh-config içeriğine çizgi ver */
.product-info__block-item[data-block-id="liquid_gTE3UC"] .fh-config {
  margin: 24px 0 32px !important;
  padding: 24px 0 !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  border-bottom: 1px solid rgba(0,0,0,0.12) !important;
  background: transparent !important;
}

.shopify-section-header-sticky,
.shopify-section--header,
#shopify-section-header,
#shopify-section-header .header-wrapper {
  border-bottom: 1px solid #E5E2DB !important;
}
/* Desktop mega menü açılınca üstünde ince çizgi olsun */
.header__submenu,
.header__dropdown,
.header__mega-menu,
.mega-menu,
.mega-menu__content {
  border-top: 1px solid #E5E2DB;
}

/* ============================
   FabbHome - Homepage Category Slider (6'lı, overlay arrow)
   ============================ */

.fh-home-slider {
  margin: 72px auto;
}

.fh-home-slider__header {
  text-align: center;
  margin-bottom: 32px;
}

.fh-home-slider__heading {
  font-size: 22px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

.fh-home-slider__subheading {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
}

/* İç düzen – oklar overlay, içerik tam ortada */

.fh-home-slider__inner {
  position: relative;
  display: block;
  padding: 0 64px; /* oklar için kenar boşluğu */
}

/* Ok butonları – minimal, overlay */

.fh-home-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid #d4d4d4;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
  padding: 0;
}

.fh-home-slider__arrow--prev {
  left: 16px;
}

.fh-home-slider__arrow--next {
  right: 16px;
}

.fh-home-slider__arrow-icon {
  font-size: 18px;
  line-height: 1;
  margin-top: -1px;
}

.fh-home-slider__arrow:hover {
  background: #f6f6f6;
  border-color: #bfbfbf;
  transform: translateY(-50%) translateY(-1px);
}

/* Viewport */

.fh-home-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fh-home-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* Track – grid gibi, tam 6 kart göster */

.fh-home-slider__track {
  display: grid;
  grid-auto-flow: column;
  column-gap: 24px;
  grid-auto-columns: calc((100% - (5 * 24px)) / 6);
  /* 6 kolon: (toplam genişlik - 5 gap) / 6 */
}

/* Her item grid kolonunu tamamen doldurur */
.fh-home-slider__item {
  width: 100%;
  text-decoration: none;
  color: inherit;
}

/* Tablet & mobile için kolon sayısını azaltalım */

@media screen and (max-width: 1023px) {
  .fh-home-slider__track {
    grid-auto-columns: calc((100% - (3 * 24px)) / 4); /* tablet: 4 kart */
  }
}

@media screen and (max-width: 749px) {
  .fh-home-slider__inner {
    padding: 0 48px;
  }

  .fh-home-slider__arrow {
    width: 34px;
    height: 34px;
  }

  .fh-home-slider__track {
    grid-auto-columns: calc((100% - (1 * 16px)) / 2); /* mobile: 2 kart */
    column-gap: 16px;
  }
}

/* Görsel alanı – kare, köşeli */

.fh-home-slider__image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: #f2f2f2;
}

.fh-home-slider__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.25s ease;
}

.fh-home-slider__item:hover .fh-home-slider__image {
  transform: scale(1.02);
}

/* Placeholder */

.fh-home-slider__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: #eeeeee;
}

/* Alt başlık */

.fh-home-slider__label {
  margin-top: 16px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- FH slider desktop ince ayar: ortala + biraz küçült --- */
@media screen and (min-width: 1024px) {
  .fh-home-slider__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 80px;   /* sağ/sol daha fazla boşluk, ama kartlar tam */
  }

  .fh-home-slider__track {
    column-gap: 20px;
    grid-auto-columns: calc((100% - (5 * 20px)) / 6);
    /* 6 kart tam sığsın, her biri biraz küçülmüş olsun */
  }
}

/* Ok karakterini tamamen gizle */
.fh-home-slider__arrow-icon {
  font-size: 0 !important;
}

.fh-home-slider__arrow {
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.fh-home-slider__arrow--prev {
  left: 24px;   /* eskiden -60px'ti */
}

.fh-home-slider__arrow--next {
  right: 24px;  /* eskiden -60px'ti */
}


.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
}

/* Kayma alanı */
.fh-home-slider__viewport {
  overflow: hidden;
  width: 100%;
}

/* Kart sıralaması */
.fh-home-slider__track {
  display: flex;
  gap: 16px;  /* boşluğu küçülttük = kartlar büyüdü */
}

/* 7 kare kart yan yana */
.fh-home-slider__item {
  flex: 0 0 calc((100% - 6 * 16px) / 7);
}

.fh-home-slider__image-wrapper {
  aspect-ratio: 1 / 1;  /* kare kart */
}



/* FH Category – sayfa genişliği ayarı */
.fh-home-slider.page-width {
  max-width: 1400px;       /* istersen 1500 de yapabilirsin */
  margin-inline: auto;
  padding-left: 32px;
  padding-right: 32px;
}

.fh-home-slider__inner {
  position: relative;
  margin-top: 32px;
}

.fh-home-slider__arrow {
  background: transparent;
  border: none;
  padding: 0;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
}

.fh-home-slider__arrow--prev {
  left: 12px;
}

.fh-home-slider__arrow--next {
  right: 12px;
}

.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
}

/* --- FH Category Slider – genişlik & hizalama --- */

/* Bu section'ı global page-width sınırından çıkar, tam genişlik kullan */
section.fh-home-slider.page-width {
  max-width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Asıl içerik alanını ortala ve genişlet */
.fh-home-slider__inner {
  position: relative;
  max-width: 1440px;         
  margin: 32px auto 0;        /* üstten boşluk + ortalama */
  padding: 0 40px;            /* sağ/sol marj – istersen 32/48 oynarız */
}

/* Viewport & track */
.fh-home-slider__viewport {
  overflow: hidden;
  width: 100%;
}

.fh-home-slider__track {
  display: flex;
  gap: 16px;                  /* boşluğu biraz azalttık ki kartlar büyüsün */
}

/* 7 kare kart yan yana, alanı doldurarak */
.fh-home-slider__item {
  flex: 0 0 calc((100% - 6 * 16px) / 7);
}

.fh-home-slider__image-wrapper {
  aspect-ratio: 1 / 1;        /* kare kutu */
}

/* --- FH Category Slider – Oklar (stabil) --- */

.fh-home-slider__inner {
  position: relative;
  max-width: 1440px;
  margin: 32px auto 0;
  padding: 0 40px;
  overflow: visible;            /* dışarı taşan oklar görünsün */
}

.fh-home-slider__arrow {
  position: absolute;
  top: 45%;                     /* biraz yukarıda */
  transform: translateY(-50%);  /* sadece Y ekseni */
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 50;
}

/* Sol ok: kutuların dışına, hafif mesafe ile */
.fh-home-slider__arrow--prev {
  left: -24px;                  /* dışarı taşıma */
}

/* Sağ ok */
.fh-home-slider__arrow--next {
  right: -24px;
}

.fh-home-slider__arrow-img {
  width: 40px;
  height: 40px;
  display: block;
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}

/* Hover efekti – yerinden oynamadan hafif büyüme */
.fh-home-slider__arrow:hover .fh-home-slider__arrow-img {
  transform: scale(1.06);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
}
/* OK BUTONLARINI YAKLAŞTIR + BEYAZ GLOW İPTAL */
.fh-home-slider__arrow {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 40px;
  height: 40px;
  cursor: pointer;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 50;
}

/* Sol ok */
.fh-home-slider__arrow--prev {
  left: -24px;      /* önce -32 px idi — kutulara yaklaştırdık */
}

/* Sağ ok */
.fh-home-slider__arrow--next {
  right: -24px;
}

/* SVG İKONU – beyaz glow / blur tamamen iptal */
.fh-home-slider__arrow-img {
  display: block;
  width: 40px;
  height: 40px;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  border: none !important;
  filter: none !important;
  transition: transform 0.15s ease-out;
}

/* Hover efekti – yerinde hafif büyüme (asla glow değil) */
.fh-home-slider__arrow:hover .fh-home-slider__arrow-img {
  transform: scale(1.06);
}

/* FabbHome – Homepage Bestsellers */
.fh-bestsellers {
  padding: 56px 0 64px;
}

.fh-bestsellers__inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 24px;
}

.fh-bestsellers__eyebrow {
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  margin-bottom: 16px;
}

.fh-bestsellers__header {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}

.fh-bestsellers__tabs {
  display: flex;
  gap: 32px;
  border-bottom: 1px solid #ddd;
}

.fh-bestsellers__tab {
  position: relative;
  border: none;
  background: none;
  padding: 8px 0 14px;
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.6;
}

.fh-bestsellers__tab.is-active {
  opacity: 1;
}

.fh-bestsellers__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: #111;
}

/* Panels */
.fh-bestsellers__panels {
  margin-top: 16px;
}

.fh-bestsellers__panel {
  display: none;
}

.fh-bestsellers__panel.is-active {
  display: block;
}

.fh-bestsellers__empty {
  text-align: center;
  font-size: 14px;
  opacity: 0.7;
}

/* Slider */
.fh-bs-slider {
  position: relative;
  display: flex;
  align-items: center;
}

.fh-bs-slider__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}

.fh-bs-slider__viewport::-webkit-scrollbar {
  display: none;
}

.fh-bs-slider__track {
  display: flex;
  gap: 32px;
  padding: 8px 16px;
}

/* 4 ürün görünür olacak şekilde kart genişliği */
.fh-bs-slider__item {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Oklar */
.fh-bs-slider__arrow {
  border: none;
  background: none;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.fh-bs-slider__arrow:hover {
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fh-bs-slider__arrow--prev {
  margin-right: 4px;
}

.fh-bs-slider__arrow--next {
  margin-left: 4px;
}

/* Slider container */
.fh-bs-slider {
  position: relative;
}

/* Viewport */
.fh-bs-slider__viewport {
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fh-bs-slider__viewport::-webkit-scrollbar {
  display: none;
}

/* Track */
.fh-bs-slider__track {
  display: flex;
  gap: 32px;
  padding: 0;
}

/* 4 kolon – tam oturan genişlik hesaplaması */
.fh-bs-slider__item {
  flex: 0 0 calc((100% - 3 * 32px) / 4);
  max-width: calc((100% - 3 * 32px) / 4);
}

/* 1400px – 3 kolon */
@media (max-width: 1400px) {
  .fh-bs-slider__track {
    gap: 24px;
  }
  .fh-bs-slider__item {
    flex: 0 0 calc((100% - 2 * 24px) / 3);
    max-width: calc((100% - 2 * 24px) / 3);
  }
}

/* 960px – 2 kolon */
@media (max-width: 960px) {
  .fh-bs-slider__item {
    flex: 0 0 calc((100% - 24px) / 2);
    max-width: calc((100% - 24px) / 2);
  }
}

/* 640px – tek kolon */
@media (max-width: 640px) {
  .fh-bs-slider__track {
    gap: 16px;
    padding: 8px;
  }
  .fh-bs-slider__item {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.product-card__media,
.product-card__media img,
.product-card__image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.fh-bs-slider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: #fff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.7;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.fh-bs-slider__arrow--prev { left: 16px; }
.fh-bs-slider__arrow--next { right: 16px; }
.fh-bs-slider__arrow:hover {
  opacity: 1;
  transform: translateY(-50%) translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}
@media (max-width: 768px) {
  .fh-bs-slider__arrow { display: none; }
}


/* ---- BUY SAMPLE & NEXT butonları – Prestige siyah kayma fix ---- */

/* Önce Prestige'in siyah kayan overlay'ini kapatıyoruz */
.buy-buttons.fh-actions .fh-btn::before,
.buy-buttons.fh-actions .fh-next-button::before {
  content: none !important;
}




/* --------------------------------------------------
   FabbHome – Base product info + color group + actions
-------------------------------------------------- */

/* SKU / product code */
.fh-product-code {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
}

/* Ana koleksiyon / type satırı */
.fh-product-main-collection {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #666;
  margin-top: 6px;
  margin-bottom: 8px;
}

/* Color group swatch bar */
.fh-color-divider {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: 14px 0;
}

.fh-color-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fh-color-group__label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #777;
  white-space: nowrap;
}

.fh-color-group__swatches {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.fh-color-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.fh-color-swatch img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fh-color-swatch:hover {
  transform: translateY(-1px);
}

.fh-color-swatch--active {
  border-color: #000;
}

/* BUY SAMPLE + ADD TO CART satırı */
.fh-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (min-width: 700px) {
  .fh-actions {
    flex-direction: row;
    align-items: stretch;
  }
}

/* FabbHome basic button (BUY SAMPLE) */
.fh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center


/* SVG OLMAYAN ÜRÜNLERDE (fh-no-color-step) BACK BUTONUNU GİZLE */
html.fh-no-color-step .fh-btn-row--step2 [data-fh-back] {
  display: none;
}

/* Back gizlenince kalan butonları sağa hizala (opsiyonel) */
html.fh-no-color-step .fh-btn-row--step2 {
  justify-content: flex-end;
}



/* =========================
   FH – TOPBAR
   ========================= */
.fh-topbar{
  background: #364640; /* senin yeşil tonuna yakın; istersen değiştiririz */
  color: #fff;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: none;
}

.fh-topbar__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 34px;
  gap: 12px;
}

.fh-topbar__list{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fh-topbar__link{
  color: inherit;
  text-decoration: none;
  opacity: .95;
}

.fh-topbar__link:hover{ opacity: 1; text-decoration: underline; }

.fh-topbar__right{
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

/* Sticky (JS yok, saf CSS) */
body .fh-topbar[data-fh-topbar]{
  position: sticky;
  top: 0;
  z-index: 60;
}


/* FH Topbar – global */
.fh-topbar--sticky{
  position: sticky;
  top: 0;
  z-index: 60;
}


/* =========================================================
   FH – CLICK BLOCKER FIX (Color modal / Sample modal)
   Put at VERY END of theme.css
   ========================================================= */

/* 1) Color modal: varsayılan durumda ASLA tıklama yakalamasın */
.fh-color-modal{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Daha önce eklenen "her şeye açık say" kurallarını nötralize et
   (özellikle aria-hidden="false" / open / data-open vb.) */
.fh-color-modal.is-open,
.fh-color-modal.open,
.fh-color-modal[data-open="true"],
.fh-color-modal[open],
.fh-color-modal[aria-hidden="false"]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 2) Sadece GERÇEKTEN açıkken (is-visible) aktif olsun */
.fh-color-modal.is-visible{
  display: block !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Modal içeriği tıklanabilir kalsın */
.fh-color-modal.is-visible .fh-color-modal__content,
.fh-color-modal.is-visible .fh-color-modal__dialog,
.fh-color-modal.is-visible .fh-color-modal__grid{
  pointer-events: auto !important;
}

/* 3) Sample modal da kapalıyken click blocker olmasın */
.fh-sample-modal{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.fh-sample-modal.is-open{
  display: flex !important;
  visibility: visible !important;
  pointer-events: auto !important;
}
.fh-sample-modal.is-open *{
  pointer-events: auto !important;
}


/* =========================================================
   FH – ATC / SAMPLE CLICK UNBLOCK (hard override)
   Put at VERY END of fh-product.css
   ========================================================= */

/* Modal sadece .is-visible iken aktif olsun.
   "open/aria-hidden/data-open" durumları click-blocker olmasın */
.fh-color-modal:not(.is-visible),
.fh-color-modal.is-open:not(.is-visible),
.fh-color-modal.open:not(.is-visible),
.fh-color-modal[data-open="true"]:not(.is-visible),
.fh-color-modal[open]:not(.is-visible),
.fh-color-modal[aria-hidden="false"]:not(.is-visible){
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Güvenlik: modalın içi de kapalıyken click yakalamasın */
.fh-color-modal:not(.is-visible) *{
  pointer-events: none !important;
}

/* Sample modal da kapalıyken click yakalamasın */
.fh-sample-modal:not(.is-open){
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}



/* =========================
   FH – LOCALE MODAL (Topbar)
   ========================= */
html.fh-locale-modal-open { overflow: hidden; }

.fh-locale-modal[hidden]{ display:none !important; }

.fh-locale-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.fh-locale-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.fh-locale-modal__panel{
  position: absolute;
  top: 48px;           /* topbarın altı gibi düşün */
  left: 12px;
  width: min(420px, calc(100% - 24px));
  background: #fff;
  color: #111;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}

.fh-locale-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
}

.fh-locale-modal__title{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.fh-locale-form__row{
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}

.fh-locale-form__label{
  font-size: 12px;
  opacity: .8;
}

.fh-locale-form__select{
  width: 100%;
  height: 38px;
}

.fh-locale-form__confirm{
  width: 100%;
  height: 40px;
}







/* FH – Topbar Locale Modal (hard override) */
#fh-topbar-loc-modal[hidden]{ display:none !important; }

#fh-topbar-loc-modal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;
  display: block !important;
}

#fh-topbar-loc-modal .fh-locale-modal__backdrop{
  position:absolute !important;
  inset:0 !important;
  background: rgba(0,0,0,.35) !important;
}

#fh-topbar-loc-modal .fh-locale-modal__panel{
  position: fixed !important;
  top: 56px !important;
  right: 16px !important;
  left: auto !important;
  width: min(420px, calc(100vw - 32px)) !important;
  background:#fff !important;
  color:#111 !important;
  border-radius:12px !important;
  padding:16px !important;
  box-shadow:0 18px 40px rgba(0,0,0,.18) !important;
}

@media (max-width:699px){
  #fh-topbar-loc-modal .fh-locale-modal__panel{
    left:16px !important;
    right:16px !important;
    width:auto !important;
  }
}

html.fh-loc-open, html.fh-loc-open body{ overflow:hidden !important; }



/* =========================
   FH – TOPBAR (final)
   ========================= */

[data-fh-topbar]{
  background:#ECE7E2 !important;
  color:#231F20 !important;
  border-bottom:1px solid rgba(255,255,255,.18) !important;
}

[data-fh-topbar] .fh-topbar__inner{
  min-height:34px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:14px !important;
  padding:0 16px !important;
  font-size:12px !important;
  letter-spacing:.08em !important;
}

[data-fh-topbar] a,
[data-fh-topbar] button{
  color:inherit !important;
  text-decoration:none !important;
  opacity:.95 !important;
}

[data-fh-topbar] a:hover,
[data-fh-topbar] button:hover{
  opacity:1 !important;
  text-decoration:underline !important;
}



/* =========================================================
   FH – LOCALE MODAL (MOBILE ONLY) – full-width, comfy tap UI
   Desktop'a dokunmaz (sadece max-width: 999px)
========================================================= */
@media (max-width: 999px){

  /* Modal container: panel’i ekran içine düzgün oturt */
  .fh-locale-modal{
    padding: 14px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Panel: kareyi iptal et, full-width hissi ver */
  .fh-locale-modal__panel{
    width: 100% !important;
    max-width: 520px !important;
    height: auto !important;
    max-height: 92vh !important;

    aspect-ratio: auto !important;     /* ✅ kareyi iptal */
    overflow: auto !important;         /* ✅ içerik uzarsa scroll */
    -webkit-overflow-scrolling: touch !important;

    padding: 28px 18px 22px !important;
  }

  /* Close butonu dokunma alanı */
  .fh-locale-modal__close{
    top: 10px !important;
    right: 10px !important;
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 30px !important;
  }

  /* Başlık / açıklama: taşmayı engelle */
  .fh-locale-modal__title{
    font-size: 30px !important;
    line-height: 1.1 !important;
    white-space: normal !important;  /* ✅ tek satır kilidini kaldır */
    margin: 4px 0 12px !important;
  }
  .fh-locale-modal__desc{
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 auto 18px !important;
    max-width: 100% !important;
  }

  /* Label spacing */
  .fh-locale-form__label{
    margin: 14px 0 8px !important;
  }

  /* ✅ Mobile dropdown’lar full width (300px kilidini ezer) */
  .fh-dd{
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 14px !important;
  }

  /* Trigger: daha rahat dokunma */
  .fh-dd-trigger{
    height: 56px !important;
    padding: 0 16px !important;
  }
  .fh-dd-trigger__text{
    font-size: 16px !important;
  }

  /* Açılan liste: mobile UX (scroll olabilir) */
  .fh-dd-menu{
    max-height: 46vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Item’lar: rahat dokunma */
  .fh-dd-item{
    padding: 14px 16px !important;
  }
  .fh-dd-item__text{
    font-size: 15px !important;
  }

  /* Continue butonu: full-width, rahat */
  .fh-locale-form__confirm{
    width: 100% !important;
    max-width: 100% !important;
    height: 54px !important;
    margin: 18px auto 12px !important;
  }

  /* Alt link + note aralık */
  .fh-locale-modal__altlink{
    margin: 6px auto 10px !important;
  }
  .fh-locale-modal__note{
    margin: 10px auto 0 !important;
    max-width: 100% !important;
  }
}




/* =========================================
   FH PRODUCT – MEDIA CORE (Hero + SVG)
   Safe scope: product page only
========================================= */

.template-product .fh-media-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* Hero + SVG wrapper */
.template-product .fh-hero-svg{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* HERO 4:5 */
.template-product .fh-hero-portrait{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
}

.template-product .fh-hero-portrait img,
.template-product .fh-hero-portrait video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SVG preview (repeat çizgisi umrumuzda değil) */
.template-product .fh-svg-preview{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.template-product .fh-svg-preview svg,
.template-product .fh-svg-preview img{
  width: 100%;
  height: auto;
  display: block;
}

/* ZOOM KAPALI – sadece product */
.template-product [data-zoom],
.template-product .Product__Zoom,
.template-product .product__zoom{
  display: none !important;
  pointer-events: none !important;
}



/* =========================================
   FH – HERO + SVG TOP STRIP
   Gallery still starts from SVG
========================================= */

.template-product .fh-hero-svg{
  display: grid;
  gap: 12px;
  align-items: start;
  margin-bottom: 12px; /* alttaki galeriye nefes */
}

/* Desktop + Tablet: yan yana */
@media (min-width: 768px){
  .template-product .fh-hero-svg{
    grid-template-columns: 1fr 1fr;
  }
}

/* Mobile: alt alta */
@media (max-width: 767px){
  .template-product .fh-hero-svg{
    grid-template-columns: 1fr;
  }
}

/* HERO 4:5 */
.template-product .fh-hero-portrait{
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 12px;
}
.template-product .fh-hero-portrait img,
.template-product .fh-hero-portrait video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* SVG preview box */
.template-product .fh-svg-preview{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.template-product .fh-svg-preview svg,
.template-product .fh-svg-preview img{
  width: 100%;
  height: auto;
  display: block;
}


/* =========================================
   FH – HERO + SVG TOP STRIP (COMPACT HEIGHT)
   Put at VERY END of fh-product.css
========================================= */

.template-product .fh-hero-svg{
  margin-bottom: 12px;
}

/* Desktop/tablet: yan yana + yükseklik limitli */
@media (min-width: 768px){

  /* İkisi de aynı “kart” yüksekliği */
  .template-product .fh-hero-portrait,
  .template-product .fh-svg-preview{
    /* 320–520 arası, ekrana göre otomatik */
    height: clamp(320px, 42vw, 520px);
    max-height: 520px;
  }

  /* 4:5 yerine “kart yüksekliği” ile kontrol */
  .template-product .fh-hero-portrait{
    aspect-ratio: auto;   /* 4:5’i desktop’ta iptal */
  }

  .template-product .fh-hero-portrait img,
  .template-product .fh-hero-portrait video{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* SVG preview de aynı yükseklik */
  .template-product .fh-svg-preview{
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .template-product .fh-svg-preview svg,
  .template-product .fh-svg-preview img{
    max-height: 100%;
    width: 100%;
    height: auto;
  }
}

/* Mobile: alt alta + 4:5 kalsın ama yine limitli */
@media (max-width: 767px){
  .template-product .fh-hero-portrait{
    aspect-ratio: 4 / 5;
    max-height: 520px;
  }
  .template-product .fh-svg-preview{
    max-height: 520px;
  }
}






/* FH – Desktop: Left = room mockup (position 1), Right = SVG host */
@media (min-width: 1000px){

  /* hepsine default bir order ver */
  body.template-product .product-gallery__carousel .product-gallery__media{
    order: 10;
  }

  /* 1) HERO mockup (1. media) solda kalsın */
  body.template-product .product-gallery__carousel .product-gallery__media[data-media-position="1"]{
    order: 1;
  }

  /* 2) SVG host (renk değişen preview) sağa gelsin */
  body.template-product .product-gallery__carousel .product-gallery__media[data-fh-svg-host="true"]{
    order: 2;
  }

  /* 3) En sona senin ekstra mockup slide */
  body.template-product .product-gallery__carousel .product-gallery__media.fh-gallery__mockup{
    order: 99;
  }
}



/* ======================================================
   FH – Mockup CLS FIX (PDP)
   Ensures mockup tiles reserve height before images load
====================================================== */
.template-product .fh-product-mockups .fh-mockup-inner{
  aspect-ratio: 1200 / 1400;   /* mockup layer ölçün */
  width: 100%;
  height: auto;
}

/* layer'lar absolute olduğu için içeriği doldursun */
.template-product .fh-product-mockups .fh-mockup-wall{
  position: absolute;
  inset: 0;
}





/* ======================================================
   FH – CLS FIX (PDP): reserve header space + stabilize sticky
====================================================== */

/* Header yüksekliği sonradan değişmesin (announcement + header) */
.template-product body{
  --fh-stable-header: calc(var(--announcement-bar-height, 0px) + var(--header-height, 64px));
}

/* Product sayfasında üst boşluğu stabilize et */
.template-product .shopify-section--main-product{
  scroll-margin-top: var(--fh-stable-header);
}

/* Safe-sticky transform yüzünden layout shift/paint kayması olabiliyor */
.template-product safe-sticky.product-info{
  transform: none !important;
}



/* FH – PRESTIGE PRODUCT GALLERY: FORCE 1 SLIDE PER VIEW */
.Product__Slideshow .flickity-slider{
  display:flex !important;
}

.Product__Slideshow .Carousel__Cell,
.Product__Slideshow .flickity-slider > *{
  flex: 0 0 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

.Product__Slideshow{
  overflow:hidden !important;
}






/* FH FIX — Product gallery must allow vertical scroll + pinch zoom on mobile */
@media (max-width: 999px){
  .product-gallery__carousel,
  .product-gallery__carousel *,
  .product-gallery__media,
  .product-gallery__media *{
    touch-action: pan-y pinch-zoom !important;
  }
}
@media (max-width: 999px){
  .product-gallery__carousel .draggable,
  .product-gallery__carousel .is-draggable,
  .product-gallery__carousel [data-action]{
    touch-action: pan-y pinch-zoom !important;
  }
}