/* =============================================================
   schön — Bileşenler (Components)
   Butonlar, chip'ler, kartlar, fiyat kutusu, kademeli tablo,
   stepper, swatch'lar, rozetler, stok, filtre paneli, sekmeler,
   tablolar, güven şeridi, koli bandı, hero varyantları.
   Bu sınıflar hem Woo template'lerinde hem özel widget'larda kullanılır.
   ============================================================= */

/* ---------- Ortak yardımcılar ---------- */
.schon-eyebrow { font: 700 11.5px var(--sch-font); letter-spacing: var(--sch-ls-eyebrow); color: var(--sch-text-3); text-transform: uppercase; }
.schon-tabular { font-variant-numeric: tabular-nums; }
.schon-muted   { color: var(--sch-text-3); }
.schon-muted-2 { color: var(--sch-text-2); }

.schon-breadcrumb { padding: 18px var(--sch-pad-x) 0; font-size: 12.5px; color: var(--sch-text-3); }
.schon-breadcrumb a { color: var(--sch-text-3); }
.schon-breadcrumb a:hover { color: var(--sch-red); }
.schon-breadcrumb .sep { color: #c4bfb7; margin: 0 4px; }
.schon-breadcrumb .current { color: var(--sch-ink); }

.schon-h1 { font: 900 40px/1.04 var(--sch-font); letter-spacing: -.04em; margin: 0; }
.schon-h1--sm { font-size: 30px; }
.schon-section-title { font: 900 26px/1.1 var(--sch-font); letter-spacing: var(--sch-ls-sec); margin: 0; }
.schon-lead { font-size: 14.5px; line-height: 1.6; color: var(--sch-text-2); margin-top: 10px; text-wrap: pretty; }

/* ---------- Butonlar ---------- */
.schon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 14px var(--sch-font); border-radius: var(--sch-r-btn); padding: 14px 20px;
  border: 0; cursor: pointer; text-align: center; line-height: 1; transition: background .12s, color .12s, border-color .12s;
}
.schon-btn--primary { background: var(--sch-red); color: #fff; }
.schon-btn--primary:hover { background: var(--sch-red-hover); color: #fff; }
.schon-btn--dark { background: var(--sch-ink); color: #fff; }
.schon-btn--dark:hover { background: #000; color: #fff; }
.schon-btn--outline { background: #fff; color: var(--sch-ink); border: 1.5px solid var(--sch-ink); }
.schon-btn--outline:hover { background: var(--sch-ink); color: #fff; }
.schon-btn--block { display: flex; width: 100%; }
.schon-btn--lg { font-size: 16px; padding: 16px 22px; }

/* ---------- Chip'ler / pill ---------- */
.schon-chip {
  display: inline-flex; align-items: center; gap: 7px; font: 600 13px var(--sch-font);
  border: 1px solid var(--sch-border); color: var(--sch-text-2); padding: 9px 15px; border-radius: var(--sch-r-pill);
  cursor: pointer; white-space: nowrap;
}
.schon-chip.is-active { border-color: var(--sch-ink); color: var(--sch-ink); }
.schon-chip--removable { background: var(--sch-ink); color: #fff; border-color: var(--sch-ink); font-size: 11.5px; padding: 6px 10px; }
.schon-chip--removable .x { color: #8a857d; cursor: pointer; }

.schon-tag {
  border: 1px solid var(--sch-border); background: var(--sch-bg-soft); font-size: 11px; color: var(--sch-text-2);
  padding: 4px 8px; border-radius: 3px; display: inline-block;
}

/* ---------- Rozetler ---------- */
.schon-badge {
  position: absolute; top: 12px; left: 12px; background: var(--sch-red); color: #fff;
  font: 800 10.5px var(--sch-font); letter-spacing: .08em; padding: 5px 9px; border-radius: 3px;
}
.schon-badge--yellow { background: var(--sch-yellow); color: var(--sch-ink); left: auto; right: 12px; letter-spacing: normal; font-size: 11px; }

/* ---------- Stok göstergesi ---------- */
.schon-stock { display: inline-flex; align-items: center; gap: 6px; font: 600 12.5px var(--sch-font); }
.schon-stock .dot { width: 6px; height: 6px; border-radius: 50%; }
.schon-stock--in   { color: var(--sch-success); } .schon-stock--in .dot   { background: var(--sch-success); }
.schon-stock--low  { color: var(--sch-warn); }    .schon-stock--low .dot  { background: var(--sch-warn); }

/* ---------- Adet stepper ---------- */
.schon-stepper {
  display: inline-flex; align-items: center; gap: 11px; border: 1px solid var(--sch-border-input);
  border-radius: var(--sch-r-btn); padding: 11px 12px; font: 700 13px var(--sch-font);
}
.schon-stepper button {
  border: 0; background: none; color: var(--sch-text-3); font-weight: 500; font-size: 15px;
  cursor: pointer; line-height: 1; padding: 0 2px;
}
.schon-stepper input {
  width: 30px; text-align: center; border: 0; outline: 0; font: 700 13px var(--sch-font);
  background: none; color: var(--sch-ink); -moz-appearance: textfield;
}
.schon-stepper input::-webkit-outer-spin-button,
.schon-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.schon-stepper--lg { padding: 14px 16px; font-size: 15px; gap: 16px; }
.schon-stepper--lg input { font-size: 15px; }

/* ---------- Renk swatch ---------- */
.schon-swatches { display: flex; gap: 8px; }
.schon-swatch { width: 40px; height: 40px; border-radius: var(--sch-r-btn); border: 1px solid var(--sch-border-input); cursor: pointer; }
.schon-swatch.is-active { border: 2px solid var(--sch-ink); }
.schon-swatch--transparent { background: repeating-linear-gradient(45deg,#fff,#fff 5px,#e9e6e0 5px,#e9e6e0 10px); }
.schon-swatch--white { background: #fff; }
.schon-swatch--black { background: #1a1a1a; }
.schon-swatch--gray  { background: var(--sch-swatch-gray); }
.schon-swatch--wood  { background: var(--sch-swatch-wood); }
.schon-swatch--beige { background: var(--sch-swatch-beige); }
/* daire (filtre) varyantı */
.schon-swatch--circle { border-radius: 50%; width: 38px; height: 38px; }

/* Ambalaj pill seçici */
.schon-pack { display: flex; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.schon-pack span { border: 1px solid var(--sch-border-input); padding: 10px 14px; border-radius: var(--sch-r-btn); color: var(--sch-text-2); cursor: pointer; }
.schon-pack span.is-active { border: 2px solid var(--sch-ink); font-weight: 700; color: var(--sch-ink); padding: 9px 13px; }

/* ---------- Ürün kartı (grid) ---------- */
.schon-product-card {
  border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); overflow: hidden;
  display: flex; flex-direction: column; background: #fff; transition: border-color .12s;
}
.schon-product-card:hover { border-color: var(--sch-ink); }
.schon-product-card__media { position: relative; height: 230px; background: var(--sch-img-bg); }
.schon-product-card__media img { width: 100%; height: 100%; object-fit: contain; }
.schon-product-card__body { padding: 18px; display: flex; flex-direction: column; gap: 9px; flex: 1; border-top: 1px solid var(--sch-border); }
.schon-product-card__code { font: 600 11.5px var(--sch-font); color: var(--sch-text-4); letter-spacing: .04em; }
.schon-product-card__title { font: 700 16px/1.32 var(--sch-font); letter-spacing: -.015em; color: var(--sch-ink); }
.schon-product-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.schon-product-card__price-wrap { margin-top: auto; padding-top: 8px; }
.schon-price { display: flex; align-items: baseline; gap: 7px; }
.schon-price__amount { font: 900 24px var(--sch-font); letter-spacing: var(--sch-ls-price); font-variant-numeric: tabular-nums; }
.schon-price__note { font-size: 12px; color: var(--sch-text-3); }
.schon-price__tier { font: 600 12.5px var(--sch-font); color: var(--sch-red); margin-top: 4px; }
.schon-product-card__actions { display: flex; gap: 8px; margin-top: 12px; }

/* ---------- Koli bandı (sarı) ---------- */
.schon-koli-band {
  background: var(--sch-yellow); border-radius: 8px; padding: 16px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.schon-koli-band__left { display: flex; align-items: center; gap: 14px; }
.schon-koli-band__tag { font: 900 12.5px var(--sch-font); letter-spacing: .1em; background: var(--sch-ink); color: var(--sch-yellow); padding: 7px 10px; border-radius: 4px; }
.schon-koli-band__text { font: 700 15.5px var(--sch-font); letter-spacing: -.015em; color: var(--sch-ink); }
.schon-koli-band__link { font: 700 13px var(--sch-font); color: var(--sch-ink); white-space: nowrap; }

/* ---------- Kademeli (koli) fiyat tablosu ---------- */
.schon-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.schon-tier { border: 1px solid var(--sch-border); border-radius: var(--sch-r-btn); padding: 12px; text-align: center; }
.schon-tier__price { font: 800 16px var(--sch-font); font-variant-numeric: tabular-nums; }
.schon-tier__label { font-size: 11.5px; color: var(--sch-text-2); margin-top: 3px; }
.schon-tier.is-current { border: 2px solid var(--sch-ink); padding: 11px; }
.schon-tier--koli { border-color: var(--sch-yellow); background: var(--sch-yellow-soft); }
.schon-tier--dealer { border: 1px dashed #c4bfb7; }
.schon-tier--dealer .schon-tier__price { font-size: 13px; color: var(--sch-red); }

/* ---------- Fiyat kutusu (ürün detay) ---------- */
.schon-pricebox { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); overflow: hidden; }
.schon-pricebox__top { padding: 22px 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--sch-border); }
.schon-pricebox__price { font: 900 36px var(--sch-font); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.schon-pricebox__tiers { padding: 18px 24px; border-bottom: 1px solid var(--sch-border); background: var(--sch-bg-soft); }
.schon-pricebox__cart { padding: 20px 24px; display: flex; gap: 10px; align-items: center; }
.schon-pricebox__reassure { padding: 0 24px 20px; display: flex; gap: 20px; font-size: 12.5px; color: var(--sch-text-2); flex-wrap: wrap; }
.schon-pricebox__reassure .sep { color: #e0dcd5; }

/* ---------- Hızlı teknik rakam kutuları ---------- */
.schon-specquick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.schon-specquick > div { border: 1px solid var(--sch-border); border-radius: 8px; padding: 14px; }
.schon-specquick b { font: 800 15px var(--sch-font); letter-spacing: -.02em; display: block; }
.schon-specquick small { font-size: 11.5px; color: var(--sch-text-3); margin-top: 3px; display: block; }

/* ---------- Filtre paneli ---------- */
.schon-filters { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); overflow: hidden; }
.schon-filters__head { padding: 16px 18px; border-bottom: 1px solid var(--sch-border); display: flex; align-items: center; justify-content: space-between; }
.schon-filters__head b { font: 800 13.5px var(--sch-font); letter-spacing: -.01em; }
.schon-filters__clear { font: 600 12px var(--sch-font); color: var(--sch-red); cursor: pointer; }
.schon-filters__active { padding: 14px 18px; border-bottom: 1px solid var(--sch-border); display: flex; flex-wrap: wrap; gap: 6px; }
.schon-filters__group { padding: 18px; border-bottom: 1px solid var(--sch-border); }
.schon-filters__group:last-child { border-bottom: 0; }
.schon-filters__group > b { display: block; font: 700 13px var(--sch-font); margin-bottom: 12px; }

.schon-check { display: flex; align-items: center; gap: 10px; font-size: 13px; padding: 5px 0; cursor: pointer; }
.schon-check__box { width: 16px; height: 16px; border: 1.5px solid var(--sch-border-input); border-radius: 3px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 10px; color: #fff; }
.schon-check.is-checked .schon-check__box { background: var(--sch-ink); border-color: var(--sch-ink); }
.schon-check__label { flex: 1; color: #3f3b36; }
.schon-check.is-checked .schon-check__label { font-weight: 600; color: var(--sch-ink); }
.schon-check__count { color: var(--sch-text-4); font-size: 12px; }

.schon-swatch-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.schon-swatch-grid > div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.schon-swatch-grid span.name { font-size: 11px; color: var(--sch-text-2); }
.schon-swatch-grid .is-active + .name { font-weight: 600; color: var(--sch-ink); }

/* Fiyat slider (çift tutamak) */
.schon-range { height: 4px; background: var(--sch-border); border-radius: 2px; position: relative; margin: 6px 0 14px; }
.schon-range__fill { position: absolute; top: 0; height: 4px; background: var(--sch-ink); border-radius: 2px; }
.schon-range__handle { position: absolute; top: -6px; width: 16px; height: 16px; background: #fff; border: 2px solid var(--sch-ink); border-radius: 50%; margin-left: -8px; }
.schon-range-inputs { display: flex; gap: 8px; }
.schon-range-inputs input { flex: 1; border: 1px solid var(--sch-border-input); border-radius: 5px; padding: 9px 11px; font: 600 12.5px var(--sch-font); outline: 0; }

/* ---------- Ürün alanı araç çubuğu ---------- */
.schon-toolbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid var(--sch-border); gap: 12px; }
.schon-toolbar__count { font-size: 13.5px; color: var(--sch-text-2); }
.schon-toolbar__count b { color: var(--sch-ink); }
.schon-select { display: flex; align-items: center; gap: 9px; border: 1px solid var(--sch-border-input); border-radius: 5px; padding: 9px 13px; font: 600 13px var(--sch-font); cursor: pointer; }
.schon-viewtoggle { display: flex; border: 1px solid var(--sch-border-input); border-radius: 5px; overflow: hidden; }
.schon-viewtoggle span { padding: 9px 12px; font-size: 13px; color: var(--sch-text-3); cursor: pointer; }
.schon-viewtoggle span.is-active { background: var(--sch-ink); color: #fff; }

/* ---------- Sayfalama ---------- */
.schon-pagination { display: flex; gap: 6px; justify-content: center; padding: 32px 0; }
.schon-pagination a, .schon-pagination span {
  min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--sch-border); border-radius: var(--sch-r-btn); font: 600 13.5px var(--sch-font); color: var(--sch-ink);
}
.schon-pagination .current { background: var(--sch-ink); color: #fff; border-color: var(--sch-ink); }

/* ---------- Sekmeler (ürün detay) ---------- */
.schon-tabs { display: flex; border-bottom: 1px solid var(--sch-border); font: 700 14.5px var(--sch-font); }
.schon-tabs span { padding: 14px 20px; color: var(--sch-text-3); cursor: pointer; }
.schon-tabs span.is-active { color: var(--sch-ink); box-shadow: inset 0 -3px 0 var(--sch-red); }

/* Teknik veri tablosu (2 sütun) */
.schon-spectable { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; font-size: 13.5px; }
.schon-spectable > div { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--sch-border-hair); }
.schon-spectable span { color: var(--sch-text-3); }

.schon-doc { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--sch-border-input); border-radius: var(--sch-r-btn); padding: 12px 16px; font: 600 13px var(--sch-font); color: var(--sch-ink); }
.schon-doc .arrow { color: var(--sch-red); }

/* Çapraz satış kutusu */
.schon-crosssell { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); padding: 24px; }
.schon-crosssell__row { display: flex; gap: 12px; align-items: center; }
.schon-crosssell__thumb { width: 48px; height: 48px; border-radius: 5px; background: var(--sch-img-bg); overflow: hidden; flex: none; }

/* ---------- Kategori kutuları (anasayfa) ---------- */
.schon-catgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.schon-catbox { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); padding: 18px; display: flex; gap: 14px; align-items: center; transition: border-color .12s; }
.schon-catbox:hover { border-color: var(--sch-ink); }
.schon-catbox__img { width: 56px; height: 56px; border-radius: 8px; background: var(--sch-img-bg); flex: none; }
.schon-catbox__name { font: 700 14.5px var(--sch-font); letter-spacing: -.01em; color: var(--sch-ink); }
.schon-catbox__count { font-size: 12px; color: var(--sch-text-3); margin-top: 3px; }

/* ---------- Güven kutuları şeridi ---------- */
.schon-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.schon-trust > div { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); padding: 20px; }
.schon-trust b { font: 800 14px var(--sch-font); display: block; margin-bottom: 5px; }
.schon-trust small { font-size: 12.5px; color: var(--sch-text-3); line-height: 1.5; }

/* ---------- Koyu blok (hero / bayilik / checkout kutusu) ---------- */
.schon-dark { background: var(--sch-ink); color: #fff; border-radius: var(--sch-r-card); box-shadow: var(--sch-shadow-dark); }
.schon-dark .schon-eyebrow { color: var(--sch-yellow); }

/* ---------- Bölüm başlığı satırı ---------- */
.schon-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 20px; gap: 16px; }
.schon-section-head__link { font: 700 13.5px var(--sch-font); color: var(--sch-red); white-space: nowrap; }

/* ---------- Veri tablosu (bayi paneli / ekstre) ---------- */
.schon-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.schon-table th { text-align: left; font: 700 11.5px var(--sch-font); letter-spacing: .06em; text-transform: uppercase; color: var(--sch-text-3); padding: 12px 14px; border-bottom: 1px solid var(--sch-border); }
.schon-table td { padding: 14px; border-bottom: 1px solid var(--sch-border-hair); vertical-align: middle; }
.schon-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.schon-table .strike { color: var(--sch-text-3); text-decoration: line-through; }
.schon-status { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--sch-font); padding: 4px 9px; border-radius: var(--sch-r-pill); }
.schon-status--ok   { background: #e8f3ea; color: var(--sch-success); }
.schon-status--wait { background: #fff4e0; color: var(--sch-warn); }
.schon-status--new  { background: #fdeaed; color: var(--sch-red); }

/* ---------- Metrik kartı (bayi paneli) ---------- */
.schon-metric { border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); padding: 18px; }
.schon-metric__label { font-size: 12px; color: var(--sch-text-3); }
.schon-metric__value { font: 900 26px var(--sch-font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; margin-top: 6px; }
.schon-metric__value--red { color: var(--sch-red); }
.schon-progress { height: 6px; background: var(--sch-border); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.schon-progress > span { display: block; height: 100%; background: var(--sch-ink); }

/* ---------- Boş sonuç kurtarma ---------- */
.schon-empty { background: var(--sch-bg-soft); border: 1px solid var(--sch-border); border-radius: var(--sch-r-card); padding: 40px; }