/* Product page — the user's "OG Product Page" design (pages/product.php, components/product/v5): page shell, the
 * breadcrumb row and the listing ticket from 768px up. The checkout card is product-v5-checkout.css, the silk cards
 * of both are product-v5-silk.css; phones keep product-mobile.css. Colours are the v5 tokens on body.mkt-v5
 * (market-v5.css), so white mode follows the marketplace palette. ≥1024px sits in the #mk5.mk5-solo shell. */

.pd {
    --pd-col: 1240px; /* the design was 1005px; widened 2026-10-29 with the rest of the site (less empty side space) */
    --pd-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --pd-num: Sora, 'Noto Sans Arabic', system-ui, sans-serif;
    color: rgb(var(--mk-fg));
    font-family: Satoshi, 'Noto Sans Arabic', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.pd-mono {
    font-family: var(--pd-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgb(var(--mk-fg) / calc(0.4 * var(--mk-tk)));
}
.pd-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; opacity: 0; pointer-events: none; }

@media (min-width: 768px) {
    /* ---- Shell ---- */
    .pd { position: relative; overflow-x: clip; min-height: 100vh; padding-top: 88px; background: rgb(var(--mk-bg)); }
    .pd__glow {
        position: absolute; top: -260px; left: 50%; width: 1200px; height: 640px; margin-left: -600px; border-radius: 50%;
        background: radial-gradient(closest-side, rgb(var(--mk-hl) / 0.07), rgb(var(--mk-hl) / 0)); pointer-events: none;
    }
    .pd__wrap { position: relative; z-index: 1; max-width: calc(var(--pd-col) + 40px); margin: 0 auto; padding: 0 20px 48px; }

    /* ---- Breadcrumb (start) + back link (end) ---- */
    .pd-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
    .pd-back {
        display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 13px; border-radius: 999px;
        border: 1px solid rgb(var(--mk-fg) / 0.14); background: transparent; text-decoration: none;
        color: rgb(var(--mk-fg)); font-size: 13px; font-weight: 700;
        transition: background .2s ease, border-color .2s ease, color .2s ease;
    }
    .pd-back:hover { background: rgb(var(--mk-fg) / 0.06); color: rgb(var(--mk-fg)); }
    .pd-back i { font-size: 11px; transition: transform .2s ease; }
    .pd-back:hover i { transform: translateX(-2px); }
    html[dir="rtl"] :is(.pd-back, .pd-crumb) i { transform: scaleX(-1); }
    html[dir="rtl"] .pd-back:hover i { transform: scaleX(-1) translateX(-2px); }
    .pd-crumb { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; font-weight: 500; color: rgb(var(--mk-fg) / calc(0.45 * var(--mk-tk))); }
    .pd-crumb a { color: inherit; text-decoration: none; transition: color .2s ease; }
    .pd-crumb a:hover { color: rgb(var(--mk-fg)); }
    .pd-crumb i { font-size: 9px; color: rgb(var(--mk-fg) / 0.3); }
    .pd-crumb__cur { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: rgb(var(--mk-fg)); font-weight: 700; }

    /* ---- Checkout (start, wide) + ticket (end); they stack when the row is too narrow ---- */
    .pd-main { position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px; margin-top: 22px; }
}

@media (min-width: 1024px) {
    #mk5.pd .pd__wrap { padding-bottom: 0; }
}

/* ---- Ticket (hidden on phones by product-mobile.css) ---- */
.pd-ticket {
    flex: 0 1 378px; min-width: 300px; border-radius: 24px; border: 1px solid rgb(var(--mk-fg) / 0.1);
    background: linear-gradient(160deg, rgb(var(--mk-s1)) 0%, rgb(var(--mk-c2)) 100%);
}
.pd-ticket__in { display: flex; flex-direction: column; padding: 9px; }
.pd-ticket__card { display: flex; flex-direction: column; justify-content: space-between; min-height: 212px; padding: 16px 18px 18px; }
.pd-ticket__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pd-ticket__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-ticket__id .pd-mono { color: rgb(255 255 255 / 0.82); text-shadow: 0 1px 10px rgb(0 0 0 / 0.9); }
/* platform: a white app tile with the dark platform mark, then the platform name over the listing id */
.pd-ticket__platform {
    width: 42px; height: 42px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 13px;
    background: linear-gradient(180deg, #ffffff 0%, #dcdce0 100%); color: #0a0a0a; font-size: 21px;
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.15), 0 10px 24px rgb(0 0 0 / 0.55);
}
.pd-ticket__idtext { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pd-ticket__pname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-size: 13.5px; font-weight: 700; }
.pd-ticket__idtext .pd-mono { font-size: 10.5px; letter-spacing: 0.12em; }
.pd-live { display: flex; align-items: center; gap: 6px; color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 0.04em; }
.pd-live__dot { width: 6px; height: 6px; border-radius: 50%; background: #34d27b; box-shadow: 0 0 8px rgb(52 210 123 / 0.8); }
/* The handle is the product: heavy white letters, a small raised @ and the verified line (effects: product-v5-silk.css) */
.pd-ticket__handle { position: relative; z-index: 1; align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 100%; }
.pd-ticket__name {
    margin: 0; overflow-wrap: anywhere; text-align: left; color: #fff;
    font-family: inherit; font-size: 58px; font-weight: 800; line-height: 1; letter-spacing: -0.055em;
}
.pd-ticket__name--m { font-size: 44px; }
.pd-ticket__name--s { font-size: 32px; }
.pd-ticket__name--xs { font-size: 25px; line-height: 1.05; }

.pd-ticket__body { display: flex; flex-direction: column; padding: 16px 9px 8px; }

/* Standard / Swap: stacked choices, each with a radio, what the buyer gets and the price (one card when swap is not offered) */
.pd-opts { display: flex; flex-direction: column; gap: 8px; }
.pd-opt {
    display: flex; align-items: center; gap: 12px; width: 100%; min-width: 0; padding: 12px 14px; border-radius: 14px;
    border: 1px solid rgb(var(--mk-fg) / 0.1); background: rgb(var(--mk-fg) / 0.03);
    color: rgb(var(--mk-fg)); font: inherit; text-align: start; cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.pd-opt:hover { border-color: rgb(var(--mk-fg) / 0.26); }
.pd-opt.is-on { border-color: rgb(var(--mk-fg) / 0.75); background: rgb(var(--mk-fg) / 0.07); cursor: default; }
.pd-opt:focus-visible { outline: 2px solid rgb(var(--mk-fg)); outline-offset: 2px; }
.pd-opt__radio {
    flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid rgb(var(--mk-fg) / 0.35); transition: border-color .25s ease;
}
.pd-opt__radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: rgb(var(--mk-fg)); transform: scale(0); transition: transform .25s ease; }
.pd-opt.is-on .pd-opt__radio { border-color: rgb(var(--mk-fg)); }
.pd-opt.is-on .pd-opt__radio::after { transform: scale(1); }
.pd-opt__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pd-opt__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.25; }
.pd-opt__title i { font-size: 12px; opacity: .7; }
.pd-opt__desc { font-size: 12px; line-height: 1.35; color: rgb(var(--mk-fg) / calc(0.55 * var(--mk-tk))); }
.pd-opt__price { flex: none; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-opts__hint { margin: 10px 4px 0; font-size: 12px; line-height: 1.45; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
.pd-opts__hint:empty { display: none; }

/* Order summary (moved under the checkout form on phones) */
.pd-sum { display: flex; flex-direction: column; }
.pd-sum .pf { margin-top: 18px; }
/* the design's promo toggle and Telegram offer: white, bold */
.pd-sum .pf__toggle { color: rgb(var(--mk-fg)); font-weight: 700; }
.pd-sum .pf__toggle > i:first-child { font-size: 11px; color: rgb(var(--mk-fg) / 0.6); }
.pd-sum .pf__tg { padding: 12px 14px; color: rgb(var(--mk-fg)); font-weight: 700; }
.pd-sum .pf__tg > i:first-child { font-size: 15px; color: rgb(var(--mk-fg) / 0.8); }
.pd-sum .pf__out { font-size: 10px; opacity: 0.45; }
/* An applied code is just its pill: no "Have a promo code?", no Telegram offer, no success line (errors still show) */
.pd-sum .pf:has([data-promo-applied]:not([hidden])) :is(.pf__toggle, .pf__tg) { display: none; }
.pd-sum .pf:has([data-promo-applied]:not([hidden])):not(.is-error) .pf__msg { display: none; }
.pd-sum .pf__applied { min-height: 48px; padding-block: 4px; padding-inline: 14px 6px; border-style: solid; border-color: rgb(var(--mk-fg) / 0.14); background: rgb(var(--mk-fg) / 0.02); }
.pd-sum .pf__chip { gap: 10px; }
.pd-sum .pf__chip b { font-family: var(--pd-mono); font-size: 13px; }
.pd-sum .pf__remove { height: 34px; padding: 0 10px; border: 0; background: transparent; color: rgb(var(--mk-fg) / calc(0.7 * var(--mk-tk))); font-size: 12.5px; }
.pd-sum .pf__remove:hover { background: rgb(var(--mk-fg) / 0.06); color: rgb(var(--mk-fg)); }
.pd-sum__rows { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid rgb(var(--mk-fg) / 0.08); }
.pd-sum__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; color: rgb(var(--mk-fg) / calc(0.5 * var(--mk-tk))); }
.pd-sum__row[hidden] { display: none; }
.pd-sum__row > :last-child { color: rgb(var(--mk-fg)); font-weight: 700; font-variant-numeric: tabular-nums; }
.pd-sum__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 10px; color: rgb(var(--mk-fg)); font-size: 13px; font-weight: 700; }
.pd-sum__amount { font-family: inherit; font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pd-sum .pd-terms { margin-top: 20px; }
.pd-sum .pd-submit { flex: none; width: 100%; max-width: none; height: 48px; margin-top: 16px; }

/* Cart / copy link / support */
.pd-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 18px; margin-top: 20px; }
.pd-link {
    display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0; border: 0; background: none; cursor: pointer;
    color: rgb(var(--mk-fg) / calc(0.75 * var(--mk-tk))); font: inherit; font-size: 12.5px; font-weight: 700; transition: color .2s ease;
}
.pd-link:hover, .pd-link.is-in-cart { color: rgb(var(--mk-fg)); }
.pd-link:disabled { opacity: .6; cursor: progress; }
.pd-link i { font-size: 12px; }
.pd-link:focus-visible { outline: 2px solid rgb(var(--mk-fg)); outline-offset: 3px; border-radius: 6px; }

/* Tablet: the two cards stack, the ticket full width under the checkout */
@media (min-width: 768px) and (max-width: 1023px) {
    .pd-ticket { flex: 1 1 100%; }
}
/* Arabic, Persian, Urdu: no negative tracking (it breaks letter joining). */
html[dir="rtl"] .pd :is(.pd-opt, .pd-link, .pd-live, .pd-sum__total, .pd-mono:not(.ui-ltr)) { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
    .pd :is(.pd-opt, .pd-link, .pd-back i) { transition: none; }
}