/*
 * MG PS — Ürün Detay (PDP). Kaynak tasarım: design-explore/pdp-final.html
 *
 * KAPSAMA: tasarımdaki sınıf adları (.stage, .info, .size, .desc, .rel …) genel
 * adlar; tema ile çakışmasınlar diye hepsi `.mgps-pdp` kökü altına kapsandı.
 * Özgüllük (0,2,0) temanın çıplak sınıf kurallarını (0,1,0) yener. Böylece
 * tasarım dosyasıyla birebir parite korunur — değer değişikliği iki yerde
 * aynı satırdan takip edilebilir.
 *
 * Açıklama bölümü (.desc) HAM ETİKETLERİ hedefler (h3/ul/li/table/details):
 * içerik render anında includes/description-transform.php ile semantik HTML'e
 * çevriliyor, CSS de doğrudan o etiketleri biçimlendiriyor.
 */

.mgps-pdp{
  --ink:#0F0F10; --ink-2:#3B3F45; --muted:#70757C; --faint:#A3A7AD;
  --line:#ECECEE; --wash:#F4F3F1;
  color:var(--ink); line-height:1.6;
}
.mgps-pdp *{box-sizing:border-box}
.mgps-pdp img{max-width:100%;display:block}
.mgps-pdp a{color:inherit;text-decoration:none}

.mgps-pdp__wrap{max-width:1240px;margin:0 auto;padding:0 48px}

/* Temanın kendi breadcrumb şeridi — tasarımın kendi `.crumb`'ı var, ikisi
   üst üste iki satır sayfa yolu basıyordu. Yalnızca ürün sayfasında gizlenir
   (bu dosya sadece orada yükleniyor). */
body.single-product .breadcrumb-wrap{display:none}

.mgps-pdp .crumb{padding:22px 0 0;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint)}
.mgps-pdp .crumb a:hover{color:var(--ink)}
.mgps-pdp .crumb span{margin:0 9px}

/* ── HERO ── */
.mgps-pdp .pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;padding:28px 0 40px;align-items:start}
.mgps-pdp .stage{background:#fff;border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:32px;position:sticky;top:24px}
.mgps-pdp .stage img{width:100%;height:100%;object-fit:contain;cursor:zoom-in}
/* padding:0 ŞART — xprocal'ın genel `button` kuralı 16px/43px padding veriyor;
   box-sizing:border-box ile 40px genişlik padding'in altına inemediği için
   buton 88px'e şişiyordu. Aynı sebeple .rel__nav button'da da sıfırlanıyor. */
.mgps-pdp .stage__zoom{position:absolute;top:14px;right:14px;width:40px;height:40px;padding:0;background:#fff;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted);cursor:pointer;transition:all .2s;z-index:2}
.mgps-pdp .stage__zoom:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mgps-pdp .stage__zoom svg{width:18px;height:18px}
.mgps-pdp .thumbs{display:flex;gap:12px;margin-top:16px;flex-wrap:wrap}
.mgps-pdp .thumb{width:70px;height:70px;background:#fff;border:1px solid var(--line);padding:9px;cursor:pointer;opacity:.75;transition:all .25s}
.mgps-pdp .thumb.is-active{opacity:1;border-color:var(--ink)}
.mgps-pdp .thumb:hover{opacity:1;border-color:var(--ink-2)}
.mgps-pdp .thumb img{width:100%;height:100%;object-fit:contain}

/* ── YETKİLİ SATICILAR ──
   TAM GENİŞLİK bölüm, hero'nun hemen altında ve AÇIKLAMADAN ÖNCE.
   B2B akışında ürünü bulmanın sonraki adımı satıcı bulmaktır; açıklama o
   karardan sonra gelir. Sol sütunda galerinin altındayken ölçülmüştü:
   sol 1147px / sağ 817px — 330px boşluk. Burada iki sütuna yayılıyor. */
.mgps-pdp .bayi{margin:8px 0 12px;border:1px solid var(--line);background:#fff}
.mgps-pdp .bayi__head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:18px 18px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.mgps-pdp .bayi__title{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--ink);margin:0}
.mgps-pdp .bayi__count{font-size:12px;color:var(--faint);margin:4px 0 0;font-weight:600}
.mgps-pdp .bayi__hint{font-weight:500}
.mgps-pdp .bayi__hint[hidden]{display:none}
.mgps-pdp .bayi__filter{position:relative;display:flex;align-items:center;min-width:190px;flex:0 1 auto}
.mgps-pdp .bayi__filter select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:0;padding:9px 32px 9px 12px;cursor:pointer;transition:border-color .2s}
.mgps-pdp .bayi__filter select:hover,.mgps-pdp .bayi__filter select:focus{border-color:var(--ink);outline:none}
.mgps-pdp .bayi__filter svg{position:absolute;right:11px;width:13px;height:13px;color:var(--muted);pointer-events:none}

/* Kaydırma alanı: yükseklik sınırlı, taşma İÇERİDE kalır. overscroll-behavior
   liste sonuna gelince sayfanın zıplamasını engeller. */
/* İki sütun. KAYDIRMA YOK: 113 kaydı kaydırma kutusuna doldurmak işe
   yaramıyordu, kullanıcı listeyi taramıyor kendi ilini seçiyor. Varsayılanda
   yalnızca ilk 4 kayıt görünür (2 sütun × 2 satır, ad sırasına göre önizleme);
   il seçilince listeye `.is-filtreli` eklenir ve sınır kalkar.
   Sınır CSS'te olduğu için JS çalışmasa da sayfa uzamıyor.

   4 satır × 2 sütun = 8 kayıt fazlaydı: ürün açıklamasını aşağı itiyordu ve
   hiçbiri kullanıcının ili olmadığı için okunmuyordu. Önizleme "burada satıcı
   listesi var" sinyali; asıl liste il seçilince geliyor. Aynı sınır mobilde
   de geçerli (tek sütun, 4 satır) — ayrı override'a gerek yok. */
.mgps-pdp .bayi__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.mgps-pdp .bayi__list:not(.is-filtreli) .bayi__item:nth-child(n+5){display:none}
.mgps-pdp .bayi__item{display:flex;flex-direction:column;gap:3px;padding:12px 18px;border-bottom:1px solid var(--line)}
.mgps-pdp .bayi__list .bayi__item:nth-child(odd){border-right:1px solid var(--line)}

.mgps-pdp .bayi__item[hidden]{display:none}
.mgps-pdp .bayi__ad{font-size:13px;font-weight:700;color:var(--ink);line-height:1.35}
.mgps-pdp .bayi__yer{font-size:11px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--faint)}
.mgps-pdp .bayi__adres{font-size:12px;color:var(--muted);line-height:1.5}
.mgps-pdp .bayi__tel{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12.5px;font-weight:700;color:var(--ink-2);align-self:flex-start;transition:color .2s}
.mgps-pdp .bayi__tel:hover{color:var(--ink)}
.mgps-pdp .bayi__tel svg{width:13px;height:13px;color:var(--faint)}
.mgps-pdp .bayi__empty{padding:26px 18px;font-size:13px;color:var(--muted);text-align:center;margin:0}
.mgps-pdp .bayi__empty[hidden]{display:none}
.mgps-pdp .bayi__all{display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-top:1px solid var(--line);font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);transition:color .2s,background-color .2s}
.mgps-pdp .bayi__all:hover{color:var(--ink);background:var(--wash)}
.mgps-pdp .bayi__all svg{width:14px;height:14px}

.mgps-pdp .info__brand{font-size:12px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted)}
/* Ürün adları uzun (marka + ürün + hacim + açıklama tek başlıkta). 800 ağırlık
   ve 28px taban mobilde koca bir blok oluşturuyordu; alt sınır 22px'e, ağırlık
   700'e çekildi. Masaüstünde tasarımın ölçüsü korunuyor (38px/800). */
.mgps-pdp .info__title{font-size:clamp(22px,2.7vw,34px);font-weight:700;line-height:1.16;letter-spacing:-.4px;margin:14px 0 0}
@media(min-width:981px){.mgps-pdp .info__title{font-weight:800;line-height:1.12;letter-spacing:-.6px}}
.mgps-pdp .info__sub{font-size:16px;color:var(--muted);margin-top:16px;max-width:44ch}
.mgps-pdp .hr{height:1px;background:var(--line);margin:30px 0}
.mgps-pdp .slabel{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}

/* Boyut seçimi.
   Butonlar İÇERİĞE GÖRE dar — `flex:1` ile tam genişliğe yayıldıklarında
   ürün adı kadar yer kaplayıp sayfanın ağırlık merkezini bozuyorlardı.
   Referans PDP'lerde (Faire, lululemon, Walmart) seçici 36-44px yüksekliğinde
   ve içeriğe göre dar; tam genişlik yalnızca tek varyantta anlamlı.
   3'ten fazla varyantta satır sarar. */
.mgps-pdp .sizes{display:flex;gap:8px;flex-wrap:wrap}
.mgps-pdp .size{flex:0 0 auto;min-width:66px;border:1.5px solid var(--line);background:#fff;padding:9px 14px;cursor:pointer;text-align:center;transition:all .2s;display:inline-flex;align-items:baseline;justify-content:center;gap:3px;font-family:inherit;color:inherit}
.mgps-pdp .size b{font-size:14px;font-weight:700;line-height:1.2}
.mgps-pdp .size small{font-size:10.5px;font-weight:600;letter-spacing:.3px;text-transform:lowercase;color:var(--faint)}
.mgps-pdp .size:hover{border-color:var(--ink-2)}
.mgps-pdp .size.is-active{border-color:var(--ink);background:var(--ink);color:#fff}
.mgps-pdp .size.is-active small{color:rgba(255,255,255,.6)}
.mgps-pdp .size:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.mgps-pdp .btn-seller{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;background:var(--ink);color:#fff;font-size:13px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:19px;margin-top:26px;transition:background .25s}
.mgps-pdp .btn-seller:hover{background:#000}
.mgps-pdp .btn-seller svg{width:18px;height:18px}

/* ── Online satın al (pazaryeri) ──
   Katalog modunda BİRİNCİL eylem burasıdır: "Satıcı Bul" CTA'sı kaldırıldığı
   için üst boşluk büyütüldü ve blok görsel olarak öne alındı. */
.mgps-pdp .buy-online{margin-top:26px}
.mgps-pdp .buy-online__sep{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.mgps-pdp .buy-online__sep::before,.mgps-pdp .buy-online__sep::after{content:"";flex:1;height:1px;background:var(--line)}
.mgps-pdp .buy-online__grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* Tek pazaryeri linki varsa tam genişlik kaplasın — yarım kutu boş durmasın */
.mgps-pdp .buy-online__grid.is-single{grid-template-columns:1fr}
.mgps-pdp .mp{display:flex;align-items:center;justify-content:center;height:60px;padding:0 16px;border:1.5px solid var(--line);background:#fff;transition:border-color .2s,transform .2s,box-shadow .25s}
/* `display:flex` tarayıcının [hidden]{display:none} kuralını EZER. JS linki
   olmayan pazaryerini hidden yapıyor; bu kural olmadan kutu görünür kalıp
   boş bir yere tıklatıyordu. Aynısı buy-online bloğu için de geçerli. */
.mgps-pdp .mp[hidden],.mgps-pdp .buy-online[hidden]{display:none}
.mgps-pdp .mp:hover{border-color:var(--ink-2);transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.07)}
.mgps-pdp .mp img{max-height:34px;max-width:90%;width:auto;object-fit:contain}
.mgps-pdp .mp--hb img{max-height:42px}
/* Logo yüklenemediğinde JS görselin yerine marka adını koyar (bkz. pdp.js) */
.mgps-pdp .mp__ad{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-2)}

/* Meta bloğu sıkıştırıldı: satır dolgusu 12px→7px, yazı 13→12.5px,
   üstteki çizgiler kaldırılıp yalnızca blok sınırı bırakıldı. 138px → ~92px. */
.mgps-pdp .meta{margin-top:24px;font-size:12.5px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:4px 0}
.mgps-pdp .meta div{display:flex;gap:14px;padding:7px 0}

.mgps-pdp .meta dt{width:82px;color:var(--faint);font-weight:600;flex-shrink:0}
.mgps-pdp .meta dd{font-weight:600;margin:0}
.mgps-pdp .meta dd a:hover{text-decoration:underline}

.mgps-pdp .share{display:flex;align-items:center;gap:14px;margin-top:24px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);font-weight:600}
.mgps-pdp .share a,.mgps-pdp .share button{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:all .25s;background:#fff;cursor:pointer;padding:0}
.mgps-pdp .share a:hover,.mgps-pdp .share button:hover{border-color:var(--ink);color:var(--ink)}
.mgps-pdp .share svg{width:15px;height:15px}

/* ── AÇIKLAMA — ham etiketleri hedefler ── */
/* ── TİPOGRAFİ ÖLÇEĞİ ──
   Önceki hâlde aynı hiyerarşi seviyesindeki başlıklar 11px ile 24px arasında
   dağılmıştı: "Birlikte iyi gider" 24px iken "TEKNİK BİLGİLER" 13px, "ÜRÜN
   AÇIKLAMASI" 11px soluk griydi. Altı ayrı küçük-büyük-harf etiketi
   birbiriyle yarışıyor, hiçbiri başlık gibi okunmuyordu.

   Referans (philips.com.tr ürün sayfası): bölüm başlıkları 28px/700, CÜMLE
   DÜZENİ ve tam kontrast siyah; gövde 16px. Tek net sıçrama var.

   Yeni ölçek — dört basamak:
     ürün adı        34/800
     bölüm başlığı   24/700  cümle düzeni  (Ürün Açıklaması, Birlikte iyi gider,
                                            Yetkili Satıcılar)
     alt başlık      17/700  cümle düzeni  (Teknik Bilgiler, Öne Çıkan Özellikler)
     gövde           16/400
   Küçük BÜYÜK HARF yalnızca gerçek ETİKETlerde kalır (marka, "Hacim Seçimi",
   meta anahtarları, tablo başlığı) — orada işlevi var, başlıkla yarışmıyor. */
.mgps-pdp .descwrap{border-top:1px solid var(--line);padding:56px 0 20px}
.mgps-pdp .desc-lead{max-width:760px}
.mgps-pdp .desc-baslik{font-size:24px;font-weight:700;letter-spacing:-.4px;color:var(--ink);margin:0 0 24px}
.mgps-pdp .desc{max-width:820px;font-size:16px;color:var(--ink-2)}
.mgps-pdp .desc p{margin:0 0 18px;line-height:1.7}
.mgps-pdp .desc h3{font-size:17px;font-weight:700;letter-spacing:-.2px;color:var(--ink);margin:40px 0 16px;padding-bottom:10px;border-bottom:2px solid var(--ink);display:inline-block}
.mgps-pdp .desc ul{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 36px}
.mgps-pdp .desc ul li{position:relative;padding:14px 0 14px 30px;border-bottom:1px solid var(--line);font-size:15px;line-height:1.55}
.mgps-pdp .desc ul li::before{content:"";position:absolute;left:0;top:18px;width:16px;height:9px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}
.mgps-pdp .desc ul li strong{color:var(--ink);font-weight:700}
.mgps-pdp .desc table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:14px}
.mgps-pdp .desc table th{text-align:left;background:var(--ink);color:#fff;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:13px 16px}
/* word-break:normal — tema `break-word` uyguluyor ve ürün adlarını kelime
   ortasından kesiyordu ("GYEON Q²M VinylCleane / r"). Uzun tek kelimeler
   yine sığdırılır, ama normal kelimeler bölünmez. */
.mgps-pdp .desc table td{padding:13px 16px;border-bottom:1px solid var(--line);word-break:normal;overflow-wrap:break-word}
.mgps-pdp .desc table td:first-child{font-weight:700;color:var(--ink);width:26%;min-width:150px}
.mgps-pdp .desc table td:nth-child(2){font-weight:600}
.mgps-pdp .desc table td:last-child{color:var(--muted);font-size:13px}
.mgps-pdp .desc table tr:nth-child(even) td{background:var(--wash)}

.mgps-pdp .desc details{border-top:1px solid var(--line)}
.mgps-pdp .desc details:last-of-type{border-bottom:1px solid var(--line)}
.mgps-pdp .desc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:22px 0;font-size:15px;font-weight:700;color:var(--ink)}
.mgps-pdp .desc summary::-webkit-details-marker{display:none}
.mgps-pdp .desc .plus{width:20px;height:20px;position:relative;flex-shrink:0}
.mgps-pdp .desc .plus::before,.mgps-pdp .desc .plus::after{content:"";position:absolute;background:var(--ink);transition:transform .3s}
.mgps-pdp .desc .plus::before{top:9px;left:1px;width:18px;height:2px}
.mgps-pdp .desc .plus::after{top:1px;left:9px;width:2px;height:18px}
.mgps-pdp .desc details[open] .plus::after{transform:scaleY(0)}
.mgps-pdp .desc .accbody{padding:0 0 26px}
/* Akordeon gövdesindeki h3 tekrar başlık gibi durmasın */
.mgps-pdp .desc .accbody h3{margin-top:8px}
.mgps-pdp .desc ol{margin:0;padding:0;list-style:none;counter-reset:step}
.mgps-pdp .desc ol>li{position:relative;padding:0 0 22px 52px;counter-increment:step}
.mgps-pdp .desc ol>li::before{content:counter(step);position:absolute;left:0;top:-2px;width:34px;height:34px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px}
.mgps-pdp .desc ol>li b,.mgps-pdp .desc ol>li>strong{display:block;font-weight:700;color:var(--ink);margin-bottom:6px;font-size:15px}
.mgps-pdp .desc ol ul{grid-template-columns:1fr;margin:0}
.mgps-pdp .desc ol ul li{border:0;padding:4px 0 4px 20px;font-size:14px}
.mgps-pdp .desc ol ul li::before{width:6px;height:6px;border:0;background:var(--faint);border-radius:50%;transform:none;top:12px}
.mgps-pdp .desc .faq-body p{margin:0 0 16px}
.mgps-pdp .desc .faq-body b{color:var(--ink)}

/* ── BİRLİKTE İYİ GİDER ── */
.mgps-pdp .rel{border-top:1px solid var(--line);padding:60px 0 96px;margin-top:36px}
.mgps-pdp .rel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px;gap:20px}
.mgps-pdp .rel__title{font-size:24px;font-weight:700;letter-spacing:-.4px}
.mgps-pdp .rel__tools{display:flex;align-items:center;gap:20px}
.mgps-pdp .rel__link{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.mgps-pdp .rel__link:hover{color:var(--ink)}
.mgps-pdp .rel__nav{display:flex;gap:8px}
.mgps-pdp .rel__nav button{width:42px;height:42px;padding:0;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;color:var(--ink);cursor:pointer;transition:all .2s}
.mgps-pdp .rel__nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.mgps-pdp .rel__nav button:disabled{opacity:.35;cursor:not-allowed}
.mgps-pdp .rel__nav button:disabled:hover{background:#fff;color:var(--ink);border-color:var(--line)}
.mgps-pdp .rel__nav svg{width:16px;height:16px}
.mgps-pdp .rel__grid{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;padding-bottom:4px}
.mgps-pdp .rel__grid::-webkit-scrollbar{display:none}
.mgps-pdp .rcard{cursor:pointer;flex:0 0 calc((100% - 78px)/4);scroll-snap-align:start}
.mgps-pdp .rcard__img{background:#fff;border:1px solid var(--line);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:20px;transition:border-color .3s}
.mgps-pdp .rcard__img img{width:100%;height:100%;object-fit:contain;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.mgps-pdp .rcard:hover .rcard__img{border-color:var(--ink-2)}
.mgps-pdp .rcard:hover .rcard__img img{transform:scale(1.06)}
.mgps-pdp .rcard__brand{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--faint);margin-top:16px}
.mgps-pdp .rcard__name{font-size:14px;font-weight:600;margin-top:6px;line-height:1.35}

/* ── LIGHTBOX ──
   z-index 100000: WordPress yönetici çubuğu 99999 kullanıyor. Daha düşük
   kalırsak giriş yapmış kullanıcıda kapat butonu çubuğun ARKASINDA kalıyor ve
   görünmüyor — çıkış yapmış ziyaretçide sorun çıkmadığı için kolay atlanıyor. */
.mgps-pdp__lb{position:fixed;inset:0;z-index:100000;background:rgba(15,15,16,.9);display:none;align-items:center;justify-content:center;padding:5vh 5vw;cursor:zoom-out}
.mgps-pdp__lb.is-open{display:flex}
.mgps-pdp__lb img{max-width:100%;max-height:90vh;object-fit:contain;background:#fff}
/* padding:0 — temanın genel buton padding'i 44px'i 88px'e şişiriyor */
.mgps-pdp__lb-close{position:absolute;top:22px;right:26px;width:44px;height:44px;padding:0;border:1px solid rgba(255,255,255,.35);background:rgba(15,15,16,.6);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:1}
.mgps-pdp__lb-close:hover{background:#fff;color:#0F0F10}
.mgps-pdp__lb-close svg{width:20px;height:20px}
body.mgps-lb-open{overflow:hidden}

@media(max-width:980px){
  .mgps-pdp__wrap{padding:0 22px}
  /* Mobilde sıra: galeri → ürün bilgisi → yetkili satıcılar.
     `.pdp__left` masaüstünde galeri ile satıcı panelini aynı sütunda tutuyor;
     mobilde `display:contents` ile ortadan kalkıyor ve iki çocuğu doğrudan
     flex öğesi oluyor, böylece satıcı paneli `order` ile bilgi panelinin
     ALTINA taşınabiliyor. Aksi hâlde 141 satırlık liste ürün bilgisiyle
     kullanıcı arasına girerdi. */
  .mgps-pdp .pdp{display:flex;flex-direction:column;gap:30px}
  /* `display:contents` + `order` hilesi kaldırıldı: panel artık sol sütunda
     değil, açıklamadan sonra tam genişlikte — mobilde de doğru yerde. */
  .mgps-pdp .bayi__list{grid-template-columns:1fr}
  /* Önizleme sınırı (4) masaüstüyle aynı, ayrı kural gerekmiyor —
     burada yalnızca tek sütuna düşüyor. */
  .mgps-pdp .bayi__list .bayi__item:nth-child(odd){border-right:0}
  .mgps-pdp .bayi__head{align-items:stretch;flex-direction:column;gap:12px}
  .mgps-pdp .bayi__filter{min-width:0}
  .mgps-pdp .stage{position:static}
  .mgps-pdp .desc ul{grid-template-columns:1fr}
  .mgps-pdp .rcard{flex:0 0 62%}
  .mgps-pdp .rel__nav{display:none}
  .mgps-pdp .desc table{font-size:13px}
  .mgps-pdp .desc table td:last-child,.mgps-pdp .desc table th:last-child{display:none}
}

@media(prefers-reduced-motion:reduce){
  .mgps-pdp *,.mgps-pdp *::before,.mgps-pdp *::after{animation:none!important;transition:none!important}
  .mgps-pdp .rel__grid{scroll-behavior:auto}
}