/* =============================================================================
   PRODUCT DETAILS — Phase 1f
   Partner stylesheet for Views/Product/Index.cshtml.
   Reference: Docs/Redesign/Approved/product-detail/Daric Product Page (standalone).html

   NAMESPACE. Every class is `pd-`. That is load-bearing, not stylistic: the legacy
   selectors this page used to carry (.product-ctn, .product-info, .split-galery,
   .split-info, .update-price-info, .price-orginal, .price-buyed, .descriptions-product,
   .trade-mode-toggle, .panel-mobile-container) simply DO NOT MATCH the new markup, so
   there is no specificity war with shop.css / ProductDetails.css and nothing to
   neutralise. ProductDetails.css is DELETED, not overridden.

   The only legacy hooks kept verbatim are `.status-page` + `data-page`
   (shop.js:getCurrentPageName, which is what removes .menu-bottom-site here) and
   `.swiper-container` / `.swiper-wrapper` / `.swiper-slide` (a hard Swiper contract).

   TOKENS. Colours, radii and shadows come from --brand-* declared in
   tailwind/input.css (STEP 13 block, plus Steps 0/4/8/10/11 for everything the
   reference shares with the card and the footer). No literal hex belongs in this
   file; the handful of exceptions are called out where they appear.

   RTL. Logical properties throughout (inline-start/-end, margin-inline, padding-inline)
   EXCEPT the four corner brackets and the two spread knobs, which are symmetric
   ornaments and must not mirror — the same exception _ProductCard.cshtml documents.

   NO BOOTSTRAP UTILITIES anywhere in the markup this styles. Bootstrap 4's utilities
   are !important and would be unbeatable from here.

   SECTIONS
     0   Page shell, section rhythm, shared primitives (headings, rules, chips, CTAs)
     1   Breadcrumb
     2   Main block grid
     3   Gallery: frame, well, media, thumbs, no-image, lightbox
     4   Info head: status, title, meta
     5   Price block, spread, countdown, and the two notices (out of stock / not sellable)
     6   Variants
     7   Quantity, the action bar, the rail, and the «خبرم کن» panel
     8   At a glance, trust chips
     9   Installments
     10  Price chart
     11  Description / specs / reviews — tabs above 992px, accordions below
     12  Reviews empty state
     13  Related products + its empty state
     14  Mobile (<= 991.98px)
   ============================================================================= */


/* =============================================================================
   SECTION 0 — PAGE SHELL AND SHARED PRIMITIVES
   The page moves from .container-manual (1366px) to the frame's own 1440, which is
   what docs/frontend-tailwind.md asks for as each legacy page is redesigned: the
   frame, the header card, the home page and the footer panel all agree on --frame-w,
   and a 1366 page sits 37px per side inside it for no reason.
   ============================================================================= */
.pd-page {
    width: 100%;
    max-width: var(--frame-w, 1440px);
    margin-inline: auto;
    padding-inline: var(--pd-gutter);
    /* No top padding: the breadcrumb bar is the first thing in the page and must meet
       the header with no canvas showing between them, as the reference draws it. The
       bar supplies its own height and the gap beneath itself. */
    padding-block: 0 64px;
    box-sizing: border-box;
    color: var(--brand-text);
}

/* THE EMPTINESS CONTRACT. One flex column with one gap — no section carries a
   margin of its own. A section that is not rendered therefore contributes no box
   and no gap, which is the whole of design state «چ». Adding a margin anywhere
   below breaks it silently: the gap survives the section. */
.pd-sections {
    display: flex;
    flex-direction: column;
    gap: 56px;
}

.pd-icon {
    width: 1em;
    height: 1em;
    flex: none;
}

/* Section headings. The 3px gold mark is a gradient rather than a solid bar so it
   fades out at the bottom, matching every other heading in the redesign. */
.pd-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 21px;
    font-weight: 800;
    color: var(--brand-text);
}

.pd-heading__mark {
    width: 3px;
    height: 24px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--brand-primary), transparent);
}

.pd-heading__note {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-heading--sm {
    font-size: 13px;
    font-weight: 700;
    gap: 9px;
}

.pd-heading--sm .pd-heading__mark {
    height: 15px;
}

.pd-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

/* The gilded hairline, in four widths. Every one is the same gradient the product
   card draws across the top of its frame — one ornament, four call sites. */
.pd-rule {
    display: block;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary) 22%,
        var(--brand-primary-crest) 50%,
        var(--brand-primary) 78%,
        transparent);
}

.pd-rule--wide {
    height: 1px;
    margin-block: 22px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary-rule-strong) 22%,
        var(--brand-primary-rule-strong) 78%,
        transparent);
}

.pd-rule--hair {
    height: 1px;
    margin-block: 18px 16px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary-rule-strong) 18%,
        var(--brand-primary-rule-strong) 82%,
        transparent);
}

.pd-rule--inset {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 24px;
}

.pd-rule--tile {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 16px;
    height: 2px;
}

/* Status chips. Two variants only — in stock and out of stock. */
.pd-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 999px;
    padding: 5px 12px 6px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.pd-chip__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.pd-chip--in {
    background: color-mix(in oklab, var(--brand-success) 10%, #FFFFFF);
    border: 1px solid color-mix(in oklab, var(--brand-success) 26%, #FFFFFF);
    color: color-mix(in oklab, var(--brand-success) 88%, #000000);
}

.pd-chip--in .pd-chip__dot {
    background: var(--brand-success);
    box-shadow: 0 0 0 3px var(--brand-success-halo);
}

.pd-chip--oos {
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
}

.pd-chip--oos .pd-chip__dot {
    background: var(--brand-text-soft);
}

/* The CTA family. One gold button in three weights plus a ghost and an outline.
   Preflight is off, so `border: 0` and `font: inherit` have to be stated. */
.pd-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 58px;
    padding-inline: 22px;
    border-radius: 15px;
    border: 1px solid var(--brand-primary-frame-strong);
    background: linear-gradient(145deg,
        var(--brand-primary-sun),
        var(--brand-primary) 46%,
        var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--brand-shadow-cta-lg);
    transition: transform .18s ease, filter .18s ease, background .22s ease, color .22s ease;
}

.pd-cta .pd-icon {
    width: 20px;
    height: 20px;
}

.pd-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
    color: var(--brand-primary-ink);
}

.pd-cta[disabled] {
    background: var(--brand-surface-recess);
    border-color: var(--brand-border);
    color: var(--brand-text-soft);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Sell mode inverts the CTA: outlined, filling with gold on hover. The design draws
   selling as the quieter of the two actions, which is also true of the business. */
.pd-cta--sell {
    background: var(--brand-surface-2);
    border: 1.5px solid var(--brand-primary);
    color: var(--brand-primary-deep);
    box-shadow: var(--brand-shadow-cta-outline);
}

.pd-cta--sell:hover {
    background: linear-gradient(145deg,
        var(--brand-primary-sun),
        var(--brand-primary) 46%,
        var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
}

.pd-cta--notify {
    background: var(--brand-surface-2);
    border: 1.5px solid var(--brand-primary);
    color: var(--brand-primary-deep);
    box-shadow: var(--brand-shadow-inset-hi);
}

.pd-cta--notify:hover {
    background: linear-gradient(145deg,
        var(--brand-primary-sun),
        var(--brand-primary) 46%,
        var(--brand-primary-sheen));
    color: var(--brand-primary-ink);
}

/* The confirmed «خبرم کن» state. Green, because it is a completed action rather than
   an available one — and the bell must stop inviting a second click. */
.pd-cta--notify.is-done {
    background: var(--brand-success-wash);
    border: 1px solid color-mix(in oklab, var(--brand-success) 22%, #FFFFFF);
    color: color-mix(in oklab, var(--brand-success) 85%, #000000);
    box-shadow: none;
}

.pd-cta--md {
    height: 48px;
    font-size: 13.5px;
    border-radius: var(--radius-brand-cta);
    box-shadow: var(--brand-shadow-cta-md);
}

.pd-cta--sm {
    height: 46px;
    padding-inline: 20px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: var(--radius-brand-cta);
    box-shadow: var(--brand-shadow-inset-hi);
}

.pd-cta--ghost {
    background: var(--brand-surface-2);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    box-shadow: none;
}

.pd-cta--ghost:hover {
    background: var(--brand-primary-band);
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    transform: none;
}

/* The CTA carries both a long and a short label and CSS picks one, so the button can
   be «افزودن به سبد خرید» in a 1fr desktop row and «افزودن به سبد» in a 390px bar
   without the view branching on width. */
.pd-cta__short {
    display: none;
}


/* =============================================================================
   SECTION 1 — BREADCRUMB
   ============================================================================= */
/* THE BREADCRUMB BAR. In the reference the crumbs are not loose text on the canvas
   — they sit in their own surface, a full-width bar directly under the header with a
   hairline beneath it (template line 312: height 46, padding 0 40, background
   var(--card), border-bottom 1px var(--line)).
   The bar is a SIBLING of the padded body wrapper there, so it spans the whole panel.
   Here .pd-crumbs lives inside .pd-page, which owns the gutter — so the bar breaks out
   of that gutter with a negative inline margin and re-applies it as its own padding.
   That keeps the crumb text aligned with the content below while the surface runs
   edge to edge. .pd-page's top padding is 0 for the same reason: the bar must meet
   the header, exactly as the reference shows. */
.pd-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    min-height: 46px;
    margin-inline: calc(-1 * var(--pd-gutter));
    padding-inline: var(--pd-gutter);
    /* 34px is the reference body wrapper's own padding-top under the bar. */
    margin-bottom: 34px;
    background: var(--brand-card-face);
    border-bottom: 1px solid var(--brand-border);
}

.pd-crumbs a,
.pd-crumbs__current {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-soft);
    text-decoration: none;
    transition: color .18s ease;
}

.pd-crumbs a:hover {
    color: var(--brand-primary-deep);
}

.pd-crumbs__current {
    font-weight: 600;
    color: var(--brand-text-muted);
}

.pd-crumbs .pd-icon {
    width: 12px;
    height: 12px;
    color: var(--brand-crumb-chevron);
}


/* =============================================================================
   SECTION 2 — MAIN BLOCK
   A fixed gallery column beside a fluid info column. The two children stack in the
   same DOM order below the breakpoint, which is why there is no second markup tree.
   ============================================================================= */
.pd-main {
    display: grid;
    grid-template-columns: var(--pd-gallery-w) minmax(0, 1fr);
    gap: 44px;
    align-items: start;
}

.pd-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}


/* =============================================================================
   SECTION 3 — GALLERY
   The frame, the well and the four corner brackets are the product card's ornament
   at page scale. The brackets are the ONE place physical corners are correct: they
   are a symmetric set and mirroring them in RTL would rotate the whole frame.
   ============================================================================= */
.pd-gallery {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pd-gallery__frame {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    border-radius: var(--radius-brand-card-lg);
    padding: 10px;
    box-sizing: border-box;
    box-shadow: var(--brand-shadow-gallery);
}

.pd-gallery__frame > .pd-rule {
    margin: 0 22px 10px;
}

.pd-well {
    position: relative;
    aspect-ratio: 1 / 1;
    border-radius: 13px;
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-card-well-from), var(--brand-card-well-to));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.pd-well__dots,
.pd-well__halo {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.pd-well__dots {
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 18px 18px;
    opacity: .5;
}

.pd-well__halo {
    background: radial-gradient(58% 52% at 50% 42%,
        color-mix(in oklab, var(--brand-primary) 16%, #FFFFFF),
        rgba(255, 255, 255, 0) 74%);
}

.pd-well__bracket {
    position: absolute;
    width: 22px;
    height: 22px;
    pointer-events: none;
}

/* PHYSICAL sides on purpose — see the section note. */
.pd-well__bracket--tr {
    top: 16px;
    right: 16px;
    border-top: 1px solid var(--brand-primary-bracket);
    border-right: 1px solid var(--brand-primary-bracket);
    border-top-right-radius: 6px;
}

.pd-well__bracket--tl {
    top: 16px;
    left: 16px;
    border-top: 1px solid var(--brand-primary-bracket);
    border-left: 1px solid var(--brand-primary-bracket);
    border-top-left-radius: 6px;
}

.pd-well__bracket--br {
    bottom: 16px;
    right: 16px;
    border-bottom: 1px solid var(--brand-primary-bracket);
    border-right: 1px solid var(--brand-primary-bracket);
    border-bottom-right-radius: 6px;
}

.pd-well__bracket--bl {
    bottom: 16px;
    left: 16px;
    border-bottom: 1px solid var(--brand-primary-bracket);
    border-left: 1px solid var(--brand-primary-bracket);
    border-bottom-left-radius: 6px;
}

/* The cast shadow the product appears to sit on. Purely decorative, and sized as a
   fraction of the well so it scales with the column. */
.pd-well__ground {
    position: absolute;
    bottom: 16%;
    width: 38%;
    height: 22px;
    border-radius: 50%;
    background: var(--brand-card-ground);
    filter: blur(16px);
    pointer-events: none;
}

/* The hover sheen sweeps across the image. It wraps the <img> rather than sitting
   over it so the two transform together. */
.pd-well__sheen {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .62) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    transition: background-position 0s;
}

.pd-well:hover .pd-well__sheen {
    background-position: -60% 0;
    transition: background-position 1.2s cubic-bezier(.35, 0, .2, 1);
}

.pd-media {
    position: relative;
    width: 78%;
    height: 78%;
    object-fit: contain;
    transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}

.pd-well:hover .pd-media {
    transform: scale(1.09);
}

.pd-zoom {
    position: absolute;
    top: 16px;
    inset-inline-start: 52px;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-brand-icon);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-primary-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .18s ease, border-color .18s ease;
}

.pd-zoom .pd-icon {
    width: 17px;
    height: 17px;
}

.pd-zoom:hover {
    transform: translateY(-1px);
    border-color: var(--brand-primary);
}

.pd-well__hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-text-muted);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.pd-well__hint .pd-icon {
    width: 12px;
    height: 12px;
    color: var(--brand-primary-deep);
}

/* STATE ث — no image at all. The same frame, filled with a hatch and a plain
   sentence. Not an empty box and not a broken-image glyph. */
.pd-well--empty {
    background: repeating-linear-gradient(135deg,
        var(--brand-hatch-hero-a),
        var(--brand-hatch-hero-a) 9px,
        var(--brand-hatch-hero-b) 9px,
        var(--brand-hatch-hero-b) 18px);
    flex-direction: column;
    gap: 12px;
    cursor: default;
}

.pd-noimage__tile {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: var(--radius-brand-card);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.pd-noimage__tile .pd-icon {
    width: 24px;
    height: 24px;
}

.pd-noimage__mono {
    position: relative;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    color: var(--brand-text-muted);
    background: rgba(255, 255, 255, .9);
    padding: 5px 9px;
    border-radius: var(--radius-brand-xs);
    unicode-bidi: isolate;
}

.pd-noimage__text {
    position: relative;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

/* Thumbnails. Rendered ONLY when there is more than one image — state ت drops the
   strip entirely so a single-image product reads as intentional rather than as a
   gallery with one slot filled. */
.pd-thumbs {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-thumb {
    position: relative;
    flex: none;
    width: 84px;
    height: 84px;
    border-radius: 13px;
    overflow: hidden;
    cursor: pointer;
    background: linear-gradient(160deg, var(--brand-card-well-from), var(--brand-card-well-to));
    border: 1px solid var(--brand-primary-rule);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .18s ease;
}

.pd-thumb img {
    width: 74%;
    height: 74%;
    object-fit: contain;
}

/* Reference hover is the full gold (template line 359, style-hover
   "border-color:var(--gold)"), not the 42% edge mix. */
.pd-thumb:hover {
    border-color: var(--brand-primary);
}

.pd-thumb.is-active {
    border: 2px solid var(--brand-primary);
    box-shadow: var(--brand-shadow-thumb-active);
}

.pd-thumbs__note {
    flex: 1;
    min-width: 0;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--brand-text-soft);
    text-align: end;
    padding-inline-end: 6px;
}

/* The lightbox. ~60 lines of CSS and ~30 of JS replacing ElevateZoom + image_zoom,
   two libraries that were both loaded for one image and neither of which survived a
   resize. Fixed to the viewport: .page-frame uses `overflow: clip`, which masks its
   corners without clipping fixed descendants (verified when the frame shipped). */
.pd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5vmin;
    background: var(--brand-scrim-strong);
    cursor: zoom-out;
}

.pd-lightbox[hidden] {
    display: none;
}

.pd-lightbox__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--radius-brand-card-lg);
    background: var(--brand-card-face);
}

.pd-lightbox__close {
    position: absolute;
    top: 18px;
    inset-inline-end: 18px;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-brand-md);
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--brand-primary-rule);
    color: var(--brand-text);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.pd-lightbox__close .pd-icon {
    width: 20px;
    height: 20px;
}


/* =============================================================================
   SECTION 4 — INFO HEAD
   ============================================================================= */
.pd-status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pd-status__sep {
    width: 1px;
    height: 16px;
    background: var(--brand-border);
}

.pd-sku {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 11px;
    color: var(--brand-text-soft);
    unicode-bidi: isolate;
}

.pd-title {
    margin: 16px 0 0;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: -.015em;
    color: var(--brand-text);
}

/* The latin product name. dir="ltr" + isolate already order the CHARACTERS correctly,
   but they do not move the text: the storefront sets an explicit text-align:right
   globally for RTL, which is inherited here and is NOT overridden by direction — so
   the line rendered flush right, opposite the reference (template line 409, where the
   span's own dir:ltr makes the initial `start` resolve to left because that document
   sets no explicit alignment). Restating it is the whole fix.
   Only this element needs it. The page's other dir="ltr" runs — .pd-sku,
   .pd-countdown__value, .pd-noimage__mono and the chart's min/max pair — are all
   content-sized flex items, where text-align has nothing to act on. */
.pd-latin {
    display: block;
    margin-top: 7px;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 13px;
    color: var(--brand-text-soft);
    unicode-bidi: isolate;
    text-align: left;
}

.pd-meta {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-meta__label {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-meta__pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    padding-inline: 12px;
    border-radius: 15px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-text);
    text-decoration: none;
    transition: border-color .2s ease, color .2s ease;
}

.pd-meta__pill:hover {
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
}

.pd-meta__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--brand-primary);
}

.pd-meta__sep {
    width: 1px;
    height: 16px;
    background: var(--brand-border);
}


/* =============================================================================
   SECTION 5 — PRICE
   Both directions are always shown and always labelled. The active one — the one the
   global mode selects, and the one the button acts on — is 40px; the other is 19px
   beside it. That size relationship is the whole mechanism by which the page can show
   a spread without ever being ambiguous about which number is live.
   ============================================================================= */
.pd-price {
    position: relative;
    margin-top: 0;
    border: 1px solid var(--brand-primary-edge);
    border-radius: var(--radius-brand-price);
    background: linear-gradient(150deg, var(--brand-surface-cream), var(--brand-primary-band));
    padding: 22px 24px 20px;
    box-shadow: var(--brand-shadow-price);
    overflow: hidden;
}

.pd-price__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

.pd-price__active {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
}

.pd-price__label-row {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
}

.pd-price__label {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

.pd-price__badge {
    background: var(--brand-primary);
    color: var(--brand-primary-ink);
    border-radius: 999px;
    padding: 3px 10px 4px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .03em;
}

/* The discount badge is --brand-discount, NOT --brand-danger: near-identical hues
   that mean different things. Danger is the header's destructive affordance. */
.pd-price__off {
    background: var(--brand-discount);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 3px 10px 4px;
    font-size: 9.5px;
    font-weight: 800;
    box-shadow: 0 9px 16px -10px var(--brand-discount-halo);
}

.pd-price__value {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.pd-price__value b {
    font-size: 40px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
}

.pd-price__value s {
    font-size: 15px;
    font-weight: 600;
    color: var(--brand-text-soft);
    font-variant-numeric: tabular-nums;
}

.pd-price__value i {
    font-style: normal;
    font-size: 14px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.pd-price__secondary {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    padding-bottom: 3px;
}

.pd-price__secondary-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-soft);
    letter-spacing: .04em;
}

.pd-price__secondary-value {
    font-size: 19px;
    font-weight: 700;
    color: var(--brand-text-muted);
    font-variant-numeric: tabular-nums;
}

.pd-price__note {
    display: block;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--brand-text-muted);
}

/* The spread bar. Both knobs are PHYSICAL start/end, deliberately: the bar is a
   number line from the lower price to the higher one, and mirroring it would put the
   larger number on the small end. */
.pd-spread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.pd-spread__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

.pd-spread__amount {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--brand-primary-deep);
}

.pd-spread__bar {
    position: relative;
    height: 8px;
    border-radius: 4px;
    background: var(--brand-surface-recess);
    border: 1px solid var(--brand-border);
}

.pd-spread__fill {
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: 9%;
    right: 9%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--brand-primary), var(--brand-primary-pale));
}

.pd-spread__knob {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-sizing: border-box;
    background: #FFFFFF;
    border: 2px solid var(--brand-primary-deep);
}

.pd-spread__knob--start {
    right: 9%;
    margin: -6px -6px 0 0;
}

.pd-spread__knob--end {
    left: 9%;
    margin: -6px 0 0 -6px;
}

/* The filled knob marks the side the page is currently acting on, so the bar says
   which number the button will use without a second label. */
.pd-spread__knob.is-active {
    background: var(--brand-primary-deep);
    border-color: #FFFFFF;
    box-shadow: 0 0 0 1px var(--brand-primary-deep);
}

.pd-spread__note {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.7;
    color: var(--brand-text-muted);
}

/* STATE پ — the countdown strip. Full-bleed inside the price block: negative inline
   margins equal to the block's padding, which is why the block sets `overflow: hidden`. */
.pd-countdown {
    margin: 18px -24px -20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 12px 0 13px;
    background: linear-gradient(90deg,
        var(--brand-countdown-strip-from),
        var(--brand-countdown-strip-to));
    color: var(--brand-caption-on-dark-soft);
    border-top: 1px solid var(--brand-countdown-strip-edge);
}

.pd-countdown .pd-icon {
    width: 14px;
    height: 14px;
}

.pd-countdown__label {
    font-size: 12px;
    font-weight: 600;
    opacity: .85;
}

.pd-countdown__value {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    letter-spacing: .06em;
    color: #FFFFFF;
}

/* The two notices — state الف (out of stock) and state ب (we do not buy this). Same
   shell, different edge, so the page's rhythm does not change when the price block
   is replaced by one of them. */
.pd-notice {
    border-radius: var(--radius-brand-card-lg);
    background: var(--brand-card-face);
    padding: 22px 24px;
    box-shadow: var(--brand-shadow-card-sm);
}

.pd-notice--oos {
    border: 1px solid var(--brand-border);
}

.pd-notice--nosell {
    border: 1px solid var(--brand-primary-veil);
}

.pd-notice__head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.pd-notice__subject {
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-notice__body {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: var(--radius-brand-lg);
    background: var(--brand-surface-recess);
    border: 1px dashed var(--brand-border);
}

.pd-notice__body .pd-icon {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: var(--brand-text-soft);
}

.pd-notice__title {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: var(--brand-text-muted);
    margin-bottom: 6px;
}

.pd-notice__text {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.85;
    color: var(--brand-text-soft);
}


/* =============================================================================
   SECTION 6 — VARIANTS
   STATE ج: with one option the picker becomes an information ROW with a confirmation
   tick — it says what you are buying and leaves nothing to choose. That is the
   dominant real case (0 or 1 variant per product today), so it has to look finished,
   not like a disabled control.
   ============================================================================= */
.pd-variants {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.pd-variants__head {
    display: flex;
    align-items: baseline;
    gap: 9px;
    flex-wrap: wrap;
}

.pd-variants__title {
    font-size: 13px;
    font-weight: 700;
}

.pd-variants__note {
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-variants__list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.pd-variant {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: 13px;
    cursor: pointer;
    background: var(--brand-card-face);
    border: 1.5px solid var(--brand-border);
    color: var(--brand-text);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-align: start;
    transition: border-color .2s ease, background .2s ease;
}

.pd-variant:hover {
    border-color: var(--brand-primary-edge);
}

.pd-variant.is-active {
    background: var(--brand-primary-band);
    border-color: var(--brand-primary);
    color: var(--brand-primary-deep);
    box-shadow: var(--brand-shadow-inset-hi);
}

.pd-variant__tick {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--brand-card-face);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-variant__tick .pd-icon {
    width: 12px;
    height: 12px;
}

/* A single option is not interactive, so it must not offer a pointer or a hover. */
.pd-variants--single .pd-variant {
    cursor: default;
    flex: 1 1 100%;
}

.pd-variants--single .pd-variant:hover {
    border-color: var(--brand-primary);
}


/* =============================================================================
   SECTION 7 — QUANTITY, ACTION BAR, RAIL, «خبرم کن»
   ONE form for the whole page (#pd-buy-form). The quantity field and the CTA sit
   outside it and are bound by the HTML `form` attribute — which is precisely what
   lets the button be an inline element at desktop and a fixed bottom bar on mobile
   without a second form or a duplicated set of hidden inputs.
   ============================================================================= */
.pd-buy-form {
    display: contents;
}

/* ONE container, two arrangements. Desktop wraps the rail onto its own line with
   flex-basis:100%; mobile lifts the action bar out of flow entirely (position:fixed),
   which leaves the quantity stepper and the rail sharing row one — exactly what the
   two reference artboards show, with no node moving between them. */
.pd-buyrow {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 12px;
}

.pd-qty {
    flex: none;
    display: flex;
    align-items: center;
    gap: 2px;
    height: 58px;
    padding-inline: 6px;
    border-radius: 15px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    box-shadow: var(--brand-shadow-inset);
}

.pd-qty__btn {
    width: 40px;
    height: 44px;
    border: 0;
    background: transparent;
    color: var(--brand-text-muted);
    cursor: pointer;
    border-radius: var(--radius-brand-icon);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .18s ease, color .18s ease;
}

.pd-qty__btn .pd-icon {
    width: 17px;
    height: 17px;
}

.pd-qty__btn:hover {
    background: var(--brand-surface-recess);
    color: var(--brand-text);
}

.pd-qty__btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* A real <input type="number"> rather than a <span>, so the value posts with the
   form and a keyboard user can type it. The spinners are removed because the two
   buttons already do that job and two controls for one value is a bug factory. */
.pd-qty__value {
    width: 46px;
    border: 0;
    background: transparent;
    text-align: center;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-text);
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
    appearance: textfield;
}

.pd-qty__value::-webkit-outer-spin-button,
.pd-qty__value::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.pd-qty__value:focus {
    outline: 0;
}

.pd-actionbar {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    gap: 11px;
}

.pd-actionbar .pd-cta {
    flex: 1;
}

/* The favourite button and the price echo belong to the MOBILE bar only; at desktop
   the favourite lives in the rail below and the price is the 40px figure above, so
   repeating either here would be noise. */
.pd-actionbar__fav,
.pd-actionbar__price {
    display: none;
}

.pd-rail {
    /* Its own line at desktop — the reference puts the rail beneath the action, not
       beside it. */
    flex: 1 0 100%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.pd-rail__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding-inline: 14px;
    border-radius: var(--radius-brand-pill);
    background: transparent;
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease;
}

.pd-rail__btn .pd-icon {
    width: 16px;
    height: 16px;
}

.pd-rail__btn:hover {
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
}

.pd-fav.is-active {
    border-color: var(--brand-primary);
    color: var(--brand-discount);
}

.pd-fav.is-active .pd-icon {
    fill: currentColor;
}

/* The «خبرم کن» panel: the hint before, the confirmation after. Both are rendered
   and one is hidden, so the swap after a successful POST needs no markup building —
   which also means the confirmed state is correct on a reload with no JS at all. */
.pd-notify {
    flex: 1 0 100%;
    margin-top: 12px;
}

.pd-notify__hint {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--brand-text-muted);
    text-align: center;
}

.pd-notify__done {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 17px 18px;
    border-radius: var(--radius-brand-card-sm);
    background: color-mix(in oklab, var(--brand-success) 7%, #FFFFFF);
    border: 1px solid color-mix(in oklab, var(--brand-success) 22%, #FFFFFF);
}

.pd-notify__hint.is-hidden,
.pd-notify__done.is-hidden {
    display: none;
}

.pd-notify__tick {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: var(--radius-brand-icon);
    background: color-mix(in oklab, var(--brand-success) 16%, #FFFFFF);
    color: color-mix(in oklab, var(--brand-success) 88%, #000000);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pd-notify__tick .pd-icon {
    width: 17px;
    height: 17px;
}

.pd-notify__title {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: color-mix(in oklab, var(--brand-success) 85%, #000000);
    margin-bottom: 5px;
}

.pd-notify__text {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.8;
    color: var(--brand-text-muted);
}

.pd-notify__cancel {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    color: var(--brand-primary-deep);
    cursor: pointer;
    text-decoration: underline;
}


/* =============================================================================
   SECTION 8 — AT A GLANCE + TRUST CHIPS
   ============================================================================= */
.pd-glance {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pd-glance__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pd-glance__all {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--brand-primary-deep);
    text-decoration: none;
}

.pd-glance__all .pd-icon {
    width: 13px;
    height: 13px;
}

.pd-glance__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.pd-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-brand-card-sm);
    background: linear-gradient(158deg, var(--brand-surface-cream), var(--brand-primary-band));
    border: 1px solid var(--brand-primary-rule);
    padding: 15px 15px 14px;
    box-shadow: var(--brand-shadow-spec-tile);
    display: flex;
    flex-direction: column;
    gap: 11px;
    transition: border-color .25s ease, transform .25s cubic-bezier(.4, 0, .2, 1);
}

.pd-tile:hover {
    border-color: var(--brand-primary);
    transform: translateY(-2px);
}

/* The corner glow. Physical bottom-left in the reference; kept physical because it
   is an off-centre light source, not a directional affordance. */
.pd-tile__glow {
    position: absolute;
    bottom: -26px;
    left: -22px;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle,
        color-mix(in oklab, var(--brand-primary) 22%, #FFFFFF),
        rgba(255, 255, 255, 0) 70%);
    pointer-events: none;
}

.pd-tile__icon {
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-brand-icon);
    background: rgba(255, 255, 255, .9);
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.pd-tile__icon .pd-icon {
    width: 17px;
    height: 17px;
}

.pd-tile__label {
    position: relative;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
    letter-spacing: .05em;
}

.pd-tile__value {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pd-trust {
    margin-top: 20px;
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

.pd-trust__chip {
    flex: 1 1 140px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 12px;
    border-radius: var(--radius-brand-md);
    background: var(--brand-primary-band);
    border: 1px solid var(--brand-primary-rule);
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-primary-deep);
}

.pd-trust__chip .pd-icon {
    width: 16px;
    height: 16px;
}


/* =============================================================================
   SECTION 9 — INSTALLMENTS
   Display only. Product.IsInstallmentEligible drives the badge and nothing else; no
   calculation, contract or payment logic is touched by this block.
   ============================================================================= */
.pd-installments {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid var(--brand-primary-rule);
    background: linear-gradient(150deg,
        var(--brand-surface-cream),
        color-mix(in oklab, var(--brand-primary-band) 45%, var(--brand-surface-cream)));
    box-shadow: var(--brand-shadow-installments);
}

.pd-installments > .pd-rule--inset {
    inset-inline: 60px;
}

.pd-installments__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 44px;
    align-items: center;
    padding: 30px 34px;
}

.pd-installments__copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pd-installments__badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255, 255, 255, .85);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    border-radius: 999px;
    padding: 6px 13px;
    font-size: 11px;
    font-weight: 700;
}

.pd-installments__badge .pd-icon {
    width: 14px;
    height: 14px;
}

.pd-installments__headline {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.6;
    max-width: 560px;
}

.pd-installments__benefits {
    display: flex;
    gap: 26px;
    flex-wrap: wrap;
}

.pd-installments__benefits span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.pd-installments__benefits .pd-icon {
    width: 15px;
    height: 15px;
    color: var(--brand-primary-deep);
}

.pd-installments__card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border-radius: var(--radius-brand-price);
    background: #FFFFFF;
    border: 1px solid var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-installments-card);
}

.pd-installments__example {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pd-installments__example-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-muted);
}

.pd-installments__example-value {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
}

.pd-installments__example-value span {
    font-size: 12px;
    font-weight: 500;
    color: var(--brand-text-muted);
}

.pd-installments__example-value b {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--brand-primary-deep);
}

.pd-installments__card .pd-cta {
    width: 100%;
}


/* =============================================================================
   SECTION 10 — PRICE CHART
   The plot is a server-rendered two-path SVG (see _ProductPriceChart.cshtml for why
   there is no charting library on this page any more). Everything in here is
   replaced wholesale when the range changes, so nothing may depend on a class the
   partial does not itself emit.
   ============================================================================= */
.pd-ranges {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px;
    border-radius: var(--radius-brand-lg);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
}

.pd-range {
    display: inline-flex;
    align-items: center;
    height: 32px;
    padding-inline: 15px;
    border-radius: var(--radius-brand);
    background: transparent;
    border: 1px solid transparent;
    color: var(--brand-text-muted);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s ease;
    white-space: nowrap;
}

.pd-range:hover {
    color: var(--brand-text);
}

.pd-range.is-active {
    background: var(--brand-primary-band);
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    font-weight: 700;
    cursor: default;
}

.pd-chart__card {
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    border-radius: var(--radius-brand-card-lg);
    padding: 24px 26px 18px;
    box-shadow: var(--brand-shadow-chart);
}

.pd-chart__card.is-loading {
    opacity: .55;
    transition: opacity .15s ease;
}

.pd-chart__stats {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.pd-chart__figures {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
}

.pd-chart__stat {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.pd-chart__stat-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--brand-text-soft);
}

.pd-chart__stat-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.pd-chart__stat-value b {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.pd-chart__stat-value i {
    font-style: normal;
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-chart__change {
    font-size: 15px;
    font-weight: 700;
    color: var(--brand-success);
}

.pd-chart__change.is-down {
    color: var(--brand-discount);
}

.pd-chart__range {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
    font-variant-numeric: tabular-nums;
}

.pd-chart__sep {
    width: 1px;
    height: 34px;
    background: var(--brand-border);
}

.pd-chart__caveat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-chart__caveat .pd-icon {
    width: 13px;
    height: 13px;
}

.pd-chart__plot {
    position: relative;
}

.pd-chart__svg {
    display: block;
    overflow: visible;
}

.pd-chart__grid {
    stroke: var(--brand-border);
    stroke-width: 1;
}

.pd-chart__line {
    stroke-width: 2.4;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.pd-chart__dot {
    fill: var(--brand-card-face);
    stroke: var(--brand-primary-deep);
    stroke-width: 2.4;
}

/* The y-axis labels float over the plot with a solid background so the grid lines
   do not run through the digits. */
.pd-chart__axis-y {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 212px;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.pd-chart__axis-y span {
    align-self: flex-end;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    color: var(--brand-text-soft);
    background: var(--brand-card-face);
    padding-inline: 5px;
}

.pd-chart__axis-y span:first-child {
    transform: translateY(-7px);
}

.pd-chart__axis-y span:last-child {
    transform: translateY(5px);
}

/* THE AXIS RUNS LTR, AND MUST. An <svg> coordinate space is not mirrored by the
   document's direction: the plot draws index 0 at x=0 and the newest point at x=1300,
   so time runs LEFT to RIGHT on screen even here. Laid out RTL, this row would put its
   first tick («۹۰ روز») on the right and «امروز» on the left — labelling the newest
   data as the oldest. The approved reference has the same mismatch in its mockup; it is
   corrected rather than copied. */
.pd-chart__axis-x {
    display: flex;
    direction: ltr;
    justify-content: space-between;
    margin-top: 8px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}


/* =============================================================================
   SECTION 11 — DESCRIPTION / SPECS / REVIEWS
   ONE markup tree, two presentations, and NO width branch in JavaScript.

   At >= 992px .pd-panels is a CSS GRID: the three heads are placed in row 1 (one
   column each) and every body in row 2, spanning all columns. That renders as a tab
   strip with a shared panel beneath it. Below 992px it is a plain flex column and
   the same heads render in DOM order, each directly above its own body — an
   accordion. The state machine is identical at both widths (one open at a time);
   only the placement changes.

   This is why the heads and bodies alternate in the markup: head, body, head, body.
   Grid placement can reorder them; a tab strip built as a separate <ul> could not
   become an accordion without moving nodes.
   ============================================================================= */
.pd-panels {
    display: grid;
    grid-template-columns: repeat(3, auto) minmax(0, 1fr);
    align-items: end;
    row-gap: 0;
}

.pd-panel__head {
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding-inline: 20px;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    transition: color .18s ease;
}

.pd-panel__head:hover {
    color: var(--brand-text);
}

.pd-panel__head.is-open {
    color: var(--brand-primary-deep);
    font-weight: 800;
}

/* The active tab's underline. Drawn on the head rather than as a moving indicator so
   there is no measurement and nothing to re-run on resize. */
.pd-panel__head.is-open::after {
    content: "";
    position: absolute;
    bottom: -1px;
    inset-inline: 14px;
    height: 2.5px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-primary-deep), var(--brand-primary));
}

.pd-panel__meta {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

/* The chevron is an ACCORDION affordance. At tab widths there is nothing to expand
   in place, so it is not drawn. */
.pd-panel__chev {
    display: none;
}

/* The fourth column is empty and exists only to absorb the remaining width, so the
   heads sit at their natural size and the border runs the full width. */
.pd-panels::after {
    content: "";
    grid-row: 1;
    border-bottom: 1px solid var(--brand-border);
    height: 48px;
}

.pd-panel__body {
    grid-row: 2;
    grid-column: 1 / -1;
    padding-top: 28px;
}

.pd-panel__body[hidden] {
    display: none;
}

.pd-desc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 44px;
    align-items: start;
}

.pd-desc__main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: flex-start;
}

.pd-desc__text {
    font-size: 14px;
    font-weight: 500;
    line-height: 2.15;
    color: var(--brand-text-muted);
}

.pd-desc__text > :first-child {
    margin-top: 0;
}

/* The clamp is CSS, so the text is already the right length before any script runs.
   product-detail.js only MEASURES it to decide whether the button is honest — the
   same rule footer.js follows for the shop description. */
.pd-desc__text.is-clamped {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pd-desc__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 38px;
    padding-inline: 16px;
    border-radius: var(--radius-brand-pill);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-edge);
    color: var(--brand-primary-deep);
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s ease;
}

.pd-desc__more:hover {
    background: var(--brand-primary-band);
}

.pd-desc__more .pd-icon {
    width: 14px;
    height: 14px;
    transition: transform .2s ease;
}

.pd-desc__more.is-open .pd-icon {
    transform: rotate(180deg);
}

/* Preflight is off, so the UA's [hidden] rule is the only one in play and ANY author
   display rule beats it. .pd-desc__more is display:inline-flex, so without this it
   would never hide — the same trap footer-redesign.css documents. */
.pd-desc__more[hidden] {
    display: none !important;
}

.pd-desc__empty {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--brand-text-soft);
}

.pd-tips {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding: 18px 20px;
    border-radius: var(--radius-brand-card-sm);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
}

.pd-tips__title {
    font-size: 12.5px;
    font-weight: 700;
}

.pd-tips__text {
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.95;
    color: var(--brand-text-muted);
}

.pd-tips__sep {
    height: 1px;
    background: var(--brand-border);
}

.pd-specs {
    max-width: 760px;
}

.pd-specs__table {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-brand-lg);
    overflow: hidden;
    background: var(--brand-card-face);
}

.pd-specs__row {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    border-bottom: 1px solid var(--brand-border);
}

.pd-specs__row:last-child {
    border-bottom: 0;
}

.pd-specs__key {
    padding: 14px 18px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-text-muted);
    background: var(--brand-surface-recess);
    border-inline-end: 1px solid var(--brand-border);
}

.pd-specs__val {
    padding: 14px 18px;
    font-size: 12.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.pd-specs__note {
    display: block;
    margin-top: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--brand-text-soft);
}


/* =============================================================================
   SECTION 12 — REVIEWS, EMPTY STATE (ح)
   The only reviews state that exists. There is no reviews feature anywhere in this
   solution, so there is deliberately no «ثبت اولین دیدگاه» button — see the note on
   ProductPageConst.ReviewsEmptyFootnote.
   ============================================================================= */
.pd-reviews-empty {
    position: relative;
    border-radius: var(--radius-brand-card-lg);
    border: 1px dashed var(--brand-primary-edge);
    background: linear-gradient(140deg, var(--brand-primary-band), var(--brand-surface-cream) 62%);
    padding: 38px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    overflow: hidden;
}

.pd-reviews-empty__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(color-mix(in oklab, var(--brand-primary) 22%, #FFFFFF) 1px, transparent 1.1px);
    background-size: 20px 20px;
    opacity: .5;
    pointer-events: none;
}

.pd-reviews-empty > :not(.pd-reviews-empty__dots) {
    position: relative;
}

.pd-reviews-empty__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-brand-thumb);
    background: #FFFFFF;
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
    box-shadow: var(--brand-shadow-empty-icon);
}

.pd-reviews-empty__icon .pd-icon {
    width: 26px;
    height: 26px;
}

.pd-reviews-empty__title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.6;
}

.pd-reviews-empty__text {
    font-size: 12.5px;
    font-weight: 500;
    line-height: 2;
    color: var(--brand-text-muted);
    max-width: 430px;
}

.pd-reviews-empty__stars {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--brand-star-empty);
}

.pd-reviews-empty__stars .pd-icon {
    width: 26px;
    height: 26px;
}

.pd-reviews-empty__note {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--brand-text-soft);
}


/* =============================================================================
   SECTION 13 — RELATED
   The unified _ProductCard.cshtml in the home page's rail shape. product-card.css
   SECTION 1 already handles .swiper-wrapper / .swiper-slide sizing for cards; the
   only thing owned here is the slide WIDTH, which is what makes one Swiper instance
   serve both breakpoints with no `breakpoints` block and no re-init on resize.
   ============================================================================= */
.pd-rail-swiper {
    overflow: hidden;
}

.pd-rail-swiper .swiper-slide {
    width: 272px;
}

.pd-nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pd-nav__btn {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-brand-md);
    background: var(--brand-card-face);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s ease, color .2s ease;
}

.pd-nav__btn .pd-icon {
    width: 17px;
    height: 17px;
}

.pd-nav__btn:hover {
    border-color: var(--brand-primary-edge);
    color: var(--brand-primary-deep);
}

.pd-nav__btn.is-locked {
    opacity: .35;
    cursor: default;
}

/* STATE خ — no related products. A route onward rather than an empty carousel, so
   the page does not end in a dead end. */
.pd-related-empty {
    border-radius: var(--radius-brand-card-lg);
    border: 1px solid var(--brand-border);
    background: var(--brand-card-face);
    padding: 30px 32px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}

.pd-related-empty__tile {
    flex: none;
    width: 88px;
    height: 88px;
    border-radius: 22px;
    background: repeating-linear-gradient(135deg,
        var(--brand-hatch-hero-a),
        var(--brand-hatch-hero-a) 8px,
        var(--brand-hatch-hero-b) 8px,
        var(--brand-hatch-hero-b) 16px);
    border: 1px solid var(--brand-primary-rule);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-primary-deep);
}

.pd-related-empty__tile .pd-icon {
    width: 34px;
    height: 34px;
}

.pd-related-empty__copy {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.pd-related-empty__title {
    font-size: 16px;
    font-weight: 800;
}

.pd-related-empty__text {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.95;
    color: var(--brand-text-muted);
    max-width: 400px;
}

.pd-related-empty__actions {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 9px;
}


/* =============================================================================
   SECTION 14 — MOBILE (<= 991.98px)
   991.98 and not 767.98: below 992 the approved mobile header takes over and the
   page frame goes full-bleed, so that is where this page's layout has to change too.
   Everything here is a re-lay of the SAME nodes — there is no display:none on a
   content block anywhere in this section, and no JavaScript reads a width.
   ============================================================================= */
@media (max-width: 991.98px) {

    .pd-page {
        padding-inline: var(--pd-gutter-sm);
        /* Clearance for the fixed action bar, plus the phone's own home indicator.
           Without it the last section sits under the bar. Top stays 0 so the crumb
           bar meets the header — see the desktop rule. */
        padding-block: 0 calc(96px + env(safe-area-inset-bottom));
    }

    .pd-sections {
        gap: 34px;
    }

    /* Same bar, narrower: reference template line 1231 — height 38, padding 0 14,
       one non-wrapping line that fades out at the far edge instead of wrapping or
       showing a scrollbar. The gutter it breaks out of is the mobile one. */
    .pd-crumbs {
        min-height: 38px;
        gap: 7px;
        margin-inline: calc(-1 * var(--pd-gutter-sm));
        padding-inline: var(--pd-gutter-sm);
        margin-bottom: 16px;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(270deg, transparent, #000 12%);
        mask-image: linear-gradient(270deg, transparent, #000 12%);
    }

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

    .pd-crumbs a,
    .pd-crumbs__current {
        font-size: 11px;
        white-space: nowrap;
    }

    /* The two columns become one, in the same DOM order. */
    .pd-main {
        grid-template-columns: minmax(0, 1fr);
        gap: 20px;
    }

    .pd-gallery__frame {
        padding: 8px;
        border-radius: var(--radius-brand-price);
        box-shadow: var(--brand-shadow-gallery-sm);
    }

    .pd-gallery__frame > .pd-rule {
        height: 2px;
        margin: 0 18px 8px;
    }

    .pd-well__bracket {
        width: 17px;
        height: 17px;
    }

    .pd-well__bracket--tr, .pd-well__bracket--tl { top: 12px; }
    .pd-well__bracket--br, .pd-well__bracket--bl { bottom: 12px; }
    .pd-well__bracket--tr, .pd-well__bracket--br { right: 12px; }
    .pd-well__bracket--tl, .pd-well__bracket--bl { left: 12px; }

    .pd-zoom {
        top: 12px;
        inset-inline-start: 40px;
        width: 34px;
        height: 34px;
        border-radius: var(--radius-brand);
    }

    .pd-well__hint {
        bottom: 12px;
        padding: 4px 10px;
        font-size: 9.5px;
    }

    .pd-thumbs {
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
    }

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

    .pd-thumb {
        width: 62px;
        height: 62px;
        border-radius: var(--radius-brand-md);
    }

    .pd-thumbs__note {
        display: none;
    }

    .pd-title {
        margin-top: 10px;
        font-size: 19px;
        line-height: 1.7;
    }

    .pd-latin {
        font-size: 11px;
    }

    .pd-meta {
        margin-top: 10px;
        gap: 8px;
    }

    .pd-meta__label {
        display: none;
    }

    .pd-rule--wide {
        margin-block: 16px;
    }

    .pd-price {
        padding: 16px 16px 14px;
    }

    .pd-price__top {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .pd-price__value b {
        font-size: 30px;
    }

    .pd-price__secondary {
        align-items: flex-start;
        padding-bottom: 0;
    }

    .pd-price__secondary-value {
        font-size: 16px;
    }

    .pd-countdown {
        margin: 14px -16px -14px;
    }

    .pd-spread__head {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .pd-notice {
        padding: 16px 16px;
    }

    .pd-variants {
        margin-top: 18px;
    }

    .pd-variant {
        flex: 1 1 100%;
    }

    /* THE STICKY ACTION BAR (reference artboard ۲). display:contents on the row lets
       the quantity stepper stay in the flow while the bar leaves it entirely —
       one markup tree, two completely different placements, no JS.

       position:fixed rather than sticky so the bar is present from the top of the
       page as the design shows. .page-frame uses `overflow: clip`, which masks its
       corners WITHOUT clipping fixed descendants, and it must never declare
       transform/filter/contain or it would become a containing block and re-anchor
       this bar (and the header) to itself. shop.js already removes
       .menu-bottom-site on data-page="productdetails", so nothing collides here. */
    .pd-buyrow {
        /* NOT display:contents. The action bar leaves the flow on its own
           (position:fixed below), so the row still has exactly two items to lay
           out — the stepper and the rail — which is the reference's mobile row.
           Making the row disappear would hand both to .pd-info's COLUMN and put
           them on separate lines. */
        align-items: center;
        gap: 8px;
    }

    .pd-qty {
        margin-top: 18px;
        height: 48px;
        border-radius: 13px;
        align-self: flex-start;
    }

    .pd-qty__btn {
        width: 38px;
        height: 38px;
    }

    .pd-actionbar {
        position: fixed;
        inset-inline: 0;
        bottom: 0;
        z-index: 60;
        display: flex;
        align-items: center;
        gap: 11px;
        padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
        background: color-mix(in oklab, var(--brand-card-face) 96%, transparent);
        border-top: 1px solid var(--brand-primary-rule);
        box-shadow: var(--brand-shadow-sticky-bar);
        backdrop-filter: blur(8px);
    }

    .pd-actionbar__fav {
        display: flex;
        align-items: center;
        justify-content: center;
        flex: none;
        width: 48px;
        height: 48px;
        border-radius: var(--radius-brand-lg);
        background: var(--brand-surface-recess);
        border: 1px solid var(--brand-border);
        color: var(--brand-text-muted);
        cursor: pointer;
    }

    .pd-actionbar__fav .pd-icon {
        width: 19px;
        height: 19px;
    }

    .pd-actionbar__price {
        display: flex;
        flex: none;
        flex-direction: column;
        gap: 2px;
    }

    .pd-actionbar__label {
        font-size: 9px;
        font-weight: 600;
        color: var(--brand-text-muted);
        letter-spacing: .05em;
    }

    .pd-actionbar__value {
        font-size: 16px;
        font-weight: 800;
        letter-spacing: -.02em;
        font-variant-numeric: tabular-nums;
    }

    .pd-actionbar .pd-cta {
        height: 48px;
        font-size: 12.5px;
        border-radius: var(--radius-brand-lg);
        gap: 7px;
        padding-inline: 14px;
    }

    .pd-actionbar .pd-cta .pd-icon {
        width: 17px;
        height: 17px;
    }

    .pd-cta__long {
        display: none;
    }

    .pd-cta__short {
        display: inline;
    }

    /* The «رفتن به حالت خرید» escape in state ب is a second button in the bar; it
       must not compete with the disabled primary for width. */
    .pd-actionbar .pd-cta--ghost {
        flex: none;
    }

    /* Beside the stepper, not under it: the reference's mobile row is
       [stepper] ......... [♡][share][compare]. */
    .pd-rail {
        flex: 0 1 auto;
        margin-top: 18px;
        margin-inline-start: auto;
        gap: 7px;
    }

    .pd-rail__btn {
        flex: none;
        width: 44px;
        height: 44px;
        padding-inline: 0;
        justify-content: center;
        border-radius: 13px;
    }

    .pd-rail__btn span {
        display: none;
    }

    .pd-rail__btn .pd-icon {
        width: 18px;
        height: 18px;
    }

    .pd-glance__grid {
        gap: 8px;
    }

    .pd-tile {
        padding: 12px 12px 11px;
        gap: 8px;
        box-shadow: var(--brand-shadow-spec-tile-sm);
    }

    .pd-tile__icon {
        width: 28px;
        height: 28px;
    }

    .pd-tile__value {
        font-size: 16px;
    }

    .pd-trust {
        margin-top: 14px;
        gap: 7px;
    }

    .pd-trust__chip {
        flex: 1 1 0;
        min-width: 0;
        flex-direction: column;
        gap: 5px;
        padding: 10px 6px;
        font-size: 9.5px;
        text-align: center;
    }

    /* Installments: the two-column panel becomes one column. */
    .pd-installments__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
        padding: 20px 16px;
    }

    .pd-installments > .pd-rule--inset {
        inset-inline: 30px;
    }

    .pd-installments__headline {
        font-size: 17px;
    }

    .pd-installments__benefits {
        flex-direction: column;
        gap: 8px;
    }

    /* Chart: the section head stacks so the three range buttons keep their size. */
    .pd-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 12px;
    }

    .pd-heading {
        font-size: 17px;
        flex-wrap: wrap;
    }

    .pd-heading__mark {
        height: 19px;
    }

    .pd-chart__card {
        padding: 16px 14px 12px;
    }

    .pd-chart__figures {
        gap: 14px;
    }

    .pd-chart__sep {
        display: none;
    }

    .pd-chart__caveat {
        display: none;
    }

    .pd-chart__stat-value b {
        font-size: 19px;
    }

    .pd-chart__svg {
        height: 150px;
    }

    .pd-chart__axis-y {
        height: 130px;
    }

    /* ACCORDIONS. The grid becomes a flex column and the heads return to DOM order,
       each directly above its own body. Same nodes, same JS, different placement. */
    .pd-panels {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .pd-panels::after {
        display: none;
    }

    .pd-panel__head {
        display: flex;
        justify-content: space-between;
        width: 100%;
        height: auto;
        padding: 14px 15px;
        border: 1px solid var(--brand-border);
        border-radius: var(--radius-brand-card-sm);
        background: var(--brand-card-face);
        font-size: 13px;
        font-weight: 700;
        color: var(--brand-text);
    }

    .pd-panel__head.is-open {
        background: var(--brand-primary-band);
        border-color: var(--brand-primary-rule);
        border-end-start-radius: 0;
        border-end-end-radius: 0;
        color: var(--brand-primary-deep);
    }

    .pd-panel__head.is-open::after {
        display: none;
    }

    .pd-panel__title {
        margin-inline-end: auto;
    }

    .pd-panel__chev {
        display: flex;
        align-items: center;
        color: var(--brand-text-soft);
    }

    .pd-panel__chev .pd-icon {
        width: 16px;
        height: 16px;
        transition: transform .2s ease;
    }

    .pd-panel__head.is-open .pd-panel__chev {
        color: var(--brand-primary-deep);
    }

    .pd-panel__head.is-open .pd-panel__chev .pd-icon {
        transform: rotate(180deg);
    }

    .pd-panel__body {
        margin-top: -10px;
        padding: 15px;
        border: 1px solid var(--brand-primary-rule);
        border-top: 0;
        border-end-start-radius: var(--radius-brand-card-sm);
        border-end-end-radius: var(--radius-brand-card-sm);
        background: var(--brand-card-face);
    }

    .pd-desc {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .pd-desc__text {
        font-size: 12.5px;
        line-height: 2.1;
    }

    .pd-desc__text.is-clamped {
        -webkit-line-clamp: 5;
    }

    .pd-specs__row {
        grid-template-columns: 120px minmax(0, 1fr);
    }

    .pd-specs__key,
    .pd-specs__val {
        padding: 11px 12px;
        font-size: 11.5px;
    }

    .pd-reviews-empty {
        padding: 26px 18px;
        gap: 12px;
    }

    .pd-reviews-empty__title {
        font-size: 15px;
    }

    .pd-reviews-empty__text {
        font-size: 11.5px;
    }

    .pd-reviews-empty__stars .pd-icon {
        width: 20px;
        height: 20px;
    }

    .pd-rail-swiper .swiper-slide {
        width: 160px;
    }

    .pd-nav {
        display: none;
    }

    .pd-related-empty {
        padding: 20px 16px;
        gap: 14px;
    }

    .pd-related-empty__tile {
        width: 60px;
        height: 60px;
        border-radius: var(--radius-brand-card-sm);
    }

    .pd-related-empty__tile .pd-icon {
        width: 24px;
        height: 24px;
    }

    .pd-related-empty__title {
        font-size: 14px;
    }

    .pd-related-empty__actions {
        width: 100%;
    }

    .pd-lightbox__close {
        top: 12px;
        inset-inline-end: 12px;
    }
}


/* =============================================================================
   REDUCED MOTION
   Every transform/opacity flourish above is decorative; none of it carries meaning.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .pd-cta,
    .pd-tile,
    .pd-media,
    .pd-well__sheen,
    .pd-desc__more .pd-icon,
    .pd-panel__chev .pd-icon {
        transition: none;
    }

    .pd-cta:hover,
    .pd-tile:hover {
        transform: none;
    }

    .pd-well:hover .pd-media {
        transform: none;
    }
}


/* =============================================================================
   [hidden] RESTATEMENTS
   Preflight is disabled, so the ONLY [hidden] rule in play is the UA stylesheet's —
   and any author `display` declaration beats it. Every element this page's script
   toggles with `.hidden = true` and which also carries a display rule above has to
   be restated here, or it simply never hides. footer-redesign.css documents the same
   trap; it is easy to hit and silent when you do.
   ============================================================================= */
.pd-price__secondary[hidden],
.pd-price__note[hidden],
.pd-spread[hidden],
.pd-price .pd-rule--hair[hidden],
.pd-countdown[hidden],
.pd-panel__body[hidden],
.pd-lightbox[hidden] {
    display: none !important;
}