/* =============================================================================
   PRODUCT CARD — Phase 1c
   Partner stylesheet for Views/Shared/Partials/Shared/_ProductCard.cshtml.

   WHY THIS FILE EXISTS AT ALL, given the card is otherwise Tailwind:
   the card is mostly things a utility class cannot express — four corner brackets,
   a sheen that sweeps across the image on hover, a coin drawn from a conic gradient,
   two gradient hairlines, and a price row whose FIXED height is what keeps grid rows
   from going ragged. Expressing those as arbitrary-value utilities would produce
   unreadable markup, so the whole visual layer lives here and the .cshtml stays
   structural. This mirrors header-merge.css / footer-redesign.css.

   NAMESPACE. Every class is `pc-`. That is load-bearing, not stylistic: it means the
   legacy selectors (.product-split, .product-body, .product-price, .price-orginal,
   .price-buyed, .unavailable-content, .special-sale) simply DO NOT MATCH the new card,
   so there is no specificity war with shop.css / products.css and almost nothing to
   neutralise. The only legacy hooks kept verbatim are `.swiper-slide` (a hard Swiper
   contract) and the `#update-products` container id (the AJAX filter target).

   LOAD ORDER CONTRACT. This file must be linked AFTER @RenderSection("Styles"), i.e.
   after every page-scoped stylesheet (products.css, Cart.css, Index.css,
   CompareProduct.css). _Layout.cshtml renders Partials/_ProductCardStyles.cshtml
   between the Styles section and </head> for exactly that reason. Moving the link
   earlier will let products.css's container rules win. It also needs tailwind.css on
   the page (linked by _HeaderStyles.cshtml) for the utilities used in the markup.

   TOKENS. Colours, radii and shadows come from --brand-* declared in
   tailwind/input.css (STEP 10 block). No literal hex belongs in this file; the two
   exceptions are called out where they appear.

   SECTIONS
     1  Grid & carousel containers (the only legacy neutralisers needed)
     2  The card shell
     3  The image well: pattern, brackets, sheen, media, coin placeholder
     4  Badges, out-of-stock chip, countdown strip
     5  Body: title, specs, divider
     6  Price row and actions
     7  State variants: out of stock, not sellable
     8  Mobile (<= 767.98px): the one responsive change, plus the scale-down
   ============================================================================= */


/* =============================================================================
   SECTION 1 — CONTAINERS
   products.css sized the old card with `.products-body .product-split { width:25% }`
   plus hairline borders. That selector no longer matches anything, so the grid has to
   be owned here. Written as .products-body.row-manual (0,2,0) so it outranks both
   `.row-manual { display:flex }` in shop.css and `.products-body` in products.css
   regardless of link order — belt as well as braces.
   ============================================================================= */
.products-body.row-manual,
.products-row.row-manual-fixed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px 22px;
    align-items: stretch;
}

@media (max-width: 1199.98px) {
    .products-body.row-manual,
    .products-row.row-manual-fixed {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .products-body.row-manual,
    .products-row.row-manual-fixed {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 11px;
    }
}

/* Carousels. Swiper sizes .swiper-slide's WIDTH; height it leaves alone, and its
   default cross-axis alignment makes every slide as tall as the tallest one only if the
   wrapper stretches. Without these two rules a slide with a two-line title makes the
   whole track taller and the shorter cards float with a gap under them. */
.swiper-wrapper:has(.pc-card) {
    align-items: stretch;
}

.swiper-slide:has(> .pc-card) {
    height: auto;
}

/* The card fills whatever cell or slide it is given, in BOTH containers. This plus the
   fixed-height price row in SECTION 6 is the whole equal-height story. */
.pc-card {
    height: 100%;
}


/* =============================================================================
   SECTION 2 — THE CARD SHELL
   ============================================================================= */
.pc-card {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 9px;
    background: var(--brand-card-face);
    border: 1px solid var(--brand-primary-rule);
    border-radius: var(--radius-brand-card-lg);
    box-shadow: var(--brand-shadow-card);
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s ease, border-color .3s ease;
}

.pc-card:hover {
    transform: translateY(-4px);
    border-color: var(--brand-primary);
    box-shadow: var(--brand-shadow-card-hover);
}

/* The gilded hairline across the top of the card, and the one that separates the title
   from the price. Same technique, different weights: a gradient that fades out at both
   ends so it reads as an engraved rule rather than a border. */
.pc-rule {
    display: block;
    border-radius: 2px;
}

.pc-rule--top {
    height: 2.5px;
    margin: 0 18px 9px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary) 22%,
        var(--brand-primary-sun) 50%,
        var(--brand-primary) 78%,
        transparent);
}

.pc-rule--divider {
    height: 1px;
    margin: 14px 0 13px;
    background: linear-gradient(90deg,
        transparent,
        var(--brand-primary-hairline) 30%,
        var(--brand-primary-hairline) 70%,
        transparent);
}

/* The whole-card link, laid OVER the card rather than wrapped around it — wrapping would
   nest the add-to-cart <form> inside an <a>, which browsers reparent. z-index 1 puts it
   above the decorative layers; the action in SECTION 6 sits at 2, above this. */
.pc-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    /* No text, no background: it is a hit area, not a visual. */
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
}

.pc-cover:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}


/* =============================================================================
   SECTION 3 — THE IMAGE WELL
   ============================================================================= */
.pc-well {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-brand-md);
    overflow: hidden;
    background: linear-gradient(160deg, var(--brand-card-well-from), var(--brand-card-well-to));
}

/* A fine dotted grid. The 1px/1.1px pair is deliberate: equal values alias into a moiré
   at some zoom levels, the tenth of a pixel of feathering kills it. */
.pc-well__dots {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--brand-primary-pale) 1px, transparent 1.1px);
    background-size: 14px 14px;
    opacity: .5;
}

/* A soft light source above and behind the product. */
.pc-well__halo {
    position: absolute;
    inset: 0;
    background: radial-gradient(58% 52% at 50% 42%,
        color-mix(in oklab, var(--brand-primary) 16%, #FFFFFF),
        transparent 74%);
}

/* Four corner brackets — the "gilded frame" detail. Physical corners (tl/tr/bl/br), not
   logical: they are a symmetric decoration, so they must NOT flip with direction. */
.pc-bracket {
    position: absolute;
    width: 15px;
    height: 15px;
    border: 0 solid var(--brand-primary-bracket);
}

.pc-bracket--tr { top: 11px; right: 11px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 4px; }
.pc-bracket--tl { top: 11px; left: 11px;  border-top-width: 1px; border-left-width: 1px;  border-top-left-radius: 4px; }
.pc-bracket--br { bottom: 11px; right: 11px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 4px; }
.pc-bracket--bl { bottom: 11px; left: 11px;  border-bottom-width: 1px; border-left-width: 1px;  border-bottom-left-radius: 4px; }

/* The contact shadow that sits the product on a surface instead of floating it. */
.pc-well__ground {
    position: absolute;
    bottom: 34px;
    width: 96px;
    height: 12px;
    border-radius: 50%;
    background: var(--brand-card-ground);
    filter: blur(9px);
}

/* The sheen. It is a background on the media's own wrapper, parked off-stage at 150% and
   swept to -60% on hover. `transition: background-position 0s` at rest is what makes it
   snap back instantly instead of sliding backwards when the pointer leaves. */
.pc-well__sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(100deg,
        rgba(255, 255, 255, 0) 38%,
        rgba(255, 255, 255, .72) 50%,
        rgba(255, 255, 255, 0) 62%);
    background-size: 260% 100%;
    background-position: 150% 0;
    background-repeat: no-repeat;
    transition: background-position 0s;
}

.pc-card:hover .pc-well__sheen {
    background-position: -60% 0;
    transition: background-position 1.05s cubic-bezier(.35, 0, .2, 1);
}

.pc-media {
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.pc-card:hover .pc-media,
.pc-card:hover .pc-coin {
    transform: scale(1.045);
}

/* ---- The missing-image placeholder -------------------------------------------------
   A struck coin, drawn in CSS. Three stacked layers: a conic rim that shifts hue as it
   turns (a single-hue ramp reads flat), a radial face lit from the upper left, and a
   hairline inner ring. No <img>, so no broken-image glyph and no asset to ship. */
.pc-coin {
    position: relative;
    width: 128px;
    height: 128px;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}

.pc-coin__rim,
.pc-coin__face,
.pc-coin__ring {
    position: absolute;
    border-radius: 50%;
}

.pc-coin__rim {
    inset: 0;
    background: conic-gradient(from 205deg,
        var(--brand-coin-1),
        var(--brand-coin-2) 16%,
        var(--brand-coin-3) 32%,
        var(--brand-coin-4) 50%,
        var(--brand-coin-5) 68%,
        var(--brand-coin-6) 84%,
        var(--brand-coin-1));
}

.pc-coin__face {
    inset: 8px;
    background: radial-gradient(circle at 36% 28%,
        var(--brand-coin-face-hi),
        color-mix(in oklab, var(--brand-primary) 40%, #F7ECD6) 60%,
        color-mix(in oklab, var(--brand-primary) 72%, #B8912F));
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, .75),
                inset 0 -8px 14px var(--brand-card-ground);
}

.pc-coin__ring {
    inset: 27px;
    border: 1px solid rgba(255, 255, 255, .5);
}


/* =============================================================================
   SECTION 4 — BADGES, OUT-OF-STOCK CHIP, COUNTDOWN
   ============================================================================= */
.pc-badges {
    position: absolute;
    top: 11px;
    /* Logical: the stack hugs the reading-start corner, which is the RIGHT in our RTL
       document and would be the left if this were ever served LTR. */
    inset-inline-start: 11px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    /* flex-start on the cross axis of a column flexbox = the inline-start edge, so the
       badges stay flush with the corner they are anchored to instead of going ragged. */
    align-items: flex-start;
    gap: 6px;
}

.pc-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.pc-badge--discount {
    padding: 5px 11px;
    background: var(--brand-discount);
    color: #FFFFFF;
    box-shadow: 0 9px 16px -10px var(--brand-discount-halo);
}

/* Built, never triggered this phase — see the note in _ProductCard.cshtml. Kept styled
   so the promotion phase is a data change rather than a redesign. */
.pc-badge--festival {
    padding: 5px 12px;
    font-weight: 800;
    letter-spacing: .03em;
    background: linear-gradient(100deg,
        var(--brand-primary-deep),
        var(--brand-primary) 55%,
        color-mix(in oklab, var(--brand-primary) 55%, #FFFFFF));
    color: #FFFDF6;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35),
                0 10px 18px -10px rgba(120, 90, 20, .95);
}

.pc-badge--installment {
    padding: 4px 9px 5px;
    background: rgba(255, 255, 255, .93);
    color: var(--brand-info);
    border: 1px solid var(--brand-info-edge);
}

.pc-oos-chip {
    position: absolute;
    bottom: 11px;
    inset-inline-start: 11px;
    z-index: 2;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--brand-border);
    color: var(--brand-text-muted);
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
}

/* The countdown strip. Deliberately the darkest thing on the card — it is the only
   element competing with the price for attention, and it should win only when it is
   genuinely urgent (see ProductCardRules.TimeLimitedWindow). */
.pc-countdown {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 0 8px;
    background: linear-gradient(90deg,
        color-mix(in oklab, var(--brand-primary-deep) 92%, #000000),
        color-mix(in oklab, var(--brand-primary-deep) 76%, #000000));
    border-top: 1px solid color-mix(in oklab, var(--brand-primary) 45%, #000000);
    color: #F7EACB;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
}

.pc-countdown__label {
    opacity: .8;
}

/* The digits run LTR inside an RTL card. `unicode-bidi: isolate` stops the bidi
   algorithm reordering the colon-separated groups; tabular figures stop the strip
   jittering horizontally as the seconds tick. */
.pc-countdown__value {
    direction: ltr;
    unicode-bidi: isolate;
    font-variant-numeric: tabular-nums;
    letter-spacing: .05em;
    font-weight: 700;
    color: #FFFFFF;
}


/* =============================================================================
   SECTION 5 — BODY
   ============================================================================= */
.pc-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 15px 8px 5px;
}

/* min-height is two lines' worth. It is not padding: it is what stops a one-line title
   and a two-line title producing cards of different heights in the same row. */
.pc-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
    margin: 0;
    color: var(--brand-text);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.62;
}

/* Always in the layout, even when the product has no specs to show — the element is
   rendered empty rather than omitted. That is what keeps the divider and the price row at
   the same height on every card in a row without needing a `margin-top: auto` push, which
   would collapse the divider's own 14px and tighten the card against the design. An empty
   muted line is invisible; a ragged row of prices is not. */
.pc-specs {
    margin: 6px 0 0;
    min-height: 11px;
    color: var(--brand-text-soft);
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* =============================================================================
   SECTION 6 — PRICE ROW AND ACTIONS
   The 62px is a FIXED height, from the reference, and it is doing real work: with the
   price bottom-aligned inside a fixed box, a card that gains a struck-through original
   price does not grow taller than its neighbours. Do not turn it into min-height.
   ============================================================================= */
.pc-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    height: 62px;
}

.pc-price {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pc-price__head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.pc-price__label {
    color: var(--brand-text-muted);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: .06em;
    white-space: nowrap;
}

.pc-price__was {
    color: var(--brand-text-soft);
    font-size: 10.5px;
    font-weight: 500;
    text-decoration: line-through;
    white-space: nowrap;
}

.pc-price__amount {
    color: var(--brand-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pc-price__underline {
    display: block;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--brand-primary), transparent);
}

/* Everything interactive sits above .pc-cover. */
.pc-action-form,
.pc-action {
    position: relative;
    z-index: 2;
    flex: none;
}

.pc-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
    height: 46px;
    border-radius: var(--radius-brand-cta);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, background .22s ease, color .22s ease, border-color .22s ease;
}

/* BUY — the metal button. Icon only at desktop width; the label is revealed on mobile
   (SECTION 8), where the button goes full-width and an unlabelled 100%-wide gold slab
   would be ambiguous. */
.pc-action--buy {
    width: 46px;
    padding: 0;
    background: linear-gradient(145deg,
        var(--brand-primary-sun),
        var(--brand-primary) 46%,
        var(--brand-primary-sheen-deep));
    color: var(--brand-primary-ink);
    border: 1px solid color-mix(in oklab, var(--brand-primary) 62%, #FFFFFF);
    box-shadow: var(--brand-shadow-cta-card);
}

.pc-action--buy:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

/* Icon-only at desktop width. The accessible name still comes from the button's aria-label,
   so hiding the text costs nothing; the mobile rules below reveal it when the button goes
   full-width and an unlabelled gold slab would be ambiguous. */
.pc-action--buy .pc-action__text {
    display: none;
}

/* The long/short pair for the buy label — see the note at the markup. */
.pc-action__text--short {
    display: none;
}

/* SELL — outlined at rest, filling with the same metal on hover. The inversion is what
   distinguishes "we buy this from you" from "add to basket" at a glance. */
.pc-action--sell {
    padding: 0 12px;
    background: #FFFFFF;
    color: var(--brand-primary-deep);
    border: 1px solid var(--brand-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}

.pc-action--sell:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg,
        var(--brand-primary-sun),
        var(--brand-primary) 46%,
        var(--brand-primary-sheen-deep));
    color: var(--brand-primary-ink);
}

/* MUTED — out of stock, and the sell-mode-without-a-buy-price fallback. Links to the
   product page. Reads as available-but-secondary, never as disabled. */
.pc-action--muted {
    padding: 0 14px;
    background: var(--brand-surface-recess);
    color: var(--brand-text-muted);
    border: 1px solid var(--brand-border);
}

.pc-action--muted:hover {
    border-color: var(--brand-primary);
    color: var(--brand-primary-deep);
}

/* DISABLED — the "we do not buy this" state. A <span>, not a disabled <button>: there is
   no action to disable, and a disabled control invites the user to look for a way to
   enable it. */
.pc-action--disabled {
    padding: 0 12px;
    background: var(--brand-surface-recess);
    color: var(--brand-text-soft);
    border: 1px solid var(--brand-border);
    cursor: not-allowed;
}

/* The "این محصول خریداری نمی‌شود" line. Two copies of the copy, long and short: the
   mobile tile is too narrow for the full sentence and truncating it mid-phrase would be
   worse than saying less. CSS picks one; only one is ever visible. */
.pc-notice {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    flex: 1;
    gap: 7px;
    min-width: 0;
    margin: 0;
    color: var(--brand-text-muted);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.5;
}

.pc-notice svg {
    flex: none;
    stroke: var(--brand-text-soft);
}

.pc-notice__short {
    display: none;
}


/* =============================================================================
   SECTION 7 — STATE VARIANTS
   ============================================================================= */

/* ---- Out of stock. The gold is REMOVED, not faded: a faded gold still advertises. --- */
.pc-card--oos .pc-rule--top,
.pc-card--oos .pc-rule--divider {
    background: linear-gradient(90deg, transparent, var(--brand-grey-rule) 30%, var(--brand-grey-rule) 70%, transparent);
}

.pc-card--oos .pc-well {
    background: linear-gradient(160deg, var(--brand-card-well-mute-from), var(--brand-card-well-mute-to));
}

.pc-card--oos .pc-well__dots {
    background-image: radial-gradient(var(--brand-border) 1px, transparent 1.1px);
    opacity: .65;
}

.pc-card--oos .pc-well__halo {
    display: none;
}

.pc-card--oos .pc-bracket {
    border-color: var(--brand-grey-bracket);
}

.pc-card--oos .pc-well__ground {
    width: 84px;
    height: 11px;
    background: var(--brand-card-ground-grey);
}

.pc-card--oos .pc-media,
.pc-card--oos .pc-coin {
    filter: grayscale(.75);
    opacity: .5;
}

.pc-card--oos .pc-title {
    color: var(--brand-text-muted);
}

.pc-card--oos .pc-price__label,
.pc-card--oos .pc-price__amount {
    color: var(--brand-text-soft);
}

.pc-card--oos .pc-price__underline {
    background: linear-gradient(90deg, #DCD5C7, transparent);
}

/* No hover lift on a card there is nothing to buy from. */
.pc-card--oos:hover {
    transform: none;
    border-color: var(--brand-primary-rule);
    box-shadow: var(--brand-shadow-card);
}

.pc-card--oos:hover .pc-well__sheen {
    background-position: 150% 0;
}

/* ---- Not sellable. Desaturated rather than greyed: the product is perfectly real and
        perfectly buyable, it is only this DIRECTION that is closed. -------------------- */
.pc-card--nosell .pc-well__dots {
    background-image: radial-gradient(color-mix(in oklab, var(--brand-primary) 20%, #FFFFFF) 1px, transparent 1.1px);
    opacity: .45;
}

.pc-card--nosell .pc-bracket {
    border-color: color-mix(in oklab, var(--brand-primary) 30%, #FFFFFF);
}

.pc-card--nosell .pc-well__ground {
    width: 86px;
    height: 11px;
    background: var(--brand-card-ground-mute);
}

.pc-card--nosell .pc-media,
.pc-card--nosell .pc-coin {
    filter: saturate(.68);
    opacity: .88;
}

.pc-card--nosell .pc-rule--divider {
    background: linear-gradient(90deg,
        transparent,
        color-mix(in oklab, var(--brand-primary) 26%, #FFFFFF) 30%,
        color-mix(in oklab, var(--brand-primary) 26%, #FFFFFF) 70%,
        transparent);
}


/* =============================================================================
   SECTION 8 — MOBILE (<= 767.98px)
   ONE markup tree, one breakpoint. The only STRUCTURAL change is the price row: at
   desktop the action sits beside the price (icon-only, 46x46); on a ~160px tile there is
   no room beside anything, so the row becomes a column and the button goes full width
   and gains its label. Everything else here is proportional scale-down.
   There is deliberately NO width-based JS switching anywhere in this component.
   ============================================================================= */
@media (max-width: 767.98px) {
    .pc-card {
        padding: 6px;
        border-radius: var(--radius-brand-card-sm);
        box-shadow: var(--brand-shadow-card-sm);
    }

    .pc-rule--top {
        height: 2px;
        margin: 0 12px 7px;
        background: linear-gradient(90deg,
            transparent,
            var(--brand-primary) 24%,
            var(--brand-primary-sun) 50%,
            var(--brand-primary) 76%,
            transparent);
    }

    .pc-well {
        border-radius: var(--radius-brand);
    }

    .pc-well__dots {
        background-size: 12px 12px;
    }

    .pc-bracket {
        width: 11px;
        height: 11px;
    }

    .pc-bracket--tr { top: 8px; right: 8px; border-top-right-radius: 3px; }
    .pc-bracket--tl { top: 8px; left: 8px;  border-top-left-radius: 3px; }
    .pc-bracket--br { bottom: 8px; right: 8px; border-bottom-right-radius: 3px; }
    .pc-bracket--bl { bottom: 8px; left: 8px;  border-bottom-left-radius: 3px; }

    .pc-well__ground {
        bottom: 24px;
        width: 70px;
        height: 10px;
        filter: blur(7px);
    }

    .pc-coin {
        width: 90px;
        height: 90px;
    }

    .pc-coin__face { inset: 6px; }
    .pc-coin__ring { inset: 20px; }

    .pc-badges {
        top: 8px;
        inset-inline-start: 8px;
        gap: 5px;
    }

    .pc-badge {
        font-size: 9.5px;
    }

    .pc-badge--discount {
        padding: 4px 9px;
        box-shadow: 0 8px 14px -10px var(--brand-discount-halo);
    }

    .pc-badge--installment {
        padding: 3px 8px 4px;
    }

    .pc-oos-chip {
        bottom: 8px;
        inset-inline-start: 8px;
        padding: 4px 10px;
        font-size: 9.5px;
    }

    .pc-countdown {
        gap: 5px;
        padding: 6px 0 7px;
        font-size: 9.5px;
    }

    /* The tile is too narrow for the label and the digits both; the digits are the part
       that carries the meaning. */
    .pc-countdown__label {
        display: none;
    }

    .pc-body {
        padding: 11px 5px 3px;
    }

    .pc-title {
        min-height: 37px;
        font-size: 11.5px;
        line-height: 1.6;
    }

    /* The design drops the specs line on mobile rather than shrinking it into noise. */
    .pc-specs {
        display: none;
    }

    .pc-rule--divider {
        margin: 10px 0;
    }

    /* THE structural change. */
    .pc-foot {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-end;
        gap: 9px;
        height: 101px;
    }

    .pc-price {
        gap: 3px;
    }

    .pc-price__label {
        font-size: 9px;
        letter-spacing: .05em;
    }

    .pc-price__was {
        font-size: 9.5px;
    }

    .pc-price__amount {
        font-size: 16px;
    }

    .pc-price__underline {
        width: 26px;
    }

    .pc-action {
        width: 100%;
        height: 44px;
        border-radius: var(--radius-brand-cta-sm);
    }

    /* Full width now, so it must say what it does. */
    .pc-action--buy {
        padding: 0 10px;
    }

    .pc-action--buy .pc-action__text--long {
        display: none;
    }

    .pc-action--buy .pc-action__text--short {
        display: inline;
    }

    .pc-action--buy svg {
        width: 15px;
        height: 15px;
    }

    .pc-action-form {
        width: 100%;
    }

    .pc-notice {
        flex: none;
        font-size: 10.5px;
        line-height: 1.45;
        gap: 6px;
    }

    .pc-notice svg {
        width: 13px;
        height: 13px;
    }

    .pc-notice__long  { display: none; }
    .pc-notice__short { display: inline; }
}


/* =============================================================================
   REDUCED MOTION
   The sheen sweep and the hover lift are decoration; the card is fully usable without
   them, so they go entirely rather than being shortened.
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .pc-card,
    .pc-media,
    .pc-coin,
    .pc-action,
    .pc-well__sheen {
        transition: none;
    }

    .pc-card:hover {
        transform: none;
    }

    .pc-card:hover .pc-media,
    .pc-card:hover .pc-coin {
        transform: none;
    }

    .pc-card:hover .pc-well__sheen {
        background-position: 150% 0;
    }
}