/*
 * Complete The Look — issue #17.
 *
 * Ölçüler Figma'nın 1440px masaüstü çerçevesinden birebir (node 3:5733):
 *   • Sayfa grid'i PDP ile aynı — full-bleed, `2fr 1fr 0fr`, kolon arası 20px.
 *     1440'ta 933.33 | 20 | 466.66 | 20 | 0 verir.
 *   • Lookbook görselleri iki kolonda, aralarında boşluk yok; her hücre
 *     466.66x774 oranında (PDP galerisiyle aynı mantık).
 *   • Sağ panel 40px üst/alt pay, üstünde 1px ayırıcı; ayırıcı kolon
 *     boşluklarına 20px taşar (Figma node 3:5744, genişlik 506.64).
 *   • Başlıktan sonra 24px, kartlar 2 kolon, kolon arası 12px, satır arası 24px.
 *
 * Alt bileşen stilleri — build yalnızca bu @import'lar üzerinden topluyor,
 * sub-component'ler ikas.config.json'a kayıtlı değil.
 */
/* Skipped (covered by shared chunk CSS): ../../sub-components/ProductCard/styles.css */
/* Skipped (covered by shared chunk CSS): ../../sub-components/ProductCardSizePicker/styles.css */

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl {
  /* Sticky görsel header'ın altına yapışır. Varsayılanı global.css'teki header
     yüksekliği; gerçek değeri index.tsx ölçüp yazar (useHeaderOffset). */
  --ctl-sticky-top: var(--header-h);

  width: 100%;
  color: var(--color-black);
}

/*
 * `minmax(0, …)` şart: fr track'lerin varsayılan alt sınırı min-content, o
 * yüzden üçüncü kolon boşken bile içeriği kadar yer kaplardı. Üçüncü kolon
 * PDP'nin detay paneli kolonuyla hizayı korumak için duruyor.
 */
.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 0fr);
  column-gap: var(--grid-gap);
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-col-lookbook, .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-col-panel {
  min-width: 0;
}

/* ==========================================================================
   Lookbook görselleri
   ========================================================================== */

/*
 * Görsel, sağdaki ürün listesi kayarken yerinde kalır.
 *
 * Tasarımda görselin altında boşluk var çünkü sağ panel (≈1040px) sol
 * görselden (774px) uzun. Sol kolon grid satır yüksekliğine uzadığı için o
 * boşluk sticky yolu oluyor: görsel header'ın altına yapışır, liste altından
 * akar, kolon bitince birlikte kayar. 1440x900 çerçevesinde 774px'lik görsel
 * header'ın altına tam sığar.
 */
.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook {
  position: sticky;
  top: var(--ctl-sticky-top);
  display: grid;
  /* Tasarımda görseller boşluksuz yan yana akar. */
  grid-template-columns: 1fr 1fr;
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook-figure {
  margin: 0;
  /* Oran sabit — görsel geç gelse de satır kaymaz (ruleset §14.9). */
  aspect-ratio: 466.66 / 774;
  background: var(--color-surface-muted);
}

/*
 * Figma'da sol alan tek bir 933.33x774 kare olarak çizilmiş (node 3:5738); iki
 * kolonluk düzen ise birden fazla lookbook görseli olduğunda geçerli. Tek görsel
 * yüklendiğinde bu yüzden iki kolonu birlikte kaplar ve tasarımdaki oranı alır.
 */
.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook-figure:only-child {
  grid-column: 1 / -1;
  aspect-ratio: 933.33 / 774;
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Sağ panel
   ========================================================================== */

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-panel {
  position: relative;
  padding: 40px 0;
}

/*
 * Ayırıcı iki yanda kolon boşluğuna taşar. Sağdaki taşma sayfadan dışarı
 * çıkmıyor: grid'in üçüncü kolonu 0 genişlikte olduğu için panelin sağında tam
 * olarak bir kolon boşluğu (20px) duruyor.
 */
.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-panel::before {
  content: "";
  position: absolute;
  top: 0;
  right: calc(-1 * var(--grid-gap));
  left: calc(-1 * var(--grid-gap));
  border-top: 1px solid var(--color-hairline);
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-title {
  margin: 0;
  /* Figma'da başlık 18/28 ve Medium; `heading-m` token'ı 18/26 ve 400 taşıyor. */
  font-weight: 500;
  line-height: 28px;
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-count {
  margin: 0;
  opacity: 0.5;
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-state {
  margin: 24px 0 0;
}

.cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 12px;
  row-gap: 24px;
  margin-top: 24px;
}

/* ==========================================================================
   Tek kolona düşüş
   ========================================================================== */

@media (max-width: 1023px) {
  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Kolonlar alt alta geldiğinde sticky yol kalmıyor — görsel akışta kalır. */
  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook {
    position: static;
  }

  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-panel {
    padding: 32px var(--container-px);
  }

  /* Tek kolonlu düzende ayırıcı panelin kendi genişliğinde kalır. */
  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-panel::before {
    right: 0;
    left: 0;
  }
}

@media (max-width: 767px) {
  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook {
    grid-template-columns: 1fr;
  }

  .cc_WAah6jpsMy_QUVnjWQGQ3 .ctl-lookbook-figure {
    aspect-ratio: 466.66 / 630;
  }
}