/* ============================================
   Product Detail Page
   ============================================ */

/* ---- Hero Image ---- */
.pd-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 5/4;
    overflow: hidden;
    /* background: var(--color-bg-glass); */
}

/* ─── Placeholder hero — when the product has no images ──────────────
   Renders in place of the photo carousel so a text-only menu doesn't
   feel "unfinished". Shorter aspect (5:2) than a real photo (5:4) so
   the actual product card gets primary screen real estate.

   Layered visual:
     1. Multi-stop gradient using --color-primary + --color-secondary so
        each tenant looks like its own brand (not a stock template).
     2. Two large blurred "color blob" radial gradients overlay for an
        organic mesh-gradient effect — keeps it from looking like a flat
        diagonal stripe.
     3. Optional category icon watermark in the centre, low opacity, so
        the customer reads it as "this is a Pasta & Tatlı item" before
        even glancing at the breadcrumb.

   Header bar (with business logo) sits directly above this hero — by
   design we DON'T put the logo here too. The category icon avoids the
   "two logos stacked" amateur look.
   ─────────────────────────────────────────────────────────────────── */
.pd-hero--placeholder {
    /* Placeholder hero (no product image) is shorter than the photo
       hero — a tall gradient block above plain text feels like dead
       space, so we trim it down to 6/2. */
    aspect-ratio: 6/2;
    background:
        radial-gradient(circle at 18% 22%, color-mix(in srgb, var(--color-primary) 65%, transparent) 0%, transparent 55%),
        radial-gradient(circle at 82% 78%, color-mix(in srgb, var(--color-secondary, var(--color-primary)) 70%, transparent) 0%, transparent 60%),
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary, var(--color-primary)) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-hero__watermark {
    width: 38%;
    max-width: 220px;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.85);
    opacity: 0.18;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.15));
    pointer-events: none;
}
.pd-hero__watermark > svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}

/* Emoji / single-character fallback when the category has no SVG icon
   but does have a text icon (often an emoji like 🍰). */
.pd-hero__watermark--text {
    font-size: clamp(56px, 14vw, 140px);
    line-height: 1;
    opacity: 0.28;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
}

/* Light theme: tone watermark down a touch — fully white can look
   washed against lighter brand gradients. */
body.theme-light .pd-hero__watermark {
    color: rgba(255, 255, 255, 0.95);
    opacity: 0.22;
}

.pd-hero__carousel {
    position: relative;
    width: 100%;
    height: 100%;
}

.pd-hero__track {
    display: flex;
    width: 100%;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.pd-hero__track::-webkit-scrollbar { display: none; }

.pd-hero__slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    scroll-snap-align: start;
}

.pd-hero__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pd-hero__dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 5;
}

.pd-hero__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.2s;
}

.pd-hero__dot--active {
    background: #fff;
    width: 20px;
    border-radius: 4px;
}

/* ══════════════════════════════════════════════════════════════════
   Detay v2 — floating kontrol katmanı (header şeridi kaldırıldı)
   Hero tam-kanama üstte; üstüne frosted cam kontroller: logo sol-üst,
   geri/paylaş/beğen sağ-üst. YALNIZ page modunda render edilir (modal
   kendi kapatma chrome'una sahip). Fotoğraf üstünde okunurluk için
   üst gradient scrim + kontrollerde cam + yumuşak gölge.
   ══════════════════════════════════════════════════════════════════ */
.pd-hero__scrim {
    /* YALNIZ üst — kontrollerin (logo/geri/paylaş/beğen) fotoğraf üstünde
       okunması için. Alt kısımda koyultma YOK: kart kesişiminde muddy band
       oluşturuyordu (kartın kendi gölgesiyle üst üste binip opacity farkı). */
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.24) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 100%);
}
.pd-hero__controls {
    position: absolute; top: 0; left: 0; right: 0; z-index: 6;
    display: flex; align-items: center; justify-content: space-between;
    padding: max(14px, env(safe-area-inset-top, 0px)) 14px 14px;
    pointer-events: none;
}
.pd-hero__controls > * { pointer-events: auto; }
/* Logo OLDUĞU GİBİ — kap/arkaplan/border/radius/gölge YOK. Yalnız yükseklikle
   ölçeklenir (operatörün logosu kendi formunda kalır; zorla yuvarlak+çerçeve
   yalnız yuvarlak-rozet logolara yakışır, wordmark/dikdörtgende amatör görünür). */
.pd-hero__brand { display: inline-flex; align-items: center; text-decoration: none; }
.pd-hero__brand img { height: 48px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.pd-hero__spacer { width: 1px; height: 1px; }
.pd-hero__actions { display: flex; gap: 9px; }
/* Modal bağlamı: sağ-üstteki modal kapat (X) düğmesi absolute/z-6 ile hep görünür
   ve artık .pd-hero__btn ile aynı boyut/stilde (right:14px, 42px). Floating aksiyon
   kümesini (paylaş/beğen) X'in soluna, X'le AYNI 9px boşlukla kaydır → [paylaş]
   [beğen][X] eşit aralıklı tek küme. (14 sağ + 42 X + 9 boşluk = 65px.) "Geri"
   düğmesi modalda zaten gizli. */
.pd-hero__controls--modal { padding-right: 65px; }
.pd-hero__btn {
    width: 42px; height: 42px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #243028; text-decoration: none;
    background: rgba(255,255,255,.64);
    -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.7);
    box-shadow: 0 6px 16px rgba(20,30,20,.15);
    cursor: pointer; transition: transform .15s ease, background .2s ease, color .2s ease;
}
.pd-hero__btn:active { transform: scale(.92); }
.pd-hero__btn svg { width: 19px; height: 19px; }
.pd-hero__btn--like.is-active { color: var(--color-sale, #b1495f); }
.pd-hero__btn--like.is-active svg { fill: currentColor; stroke: currentColor; }
.pd-hero__btn--cart { position: relative; }
.pd-hero__cart-badge {
    position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 9px; background: var(--color-primary); color: #fff; line-height: 1;
    font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.pd-hero__cart-badge.tk-cart-icon__badge--empty { display: none; }

/* Paylaş fallback toast — "bağlantı kopyalandı" (native share yoksa). */
.pd-toast {
    position: fixed; left: 50%; bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: translate(-50%, 12px); z-index: 9999; pointer-events: none;
    background: rgba(20,22,20,.92); color: #fff; font-size: 13.5px; font-weight: 500;
    padding: 10px 18px; border-radius: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.28);
    opacity: 0; transition: opacity .22s ease, transform .22s ease;
}
.pd-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
body:not(.theme-light) .pd-hero__btn {
    background: rgba(22,24,22,.52); color:#f0efe9; border-color: rgba(255,255,255,.16);
}

/* ---- Detail Card ---- */
.pd-card {
    position: relative;
    z-index: 3;
    margin: var(--space-lg) var(--space-md) 0;
    padding: var(--space-lg) var(--space-md) var(--space-md);
    background: var(--color-bg);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.pd-card--overlap {
    margin-top: -34px;
}

/* Page modunda kart üstünde bottom-sheet tutamacı (modal kendi grip'ine
   sahip → yalnız --page'de). Uygulama hissi verir. */
.pd-card--page { position: relative; }
.pd-card--page::before {
    content: ""; position: absolute; top: 11px; left: 50%; transform: translateX(-50%);
    width: 40px; height: 4px; border-radius: 4px;
    background: var(--color-border-light); opacity: .9;
}

/* Kart üst %62 OPAK (kesişimde temiz kenar) + yukarı-doğru yumuşak "lift" gölgesi.
   Muddy band'ı yaratan asıl unsur scrim'in alt koyultmasıydı (kaldırıldı); kartın
   kendi ince gölgesi kalır. Alt gradient içeriği sayfaya yumuşatır. */
body.theme-light .pd-card {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 62%, rgba(255, 255, 255, 0) 100%);
    box-shadow: 0px -20px 24px rgba(0, 0, 0, 0.06);
}

/* KOYU TEMA: gölge KOYU değil AYDINLIK olmalı — kara zeminde kara gölge görünmez.
   Beyaz, düşük-opak bir hale kartı hero'dan ayırır (kara gölge burada yanlıştı). */
body:not(.theme-light) .pd-card {
    box-shadow: 0px -20px 24px rgba(255, 255, 255, 0.07);
}

/* ---- Breadcrumb ----
   Horizontal-scroll behaviour: long breadcrumb chains (deep group
   → category → product) used to wrap into 2-3 ugly lines on narrow
   viewports. Now they scroll horizontally as a single line — matches
   how mobile users already expect to interact with overflowing
   navigation chrome (Twitter, app store breadcrumbs, etc.). The
   scrollbar is hidden visually but the area is keyboard/touch
   scrollable, and scroll-snap nudges each segment into a comfortable
   resting position.

   Edge fade hints there's more content off-screen without adding
   visual noise (a shadow that masks itself when the scroll reaches
   either end). */
.pd-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: var(--space-md);
    font-size: 14px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scrollbar-width: none;            /* Firefox */
    -ms-overflow-style: none;         /* IE/Edge legacy */
    /* Negative inline margin + padding lets the scroll edge bleed past
       the parent padding so links flush to the visible edge when scrolled. */
    margin-left: calc(var(--space-md) * -1);
    margin-right: calc(var(--space-md) * -1);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    /* Subtle fade on both sides when content overflows. */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.pd-breadcrumb::-webkit-scrollbar {
    display: none;                    /* Chromium/Safari */
}

.pd-breadcrumb__link {
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
    flex: none;                       /* never shrink — keeps each crumb on its own */
    white-space: nowrap;
    scroll-snap-align: start;
}

.pd-breadcrumb__link:last-child {
    color: var(--color-primary);
    font-weight: 500;
}

.pd-breadcrumb__sep {
    color: var(--color-text-muted);
    opacity: 0.5;
    font-size: 10px;
    flex: none;
}

/* ---- Head: Name + Price ---- */
.pd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.pd-head__name {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    flex: 1;
}

/* ---- Price Badge ---- */
.pd-price-badge {
    flex-shrink: 0;
    padding: 8px 16px;
    background: var(--color-primary);
    color: var(--color-bg);
    font-size: var(--text-lg);
    font-weight: 800;
    border-radius: 12px;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ---- Variant Prices ---- */
.pd-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: var(--space-md);
}

.pd-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--color-border-light);
}

body.theme-light .pd-variant {
    background: #f9f9f9;
}

body:not(.theme-light) .pd-variant {
    background: var(--color-bg-glass);
}

.pd-variant__label {
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pd-variant__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}

/* ---- İlaveler (add-ons) — v3: soft-gölge "SEÇENEK" kartları ----
   Düz metin satır DEĞİL: her ilave, hafif yükseltili bir kart → seçilebilir
   "seçenek" hissi. Sol yeşil "+" tile, ad ortada, fiyat sağda. */
.pd-addons { margin-bottom: var(--space-md); }
.pd-addons__title {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
    color: var(--color-text-muted); margin-bottom: 12px;
}
.pd-addon {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 15px; margin-bottom: 10px;
    border-radius: 14px; border: 1px solid var(--color-border-light);
    transition: box-shadow .2s ease, transform .12s ease, border-color .2s ease;
}
.pd-addon:last-child { margin-bottom: 0; }
body.theme-light .pd-addon {
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(24,30,24,.06), 0 1px 3px rgba(24,30,24,.05);
}
body:not(.theme-light) .pd-addon {
    background: var(--color-bg-card); box-shadow: 0 3px 12px rgba(0,0,0,.20);
}
.pd-addon__plus {
    width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 11%, transparent);
}
.pd-addon__plus svg { width: 16px; height: 16px; }
.pd-addon__label { flex: 1; min-width: 0; color: var(--color-text); font-size: 15px; font-weight: 500; }
.pd-addon__price { font-weight: 700; color: var(--color-primary); white-space: nowrap; letter-spacing: .01em; font-size: 15px; }
/* İlave grubu alt-başlığı (grupsuz ilavelerde çıkmaz → zarif fallback). */
.pd-addons__group {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--color-primary); padding: 4px 2px 8px;
}

/* ---- Feature Badges ---- */
.pd-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--space-md);
}

.pd-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Rozet ikonları — metin 11px kalırken ikonlar biraz daha iri (14px).
   CSS width/height, inline width="12" presentation attribute'ünü override eder. */
.pd-badge svg { flex-shrink: 0; width: 14px; height: 14px; }

.pd-badge--new {
    background: #ecfdf5;
    color: #059669;
}
body:not(.theme-light) .pd-badge--new {
    background: rgba(5, 150, 105, 0.15);
}

.pd-badge--popular {
    background: #fff7ed;
    color: #ea580c;
}
body:not(.theme-light) .pd-badge--popular {
    background: rgba(234, 88, 12, 0.15);
}

.pd-badge--chef {
    background: rgba(200, 169, 126, 0.12);
    color: var(--color-primary);
}

.pd-badge--veg {
    background: #ecfdf5;
    color: #16a34a;
}
body:not(.theme-light) .pd-badge--veg {
    background: rgba(22, 163, 74, 0.15);
}

.pd-badge--gf {
    background: #f0fdf4;
    color: #15803d;
}
body:not(.theme-light) .pd-badge--gf {
    background: rgba(21, 128, 61, 0.12);
}

/* Sugar Free — sky-blue tone, distinct from gluten-free's green so
   the two health markers don't visually merge when both appear. */
.pd-badge--sf {
    background: #eff6ff;
    color: #1d4ed8;
}
body:not(.theme-light) .pd-badge--sf {
    background: rgba(29, 78, 216, 0.15);
}

.pd-badge--spicy {
    background: #fef2f2;
    color: #dc2626;
}
body:not(.theme-light) .pd-badge--spicy {
    background: rgba(220, 38, 38, 0.15);
}

/* Menü etiketleri (tags) — operatör-tanımlı çip; rengi inline --tag ile
   gelir (tag.color), tint'i color-mix üretir. İkonu ile birlikte alerjen
   sistemiyle aynı görsel dilde. */
.pd-badge--tag {
    background: color-mix(in srgb, var(--tag, #c8a97e) 13%, transparent);
    color: var(--tag, #c8a97e);
}
body:not(.theme-light) .pd-badge--tag {
    background: color-mix(in srgb, var(--tag, #c8a97e) 24%, transparent);
    color: color-mix(in srgb, var(--tag, #c8a97e) 82%, #ffffff);
}
.pd-badge__tagico {
    width: 13px;
    height: 13px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Product code: monospace + neutral tone, reads like a SKU. */
.pd-badge--code {
    background: #f1f5f9;
    color: #475569;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.02em;
}
body:not(.theme-light) .pd-badge--code {
    background: rgba(148, 163, 184, 0.18);
    color: #cbd5e1;
}

/* Garsona Göster — looks like a chip but acts like a button.
   Brand-tinted to invite the tap; cursor + hover states distinguish it
   from the read-only chips above. */
.pd-badge--waiter {
    background: #fdf8f0;
    color: #8a6f47;
    border: 1px solid #f0d5a8;
    cursor: pointer;
    transition: background 150ms ease, transform 100ms ease;
}
.pd-badge--waiter:hover {
    background: #f9ecd8;
    transform: translateY(-1px);
}
body:not(.theme-light) .pd-badge--waiter {
    background: rgba(200, 169, 126, 0.15);
    color: #e4b872;
    border-color: rgba(200, 169, 126, 0.35);
}

/* Garsona Göster modal — centered card on a dim backdrop. */
.waiter-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}
.waiter-help-backdrop[hidden] { display: none; }
.waiter-help-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
}

.waiter-help-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #ffffff;
    color: #0f172a;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35), 0 8px 24px rgba(15, 23, 42, 0.12);
    transform: translateY(8px);
    transition: transform 240ms ease;
}
.waiter-help-backdrop.is-open .waiter-help-card {
    transform: translateY(0);
}

.waiter-help-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: #475569;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    transition: background 150ms ease;
}
.waiter-help-close:hover {
    background: #ffffff;
    color: #0f172a;
}

.waiter-help-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f1f5f9;
}
.waiter-help-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.waiter-help-body {
    padding: 20px 22px 22px;
}

.waiter-help-section {
    padding: 4px 0;
}
.waiter-help-section--default {
    color: #475569;
}

.waiter-help-lang {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
}
.waiter-help-flag { font-size: 14px; }
.waiter-help-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.waiter-help-name {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.waiter-help-section--default .waiter-help-name {
    font-size: 16px;
    color: #334155;
}

.waiter-help-desc {
    font-size: 13.5px;
    line-height: 1.55;
    margin: 0;
    color: #475569;
}
.waiter-help-section--default .waiter-help-desc {
    color: #64748b;
}

.waiter-help-divider {
    border: none;
    border-top: 1px dashed #e2e8f0;
    margin: 14px 0;
}

.waiter-help-code-row {
    margin-top: 14px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.waiter-help-code-label {
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.waiter-help-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 16px;
    color: #0f172a;
    letter-spacing: 0.04em;
}

@media (max-width: 480px) {
    .waiter-help-backdrop { padding: 12px; }
    .waiter-help-name { font-size: 17px; }
    .waiter-help-section--default .waiter-help-name { font-size: 15px; }
}

/* ---- Description (rich HTML via Quill, sanitized) ---- */
.pd-desc {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}
/* Tame nested block elements so the description reads as one fluid
   block. First/last children flush with the container; inner spacing
   is enough that bullets + paragraphs feel intentional. */
.pd-desc > :first-child { margin-top: 0; }
.pd-desc > :last-child  { margin-bottom: 0; }
.pd-desc p { margin: 0 0 0.6em; }
.pd-desc ul, .pd-desc ol { margin: 0 0 0.6em; padding-left: 1.4em; }
.pd-desc li { margin-bottom: 0.2em; }
.pd-desc strong { font-weight: 600; color: var(--color-text-primary, #1f2937); }
.pd-desc a { color: var(--color-primary); text-decoration: underline; }

/* ---- Meta (Calories, Prep) ---- */
.pd-meta {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    /* v3: legacy üst/alt border kaldırıldı — .pd-rule sistemi ile çakışıyordu
       (sade üründe kalori satırı çift-çizgi kutu gibi görünüyordu). Artık
       kalori/hazırlık meta satırı açıklamanın altına yalın oturur. */
}

.pd-meta__item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.pd-meta__item svg {
    opacity: 0.5;
}

.pd-meta__basis {
    opacity: 0.6;
    font-size: 11px;
    margin-left: 2px;
}

/* ---- Nutrition card (Kalori + Yağ/Karb/Protein) ----
   Shown when the product has at least one macro value. The grid sits
   between description and allergens; reuses the meta block's vertical
   rhythm but elevates each cell into a visible group so the values
   feel "label-like" rather than buried in a metadata strip. */
/* Bölüm ayracı — kutu yerine hairline (mockup ritmi). */
.pd-rule { height: 1px; background: var(--color-border-light); margin: var(--space-lg) 0; border: 0; }

/* ---- Beslenme — v3: kutusuz inline serif istatistik + makro oran çubuğu ---- */
.pd-nutrition { margin-bottom: var(--space-lg); }
.pd-nutrition__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-sm); margin-bottom: 14px;
}
.pd-nutrition__title {
    font-size: 11.5px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.16em; margin: 0;
}
.pd-nutrition__basis {
    font-size: 11px; color: var(--color-text-muted); opacity: 0.8;
    font-weight: 500; letter-spacing: 0.02em;
}
.pd-nutrition__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.pd-nutrition__cell {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 2px 6px; position: relative;
}
.pd-nutrition__cell + .pd-nutrition__cell::before {
    content: ''; position: absolute; left: 0; top: 14%; bottom: 14%;
    width: 1px; background: var(--color-border-light);
}
.pd-nutrition__ic { height: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 7px; }
.pd-nutrition__ic svg { width: 18px; height: 18px; }
.pd-nutrition__value {
    font-family: var(--font-display, inherit); font-size: 23px; font-weight: 700;
    color: var(--color-text); line-height: 1;
}
.pd-nutrition__unit {
    font-size: 12px; font-weight: 600; color: var(--color-text-muted);
    margin-left: 1px; font-family: var(--font-primary);
}
.pd-nutrition__label {
    font-size: 10px; color: var(--color-text-muted); margin-top: 6px;
    letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; white-space: nowrap;
}
/* Makro etiketinde çubuk-eşleşen minik renkli nokta (ikon yerine; sayılar ↔ oran çubuğu bağı). */
.pd-nutrition__dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 5px; vertical-align: middle; position: relative; top: -1px; }

/* Makro oran çubuğu — yağ/karb/protein dağılımı (renkler markup'ta inline). */
.pd-macrobar { margin-top: 16px; }
.pd-macrobar__track { height: 7px; border-radius: 6px; overflow: hidden; display: flex; gap: 2px; }
.pd-macrobar__track span { display: block; height: 100%; border-radius: 2px; }
.pd-macrobar__legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.pd-macrobar__legend span {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; color: var(--color-text-muted); font-weight: 600; letter-spacing: .01em;
}
.pd-macrobar__legend i { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }

.pd-nutrition__foot {
    display: flex; align-items: center; gap: 7px; margin-top: 16px;
    font-size: 12.5px; color: var(--color-text-muted); letter-spacing: .01em;
}
.pd-nutrition__foot svg { opacity: 0.6; }

/* ---- Alerjenler — v3: rafine çip (ikon tile + metin) ---- */
.pd-allergens { margin-bottom: var(--space-md); }
.pd-allergens__title {
    font-size: 11.5px; font-weight: 700; color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.16em; margin-bottom: 12px;
}
.pd-allergens__list { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-allergen {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 7px 13px 7px 7px; border-radius: 12px;
    font-size: 13px; color: var(--color-text-secondary);
}
body.theme-light .pd-allergen { background: #f6f5f1; }
body:not(.theme-light) .pd-allergen { background: var(--color-bg-glass); }
.pd-allergen__ic {
    width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
}
.pd-allergen img { width: 15px; height: 15px; }

/* ---- Similar Products ---- */
.pd-similar {
    padding: var(--space-lg) 0;
    overflow: hidden;
}

.pd-similar__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--color-text);
    padding: 0 var(--space-md) var(--space-md);
}

.pd-similar__scroll {
    display: flex;
    gap: var(--space-md);
    /* Leading 16px only — aligns the first card with the section title
       (which also sits at --space-md) for design coherence. No trailing
       padding so the last visible card bleeds off the right edge, hinting
       "there's more". */
    padding: 0 0 0 var(--space-md);
    overflow-x: auto;
    /* No scroll-snap here. Snapping — mandatory OR proximity — aligns the
       first card to the snapport edge and cancels the 16px padding inset
       (the browser scrolls past the padding to reach the snap point).
       Free scroll is the only way to get "16px at rest, 0 once scrolled",
       and it's the right feel for a small thumbnail carousel anyway. */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Start hidden, animate on scroll */
    transform: translateX(80px);
    opacity: 0;
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.8s ease;
}

.pd-similar__scroll.is-visible {
    transform: translateX(0);
    opacity: 1;
}

.pd-similar__scroll::-webkit-scrollbar { display: none; }

.pd-similar__card {
    flex-shrink: 0;
    width: 130px;
    text-decoration: none;
    color: inherit;
}

.pd-similar__img {
    width: 130px;
    height: 130px;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg-glass);
    margin-bottom: 6px;
}

.pd-similar__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Designed fallback for a carousel card whose product has no photo.
   Keeps every carousel card the same height and reads as intentional —
   a soft tinted tile carrying the section (category) icon as a
   watermark, not an empty grey box. Theme-aware via the glass tokens. */
.pd-similar__img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-bg-card-hover), var(--color-bg-glass));
    color: var(--color-text-muted);
}

/* The icon sits at 0.3 — present as a watermark, not loud. Opacity is
   applied to the icon only so the tinted tile keeps its full tone. */
.pd-similar__img-fallback > svg,
.pd-similar__img-fallback-text {
    opacity: 0.3;
}
.pd-similar__img-fallback > svg {
    width: 56px;
    height: 56px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.4;
}
.pd-similar__img-fallback-text {
    font-size: 44px;
    line-height: 1;
}

.pd-similar__name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-similar__price {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: 2px;
    display: block;
}
/* İndirimli benzer ürün — fiyat marka renginde kalır (tutarlı), üstünde üstü
   çizili taban. Ayrı kırmızı yok; struck + marka-renk fiyat = "indirim" sinyali. */
.pd-similar__price-old {
    color: var(--color-text-muted);
    text-decoration: line-through;
    text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
    font-weight: 500;
    font-size: 0.85em;
    margin-right: 3px;
    opacity: .85;
}

/* ─── List layout variant ────────────────────────────────────────────
   Switches the carousel into vertical rows. Each card spans the full
   width, image (when present) sits left, name + price stack right.
   Designed to read cleanly even when images are disabled (--no-img).
   ─────────────────────────────────────────────────────────────────── */
.pd-similar--list .pd-similar__scroll {
    flex-direction: column;
    /* List mode is a vertical stack of independent cards — symmetric
       16px gutters and an 8px gap between cards (no more shared
       hairline separators). Each row gets its own surface below. */
    gap: var(--space-sm);
    overflow: visible;
    padding: 0 var(--space-md);
}
.pd-similar--list .pd-similar__card {
    /* Each row is now a self-contained card (image | content | price)
       with its own surface, border, and a touch of elevation — replaces
       the older plain hairline-separated rows that read as a text dump. */
    display: flex;
    width: 100%;
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: background var(--transition-fast);
}
.pd-similar--list .pd-similar__card:active {
    background: var(--color-bg-card-hover);
}
.pd-similar--list .pd-similar__img {
    width: 60px;
    height: 60px;
    flex: none;
    margin: 0;
    border-radius: var(--radius-md);
}
/* The content column — name on top, optional subtitle below. Flex:1
   lets it grow so the price stays right-aligned; min-width:0 lets the
   nested name/sub truncate cleanly when the row is narrow. */
.pd-similar--list .pd-similar__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pd-similar--list .pd-similar__name {
    margin: 0;
    text-align: left;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    /* A touch bolder + larger than the carousel default so the row
       carries the visual weight a card surface deserves. */
    font-size: 14px;
    font-weight: 600;
}
/* Subtitle line — region tag ("URLA/TÜRKİYE") or a short ingredient
   string lifted from the description. Italic + muted so it reads as
   secondary info, ellipsised to a single line. */
.pd-similar--list .pd-similar__sub {
    font-size: 12px;
    color: var(--color-text-muted);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.pd-similar--list .pd-similar__price {
    margin-top: 0;
    flex: none;
    /* Match the bolder name with a slightly heavier price — the card
       surface lets us afford the visual weight. */
    font-size: 14px;
    font-weight: 700;
}
/* Variant range price — a touch smaller + italic so "1.150 – 3.500₺"
   visibly reads as a range, not a single number. Without this the
   wider text would muddle the right-aligned column. */
.pd-similar__price--range {
    font-size: 0.92em;
    font-style: italic;
    white-space: nowrap;
}

/* ─── No-image variant ────────────────────────────────────────────── */
/* Carousel mode without images: cards collapse to text-only chips. */
.pd-similar--no-img.pd-similar--carousel .pd-similar__card {
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
}
/* No image-slot override needed for list mode anymore — the card has
   its own padding regardless of whether the image cell is rendered. */

body.theme-light .pd-similar--list .pd-similar__card {
    /* Pure white card on the page's off-white background, with a
       hairline border and a whisper of shadow for elevation. Matches
       the "card surface" feel the operator's reference design uses. */
    background: #ffffff;
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
body.theme-light .pd-similar--no-img.pd-similar--carousel .pd-similar__card {
    background: rgba(0, 0, 0, 0.03);
}

/* ─── Search featured: drop placeholder when no-img mode ─────────── */
.search-featured--no-img .search-featured__item {
    grid-template-columns: 1fr;
}

/* ─── Live search results: tighter row when no image slot ────────── */
.product-card--no-img {
    grid-template-columns: 1fr auto !important;
}

/* ══════════════════════════════════════════════
   İndirim (kampanyalı fiyat) — detay  ·  v3 editoryal (referans yönü)
   Fiyat MARKA renginde (ayrı kırmızı değil) + kutusuz büyük rakam; üstü çizili
   taban üstte; indirim etiketi İKONSUZ rose tag olarak fiyatın altında sağa
   yaslı. Ayrı "−X ₺" yok — üstü çizili + etiket yeterli. Rose aksan --color-sale,
   marka rengi --color-primary (variables.css).
   ══════════════════════════════════════════════ */
.pd-price { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.pd-price-old {
    font-size: var(--text-base); color: var(--color-text-muted);
    text-decoration: line-through; text-decoration-thickness: 1px;
    text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
    font-weight: 500; opacity: .85; line-height: 1;
}
/* Sale: normal pill şeffaflaşır → kutusuz, MARKA renginde büyük rakam. */
.pd-price--sale .pd-price-badge {
    background: transparent; color: var(--color-primary);
    padding: 0; box-shadow: none; border: 0;
    font-size: 30px; font-weight: 800; letter-spacing: -.01em; line-height: 1;
}
.pd-price-save { display: none; }   /* v3: ayrı kazanç etiketi yok */

/* Kampanya etiketi — ikonsuz rose tag + (varsa) saat penceresi altında. */
.pd-offer { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px; margin-top: 4px; }
.pd-offer__t {
    font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--color-sale); background: var(--color-sale-soft);
    border: 1px solid var(--color-sale-edge); padding: 4px 9px; border-radius: 7px;
}
.pd-offer__s { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); letter-spacing: .01em; }
/* Takeaway'de fiyat footer'da → etiket sola yaslı standalone. */
.pd-offer--standalone { align-items: flex-start; margin: 6px 0 2px; }

/* İndirimli varyant — marka renginde fiyat + üstü çizili taban. */
.pd-variant--sale .pd-variant__price { color: var(--color-primary); font-weight: 700; }
.pd-variant__old { font-size: 0.82em; color: var(--color-text-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-text-muted) 55%, transparent); font-weight: 500; margin-right: 4px; opacity: .8; }