/* ============================================================
   GenePeak — PDP görsel aroma seçici (Faz 2)
   Seçim halkası ve tik YALNIZCA CSS/HTML ile çizilir (:checked).
   JavaScript hiçbir görsel durum sınıfı eklemez/çıkarmaz.
   ============================================================ */

.gp-fp { margin-top: 24px; }

.gp-fp__label {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px;
    font: 700 11px/1 'Inter', sans-serif;
    text-transform: uppercase; letter-spacing: .06em;
    color: rgba(0, 71, 171, .7);
}
.gp-fp__current {
    font: 600 13px/1 'Inter', sans-serif;
    text-transform: none; letter-spacing: 0;
    color: var(--ink, #0d1c32);
}

.gp-fp__grid { display: flex; flex-wrap: wrap; gap: 16px 12px; margin: 0; }

.gp-fp__item {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 76px; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
/* Canlı Shopify'da artık bulunmayan aroma: JS öğeyi [hidden] yapar; yukarıdaki
   display:flex tarayıcının [hidden] kuralını ezdiği için açıkça gizlenir. */
.gp-fp__item[hidden] { display: none; }

/* Gerçek radio: görünmez ama erişilebilir ve klavye ile gezilebilir.
   1x1 nokta yerine swatch'ı kaplar; böylece ekran büyüteçlerinin ve
   yardımcı teknolojilerin çizdiği odak dikdörtgeni doğru yeri gösterir. */
.gp-fp__input {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 60px; height: 60px; margin: 0; padding: 0;
    opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none;
    border: 0; background: none;
}

.gp-fp__swatch {
    position: relative; width: 60px; height: 60px; flex: none;
    border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 1px var(--line, #dbe3f7);
    transition: box-shadow .2s ease, transform .2s ease;
}
.gp-fp__swatch img {
    display: block; width: 100%; height: 100%;
    border-radius: 50%; object-fit: cover;
}

/* ---- SEÇİM HALKASI (saf CSS) ---- */
.gp-fp__input:checked ~ .gp-fp__swatch {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--cobalt-700, #0047ab);
}

/* ---- TİK ROZETİ (saf CSS, ::after ile çizilen işaret) ---- */
.gp-fp__tick {
    position: absolute; right: -3px; bottom: -3px;
    width: 21px; height: 21px; border-radius: 50%;
    background: var(--cobalt-700, #0047ab);
    box-shadow: 0 0 0 2px #fff;
    opacity: 0; transform: scale(.5);
    transition: opacity .18s ease, transform .18s ease;
}
.gp-fp__tick::after {
    content: ""; position: absolute; left: 7px; top: 4px;
    width: 4px; height: 9px;
    border: solid #fff; border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.gp-fp__input:checked ~ .gp-fp__swatch .gp-fp__tick { opacity: 1; transform: scale(1); }

.gp-fp__name {
    font: 600 11.5px/1.3 'Inter', sans-serif;
    color: #434653; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere;
}
.gp-fp__input:checked ~ .gp-fp__name { color: var(--cobalt-700, #0047ab); }

/* ---- Klavye odağı ---- */
.gp-fp__input:focus-visible ~ .gp-fp__swatch {
    outline: 2px solid var(--cobalt-500, #0a57c9); outline-offset: 4px;
}

@media (hover: hover) {
    .gp-fp__item:hover .gp-fp__swatch { transform: translateY(-2px); }
    .gp-fp__item:hover .gp-fp__input:not(:checked) ~ .gp-fp__swatch {
        box-shadow: 0 0 0 1px var(--icy-300, #b1c5ff);
    }
}

/* ---- Stokta olmayan aroma: seçilebilir kalır, yalnızca işaretlenir ----
   Not: yalnızca ürünün BAZI aromaları tükendiyse uygulanır. Tamamı tükendiyse
   ürün düzeyindeki "Tükendi" mesajı yeterlidir ve görseller solmaz.
   Görsel yine de tanınabilir kalmalı; bu yüzden gri tonlama ölçülü tutuldu. */
.gp-fp__item[data-unavailable="1"] .gp-fp__swatch img { filter: grayscale(.6); opacity: .62; }
.gp-fp__item[data-unavailable="1"] .gp-fp__name { color: #626b7d; }
.gp-fp__item[data-unavailable="1"] .gp-fp__swatch::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 62px; height: 1.5px; background: #7a8294; border-radius: 2px;
    transform: translate(-50%, -50%) rotate(-45deg);
}
/* Bilgi yalnızca çizgi/renk ile taşınmasın: ekran okuyucunun da göreceği metin. */
.gp-fp__sold { display: none; }
.gp-fp__item[data-unavailable="1"] .gp-fp__sold {
    display: block; margin-top: -3px;
    font: 700 9.5px/1 'Inter', sans-serif; letter-spacing: .04em;
    text-transform: uppercase; color: #626b7d; text-align: center;
}

/* ---- Görsel yüklenemezse: kart kırılmasın ---- */
.gp-fp__swatch[data-img-failed="1"] { background: var(--silver, #e8eeff); }
.gp-fp__swatch[data-img-failed="1"] img { display: none; }

/* ---- Bağlanma kapısı --------------------------------------------------
   KRİTİK: Seçici, JS köprüsü select ile senkronu KURANA KADAR hiç görünmez.
   Aksi halde köprü yüklenemezse (404/CSP/ağ hatası) halka ve tik saf CSS ile
   yine de hareket eder, select yerinde kalır ve kullanıcı yanlış varyantı
   satın alır. Bu kapı sayesinde JS yoksa yalnızca çalışan native select kalır. */
[data-gp-flavor-picker]:not([data-gp-fp-ready="1"]) { display: none; }
[data-gp-flavor-picker][data-gp-fp-ready="1"] + .gp-fp-native { display: none; }

/* ---- Yüksek kontrast / forced-colors: box-shadow silinir, outline kalır ---- */
@media (forced-colors: active) {
    .gp-fp__input:checked ~ .gp-fp__swatch { outline: 3px solid Highlight; outline-offset: 2px; }
    .gp-fp__tick { forced-color-adjust: none; background: Highlight; }
    .gp-fp__item[data-unavailable="1"] .gp-fp__swatch img { filter: none; opacity: 1; }
}

@media (max-width: 430px) {
    .gp-fp__grid { gap: 14px 10px; }
    .gp-fp__item { width: 64px; }
    .gp-fp__swatch { width: 54px; height: 54px; }
    .gp-fp__input { width: 54px; height: 54px; }
    .gp-fp__tick { width: 19px; height: 19px; }
    .gp-fp__tick::after { left: 6px; top: 3.5px; height: 8px; }
    .gp-fp__item[data-unavailable="1"] .gp-fp__swatch::after { width: 56px; }
    .gp-fp__name { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    .gp-fp__swatch, .gp-fp__tick { transition: none; }
    .gp-fp__item:hover .gp-fp__swatch { transform: none; }
}