/*
 * ============================================================================
 * YADAKIMARKET — ADDITIONS TO THE APPROVED DESIGN
 * ============================================================================
 * `site.css` is the design pack exactly as delivered and is never edited here,
 * so the next revision can be dropped in wholesale. This file holds only the
 * handful of components the static preview had no need for, each built from
 * the pack's own tokens so it cannot drift away from the look.
 *
 * Adding to it is a decision, not a habit: if a rule belongs to a component the
 * pack already draws, the pack's class is the right answer instead.
 */

/* ---------------------------------------------------------------------------
 * PAGINATION
 *
 * The pack ends its catalogue with a «نمایش ۲۴ کالای دیگر» button — an
 * infinite-scroll affordance that keeps the page number out of the URL.
 *
 * That is the wrong trade for this shop. 14,123 of its URLs are indexed, the
 * catalogue's canonical carries `?page=`, and a button no crawler presses
 * hides every product past the first two dozen from search entirely. Numbered
 * links also give a shopper page four back after they follow a product and
 * return, which is the single most common movement on a listing.
 *
 * Styled off `.load-more`, so the two read as the same family.
 * ------------------------------------------------------------------------ */
.catalog-pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px auto 0;
}

.catalog-pagination a,
.catalog-pagination span {
    /*
     * FLEX, not grid.
     *
     * `display:grid` with no column template gives every child its own row, so
     * «قبلی» and its chevron stacked vertically inside a 42px box and the
     * 24x24 SVG was left unconstrained. The arrows are icon-plus-label; they
     * belong on one line.
     */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 42px;
    min-height: 42px;              /* a comfortable touch target on a phone */
    padding: 0 12px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 13px;
    /* Digits are Persian and proportional by default in YekanBakh; tabular
       figures stop the row jittering as the page number changes width. */
    font-variant-numeric: tabular-nums;
}

.catalog-pagination a {
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
}

.catalog-pagination a:hover {
    color: var(--orange-dark);
    border-color: var(--orange);
}

.catalog-pagination [aria-current='page'] {
    color: #fff;
    background: var(--orange);
    border: 1px solid var(--orange);
}

/* The disabled edge and the … gap: present for rhythm, not clickable. */
.catalog-pagination .disabled,
.catalog-pagination .gap {
    color: var(--muted);
    background: 0 0;
    border: 1px solid transparent;
    cursor: default;
}

/*
 * Below 620px a long page list wraps to three rows and pushes the footer off
 * screen. The numbers collapse and the two arrows stay, which is all a thumb
 * uses anyway.
 */
@media (max-width: 620px) {
    .catalog-pagination .page-number:not([aria-current='page']),
    .catalog-pagination .gap {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
 * THE MEGA MENU'S OPEN STATE
 *
 * `._mega_dlezs_7` is fully styled in the pack — position, shadow, the mobile
 * full-screen variant. The one thing it has no rule for is being hidden,
 * because React simply did not render the element when the menu was shut.
 *
 * Here all four panels are in the markup and the `hidden` attribute closes
 * them, so it needs to beat the pack's `display:block`. Scoped to this one
 * class rather than a blanket `[hidden]` rule.
 * ------------------------------------------------------------------------ */
._mega_dlezs_7[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * THE CATEGORY NAVIGATOR FOLLOWS THE NUMBER OF CATEGORIES
 *
 * Above 1150px the pack pins that grid to five columns with !important. Its
 * sample navigator had five tiles; this shop has four root categories, so the
 * fifth column rendered as a wide empty gap at the end of the row and the
 * panel read as though something had failed to load.
 *
 * `data-count` is written by the template from the real number of tiles, so the
 * row fills whatever the shop's tree happens to hold today — including after
 * someone adds a fifth category on the admin's «دسته‌بندی محصولات» screen, at
 * which point the pack's own rule takes over again and nothing here changes.
 *
 * !important only because the rule it must outrank is itself !important.
 * ------------------------------------------------------------------------ */
@media (min-width: 1151px) {
    .category-commerce-shell .category-choice-grid[data-count='1'] { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
    .category-commerce-shell .category-choice-grid[data-count='2'] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .category-commerce-shell .category-choice-grid[data-count='3'] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .category-commerce-shell .category-choice-grid[data-count='4'] { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

/* ---------------------------------------------------------------------------
 * THE ORDER STATUS PILL
 *
 * The shop defines its own statuses in a table — the panel can rename one or
 * add one without a deploy — and each carries a `tone`: fresh, info, aging,
 * stale or neutral. The approved design has one pill (`.stock-pill`) with a
 * single amber variant, which covers two of the five.
 *
 * So this is the same pill in the remaining tones, built from the design's own
 * palette rather than a new one. The dot is `currentColor`, so a tone added
 * later only needs the two colours below and nothing else.
 * ------------------------------------------------------------------------ */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    /* Neutral is also the fallback for a tone this file has not met. */
    color: #4b5563;
    background: #f1f3f6;
}

.status-pill > span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex: 0 0 6px;
}

.status-pill.tone-fresh  { color: var(--green);       background: #eaf8f2; }
.status-pill.tone-info   { color: var(--blue);        background: #eef4fe; }
.status-pill.tone-aging  { color: #b84b0b;            background: #fff2e7; }
.status-pill.tone-stale  { color: var(--red);         background: #fdeeed; }

/* ---------------------------------------------------------------------------
 * VALIDATION MESSAGES AND THE CHECKOUT PROMISE
 *
 * `.journey-form label` is a grid, so an <em> after the input becomes a third
 * row and needs only a colour and a size. The pack has no rule for it because
 * its forms never posted anywhere and so never failed validation.
 *
 * `.checkout-promise` is the sentence under the receipt — what happens after
 * the button is pressed. On a shop where 98% of orders are paid at the door and
 * every price is re-confirmed by telephone, that sentence is doing more work
 * than the button.
 * ------------------------------------------------------------------------ */
.journey-form label em {
    color: var(--red);
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
}

.journey-form label small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 400;
}

/* Headings and intro copy span both columns without becoming form fields. */
.journey-form h2 {
    margin: 4px 0 0;
    font-size: 17px;
}

.journey-form > p {
    color: var(--muted);
    margin: 0;
    font-size: 12px;
    font-weight: 400;
}

.checkout-promise {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.9;
}

.checkout-promise svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 4px;
    color: var(--orange);
}

/*
 * The back link sits in `.checkout-actions`, which styles <button> and not <a>.
 * Matched to the secondary button so the two edges of the row read as a pair.
 */
/*
 * The search page's query chip is a LINK, not a button.
 *
 * The pack styles `.active-filter-chips button` because its chips cleared React
 * state. Here removing the only filter means going somewhere — the unfiltered
 * catalogue — and that is a link, so a crawler can follow it and a middle-click
 * opens it in a tab. Same pill, honest element.
 */
.active-filter-chips a {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border: 1px solid #f0c5a8;
    border-radius: 999px;
    background: #fff7f0;
    color: #85330e;
}

.checkout-actions a {
    display: inline-flex;
    align-items: center;
    padding: 9px 22px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #fff;
    color: var(--ink);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
 * THE SPEC AND SELLER TABLES
 *
 * The pack's product page has a «مشخصات فنی» tab and draws its contents as
 * prose, because its sample product had none. Two tables live in those panels
 * here and neither has a component in the design:
 *
 *   .spec-table   — the specification, built from fields the catalogue really
 *                   holds rather than invented attributes.
 *   .seller-table — every seller's price. The pack's buy box names one seller
 *                   because its sample shop stocks its own goods; this one is a
 *                   marketplace, where "who else has it and for how much" is
 *                   most of the decision.
 *
 * Both inherit the panel's own padding, so they only need rhythm and rules.
 * ------------------------------------------------------------------------ */
.spec-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.spec-table th,
.spec-table td {
    padding: 11px 4px;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid var(--line);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-bottom: 0;
}

/* The label column: narrow, muted, and never wrapped mid-phrase. */
.spec-table tbody th {
    width: 38%;
    color: var(--muted);
    font-weight: 400;
}

.spec-table thead th {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
}

.seller-table td:last-child {
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
    .spec-table { font-size: 12px; }
    .spec-table tbody th { width: 45%; }
}

/* ---------------------------------------------------------------------------
 * PANELS AND FACET ROWS HIDDEN BY THE SCRIPT
 *
 * Same reason: `.filter-option` is display:flex in the pack, which outranks
 * the browser's own [hidden] rule.
 * ------------------------------------------------------------------------ */
.filter-option[hidden],
.show-facets[hidden],
.pdp-rich-description[hidden] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
 * A TIMELINE WHOSE LENGTH IS NOT KNOWN IN ADVANCE
 *
 * `.order-timeline` is `repeat(5, 1fr)` and `.three-stage` is `repeat(3, 1fr)`,
 * because the pack's sample order always had the same number of steps. A real
 * order's trail is however many transitions the shop has recorded — usually
 * one, since 6,112 of 6,114 migrated orders carry no history at all, and
 * occasionally four or five.
 *
 * With the fixed five-column rule a single-step trail renders in the first
 * fifth of the row and leaves four empty columns, which reads as steps that
 * failed to load. Column auto-flow gives N equal columns for N steps and
 * leaves the pack's connector line and dot styling untouched.
 * ------------------------------------------------------------------------ */
.order-timeline.auto-stages {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
}

.order-timeline small {
    color: var(--muted);
    font-size: 10px;
}

/* ---------------------------------------------------------------------------
 * THE LOYALTY SCREEN
 *
 * The design has no loyalty component at all — its sample shop had no points —
 * so this page is assembled from the pack's `.dashboard-primary` stat panel
 * and `.order-list` rows, with three small pieces that had nowhere to come
 * from: a non-link stat card, a progress bar, and a debit tone for the ledger.
 *
 * Worth building rather than dropping: 9,236 customers carry a balance
 * migrated from the legacy shop, and until this screen existed there was no way
 * for any of them to see it, let alone check it.
 * ------------------------------------------------------------------------ */

/*
 * `.dashboard-primary > a` is the card; two of the three here are not links,
 * because "your tier" and "distance to the next tier" lead nowhere. Same box,
 * without pretending to be clickable.
 */
.dashboard-primary > .tier-card {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 118px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 14px;
}

.dashboard-primary > .tier-card > svg {
    width: 34px;
    height: 34px;
    color: var(--orange);
}

.dashboard-primary > .tier-card span {
    display: grid;
    gap: 4px;
    justify-items: start;
}

.dashboard-primary > .tier-card small {
    color: var(--muted);
}

.points-progress {
    height: 8px;
    margin: 14px 0 6px;
    border-radius: 999px;
    background: #eef1f5;
    overflow: hidden;
}

.points-progress > span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--orange);
}

/* A deduction is not a gain; `.order-list em` is green by default. */
.order-list em.is-debit {
    color: var(--red);
}

.ledger-title {
    margin: 26px 0 12px;
    font-size: 17px;
}

/* ---------------------------------------------------------------------------
 * THE ONE-TIME CODE FIELD
 *
 * `.auth-page input` is an ordinary 48px text box. A six-digit code typed into
 * one is hard to check against a phone screen, so this is the same box with the
 * digits spaced out and centred — the convention every OTP form uses, and the
 * difference between reading back "۴۸۲۹۱۷" and "482917".
 * ------------------------------------------------------------------------ */
.auth-page input.otp-input {
    height: 62px;
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: 0.35em;
    /* The last letter-space would otherwise push the digits off-centre. */
    text-indent: 0.35em;
}

/* Validation text, in the same shape the checkout form uses. */
.auth-page label em {
    color: var(--red);
    font-style: normal;
    font-size: 11px;
    font-weight: 400;
}

.auth-page .form-success {
    justify-content: center;
}

/* The arrows' glyphs. Unsized, a Lucide SVG renders at its 24px viewBox. */
.catalog-pagination svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
}

/* ---------------------------------------------------------------------------
 * CALLS TO ACTION THAT ARE LINKS, NOT BUTTONS
 *
 * Three of the pack's card components style their action as `button` alone,
 * because in the static preview every action was a no-op click handler. Here
 * the same slot holds an <a> whenever the action is "go and read more" — a
 * brokered part routes to its page and its phone number, not into the basket,
 * and that is a navigation, so it must be a link: middle-clickable, followable
 * by a crawler, and not a button lying about what it does.
 *
 * 4,487 of 5,479 live offers take that branch, so this is the common case on
 * every grid, not an edge.
 * ------------------------------------------------------------------------ */
._productActions_dlezs_12 > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
    font-size: 12px;
    font-weight: 700;
}

._productActions_dlezs_12 > a svg {
    width: 15px;
    height: 15px;
}

.related-product-card footer > a {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    color: var(--ink);
}

.related-product-card footer > a svg {
    width: 17px;
    height: 17px;
}

/*
 * The phone bar's own CTA. `.mobile-purchase-bar button` is the pack's rule and
 * this is the branch that fires for nearly every product, so without it the
 * primary action on a phone was unstyled text.
 */
.mobile-purchase-bar > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    background: var(--orange);
    color: #fff;
    font-weight: 700;
}

.mobile-purchase-bar > a svg {
    width: 17px;
    height: 17px;
}

/* ---------------------------------------------------------------------------
 * THE CHECKOUT'S STEP MARKERS
 *
 * `.checkout-head > div` is a fixed four-column grid 750px wide. This checkout
 * has two real steps, so they occupied the right half of that grid and sat
 * visibly off-centre under a centred heading. Two columns, sized to content.
 * ------------------------------------------------------------------------ */
.checkout-head > div {
    grid-template-columns: repeat(2, auto) !important;
    justify-content: center;
    gap: 28px;
}

/* ---------------------------------------------------------------------------
 * THE MOBILE CATEGORY SHEET'S CLOSED STATE
 *
 * The pack sets `display:grid` on `.subcategory-sheet-backdrop` inside the
 * mobile breakpoint with no state class on it — React simply did not render the
 * element when the sheet was shut. Here it is in the markup so its links are
 * real, which means `hidden` has to beat that rule.
 * ------------------------------------------------------------------------ */
.subcategory-sheet-backdrop[hidden],
.subcategory-sheet-backdrop [hidden] {
    display: none !important;
}

/*
 * The sheet's header holds a title block and a close button. The pack styles
 * `>header button` and `h2`; the wrapper around the two lines needs nothing but
 * to not be a flex item that stretches.
 */
.subcategory-sheet > header > div {
    display: grid;
    gap: 2px;
}

/* ---------------------------------------------------------------------------
 * SECTION HEADINGS MAY WRAP ON A PHONE
 *
 * `._sectionHead_dlezs_10` is a flex row with `justify-content: space-between`,
 * no wrapping and no minimum on either child. On a 390px screen the measured
 * gap between the heading and its «مشاهده همه» link is:
 *
 *   قطعات را بر اساس برند خودرو پیدا کنید   0px
 *   انتخاب سریع بر اساس خودرو                5px
 *
 * Nothing is broken today, and nothing has any room either. One more word in a
 * heading — which the shop can type on the Banners or Categories screen — and
 * the two collide with no way for either to give.
 *
 * Wrapping costs nothing when there is room and rescues the layout when there
 * is not. `min-width: 0` on the heading block is the half that actually matters:
 * without it a flex item refuses to shrink below its content, so the row
 * overflows instead of wrapping.
 * ------------------------------------------------------------------------ */
@media (max-width: 720px) {
    ._sectionHead_dlezs_10 {
        flex-wrap: wrap;
        gap: 4px 12px;
        align-items: baseline;
    }

    /*
     * `flex: 1 1 auto` with `min-width: 0`, NOT `flex-basis: 100%`.
     *
     * 100% pushes the link onto its own line and adds a row of height to every
     * section on the page. Letting the heading block shrink instead keeps the
     * link beside it and lets the HEADING's own text wrap — which is where the
     * spare room actually is.
     *
     * `min-width: 0` is the half that matters: a flex item will not shrink
     * below its content's intrinsic width without it, so the row overflows
     * rather than wrapping and the rule does nothing.
     */
    ._sectionHead_dlezs_10 > div {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* The link must not be the thing that shrinks — it is already short. */
    ._sectionHead_dlezs_10 > a {
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

/* =========================================================================
   MAGAZINE
   =========================================================================
   The pack ships every magazine rule in site.css already — the hero, the
   grid, the featured tile, the story sections, the checklist, the editorial
   note, the tag chips. What follows is only what our markup needs and the
   pack's mock did not.
   ========================================================================= */

/*
 * The category chips are LINKS, and the pack styled only <button>.
 *
 * Its mock filtered the list in JavaScript, so a button was right there. Here
 * each chip is a distinct URL, and a filter that cannot be bookmarked, shared
 * or opened in a new tab is the wrong element no matter how it looks.
 *
 * These declarations are the pack's own, flattened: `.magazine-tools button`
 * is defined once near the top of site.css and overridden again near the
 * bottom, and what a browser actually computes is the pair combined.
 * inline-flex + center is the one addition, because a <button> centres its
 * label inside min-height for free and an <a> does not.
 */
.magazine-tools > div > a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 13px;
    border: 1px solid #dce1e8;
    border-radius: 999px;
    background: #fff;
    color: #4f5866;
    white-space: nowrap;
}

.magazine-tools > div > a:hover {
    border-color: #f49138;
    background: #fffaf5;
    color: #c6531d;
}

.magazine-tools > div > a.active {
    border-color: #f49138;
    background: #fff4ea;
    color: #b94716;
    box-shadow: inset 0 0 0 1px #f491381f;
}

/*
 * Paragraph spacing inside a story section.
 *
 * `.magazine-story > section p { margin: 0 }` is the pack's rule, and it is
 * correct for the one-paragraph-per-section mock it was written against. A
 * real article runs several, and with margin zeroed they butt together into a
 * single wall of text — the sections keep their dividers and the prose inside
 * them loses every break.
 *
 * `:not(:last-child)` rather than a blanket margin-bottom so the last
 * paragraph does not add a gap above the section's own 18px padding.
 */
.magazine-story > section p:not(:last-child) {
    margin-bottom: 14px;
}

/*
 * The rich editor also emits lists, which the pack never drew inside a story.
 *
 * `list-style` has to be restored EXPLICITLY, not merely left alone: site.css
 * resets `ol, ul, menu { list-style: none }` globally, so a bulleted list typed
 * in the editor came out as a column of unmarked lines that read as short
 * paragraphs. Checked by looking at a rendered article, which is the only way
 * that particular bug is visible — the markup is perfectly correct.
 *
 * The checklist is NOT affected: `.magazine-checklist ul` keeps its own
 * `list-style: none` and draws a green tick per row instead.
 */
.magazine-story > section ul,
.magazine-story > section ol {
    margin: 0 0 14px;
    padding-inline-start: 22px;
    color: #424b58;
}

.magazine-story > section ul { list-style: disc outside; }
.magazine-story > section ol { list-style: decimal outside; }

.magazine-story > section li::marker {
    color: #8a929d;
}

/*
 * Tighter than the surrounding prose.
 *
 * `.magazine-article > article` sets `line-height: 2.15`, which is right for a
 * long paragraph and far too airy for a list: at that height plus a margin the
 * three items spread over as much space as a paragraph and stopped looking
 * like a group.
 */
.magazine-story > section li {
    margin-bottom: 4px;
    line-height: 1.9;
}

.magazine-story > section blockquote {
    margin: 0 0 14px;
    padding: 2px 14px;
    border-inline-start: 3px solid #f49138;
    color: #5d6672;
}

.magazine-story > section a {
    color: #d6531a;
    text-decoration: underline;
}

/*
 * The two <h2> headings the article page sets outside a <section> —
 * «مسیرهای مرتبط» and «موضوعات این گزارش».
 *
 * `.magazine-story > section h2` does not reach them, so without this they
 * render at the browser's default 1.5em with no colour and read as louder than
 * the section titles above them.
 */
.magazine-story > h2 {
    margin: 24px 0 10px;
    color: #28235c;
    font-size: 20px;
}

/*
 * The article's own cover sits inside a <picture> so a WebP can be offered
 * beside it. `.magazine-cover` is on the <img>, and the <picture> wrapper is
 * an inline box that would otherwise shrink-wrap and leave the 100% width
 * resolving against nothing.
 */
.magazine-article > picture {
    display: block;
}

/*
 * The card images are in a <picture> too, inside `.magazine-image` — whose
 * height the pack sets on the anchor and whose `object-fit: cover` it sets on
 * `.magazine-image img`. The inline <picture> between them breaks the chain:
 * the img resolves `height: 100%` against the picture, not the anchor.
 */
.magazine-image picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================================
   PROVISIONAL PRICES — THE NOTE THAT IS NO LONGER ON THE CARD
   =========================================================================
   4,487 of 5,479 live offers are «تأیید تلفنی», so `.price-note` printed a
   second line on 82% of the cards and not on the rest, and a grid where most
   cards are one line taller than their neighbours reads as broken. The owner
   asked for it off the cards, and both card partials no longer render it.

   The rules are kept, unused, because the note itself is not gone from the
   site — the product page says it in full and the cart says it where the money
   is. If it is ever wanted back on a card, this is what it looked like, and
   deleting it would only mean writing it again from memory.
   ========================================================================= */
.product-card .price .price-note {
    display: block;
    margin-top: 2px;
    color: #7a8492;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

/*
 * The card's control when the offer cannot be ordered.
 *
 * `.add-btn` is the design's orange call to action, and the fallback link
 * reused it — so «ناموجود» rendered as a bright orange button, which is an
 * invitation to click on the one state where there is nothing to do.
 *
 * The colour is the pack's own `:disabled` grey (#cfd5dc), so this reads as
 * the same family rather than a new style. It stays a LINK, not a disabled
 * button: the product page behind it still has the phone number, the fitment
 * detail and the other sellers, which is a real next step.
 *
 * !important because the rule it has to outrank is itself !important.
 */
.product-card .product-bottom .add-btn.is-muted {
    background: #eef1f4 !important;
    color: #5b6775 !important;
    box-shadow: none !important;
}

.product-card .product-bottom .add-btn.is-muted svg,
.product-card .product-bottom .add-btn.is-muted span {
    color: #5b6775 !important;
}

.product-card .product-bottom .add-btn.is-muted:hover {
    background: #e4e8ee !important;
    transform: none;
}

/* The same note on the home strip, whose price block is a plain div. Also
   unused now, and kept for the same reason as the rule above. */
._price_dlezs_12 .price-note {
    display: block;
    margin-top: 2px;
    color: #7a8492;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
}

/* =========================================================================
   THE SECOND SUPPORT BUTTON
   =========================================================================
   The pack ships one floating button and pins it with `position: fixed;
   bottom: 22px; left: 22px`. A second one inherits the same coordinates and
   lands exactly on top of the first.

   So the WRAPPER takes the fixed position and the buttons go static inside
   it. Everything the pack sets on `.whatsapp-floating` — the pill shape, the
   height, the shadow, the hover lift, the icon-only collapse on a phone, the
   lift above the mobile purchase bar — keeps working untouched, because none
   of those depend on it being the positioned element.
   ========================================================================= */
.support-floating {
    position: fixed;
    z-index: 70;
    bottom: 22px;
    left: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.support-floating .whatsapp-floating {
    position: static;
    bottom: auto;
    left: auto;
}

/*
 * Bale's own colour, not WhatsApp's green — two identical pills stacked would
 * read as one control that had been drawn twice. #4a3aff is the design pack's
 * indigo, already used by the mega menu and the magazine hero, so this stays
 * inside the palette rather than introducing a colour.
 */
.support-floating .bale-floating {
    background: #28235c;
    box-shadow: 0 10px 28px #28235c47;
}

/*
 * The pack collapses the button to an icon and moves it up the screen on a
 * phone, via rules on `.whatsapp-floating` itself. The positioning half of
 * those now has to reach the wrapper instead.
 */
@media (max-width: 900px) {
    .support-floating {
        bottom: calc(76px + env(safe-area-inset-bottom));
        left: 12px;
        gap: 8px;
    }

    /* Above the sticky buy bar and the checkout summary, as the pack does. */
    body:has(.mobile-purchase-bar) .support-floating,
    body:has(.journey-cart) .support-floating {
        bottom: calc(148px + env(safe-area-inset-bottom));
    }
}

/* =========================================================================
   THE RELATED-PRODUCTS ARROWS
   =========================================================================
   Sits between the heading and «مشاهده همه» in a flex header whose items are
   spread by `justify-content: space-between`. margin-inline-start:auto pulls
   the arrows across to hug the link instead of floating in the middle — an
   auto margin absorbs the free space before justify-content distributes it.

   The pack's own soft-orange button from the related cards, not
   `.campaign-arrow`: that one is a dark translucent disc made to sit over a
   photograph, and it reads as a hole in a white header.
   ========================================================================= */
.related-products > header > .strip-nav {
    display: flex;
    gap: 8px;
    margin-inline-start: auto;
    margin-inline-end: 14px;
    /* `end`, like the header's own align-items: the title block is tall, so
       `center` floated the arrows above the «مشاهده همه» line they belong on. */
    align-self: end;
}

.related-products > header > .strip-nav[hidden] {
    display: none;
}

.strip-nav > button {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid #f3cfb6;
    border-radius: 50%;
    background: #fff4ea;
    color: #d6531a;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}

.strip-nav > button svg {
    width: 18px;
    height: 18px;
}

.strip-nav > button:hover:not(:disabled) {
    background: #ffe7d3;
}

.strip-nav > button:focus-visible {
    outline: 3px solid #ffb38f;
    outline-offset: 2px;
}

/* At an end: still there, so the pair keeps its shape, but plainly inert. */
.strip-nav > button:disabled {
    opacity: .35;
    cursor: default;
}

/* The strip is focusable so a keyboard can scroll it with the arrow keys;
   show where focus is without the browser's heavy default ring. */
.related-products > div[data-strip]:focus-visible {
    outline: 2px solid #f3cfb6;
    outline-offset: 4px;
    border-radius: 14px;
}

/* On a phone the strip is a thumb-swipe row; the arrows are for a mouse. */
@media (max-width: 720px) {
    .related-products > header > .strip-nav {
        display: none;
    }
}

/* =========================================================================
   THE FORM-RESULT STRIP (layout)
   =========================================================================
   The answer to «ثبت سفارش», «موجود شد خبرم کن» and any other form that
   redirects back. Built from `.journey-callout`, the pack's own notice on the
   basket page, so it reads as the same family.
   ========================================================================= */
.site-flash-wrap {
    display: grid;
    gap: 8px;
    padding-top: 16px;
}

.site-flash {
    margin: 0;
    padding: 13px 16px;
    border-radius: 12px;
    font-weight: 700;
    line-height: 1.8;
}

.site-flash.is-ok {
    color: #0f6b4f;
    background: #eaf8f2;
    border: 1px solid #b9ded2;
}

.site-flash.is-error {
    color: #9a3412;
    background: #fff8ef;
    border: 1px solid #f3c59d;
}

/* =========================================================================
   «موجود شد خبرم کن» ON THE PRODUCT PAGE
   =========================================================================
   Sits in `.purchase-actions` beside the disabled basket button and the call
   button, so it borrows `.primary-buy`'s size and shape and only sets a
   colour: the pack's indigo, which reads as a secondary action next to the
   orange buy button without looking disabled like the button above it.
   ========================================================================= */
.restock-form {
    display: contents;
}

/*
 * The pack's soft-orange secondary — the related cards' basket button — and
 * NOT the indigo it was first given: stacked directly above the navy
 * «تماس برای خرید», the two read as one colour and the page lost any sense of
 * which button mattered. Orange-on-cream is the shop's accent without being
 * the solid orange that means "buy".
 */
.purchase-actions .restock-buy {
    color: #c6531d;
    background: #fff4ea;
    border: 1px solid #f3cfb6;
    cursor: pointer;
}

.purchase-actions .restock-buy:hover {
    background: #ffe7d3;
}

/* Already waiting: the same control, now offering to cancel — quietly. */
.purchase-actions .restock-buy.is-waiting {
    color: #5b6775;
    background: #fff;
    border-color: #dce1e8;
}

/* ==========================================================================
   HOME SLIDER — slides two onwards
   The first slide's heading is the page's only <h1>; the rest are <h2> and
   must look identical, so they copy the pack's `._heroCopy_dlezs_9 h1` rules
   and its two breakpoints.
   ========================================================================== */
._heroCopy_dlezs_9 h2.hero-slide-title{color:var(--b-navy);letter-spacing:-1.5px;margin:10px 0;font-size:46px;font-weight:950;line-height:1.08}
._heroCopy_dlezs_9 h2.hero-slide-title em{color:var(--b-orange);font-style:normal}
@media (max-width:760px){._heroCopy_dlezs_9 h2.hero-slide-title{font-size:39px}}
@media (max-width:390px){._heroCopy_dlezs_9 h2.hero-slide-title{font-size:34px}}

/* ==========================================================================
   HOME BRAND RAIL — eleven brands in one row
   The pack's rail is a fixed nine-column grid, so a tenth and eleventh brand
   wrapped onto a second row. Columns now flow sideways instead: on a wide
   screen all eleven fit; narrower, the row scrolls and the header arrows
   (site.js strips) appear.
   ========================================================================== */
._brandRail_dlezs_35{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(100px,1fr)}
@media (max-width:1100px){._brandRail_dlezs_35{grid-auto-columns:118px}}
@media (max-width:760px){._brandRail_dlezs_35{grid-auto-columns:140px}}
/* A wordmark stands as tall as the pack's logo box, so names line up. */
._brandCard_dlezs_36>strong{min-height:58px}
@media (max-width:1100px){._brandCard_dlezs_36>strong{min-height:54px}}
._sectionHead_dlezs_10>.strip-nav{display:flex;gap:8px;margin-inline-start:auto;margin-inline-end:14px;align-self:end}
._sectionHead_dlezs_10>.strip-nav[hidden]{display:none}

/* ==========================================================================
   «فروشنده شوید» — the strip under the campaigns, and the seller pages
   ========================================================================== */
.campaign-seller{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:84px;padding:12px 18px;border-radius:11px;overflow:hidden;background:var(--b-navy);color:#fff}
.campaign-seller>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.campaign-seller::after{content:"";position:absolute;inset:0;background:linear-gradient(270deg,#0b213bf2 0%,#0b213bd9 48%,#0b213b40 100%)}
.campaign-seller>span,.campaign-seller>em{position:relative;z-index:1}
.campaign-seller>span{display:grid;gap:2px}
.campaign-seller small{color:#ff986f;font-weight:800;font-size:12px}
.campaign-seller b{font-size:15px;font-weight:900;line-height:1.5}
.campaign-seller>em{display:inline-flex;align-items:center;gap:6px;flex:none;font-style:normal;font-weight:900;font-size:13px;background:var(--b-orange);border-radius:7px;padding:8px 12px}
.campaign-seller>em svg{width:16px;height:16px}
@media (max-width:760px){.campaign-seller{flex-direction:column;align-items:flex-start}.campaign-seller b{font-size:14px}}

.seller-landing h1{font-weight:950}
.seller-landing>div>a{align-items:center;gap:6px;color:#fff;font-weight:800;margin-top:10px}
.seller-landing>div>a svg{width:18px;height:18px}
.seller-landing-status{background:#ffffff14;border:1px solid #ffffff26;border-radius:10px;padding:10px 12px}
.seller-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:40px}
.seller-benefits>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px}
.seller-benefits b{display:block;color:var(--ink);font-size:15px;margin-bottom:6px}
.seller-benefits p{margin:0;color:var(--muted);font-size:13px;line-height:1.9}
@media (max-width:1100px){.seller-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.seller-benefits{grid-template-columns:1fr;margin-top:18px}}
.seller-copy{padding-block:0 60px}

.seller-form .seller-type{border:0;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.seller-form .seller-type legend{font-weight:700;color:#3f4854;margin-bottom:6px;padding:0}
.seller-form .seller-type .choice-card{margin:0;cursor:pointer}
.seller-form .seller-type .choice-card input{width:auto}
.seller-form .seller-type em{grid-column:1/-1}
@media (max-width:760px){.seller-form .seller-type{grid-template-columns:1fr}}
.seller-application-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px;max-width:720px}
.seller-application-card h2{margin:10px 0 14px;font-size:22px}
.seller-application-card dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 14px}
.seller-application-card dt{color:var(--muted);font-size:12px}
.seller-application-card dd{margin:2px 0 0;font-weight:700}
.seller-application-card p{margin:0;color:var(--muted)}
.seller-status{display:inline-block;border-radius:999px;padding:4px 12px;font-size:12px;font-weight:800}
.seller-status.is-pending{background:#fff4e5;color:#b45309}
@media (max-width:760px){.seller-application-card dl{grid-template-columns:1fr}}

/* The seller banner as a whole panel, beside the campaigns (home, while no
   product is marked for «پرفروش‌ترین‌ها»). */
.seller-panel{position:relative;display:block;overflow:hidden;padding:0;min-height:360px;color:#fff;background:var(--b-navy)}
.seller-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:28% center}
.seller-panel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b213b00 30%,#0b213bf0 78%)}
.seller-panel>span{position:absolute;z-index:1;inset:auto 22px 22px;display:grid;gap:6px;justify-items:start}
.seller-panel small{color:#ff986f;font-weight:800}
.seller-panel h2{margin:0;font-size:24px;font-weight:950;line-height:1.35}
.seller-panel p{margin:0;color:#dfe6ee;font-size:14px}
.seller-panel b{display:inline-flex;align-items:center;gap:8px;margin-top:6px;background:var(--b-orange);border-radius:8px;padding:10px 16px;font-weight:900}
.seller-panel b svg{width:18px;height:18px}
@media (max-width:760px){.seller-panel{min-height:300px}.seller-panel h2{font-size:20px}}

/* ---------------------------------------------------------------------------
 * THE PROMO STRIP AS A LINK
 *
 * The approved markup is a <div> and the pack styles it as one. Ours is an <a>
 * when the shop gives the announcement a destination — an inline element, so
 * the full-width orange band collapsed to a shrink-wrapped box in the corner.
 * Nothing else about it changes.
 * ------------------------------------------------------------------------ */
a._promoBanner_dlezs_28 { display: block; text-decoration: none; }

/* ---------------------------------------------------------------------------
 * «به سبد خرید اضافه شد» — the confirmation dialog
 *
 * The approved design describes this popup but ships no rules for it (its own
 * preview never added anything to a basket), so it is built from the pack's
 * tokens: the same radius, shadow and buttons as the buy box.
 * ------------------------------------------------------------------------ */
.cart-added {
    /* `margin: auto` is what centres a <dialog>; the RTL page's own margin
       rules otherwise pin it to a corner. */
    margin: auto;
    width: min(420px, calc(100vw - 32px));
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 24px 60px #10263a33;
}

.cart-added::backdrop { background: #10263a66; }
.cart-added h2 { margin: 0 0 6px; font-size: 19px; }
.cart-added p { margin: 0 0 18px; color: var(--muted); line-height: 1.9; }
.cart-added > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.cart-added button,
.cart-added a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 9px;
    font: inherit;
    font-weight: 800;
}

.cart-added .ghost { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.cart-added .primary { color: #fff; background: var(--orange); border: 1px solid var(--orange); }

@media (max-width: 480px) {
    .cart-added > div { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * THE SEARCH BOX OVER A SELECT (garage make/model)
 *
 * Styled as the select it filters, so the pair reads as one control. `.garage-
 * builder label` is a grid, so the box simply becomes another row in it.
 * ------------------------------------------------------------------------ */
.select-filter {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #d9dee6;
    border-radius: 9px;
    background: #fff;
    font: inherit;
}

.select-filter:focus {
    outline: 0;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px #f9731615;
}

/* ---------------------------------------------------------------------------
 * THE ACCOUNT MENU IS A GRID ON A PHONE
 *
 * The pack turns `.customer-nav` into a horizontally scrolling strip below
 * 900px, which hides half the menu off-screen — the owner's correction asks
 * for a grid instead. Everything else about it is the pack's.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .customer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        margin-inline: 0;
        padding: 10px;
        border-inline: 1px solid var(--line);
        border-radius: 16px;
    }

    .customer-nav > a {
        min-width: 0;
        white-space: normal;
        min-height: 48px;
    }

    .customer-nav > button { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------------
 * THE COMPARISON TABLE
 *
 * The design names a compare page but ships no rules for it, so this is built
 * from the pack's tokens — the receipt's card, the catalogue's type. The table
 * scrolls sideways inside its own box rather than widening the page: four
 * columns of Persian part names do not fit a phone, and a page that scrolls
 * horizontally is the one thing the correction document checks for at every
 * width.
 * ------------------------------------------------------------------------ */
.compare-table {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.compare-table table { width: 100%; border-collapse: collapse; min-width: 560px; }
.compare-table th,
.compare-table td { padding: 12px 14px; border-bottom: 1px solid #eef1f4; text-align: start; vertical-align: top; font-size: 13px; }
.compare-table thead th { background: #fafbfc; }
.compare-table thead img { width: 72px; height: 64px; object-fit: contain; display: block; margin-bottom: 6px; }
.compare-table thead b { display: block; font-size: 13px; line-height: 1.7; }
.compare-table tbody th { color: var(--muted); font-weight: 700; white-space: nowrap; }
.compare-table button { margin-top: 8px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font: inherit; font-size: 12px; }

/* The seller form's honeypot: off-screen rather than display:none, because a
   field that is display:none is the first thing a good bot skips. */
.seller-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------------
 * «ورود / ثبت‌نام» — the pair of doors on the auth card (docver7 §5)
 * ------------------------------------------------------------------------ */
.auth-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 16px; }

.auth-switch > a,
.auth-switch > span {
    display: grid;
    place-items: center;
    min-height: 44px;
    border-radius: 10px;
    font-weight: 800;
    border: 1px solid var(--line);
    color: #4b5563;
    background: #fff;
}

.auth-switch > [aria-current='page'] { color: var(--orange-dark); background: #fff2e8; border-color: var(--orange); }

/* ---------------------------------------------------------------------------
 * ELEVEN CATEGORY TILES, NOT EIGHT (docver7 §1)
 * ---------------------------------------------------------------------------
 * The pack drew exactly eight and set `repeat(8,1fr)` for them. Three more were
 * asked for, and eleven in a grid of eight leaves a second row of three jammed
 * against one edge with five empty cells beside it — which reads as a mistake
 * rather than as a design.
 *
 * Flex-wrap with a centred last row keeps the pack's own card size and rhythm
 * at every one of its three breakpoints (8 / 4 / 2) and simply centres whatever
 * is left over. The basis arithmetic subtracts the same gaps the grid used.
 * ------------------------------------------------------------------------ */
._categories_dlezs_11 { display: flex; flex-wrap: wrap; justify-content: center; }

._categories_dlezs_11 > * { flex: 0 1 calc((100% - 7 * 9px) / 8); }

@media (max-width: 1100px) {
    ._categories_dlezs_11 > * { flex-basis: calc((100% - 3 * 9px) / 4); }
}

@media (max-width: 760px) {
    ._categories_dlezs_11 > * { flex-basis: calc((100% - 9px) / 2); }
}

@media (max-width: 390px) {
    ._categories_dlezs_11 > * { flex-basis: calc((100% - 6px) / 2); }
}

/* ---------------------------------------------------------------------------
 * THE MAGAZINE BANNER FILLS ITS HALF (docver7 §1)
 * ---------------------------------------------------------------------------
 * «بنر مجله خبری بزرگتر شود که نصف صفحه را به درستی پر کند».
 *
 * The pack's row is `1.45fr .7fr .7fr` — THREE columns, drawn for three cards.
 * This shop has two of them, so the third column stayed empty and the magazine
 * card was squeezed into a 0.7 share of a row it was sharing with nobody: a
 * small banner with a gap beside it.
 *
 * Two cards, two equal halves. The breakpoints below 1100px already collapse to
 * `1fr 1fr` and then to `1fr`, so only the desktop row needed saying.
 * ------------------------------------------------------------------------ */
._lower_dlezs_14 { grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------------------
 * THE TWO PURCHASE ACTIONS, SIDE BY SIDE AND THE SAME SIZE
 * ---------------------------------------------------------------------------
 * `.purchase-actions` is `display:grid` with no columns, so the orange basket
 * button and the navy phone button stacked — one above the other, the phone one
 * narrower wherever its label was shorter. The second correction document asks
 * for them «side by side in one line, equal height and visually equal size»,
 * and it is right for a reason beyond symmetry: stacked, the call button reads
 * as the lesser option, and on this catalogue the call is how 98% of orders are
 * actually placed.
 *
 * flex rather than two fixed columns because the row sometimes holds a third
 * control — «موجود شد خبرم کن» — and a fixed pair would squash it. A basis of
 * 180px lets a third item wrap onto its own line instead.
 * ------------------------------------------------------------------------ */
.purchase-actions { display: flex; flex-wrap: wrap; align-items: stretch; }

.purchase-actions > * { flex: 1 1 180px; min-width: 0; }

.purchase-actions > form { display: flex; }

.purchase-actions .primary-buy { width: 100%; justify-content: center; }

/* The phone number must not break across lines inside its own button. */
.purchase-actions .call-buy .purchase-phone-number { white-space: nowrap; }

/* ---------------------------------------------------------------------------
 * …AND THE SAME ON THE STICKY MOBILE BAR
 * ------------------------------------------------------------------------ */
.mobile-bar-actions { display: flex; gap: 8px; align-items: stretch; min-width: 0; }

.mobile-bar-actions > * { flex: 1 1 0; min-width: 0; }

.mobile-bar-actions > form { display: flex; }

.mobile-bar-actions button,
.mobile-bar-actions .mobile-call-cta {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.mobile-bar-actions .mobile-call-cta { background: #28235c; color: #fff; border-radius: 10px; font-weight: 800; }

.mobile-bar-actions svg { width: 18px; height: 18px; flex: none; }

/* ---------------------------------------------------------------------------
 * A LONG CATEGORY NAME MUST NOT SHOUT (docver8 §4)
 * ---------------------------------------------------------------------------
 * The identity panel's heading is `clamp(26px, 2.6vw, 40px)`, drawn for names
 * like «لوازم یدکی». This catalogue also has «روغن موتور-هیدرولیک-گیربکس-ترمز»
 * and «واکس - موتور شوی - شیشه شوی و سایر وسایل نظافت», which at 40px fill the
 * whole card in three lines — the «giant multiline child name» the correction
 * document photographs.
 *
 * Applied by name length in the template rather than by `text-overflow`,
 * because truncating a category name loses the half that says which category.
 * ------------------------------------------------------------------------ */
.category-commerce-shell > .catalog-page-head.is-long h1 {
    font-size: clamp(17px, 1.5vw, 24px);
    line-height: 1.5;
}

@media (max-width: 760px) {
    .category-commerce-shell > .catalog-page-head.is-long h1 { font-size: 16px; }
}

/* ---------------------------------------------------------------------------
 * THE ACCOUNT MENU IS A GRID ON A PHONE, NOT A SLIDING STRIP
 * ---------------------------------------------------------------------------
 * Below 900px the pack turns «حساب کاربری»'s sidebar into a horizontally
 * scrolling row. Two problems with that on a real phone: the entries past the
 * third are invisible with nothing to say they exist, and the row competes with
 * the page's own vertical scroll, so half the swipes go the wrong way.
 *
 * A two-column grid shows all of them at once, which is what the second
 * correction document asks for, and it costs nothing — there are seven entries,
 * not seventy.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
    .customer-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        overflow: visible;
    }

    .customer-nav > a {
        white-space: normal;
        min-width: 0;
        border: 1px solid var(--line);
        border-radius: 10px;
    }
}

@media (max-width: 380px) {
    .customer-nav { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
 * «خلاصه سفارش» — ROOM TO READ IT
 * ---------------------------------------------------------------------------
 * The second correction document asks for «more width/height and line spacing»
 * in the basket's summary box, and it is right about why: four figures, a
 * button and a promise in a 330px column at 10px row padding read as one grey
 * block, and the one line that matters — «مبلغ قابل پرداخت» — does not stand
 * out from «هزینهٔ ارسال» above it.
 *
 * A wider column at desktop only; below 900px the layout is already one column
 * and the summary already has the full width.
 * ------------------------------------------------------------------------ */
@media (min-width: 901px) {
    .cart-layout { grid-template-columns: 1fr 380px; }
}

.cart-summary { padding: 24px 22px; }

.cart-summary > div { padding: 13px 0; line-height: 1.9; }

.cart-summary .total { margin-top: 12px; padding-top: 16px; font-size: 1.05em; }

.cart-summary > a { margin: 18px 0 14px; padding: 14px; }

.cart-summary > small { line-height: 1.9; align-items: flex-start; }

.cart-summary > small svg { flex: none; margin-top: 3px; }

/* ===========================================================================
 * «درباره ما» — THIRD CORRECTION DOCUMENT §1
 * ===========================================================================
 * Three blocks: a pale panel with the logo beside the copy, three equal cards,
 * and a ten-step vertical timeline. Everything is built from the site's own
 * tokens — --orange, --line, --muted — so a change to the palette carries.
 * ======================================================================== */
.about-page > section { margin: 22px 0; }

.about-intro {
    display: grid;
    grid-template-columns: 260px 1fr;
    align-items: center;
    gap: 28px;
    padding: 30px 32px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 18px;
}

/* `contain`, never `cover`: the logo has its own whitespace and cropping it
   is the difference between a brand mark and a smudge. */
.about-intro img { width: 100%; height: auto; max-height: 120px; object-fit: contain; }

.about-intro small { color: var(--orange-dark); font-weight: 800; }

.about-intro h1 { margin: 6px 0 12px; font-size: clamp(22px, 2.4vw, 32px); }

.about-intro p { margin: 0; color: #3b4658; line-height: 2.1; font-size: 15px; }

@media (max-width: 860px) {
    .about-intro { grid-template-columns: 1fr; gap: 18px; padding: 22px 18px; text-align: center; }
    .about-intro img { max-height: 84px; }
    .about-intro p { text-align: right; font-size: 14px; }
}

/* --------------------------------------------------------------- benefits */
.about-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.about-benefits article {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px 20px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.about-benefits h2 { margin: 0; font-size: 17px; color: #28235c; }

.about-benefits p { margin: 0; color: var(--muted); line-height: 1.95; font-size: 13px; }

.about-icon,
.shipping-icon,
.shipping-note-icon,
.contact-icon {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fff4ec;
    color: var(--orange-dark);
    flex: none;
}

.about-icon svg, .shipping-icon svg, .shipping-note-icon svg, .contact-icon svg { width: 20px; height: 20px; }

@media (max-width: 860px) {
    .about-benefits { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------- the ten steps */
.about-path {
    max-width: 760px;
    margin-inline: auto;
    padding: 26px 24px;
    background: linear-gradient(180deg, #fff, #fafbfc);
    border: 1px solid var(--line);
    border-radius: 18px;
}

.about-path header { text-align: center; margin-bottom: 18px; }
.about-path header small { color: var(--orange-dark); font-weight: 800; }
.about-path header h2 { margin: 6px 0 6px; font-size: clamp(19px, 2vw, 25px); }
.about-path header p { margin: 0; color: var(--muted); font-size: 13px; }

.about-steps { list-style: none; margin: 0; padding: 0; position: relative; }

/*
 * The connector is ONE pseudo-element behind the whole list rather than a
 * border on each row: a per-row border leaves a hairline gap at every joint,
 * and at 10 rows that reads as a dashed line nobody asked for.
 *
 * `right: 29px` puts it through the middle of the 60px icon column in RTL, and
 * the inset top/bottom stop it poking out of the first and last circles.
 */
.about-steps::before {
    content: "";
    position: absolute;
    top: 30px;
    bottom: 30px;
    right: 29px;
    width: 2px;
    background: #e6eaf0;
    z-index: 0;
}

.about-steps li {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 60px 34px 1fr;
    align-items: center;
    gap: 12px;
    min-height: 76px;
}

.about-steps i {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e9f6f0;
    color: #0f7a55;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d6ece2;
}

.about-steps i svg { width: 24px; height: 24px; }

.about-steps b { color: var(--orange); font-size: 19px; font-weight: 800; text-align: center; }

.about-steps span { color: #28235c; font-weight: 700; font-size: 15px; }

@media (max-width: 520px) {
    .about-path { padding: 18px 14px; }
    .about-steps li { grid-template-columns: 48px 26px 1fr; min-height: 64px; gap: 9px; }
    .about-steps i { width: 48px; height: 48px; }
    .about-steps i svg { width: 20px; height: 20px; }
    .about-steps::before { right: 23px; top: 24px; bottom: 24px; }
    .about-steps span { font-size: 13px; }
}

.about-shop-copy { margin-top: 26px; }

/* ===========================================================================
 * «تماس با ما» — §2
 * ======================================================================== */
.contact-page > section { margin: 22px 0; }

.contact-head small { color: var(--orange-dark); font-weight: 800; }
.contact-head h1 { margin: 6px 0 8px; font-size: clamp(22px, 2.4vw, 31px); }
.contact-head p { margin: 0; color: var(--muted); }

.contact-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }

.contact-cards a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    color: #28235c;
    transition: border-color .18s ease, transform .18s ease;
}

.contact-cards a:hover,
.contact-cards a:focus-visible { border-color: var(--orange); transform: translateY(-1px); }

.contact-cards small { color: var(--muted); font-size: 12px; }
.contact-cards b { font-size: 15px; }

@media (max-width: 900px) { .contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .contact-cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------ address + the map */
.contact-where { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }

.contact-details,
.contact-map {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden;
}

.contact-details { display: flex; flex-direction: column; padding: 24px 22px; }
.contact-details small { color: var(--orange-dark); font-weight: 800; }
.contact-details h2 { margin: 6px 0 14px; font-size: 20px; }

.contact-details dl { margin: 0; display: flex; flex-direction: column; }
.contact-details dl > div { padding: 14px 0; border-bottom: 1px solid var(--line); }
.contact-details dl > div:last-of-type { border-bottom: 0; }

.contact-details dt {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--orange-dark);
    font-weight: 800;
    font-size: 13px;
    margin-bottom: 5px;
}

.contact-details dt svg { width: 17px; height: 17px; }
.contact-details dd { margin: 0; color: #35405a; line-height: 1.95; font-size: 14px; }

.contact-map-cta {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 48px;
    border-radius: 12px;
    background: #28235c;
    color: #fff;
    font-weight: 800;
}

.contact-map-cta svg { width: 18px; height: 18px; }

/* The frame itself. A minimum height rather than a fixed one, so it still
   fills the column when the details panel beside it is taller. */
.contact-map { position: relative; min-height: 470px; }
.contact-map iframe { display: block; width: 100%; height: 100%; min-height: 470px; border: 0; }

.contact-map-open {
    position: absolute;
    inset-inline-end: 12px;
    inset-block-end: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 13px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--line);
    color: #28235c;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
}

.contact-map-open svg { width: 15px; height: 15px; }

@media (max-width: 900px) {
    /* Details before the map, as the document asks: the address and the hours
       are what somebody came for; the map is 360px they would have to scroll. */
    .contact-where { grid-template-columns: 1fr; }
    .contact-map, .contact-map iframe { min-height: 360px; }
}

/* ===========================================================================
 * «رویه ارسال سفارش» — §3
 * ======================================================================== */
.shipping-page > section { margin: 22px 0; }

.shipping-hero {
    display: grid;
    grid-template-columns: 120px 1fr;
    align-items: center;
    gap: 26px;
    padding: 30px 32px;
    border-radius: 20px;
    background: linear-gradient(115deg, #16283f, #1d4b53);
    color: #fff;
}

.shipping-hero-art { display: grid; place-items: center; color: var(--orange); }
.shipping-hero-art svg { width: 84px; height: 84px; }

.shipping-hero small { color: #ffad5d; font-weight: 800; }
.shipping-hero h1 { margin: 8px 0 12px; font-size: clamp(21px, 2.4vw, 31px); }
.shipping-hero p { margin: 0 0 20px; color: #dce5f4; line-height: 2.05; font-size: 15px; max-width: 62ch; }

.shipping-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.shipping-hero-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    font-weight: 800;
}

.shipping-hero-actions .primary { background: var(--orange); color: #fff; }
.shipping-hero-actions .ghost { border: 1px solid rgba(255, 255, 255, .55); color: #fff; }

@media (max-width: 760px) {
    .shipping-hero { grid-template-columns: 1fr; padding: 22px 18px; gap: 14px; }
    .shipping-hero-art svg { width: 56px; height: 56px; }
    .shipping-hero-actions a { flex: 1 1 160px; }
}

/* ----------------------------------------------------------- the methods */
.shipping-methods,
.shipping-timeline { padding: 24px 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; }

.shipping-methods header small,
.shipping-timeline header small { color: var(--orange-dark); font-weight: 800; }

.shipping-methods header h2,
.shipping-timeline header h2 { margin: 6px 0 18px; font-size: clamp(18px, 2vw, 24px); }

.shipping-methods > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.shipping-methods article {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
}

.shipping-methods em {
    align-self: flex-start;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    color: #0f7a55;
    background: #e9f6f0;
    border-radius: 999px;
    padding: 5px 11px;
}

.shipping-methods h3 { margin: 0; font-size: 17px; color: #28235c; }
.shipping-methods p { margin: 0; color: var(--muted); line-height: 1.95; font-size: 13px; }

@media (max-width: 860px) { .shipping-methods > div { grid-template-columns: 1fr; } }

/* --------------------------------------------------------- the five steps */
.shipping-timeline ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    position: relative;
}

/* One horizontal connector behind the row, inset so it starts and ends inside
   the first and last circles rather than floating past them. */
.shipping-timeline ol::before {
    content: "";
    position: absolute;
    top: 26px;
    right: 10%;
    left: 10%;
    height: 2px;
    background: #e6eaf0;
    z-index: 0;
}

.shipping-timeline li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    padding: 0 6px;
}

.shipping-timeline b {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #e9f6f0;
    color: #0f7a55;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d6ece2;
    font-size: 18px;
    font-weight: 800;
}

.shipping-timeline span { color: #28235c; font-weight: 700; font-size: 13px; line-height: 1.7; }

@media (max-width: 760px) {
    /* Vertical on a phone, with the connector turned on its side. */
    .shipping-timeline ol { grid-template-columns: 1fr; }
    .shipping-timeline ol::before { top: 26px; bottom: 26px; right: 25px; left: auto; width: 2px; height: auto; }
    .shipping-timeline li { flex-direction: row; align-items: center; gap: 12px; text-align: right; min-height: 68px; }
    .shipping-timeline b { width: 44px; height: 44px; flex: none; }
}

/* ------------------------------------------------------------- the notes */
.shipping-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.shipping-notes article {
    display: flex;
    gap: 12px;
    padding: 20px 18px;
    background: var(--soft);
    border: 1px solid var(--line);
    border-radius: 16px;
}

.shipping-notes h3 { margin: 0 0 6px; font-size: 15px; color: #28235c; }
.shipping-notes p { margin: 0; color: var(--muted); line-height: 1.95; font-size: 13px; }

@media (max-width: 860px) { .shipping-notes { grid-template-columns: 1fr; } }

/* ===========================================================================
 * EVERY CARD IN A ROW ENDS ITS BUTTON AT THE SAME LINE — §6
 * ===========================================================================
 * The three states already look right on their own. What was wrong is WHERE
 * they sat: the action is the last thing in the card's flow, so a two-line
 * product name pushed it down and its neighbour's button sat higher. In a grid
 * of four that reads as four different components.
 *
 * Three rules fix it, and they are presentation only — nothing here decides
 * whether a product can be bought:
 *
 *   1. the card fills its grid cell, so all cards in a row are equal height;
 *   2. `.product-bottom` is pushed to the bottom of that height;
 *   3. every action — orange basket, grey ناموجود, navy phone — gets the same
 *      box: full width, 48px tall, same radius, padding and type scale.
 * ======================================================================== */
.product-card { height: 100%; }

.product-card .product-bottom { margin-top: auto; }

/*
 * The information line above the action keeps a reserved height, so a card
 * showing «۱٬۲۵۰٬۰۰۰ تومان» and one showing «تماس بگیرید» still put their
 * buttons on the same line.
 */
.product-card .product-bottom .price { min-height: 46px; }

/* The navy phone action, matched to the orange one the pack already sizes. */
.product-card .product-bottom .product-call-cta,
.product-card .product-bottom .add-btn.is-muted {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    height: 48px;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.3;
    justify-content: center;
    align-items: center;
    gap: 9px;
    white-space: nowrap;
    overflow: hidden;
}

.product-card .product-bottom .product-call-cta svg,
.product-card .product-bottom .add-btn.is-muted svg { flex: 0 0 21px; width: 21px; height: 21px; }

/* The number itself must never wrap onto a second line. */
.product-card .product-bottom .product-call-cta bdi { flex: none; }

/* The form around the basket button is a layout box like any other. */
.product-card .product-bottom > form { display: block; width: 100%; }

/* …and the disabled state keeps the same box, visibly disabled. */
.product-card .product-bottom .add-btn:disabled {
    background: #e5e7eb !important;
    color: #6b7280 !important;
    box-shadow: none !important;
    cursor: not-allowed;
}

.product-card .product-bottom .add-btn:disabled svg { color: #6b7280 !important; }

@media (max-width: 430px) {
    /* Narrow phones: same rules, one notch smaller, still the same line. */
    .product-card .product-bottom .price { min-height: 40px; }

    .product-card .product-bottom .add-btn,
    .product-card .product-bottom .product-call-cta,
    .product-card .product-bottom .add-btn.is-muted {
        height: 46px !important;
        min-height: 46px;
        font-size: 13px !important;
        padding: 0 12px !important;
    }
}

/* ---------------------------------------------------------------------------
 * …AND THE SAME ON THE HOME PAGE'S OWN CARD
 * ---------------------------------------------------------------------------
 * The home rails use the pack's `._product_dlezs_12` card, a different partial
 * with the same three states. Its action row gets the same treatment: pinned to
 * the bottom of an equal-height card, one box size for all three states.
 * ------------------------------------------------------------------------ */
._product_dlezs_12 { height: 100%; }

._productBody_dlezs_12 { display: flex; flex-direction: column; height: 100%; }

._productActions_dlezs_12 { margin-top: auto; }

._productActions_dlezs_12 > form { display: block; width: 100%; }

._productActions_dlezs_12 > form > button,
._productActions_dlezs_12 > a,
._productActions_dlezs_12 > button {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    justify-content: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
}

._productActions_dlezs_12 .product-call-cta { background: #28235c; color: #fff; border-radius: 9px; font-weight: 800; }

._productActions_dlezs_12 > button:disabled {
    background: #e5e7eb;
    color: #6b7280;
    border: 0;
    border-radius: 9px;
    font-weight: 800;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
 * THE TWO ADDRESS LABELS STAY ON ONE LINE — FOURTH DOCUMENT §2
 * ---------------------------------------------------------------------------
 * The markup fix above is what stops «آدرس مغازه» and «آدرس دفتر مرکزی»
 * breaking; this makes it impossible to break them again by accident at a
 * narrower width or in a longer label. Only the LABEL is held together — the
 * address after it wraps as it always did.
 * ------------------------------------------------------------------------ */
.footer-contact .footer-address { min-width: 0; }

.footer-contact .footer-address b { white-space: nowrap; }

/* ===========================================================================
 * THE HERO CONTROLS MUST NOT SIT ON ANYTHING — HERO SYNCHRONISATION DOCUMENT
 * ===========================================================================
 * The control pill is pinned to the bottom of the hero (`bottom: 12px`). At
 * 1440px that is empty space. Everywhere narrower it is not, and it was
 * measured landing on two different things:
 *
 *   1100px and 900px — on the orange CTA
 *   760px and below  — on the vehicle card
 *
 * The document forbids both: «Pagination dots must not overlap the heading,
 * descriptive text, benefits, vehicle information or CTA».
 *
 * Padding rather than moving the pill. `bottom` is measured from the
 * containing block's PADDING box, so bottom padding pushes the content up and
 * carries the pill down with the box — the pill keeps the position the design
 * gave it and simply stops having anything underneath it. The pill is 37px and
 * sits 12px off the edge, so 64px leaves a 15px gap.
 * ======================================================================== */
/*
 * Two bands, because the hero is two different layouts.
 *
 * 761–1200px — the grid keeps its 3.1 aspect ratio and the copy column widens
 * from 41% to 48%, which walks the orange CTA into the middle where the pill
 * is. Measured at five widths, the free lane is between the copy's right edge
 * and the vehicle card, so the pill is anchored to the copy's edge instead of
 * to the centre. At 768px that lane is 181px wide for a 149px pill, which is
 * the tightest it gets and still clears both.
 *
 * 760px and below — the grid becomes `aspect-ratio: auto` and everything
 * stacks in flow, so bottom padding is enough: it lengthens the padding box,
 * the pill rides down with it, and the vehicle card above it is left alone.
 */
@media (min-width: 761px) and (max-width: 1200px) {
    ._heroCarouselControls_dlezs_23 { left: 48%; right: auto; transform: none; }
}

@media (max-width: 760px) {
    ._heroGrid_dlezs_9 { padding-bottom: 64px; }
}

/* ---------------------------------------------------------------------------
 * THE HERO CONTROLS ARE BIGGER THAN THEY LOOK
 * ---------------------------------------------------------------------------
 * Measured on a phone: each dot is a 9×9px button with no padding, so the real
 * tap area is about 10×10 — and the previous/next buttons shrink to 23×23
 * below 760px. The synchronisation document asks for «usable touch targets».
 *
 * The dots keep the size the design drew them; an invisible ::after does the
 * catching. Its width is capped at the 15px pitch between two dots (9px + the
 * 6px gap) so no dot can ever steal its neighbour's tap — a hit area that
 * overlaps is worse than a small one, because it activates the wrong car.
 * Height is free, so it takes 30px.
 *
 *   dot        9×9   ->  15×30   (81px² -> 450px²)
 *   prev/next  23×23 ->  30×30   (529px² -> 900px²)
 *
 * Not the 44px an icon button would get: the pill is 35px tall and the design
 * is what it is. This is as much as can be taken without moving anything.
 * ------------------------------------------------------------------------ */
._heroCarouselControls_dlezs_23 button { position: relative; }

._heroCarouselControls_dlezs_23 button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 30px;
}

._heroCarouselControls_dlezs_23 button:first-child::after,
._heroCarouselControls_dlezs_23 button:last-child::after {
    width: 30px;
    height: 30px;
}

/* The active dot is 26px wide; its catcher grows with it rather than leaving
   two dead strips on a target that is already the easiest one to hit. */
._heroCarouselControls_dlezs_23 button._current_dlezs_9::after { width: 100%; }

/* ---------------------------------------------------------------------------
 * The garage glyph, for a shopper whose car this shop has no photograph of.
 * ------------------------------------------------------------------------ */
.vehicle-card-glyph {
    display: grid;
    place-items: center;
    width: 100%;
    min-height: 90px;
    color: var(--orange);
}

.vehicle-card-glyph svg { width: 52px; height: 52px; }

/* ---------------------------------------------------------------------------
 * THE FAVOURITE HEART ON THE HOME CARD — docver8 §1
 * ---------------------------------------------------------------------------
 * «جای دکمه علاقه مندی هم در نمای صفحه اصلی خوب نیست و روی عکس محصول رفته است».
 *
 * Measured, the complaint is exact. The catalogue card and the home card put
 * the heart in OPPOSITE corners — `.favorite` at left:8px, `._fav_dlezs_12` at
 * right:7px — which on an RTL page is as far apart as two corners get. And the
 * home card has no padding at all while the catalogue card has 8px, so on the
 * catalogue the heart sits in a gutter and on the home page it sits on the
 * photograph itself, over a 60%-transparent white that lets the picture show
 * through it.
 *
 * Three changes, no layout move:
 *   - same corner as the catalogue card, so the two cards agree;
 *   - opaque white and a soft shadow, so it reads as a control ABOVE the
 *     picture rather than a smudge on it;
 *   - 10px in and 30px across, comfortably tappable and clear of the edge.
 *
 * It still overlays the image, because that is what the approved design does on
 * both cards and moving it into the card body would change the layout. If the
 * owner wants it beside the title instead, that is a different change and a
 * bigger one.
 * ------------------------------------------------------------------------ */
._fav_dlezs_12 {
    inset-inline-start: 10px;
    inset-inline-end: auto;
    width: 30px;
    height: 30px;
    background: #fff;
    box-shadow: 0 1px 4px rgb(16 24 40 / 18%);
    border: 0;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #66707d;
    transition: color .15s ease, box-shadow .15s ease;
}

._fav_dlezs_12 svg { width: 17px; height: 17px; }

._fav_dlezs_12:hover { color: var(--orange, #f60); }

/* Saved: the heart fills, the same signal the catalogue card gives. */
._fav_dlezs_12.active { color: #e0245e; }
._fav_dlezs_12.active svg { fill: currentColor; }

/* The form wrapper must not become a layout box of its own — the heart is
   positioned against the card, and a block-level <form> between them would
   take a row in the card's flow. */
._product_dlezs_12 form[data-favorite-form] { display: contents; }

/* ===========================================================================
 * THE CHECKOUT'S ADDRESS AND SHIPPING STEPS — docver8 §8 and §10
 * ===========================================================================
 * «UI خیلی ضعیف است در صفحه مشاهده آدرسها، فونتها ریز، align ها center، این
 *  قسمت دوباره بازبینی شود» — and «UI صفحه روشهای ارسال هم مثل صفحه آدرس ها».
 *
 * The complaint is one CSS accident, not a page that was designed badly.
 *
 * The pack was authored for a React demo whose forms never posted, so
 * `.journey-form` assumed it held only text inputs and `.choice-card` only ever
 * appeared outside a form. Put the radio cards INSIDE the form — which a real
 * checkout must — and two generic rules outrank the component:
 *
 *   .journey-form label   (0,1,1)  beats  .choice-card  (0,1,0)
 *       → display:grid replaces display:flex, so the radio stops sitting
 *         beside its text and stacks above it, and font-weight:700 turns the
 *         card's body copy into a field label.
 *   .journey-form input   (no type filter)
 *       → width:100% plus a field border and padding on every radio, so each
 *         one becomes a full-width bordered box.
 *
 * Somebody already hit exactly this on the seller page and patched it there
 * (`.seller-form .seller-type …` above), which is why that one page looks right
 * and the checkout does not. This is the same fix, scoped to the component
 * instead of to one page, so any future form gets it too.
 * ======================================================================== */
.journey-form label.choice-card,
.seller-form label.choice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 68px;
    font-weight: 400;
    color: var(--ink);
    cursor: pointer;
}

/* A radio is not a text field. The pack's input rule has no type filter, so it
   dressed every one of them as a bordered 100%-wide box. */
.journey-form input[type="radio"],
.journey-form input[type="checkbox"],
.seller-form input[type="radio"],
.seller-form input[type="checkbox"] {
    width: auto;
    min-width: 0;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    accent-color: var(--orange, #f60);
}

/* ---------------------------------------------------------------------------
 * «فونتها ریز»
 * ---------------------------------------------------------------------------
 * The step headings sit OUTSIDE `.journey-form`, so site-extras' 17px rule for
 * form labels never reached them, and Tailwind's preflight sets `h1..h6` to
 * `font-size: inherit` — so they rendered at body size with no hierarchy at
 * all. These are the sizes the rest of the site already uses for a panel
 * heading and its supporting line.
 * ------------------------------------------------------------------------ */
.checkout-journey > section > h2,
.checkout-journey > section > header h2 {
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 4px;
    line-height: 1.6;
}

.checkout-journey > section > p,
.checkout-journey > section > header p {
    font-size: 14px;
    color: var(--muted);
    margin: 0 0 18px;
    line-height: 1.9;
}

.journey-form label > span {
    font-size: 14px;
    color: #3f4854;
}

.journey-form input,
.journey-form select,
.journey-form textarea {
    font-size: 15px;
}

/* ---------------------------------------------------------------------------
 * The line under each shipping or payment option — 11px was too small to read
 * a delivery promise in.
 *
 * The selector is longer than it looks like it needs to be. An earlier rule in
 * THIS file, `.journey-form label small`, is (0,1,2) and a bare
 * `.choice-card small` is (0,1,1) — so the obvious version lost, silently, to
 * a neighbour thirty lines up. The browser was asked which rules matched
 * rather than guessed at, which is the only way that kind of near-miss shows
 * itself.
 * ------------------------------------------------------------------------ */
.journey-form label.choice-card small,
.journey-form label.choice-card em,
.seller-form label.choice-card small,
.choice-card small,
.choice-card em {
    font-size: 13px;
    line-height: 1.8;
    color: var(--muted);
    font-style: normal;
}

/* ---------------------------------------------------------------------------
 * «align ها center»
 * ---------------------------------------------------------------------------
 * `.checkout-journey > section` is `max-width:850px; margin:auto`, a narrow
 * card floated in the middle of an 1180px container. That is the centring the
 * owner is describing — the content inside it is not centred, the panel is.
 *
 * Widened to 1040px and its text explicitly start-aligned, so the two-column
 * form has room and nothing inherits a stray centre from an ancestor. Still a
 * contained panel rather than full width: a checkout that spans a wide monitor
 * makes the eye travel from a field label on one edge to its input on the
 * other.
 * ------------------------------------------------------------------------ */
.checkout-journey > section {
    max-width: 1040px;
    text-align: start;
}

.checkout-journey > section > h2,
.checkout-journey > section > p,
.checkout-journey .journey-form { text-align: start; }

@media (max-width: 760px) {
    .checkout-journey > section { padding: 16px; }
    .checkout-journey > section > h2 { font-size: 18px; }
}

/* ===========================================================================
 * CHOOSING SEVERAL MAKES — docver8 §25
 * ===========================================================================
 * Built by site.js §4d in front of a native <select multiple> that stays the
 * thing which posts. Everything here styles generated markup, so a scriptless
 * visitor sees none of it and gets the plain list instead.
 * ======================================================================== */
.make-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
    min-height: 32px;
    align-items: center;
}

.make-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff3ea;
    border: 1px solid #ffd3b5;
    color: var(--orange-dark, #c2410c);
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    font-size: 13px;
    font-weight: 700;
}

.make-chip button {
    all: unset;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #ffd3b5;
    color: #7c2d12;
    font-size: 14px;
    line-height: 1;
}

.make-chip button:hover { background: var(--orange, #f60); color: #fff; }

.make-chip-empty { color: var(--muted); font-size: 13px; }

.make-search { width: 100%; }

.make-suggestions {
    list-style: none;
    margin: 6px 0 0;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: #fff;
    box-shadow: 0 6px 18px rgb(16 24 40 / 10%);
    max-height: 240px;
    overflow-y: auto;
}

.make-suggestions li { margin: 0; }

.make-suggestions button {
    all: unset;
    display: block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 7px;
    font-size: 14px;
    color: var(--ink);
}

.make-suggestions button:hover,
.make-suggestions button:focus-visible { background: #fff3ea; color: var(--orange-dark, #c2410c); }

/* ---------------------------------------------------------------------------
 * THE MEGA MENU'S CATEGORY LABEL — docver8 §17
 * ---------------------------------------------------------------------------
 * Was `._megaIntro_dlezs_7 h2`, which contributed nothing but `margin:8px 0`
 * — the reset already sets h1..h6 to inherit, so it computed to 15px/400,
 * exactly like the text around it. The tag is gone (see header.blade.php) and
 * these are the values it computed to, so nothing moves.
 * ------------------------------------------------------------------------ */
._megaIntro_dlezs_7 .mega-category-name {
    margin: 8px 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.7;
}

/* ===========================================================================
 * A BLOCKED CHOICE HAS TO LOOK BLOCKED
 * ===========================================================================
 * The checkout's payment and shipping steps mark an unavailable option with
 * `is-disabled` on the label — `@class(['is-disabled' => $option['disabled']])`
 * — and NOTHING in any of the three stylesheets ever styled that class. Grepped
 * all of site.css, site-pack.css and this file: zero rules.
 *
 * So a blocked option rendered exactly like a live one. The radio inside it
 * carries the real `disabled` attribute, so clicking did nothing at all, and
 * the reason was printed in the same small grey `<small>` that every other
 * option uses for its ordinary hint. Nothing greyed, nothing struck through,
 * no icon, no change of tone.
 *
 * That is how the shop's owner came to report «نه پیغامی میدهد و نه فعال می شود»
 * — neither a message nor an enabled control. Both halves were true from where
 * he was sitting: the control refused silently, and the explanation did not
 * read as an explanation.
 *
 * Three signals, because one is easy to miss: the card recedes, the cursor says
 * no, and the reason is styled as a warning rather than a hint.
 * ======================================================================== */
.journey-form label.choice-card.is-disabled,
.choice-card.is-disabled {
    background: #f7f8fa;
    border-color: #e3e7ed;
    border-style: dashed;
    cursor: not-allowed;
}

/* The label text stops competing with the options that ARE available. */
.choice-card.is-disabled > span > b,
.choice-card.is-disabled b {
    color: #98a1ad;
    font-weight: 700;
}

/*
 * The reason, as a warning. Same 13px as an ordinary sub-line so it does not
 * shout, but amber and carrying a mark, so it reads as «this is why you cannot
 * pick this» rather than «here is a note about this».
 */
.journey-form label.choice-card.is-disabled small,
.choice-card.is-disabled small {
    color: #a1620a;
    font-weight: 600;
}

.choice-card.is-disabled small::before {
    content: "⚠ ";
    font-weight: 700;
}

/* The radio itself: visibly inert rather than merely unresponsive. */
.journey-form .choice-card.is-disabled input[type="radio"],
.choice-card.is-disabled input[type="radio"] {
    opacity: .45;
    cursor: not-allowed;
}

/* ===========================================================================
 * THE PAYMENT STATE ON A CUSTOMER'S ORDER
 * ===========================================================================
 * The order page never mentioned payment at all — searched for «پرداخت» and
 * «payment» in account/order.blade.php and found nothing. A customer with an
 * unpaid online order saw the order, its timeline and its total, and no way to
 * tell whether the money had been taken or how to pay it.
 * ======================================================================== */
.paid-yes { color: #15803d; }
.paid-no  { color: #a1620a; }

/* ---------------------------------------------------------------------------
 * «این سفارش پرداخت نشده است» — the way back to the bank.
 * route('shop.payment.start') appeared exactly once in all of resources/views,
 * on the thank-you page, so closing that tab left no route to payment at all.
 * ------------------------------------------------------------------------ */
.order-pay-again {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    background: #fff8f1;
    border: 1px solid #ffd3b5;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.order-pay-again b { display: block; color: #7c2d12; font-size: 15px; }

.order-pay-again p {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
}

.order-pay-again form { margin: 0; }

.order-pay-again button {
    background: var(--orange, #f60);
    color: #fff;
    border: 0;
    border-radius: 9px;
    padding: 11px 22px;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
}

.order-pay-again button:hover { background: var(--orange-dark, #c2410c); }

@media (max-width: 560px) {
    .order-pay-again { flex-direction: column; align-items: stretch; }
    .order-pay-again button { width: 100%; }
}

/* ===========================================================================
 * A PAYMENT THAT HAS NOT HAPPENED MUST NOT LOOK LIKE ONE THAT HAS
 * ===========================================================================
 * `thanks.blade.php` put `is-pending` on the confirmation banner for an order
 * that still owes money, and NO stylesheet defined it — grepped site.css,
 * site-pack.css and this file; the only match was `.seller-status.is-pending`,
 * a different component. So a refused card, a cancelled payment and a
 * successful one all rendered in the same green panel with the same green tick,
 * while the sentence underneath said the opposite.
 *
 * Amber, not red: the order is fine and the money simply is not here yet. Red
 * would say something had gone wrong, and for a customer who chose to pay later
 * nothing has.
 * ======================================================================== */
.order-confirmed.is-pending {
    background: linear-gradient(135deg, #fff8f1, #fff);
    border-color: #ffd3b5;
    box-shadow: 0 14px 34px rgb(161 98 10 / 7%);
}

.order-confirmed.is-pending > svg {
    background: #b45309;
    color: #fff;
}

.order-confirmed.is-pending small { color: #a1620a; }

/* ---------------------------------------------------------------------------
 * The four-stage timeline, for an order that is paid online.
 * The pack drew three; an online order has a payment stage the other does not,
 * and squeezing it into three was why the payment was never shown at all.
 * ------------------------------------------------------------------------ */
.order-timeline.four-stage { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 760px) {
    .order-timeline.four-stage { grid-template-columns: 1fr 1fr; }
}

/* ===========================================================================
 * THE CHECKOUT PROGRESS RAIL — «استیت فلو ها بسیار زشت است»
 * ===========================================================================
 * Not taste. A specificity collision between two of the three stylesheets.
 *
 *   site.css       .checkout-journey>nav button.active     (0,2,1)
 *                    { border-color: var(--orange); color: var(--orange-dark) }
 *   site-pack.css  .checkout-journey>nav button:disabled   (0,2,1)
 *                    { opacity: .48; color: #9ba2ac; border-color: #e7e9ed }
 *
 * Equal specificity, and site-pack.css is linked AFTER site.css
 * (layout.blade.php:160 then :176) — so `:disabled` wins. And the template
 * renders the step you are on as `<button class="active" disabled>`, which means
 * THE CURRENT STEP WAS ALWAYS THE FAINTEST THING ON THE RAIL: grey, at 48%
 * opacity, with the orange underline overwritten. The steps behind it were bare
 * browser links, because nothing in any of the three files styles
 * `.checkout-journey > nav a` at all.
 *
 * So the one thing the rail existed to communicate — where you are — was the one
 * thing it hid.
 * ======================================================================== */

/* Completed steps: real links, not underlined browser default. */
.checkout-journey > nav a,
.seller-form > nav a {
    color: #3f4854;
    background: 0 0;
    border: 0;
    border-bottom: 3px solid #cfd5dd;
    padding: 12px 5px;
    min-width: 115px;
    text-decoration: none;
    display: block;
    text-align: center;
    transition: color .18s ease, border-color .18s ease;
}

.checkout-journey > nav a:hover { color: var(--orange-dark, #c2410c); border-bottom-color: #ffd3b5; }

/* A completed step's number becomes a tick, in the pack's own circle. */
.checkout-journey > nav a > i {
    background: #d1fae5;
    color: #087a55;
    font-weight: 800;
}

/* ---------------------------------------------------------------------------
 * THE CURRENT STEP. `!important` is not decoration here: the rule being beaten
 * is an equal-specificity `:disabled` in a later stylesheet, and this element is
 * `class="active" disabled` at the same time. Raising specificity alone cannot
 * win against a rule that matches the same element on the same attribute.
 * ------------------------------------------------------------------------ */
.checkout-journey > nav button.active:disabled,
.seller-form > nav button.active:disabled {
    opacity: 1 !important;
    color: var(--orange-dark, #c2410c) !important;
    border-bottom-color: var(--orange, #f60) !important;
    font-weight: 800;
    cursor: default;
}

.checkout-journey > nav button.active:disabled > i {
    background: var(--orange, #f60);
    color: #fff;
    font-weight: 800;
    /* A quiet pulse the first time the step appears, so the eye is told where to
       go without anything moving on the page. */
    animation: checkout-step-in .42s ease-out both;
}

/* Steps not yet reached stay faint — which is what `:disabled` was FOR. */
.checkout-journey > nav button:not(.active):disabled {
    opacity: .48;
    color: #9ba2ac;
}

@keyframes checkout-step-in {
    from { transform: scale(.72); opacity: .35; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ---------------------------------------------------------------------------
 * A CHOSEN OPTION LOOKS CHOSEN
 * ---------------------------------------------------------------------------
 * `.choice-card:has(input:checked)` appears in none of the three stylesheets, so
 * the only signal that a delivery method or a payment method had been picked was
 * the native radio dot — 13px, grey, at the far edge of a 68px card.
 * ------------------------------------------------------------------------ */
.choice-card:has(input:checked) {
    border-color: var(--orange, #f60);
    background: #fff8f1;
    box-shadow: 0 0 0 3px rgb(249 115 22 / 9%);
}

.choice-card:has(input:checked) b { color: var(--orange-dark, #c2410c); }

.choice-card { transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }

/* …and a disabled card can never look chosen, whatever the markup says. */
.choice-card.is-disabled:has(input:checked) {
    border-color: #e3e7ed;
    background: #f7f8fa;
    box-shadow: none;
}

.choice-card.is-disabled:has(input:checked) b { color: #98a1ad; }

/* ---------------------------------------------------------------------------
 * REDUCED MOTION
 * ---------------------------------------------------------------------------
 * site-extras.css carried zero of these blocks before today. Everything above
 * that moves is decoration over a state change that is also carried by colour,
 * so removing the movement loses nothing.
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .checkout-journey > nav button.active:disabled > i { animation: none; }

    .checkout-journey > nav a,
    .choice-card { transition: none; }
}

/* ===========================================================================
 * «کارت به کارت» — THE NUMBER IS THE POINT OF THE PANEL
 * ===========================================================================
 * Everything here serves one act: reading sixteen digits off a screen and
 * typing them into a banking app, usually on a phone, usually while switching
 * between two apps and losing the page in between.
 *
 * So the number is set at 22px in a tabular font with wide letter-spacing and
 * `user-select: all`, which makes one tap select the whole thing. Nothing else
 * on the panel is allowed to compete with it: the heading is 15px, the labels
 * are 12px.
 *
 * Amber like `.order-pay-again`, for the same reason — money is owed, and
 * nothing has gone wrong. Red would say something had.
 * ======================================================================== */
.card-transfer {
    background: #fffbf5;
    border: 1px solid #ffd3b5;
    border-radius: 16px;
    padding: 18px 20px 16px;
    margin: 0 0 18px;
}

.card-transfer > h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 15px;
    font-weight: 800;
    color: #7c2d12;
}

.card-transfer > h2 svg { width: 19px; height: 19px; flex: none; color: #ea8a3c; }

.card-transfer > p {
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 2;
    color: var(--muted, #6b7280);
}

.card-transfer > p strong { color: #7c2d12; font-weight: 800; }

/* ------------------------------------------------------------------ the rows */
.card-transfer-details {
    display: grid;
    gap: 10px;
    margin: 0 0 14px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #f0e2d4;
    border-radius: 12px;
}

.card-transfer-details > div {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: baseline;
    justify-content: space-between;
}

.card-transfer-details dt {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.card-transfer-details dd {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink, #111827);
}

/*
 * THE NUMBER ITSELF.
 * `user-select: all` so one tap takes all sixteen digits rather than a word of
 * four — the copy button covers the common case, but this covers the customer
 * whose browser blocked it, which on http:// is every customer without the
 * fallback.
 * `font-variant-numeric: tabular-nums` because Persian digits in a proportional
 * face make 1s narrow, and a mis-read digit sends the money to a stranger.
 */
.card-transfer-details dd > bdi[data-copy] {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    user-select: all;
    -webkit-user-select: all;
    color: var(--ink, #111827);
}

.card-copy {
    flex: none;
    background: #fff;
    border: 1px solid #ffd3b5;
    border-radius: 8px;
    padding: 6px 13px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    color: #9a3412;
    cursor: pointer;
    /* A fixed width so «کپی» → «کپی شد» → «کپی نشد» does not shove the number
       sideways mid-read. */
    min-width: 66px;
    text-align: center;
}

.card-copy:hover { background: #fff3e8; border-color: #f5b98a; }
.card-copy:active { transform: translateY(1px); }

/* ------------------------------------------------------- the two footnotes */
.card-transfer-receipt,
.card-transfer-wait {
    margin: 0;
    font-size: 12.5px;
    line-height: 2;
    color: var(--muted, #6b7280);
}

.card-transfer-receipt { margin-bottom: 6px; }
.card-transfer-receipt a { color: #9a3412; font-weight: 700; text-decoration: none; }
.card-transfer-receipt a:hover { text-decoration: underline; }

.card-transfer-wait { color: #9ca3af; }

@media (max-width: 480px) {
    .card-transfer { padding: 16px 14px 14px; }

    /* Label above value on a narrow screen: side by side, a 22px number and its
       label leave the digits 150px of room and they wrap mid-number. */
    .card-transfer-details > div { flex-direction: column; align-items: flex-start; }

    .card-transfer-details dd > bdi[data-copy] { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .card-copy:active { transform: none; }
}

/* ===========================================================================
 * ===========================================================================
 * THE ONE-PAGE CHECKOUT
 * ===========================================================================
 * «فلوی پرداخت از اول بصورت زیبا و انمیشن دار و جذاب … با همه جزییات دیجیکالا
 *  در عین سادگی»
 *
 * Loaded from site-extras.css, which is linked last, so these rules win over
 * site.css and site-pack.css without a single `!important` — the exception being
 * the two marked below, which fight a `:disabled` rule of equal specificity in a
 * file this one cannot reorder.
 *
 * The shape is the message: one section open, the answered ones a tick and a
 * line of text, the ones ahead greyed out. A customer should be able to tell
 * where they are from across the room, which the five-tab row this replaces
 * could not manage even close up.
 * ======================================================================== */

/* -------------------------------------------------------------- the header */
.checkout > .co-head {
    margin: 0 0 20px;
}

.checkout > .co-head h1 {
    margin: 0 0 18px;
    font-size: 22px;
    font-weight: 800;
    color: var(--ink, #111827);
}

/*
 * THE RAIL.
 * A picture, not a control — every element in it is an `<li>`, so there is
 * nothing to disable and the collision that made the old row's current step the
 * faintest thing on the page cannot recur in this shape.
 *
 * The connecting line is one pseudo-element across the whole row with a second
 * one filled to `--co-progress`, rather than a border per item: per-item borders
 * leave a gap at every gutter and cannot animate as one piece.
 */
.co-rail {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.co-rail::before,
.co-rail::after {
    content: '';
    position: absolute;
    top: 15px;
    right: 8%;
    left: 8%;
    height: 3px;
    border-radius: 3px;
}

.co-rail::before { background: #eceff3; }

/* RTL: the fill grows from the right, which is where step one is. */
.co-rail::after {
    left: auto;
    width: calc((100% - 16%) * var(--co-progress, 0%) / 100%);
    background: linear-gradient(90deg, var(--orange, #f60), #fdba74);
    transition: width .45s cubic-bezier(.22, .61, .36, 1);
}

.co-rail > li {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

.co-rail > li > i {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #e3e7ed;
    color: #9ca3af;
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
    transition: border-color .25s, background .25s, color .25s;
}

.co-rail > li > i svg { width: 15px; height: 15px; }

.co-rail > li > span {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    transition: color .25s;
}

.co-rail > li.is-done > i {
    background: var(--orange, #f60);
    border-color: var(--orange, #f60);
    color: #fff;
}

.co-rail > li.is-done > span { color: var(--muted, #6b7280); }

/*
 * The step you are on is the loudest thing in the row. This is the whole
 * correction: white fill, an orange ring with a halo, orange bold label.
 */
.co-rail > li.is-open > i {
    background: #fff;
    border-color: var(--orange, #f60);
    color: var(--orange-dark, #c2410c);
    box-shadow: 0 0 0 4px rgb(249 115 22 / 16%);
}

.co-rail > li.is-open > span {
    color: var(--orange-dark, #c2410c);
    font-weight: 800;
}

/* ------------------------------------------------ the phone-only total line */
.co-total-strip {
    display: none;
}

/* ------------------------------------------------------------ the two columns */
.co-grid {
    display: grid;
    gap: 18px;
    align-items: start;
}

@media (min-width: 981px) {
    .co-grid { grid-template-columns: minmax(0, 1fr) 328px; }
}

.co-flow {
    display: grid;
    gap: 12px;
    min-width: 0;
}

/* ============================================================== a section */
.co-step {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    transition: border-color .25s, box-shadow .25s;
}

.co-step.is-open {
    border-color: #ffd3b5;
    box-shadow: 0 6px 22px rgb(17 24 39 / 6%);
}

/* Nothing to read, nothing to press: a section whose turn has not come. */
.co-step.is-locked {
    background: #fbfcfd;
    border-color: #eef1f5;
}

.co-step.is-locked .co-step-head { opacity: .5; }

/* THE COLLAPSE. The body is in the DOM for every section — which is what lets
   «ویرایش» open one with no page load — so this single rule is the whole
   accordion. */
.co-step:not(.is-open) > .co-body { display: none; }

/* ------------------------------------------------------- a section's header */
.co-step-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 11px;
    margin: 0;
    padding: 15px 17px;
    font-size: 15px;
    font-weight: 800;
    color: var(--ink, #111827);
}

.co-step.is-open > .co-step-head { padding-bottom: 4px; }

.co-mark {
    display: grid;
    place-items: center;
    flex: none;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: #f1f3f7;
    color: #9ca3af;
    font-size: 12.5px;
    font-weight: 800;
    font-style: normal;
}

.co-mark svg { width: 14px; height: 14px; }

.co-step.is-open .co-mark {
    background: var(--orange, #f60);
    color: #fff;
}

.co-step.is-done .co-mark {
    background: #dcfce7;
    color: #15803d;
}

.co-step-title { flex: none; }

/*
 * THE ANSWER, IN ONE LINE.
 * `min-width: 0` with `flex: 1` is what actually makes the ellipsis work inside
 * a flex row — without it a long address forces the header wider than its
 * container and pushes «ویرایش» off the edge instead of truncating.
 */
.co-said {
    flex: 1 1 140px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--muted, #6b7280);
}

.co-edit {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: auto;
    padding: 5px 11px;
    border-radius: 8px;
    background: #fff5ec;
    color: var(--orange-dark, #c2410c);
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
}

.co-edit svg { width: 13px; height: 13px; }
.co-edit:hover { background: #ffe9d6; }

.co-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------- the open body */
.co-body {
    padding: 4px 17px 17px;
    animation: co-reveal .28s cubic-bezier(.22, .61, .36, 1) both;
}

@keyframes co-reveal {
    from { opacity: 0; transform: translateY(-7px); }
    to   { opacity: 1; transform: none; }
}

.co-body > .journey-form { margin: 0; }

/* The final section needs no grid of fields, just its promise and its button. */
.co-step.is-final .co-body > form { margin: 12px 0 0; }

/*
 * THE BUTTON THAT PLACES THE ORDER carries the figure it is about to commit
 * the customer to. «ثبت سفارش» alone asks somebody to press a button and find
 * out afterwards what it cost.
 */
.co-place {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 14px 20px;
    border: 0;
    border-radius: 12px;
    background: var(--orange, #f60);
    color: #fff;
    font: inherit;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: background .2s, transform .1s;
}

.co-place b { font-size: 15px; font-weight: 800; }
.co-place:hover { background: var(--orange-dark, #c2410c); }
.co-place:active { transform: translateY(1px); }
/*
 * `data-once` replaces the whole label with «در حال ثبت سفارش…», so the price
 * element goes with it — and `justify-content: space-between` then pushes a lone
 * line of text hard against one edge, which reads as a broken button at the
 * exact moment the customer is waiting to find out whether their order went
 * through.
 */
.co-place[disabled] {
    justify-content: center;
    background: #d1d5db;
    cursor: progress;
}

/* ===========================================================================
 * THE ADDRESS CARDS — «در انتخاب آدرس نیاز باز طراحی جدی است»
 * ===========================================================================
 * The old list put province, city and street into one 12px grey line, so three
 * saved addresses were indistinguishable at a glance and choosing between them
 * meant reading all of them. Here the label is the heading, the place is its own
 * line at a readable size, and the incidentals — recipient, phone, postcode —
 * are a third row that can be skipped.
 * ======================================================================== */
.addr-choice {
    display: grid;
    gap: 9px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.addr-choice > legend {
    padding: 0;
    margin: 0 0 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink, #111827);
}

.addr-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 13px 14px;
    background: #fff;
    border: 1.5px solid #e3e7ed;
    border-radius: 13px;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
}

.addr-card:hover { border-color: #cbd5e1; }

.addr-card > input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: var(--orange, #f60);
}

.addr-card:has(input:checked) {
    border-color: var(--orange, #f60);
    background: #fffaf5;
    box-shadow: 0 0 0 3px rgb(249 115 22 / 9%);
}

.addr-body {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.addr-top {
    display: flex;
    align-items: center;
    gap: 8px;
}

.addr-top b {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 800;
    color: var(--ink, #111827);
}

.addr-top b svg { width: 14px; height: 14px; }

.addr-flag {
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10.5px;
    font-style: normal;
    font-weight: 700;
}

.addr-where {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--muted, #6b7280);
}

.addr-line {
    font-size: 13px;
    line-height: 1.85;
    color: #374151;
    /*
     * Two lines, then an ellipsis.
     *
     * Measured rather than guessed: with the street running free a card was
     * 153px on a desktop and 177px on a phone, so three saved addresses put the
     * «نشانی تازه» choice 530px down — a customer with three addresses had to
     * scroll past all of them to reach the option of a fourth.
     *
     * Two lines is enough to tell three of somebody's OWN addresses apart, which
     * is the only job this line has; the label above it already names it.
     */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.addr-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 2px;
    font-size: 11.5px;
    color: #9ca3af;
}

.addr-card-new .addr-top b { color: var(--orange-dark, #c2410c); }

/*
 * ===========================================================================
 * THE NEW-ADDRESS FORM APPEARS IN CSS, WITH NO SCRIPT INVOLVED
 * ===========================================================================
 * Guarded by `@supports`, and the degradation is the right way round: where
 * `:has()` is missing the form is simply always visible, which is the behaviour
 * being replaced rather than a broken page.
 *
 * And where the customer has NO saved addresses the `.addr-choice` fieldset is
 * not rendered at all, so this sibling selector cannot match and the form stays
 * open — correct by construction, not by a second rule.
 */
@supports selector(:has(*)) {
    .addr-choice ~ .addr-new { display: none; }

    .addr-choice:has(input[name="address_id"][value=""]:checked) ~ .addr-new {
        display: grid;
        animation: co-reveal .24s cubic-bezier(.22, .61, .36, 1) both;
    }

    /* Same trick for the recipient pair. */
    .addr-other { display: none; }

    .addr-other-toggle:has(input:checked) + .addr-other {
        display: grid;
        animation: co-reveal .22s cubic-bezier(.22, .61, .36, 1) both;
    }
}

.addr-new {
    display: grid;
    gap: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.addr-other {
    gap: 13px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.addr-new > .wide,
.addr-other { grid-column: 1 / -1; }

@media (max-width: 620px) {
    .addr-new,
    .addr-other { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------ a checkbox row */
.co-check {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
}

.co-check > input[type="checkbox"] {
    flex: none;
    width: 17px;
    height: 17px;
    accent-color: var(--orange, #f60);
}

.co-check > span { font-weight: 600; }

/* ===========================================================================
 * THE ORDER, BESIDE THE FLOW
 * ===========================================================================
 * The wizard showed the basket on exactly one of its five screens. A customer
 * four screens in had no way to check what they were buying without leaving the
 * flow and losing their place.
 * ======================================================================== */
.co-aside { min-width: 0; }

@media (min-width: 981px) {
    /* 88px clears the sticky site header. */
    .co-aside { position: sticky; top: 88px; }
}

.co-aside-card {
    background: #fff;
    border: 1px solid #e9edf2;
    border-radius: 16px;
    padding: 16px;
}

.co-aside-card > h2 {
    margin: 0 0 13px;
    font-size: 14.5px;
    font-weight: 800;
    color: var(--ink, #111827);
}

.co-aside-lines {
    display: grid;
    gap: 11px;
    margin: 0 0 14px;
    padding: 0 0 13px;
    border-bottom: 1px dashed #e5e7eb;
    list-style: none;
    /* Eight lines is roughly a screen; beyond that the aside would push its own
       total below the fold, which is the one thing it exists to hold up. */
    max-height: 292px;
    overflow-y: auto;
}

.co-aside-lines > li {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.co-aside-lines img,
.co-aside-noimage {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 9px;
    background: #f7f8fa;
}

.co-aside-lines b {
    /* Two lines then ellipsis: a part name runs long and the aside is narrow. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.7;
    color: #374151;
}

.co-aside-lines small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #9ca3af;
}

.co-aside-lines strong {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink, #111827);
    white-space: nowrap;
}

.co-aside-sums { display: grid; gap: 8px; margin: 0; }

.co-aside-sums > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.co-aside-sums dt { margin: 0; font-size: 12.5px; color: var(--muted, #6b7280); }
.co-aside-sums dd { margin: 0; font-size: 13px; font-weight: 700; color: #374151; }

.co-aside-later { font-size: 12px !important; font-weight: 600 !important; color: #9ca3af !important; }

.co-aside-total {
    margin-top: 5px;
    padding-top: 11px;
    border-top: 1px solid #eef1f5;
}

.co-aside-total dt { font-size: 13.5px !important; font-weight: 700; color: var(--ink, #111827) !important; }

.co-aside-total dd {
    font-size: 17px !important;
    font-weight: 800;
    color: var(--orange-dark, #c2410c) !important;
}

.co-aside-back {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted, #6b7280);
    text-decoration: none;
}

.co-aside-back:hover { color: var(--orange-dark, #c2410c); }

/* ===========================================================================
 * ON A PHONE
 * ===========================================================================
 * The aside stacks under the sections, which puts the payable figure four
 * screens away from a customer for most of the flow. So it is repeated in one
 * line at the top — read-only both times, so there is nothing to keep in sync.
 * ======================================================================== */
@media (max-width: 980px) {
    .co-total-strip {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin: 0 0 14px;
        padding: 12px 15px;
        background: #fff8f1;
        border: 1px solid #ffe3cc;
        border-radius: 12px;
        font-size: 13px;
        color: var(--muted, #6b7280);
    }

    .co-total-strip strong {
        font-size: 16px;
        font-weight: 800;
        color: var(--orange-dark, #c2410c);
    }

    .checkout > .co-head h1 { font-size: 19px; margin-bottom: 15px; }

    /* Numbers only. Five Persian labels under five dots at 360px overlap each
       other, and an overlapping label is less use than none. */
    .co-rail > li > span { display: none; }
    .co-rail::before,
    .co-rail::after { top: 15px; right: 4%; left: 4%; }
    .co-rail::after { left: auto; width: calc((100% - 8%) * var(--co-progress, 0%) / 100%); }

    .co-step-head { padding: 13px 14px; font-size: 14px; gap: 5px 9px; }
    .co-body { padding: 2px 14px 14px; }

    /* The answer drops to its own line rather than fighting «ویرایش» for the
       remaining 90px. */
    .co-said { flex-basis: 100%; order: 3; }
    .co-edit { margin-inline-start: auto; }

    .co-aside-lines { max-height: none; }
}

/* Details are collected at the point they are needed, with optional fields folded away. */
.onboarding-note {
    padding: 14px 16px;
    margin-top: 20px;
    border: 1px solid #dbe8e5;
    border-radius: 14px;
    background: #f3f9f7;
    color: #315c50;
    font-size: 13px;
    line-height: 1.9;
    text-align: start;
}

.onboarding-context {
    margin: 4px 0 16px;
    color: var(--muted, #6b7280);
    font-size: 13px;
    line-height: 1.9;
}

.onboarding-optional {
    min-width: 0;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 0 16px;
    background: #fafbfc;
}

.onboarding-optional > summary {
    padding: 14px 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #374151;
}

.onboarding-optional[open] { padding-bottom: 16px; }
.onboarding-optional > p { font-size: 13px; line-height: 1.9; color: var(--muted, #6b7280); }
.onboarding-optional summary:focus-visible,
.profile-readiness a:focus-visible { outline: 2px solid #0f766e; outline-offset: 4px; border-radius: 4px; }
.after-order-profile { margin: 24px 0; }
.after-order-profile .journey-form { margin: 12px 0 0; }
.after-order-profile .form-actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

.profile-readiness {
    margin: 0 0 24px;
    padding: 20px;
    border: 1px solid #dbe8e5;
    border-radius: 16px;
    background: #f7faf9;
}

.profile-readiness h2 { margin: 0 0 8px; font-size: 16px; }
.profile-readiness > p { margin: 0; font-size: 13px; color: var(--muted, #6b7280); line-height: 1.9; }
.profile-readiness ul { list-style: none; padding: 0; margin: 16px 0; }
.profile-readiness li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding: 10px 0; font-size: 13px; border-bottom: 1px solid #e4ede9; }
.profile-readiness strong { color: #27644d; font-weight: 600; }
.profile-readiness a { color: #166b62; text-decoration: underline; text-underline-offset: 4px; }
.profile-readiness .profile-shopping-link { display: inline-block; padding: 8px 0; font-weight: 700; }

/* ===========================================================================
 * MOTION IS OPTIONAL
 * ======================================================================== */
@media (prefers-reduced-motion: reduce) {
    .co-body,
    .addr-choice:has(input[name="address_id"][value=""]:checked) ~ .addr-new,
    .addr-other-toggle:has(input:checked) + .addr-other { animation: none; }

    .co-rail::after { transition: none; }
    .co-place:active { transform: none; }
}

/* Searchable province/city and vehicle selectors. */
.shop-combo { position: relative; min-width: 0; width: 100%; }
.shop-combo > input { width: 100%; padding-inline-end: 2.2rem; background-color: #fff; }
.shop-combo::after { content: '⌄'; position: absolute; inset-inline-end: 14px; bottom: 13px; pointer-events: none; color: #64748b; }
.shop-combo-list { position: absolute; z-index: 60; inset-inline: 0; top: 100%; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; background: #fff; border: 1px solid #cbd5e1; border-radius: 12px; padding: 6px; margin: 4px 0 0; list-style: none; box-shadow: 0 12px 28px #0f172a20; }
.shop-combo-list[hidden] { display: none; }
.shop-combo-list li { padding: 10px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1.7; }
.shop-combo-list li:hover, .shop-combo-list li[aria-selected="true"] { background: #fff1e5; color: #9a4714; }
.shop-combo-list .combo-empty { color: #64748b; cursor: default; }
.seller-location { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; align-items: start; }
.seller-location > label { min-width: 0; }
.order-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.order-list .order-actions a { display: inline-flex; padding: 8px 14px; border: 1px solid #cbd5e1; border-radius: 9px; color: #334155; font-size: 13px; white-space: nowrap; }
.order-list .order-actions a:last-child { color: #a74d16; border-color: #f4c7a1; background: #fff7ef; }
.cart-added .ghost { cursor: pointer; font: inherit; }
.static-page .prose, .static-page [data-page-body], .contact-content, .about-content, .guide-content { font-size: 17px; line-height: 2.15; text-align: justify; }
.static-page .prose p, .static-page [data-page-body] p { font-size: inherit !important; line-height: inherit !important; }

.content-page [data-page-body] { font-size: 17px; line-height: 2.15; text-align: justify; }
.content-page [data-page-body] :is(p,span,li) { font-size: inherit !important; line-height: inherit !important; }

.seller-form .seller-trap { position: absolute !important; inset: auto !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap; }

.market-hero ._heroGrid_dlezs_9 { display: block; position: relative; min-height: 460px; padding-block: 70px 85px; }
.market-hero [data-hero-copy] { width: min(540px, 52%); position: relative; z-index: 2; }
.market-hero [data-hero-copy][hidden] { display: none !important; }
.market-hero [data-hero-copy] p { max-width: 470px; line-height: 2; }
.market-hero ._heroArt_dlezs_9 { object-fit: cover; }
.market-hero ._heroCarouselControls_dlezs_23 { z-index: 3; }
@media (max-width:760px) {
 .market-hero ._heroGrid_dlezs_9 { min-height: 470px; padding-block: 40px 72px; }
 .market-hero [data-hero-copy] { width: 100%; max-width: 440px; }
 .market-hero ._heroShade_dlezs_9 { background: linear-gradient(270deg,#fffffff2,#ffffffd9 70%,#ffffff70); }
 .market-hero [data-hero-copy] h1,.market-hero [data-hero-copy] h2.hero-slide-title { font-size: 33px; line-height: 1.55; }
}

/* Shared by homepage, catalogue, search and related-product grids. */
.product-card .product-title,
._product_dlezs_12 ._productTitle_dlezs_12,
.related-product-card .related-title { font-size: 16px; line-height: 1.8; min-height: 3.6em; }
@media (max-width: 640px) {
    .product-card .product-title,
    ._product_dlezs_12 ._productTitle_dlezs_12,
    .related-product-card .related-title { font-size: 15px; }
}

/* Readable contact and navigation text in the footer. */
.site-footer .footer-grid :is(a, p, span, .footer-address) { font-size: 16px; line-height: 1.9; }
.site-footer .footer-grid > div > b { font-size: 18px; line-height: 1.8; }
.site-footer .footer-address b { font-size: inherit; }
.site-footer .footer-bottom, .site-footer .footer-bottom span { font-size: 14px; line-height: 1.9; }

.product-review-link { text-decoration: none; }
.star-rating-display .review-stars { position: relative; display: inline-block; direction: ltr; unicode-bidi: isolate; color: #cbd5e1; font-size: 16px; line-height: 1; white-space: nowrap; letter-spacing: 1px; }
.star-rating-display .review-stars > span { position: absolute; top: 0; left: 0; display: block; overflow: hidden; color: #e99b16; }
.product-reviews { max-width: 900px; margin-inline: auto; font-size: 15px; line-height: 1.9; }
.product-reviews h2 { font-size: 21px; }
.customer-review { padding: 20px 0; border-bottom: 1px solid #e2e8f0; }
.customer-review header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.customer-review header span { color: #a96512; font-weight: 700; }
.customer-review time { font-size: 12px; color: #64748b; }
.customer-review p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 12px 0 0; }
.review-form, .review-signin { margin-top: 28px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 16px; background: #f8fafc; }
.review-form h3, .review-signin h3 { margin-top: 0; font-size: 18px; }
.review-form-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-form label { display: grid; gap: 7px; margin-bottom: 16px; font-weight: 600; }
.review-form :is(input, textarea, select) { width: 100%; min-width: 0; border: 1px solid #cbd5e1; border-radius: 10px; background: #fff; color: #172b3a; padding: 10px 12px; font: inherit; font-weight: 400; }
.review-form :is(input, textarea, select):focus-visible { outline: 2px solid #f58e38; outline-offset: 2px; }
.review-form button, .review-signin > a { display: inline-block; border: 0; border-radius: 10px; background: #ed621a; color: white; padding: 12px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.review-notice { padding: 14px 18px; border-radius: 10px; color: #166534; background: #ecfdf5; }
.review-error { font-size: 13px; color: #b91c1c; }
@media (max-width: 640px) {
 .review-form-fields { grid-template-columns: 1fr; gap: 0; }
 .review-form, .review-signin { padding: 18px; }
}