/* Cart recommendation modal - Ryan theme
   Shell        : design/pdp/dk-pdp-add-s2.jpg
   Cart state   : design/pdp/iherb-pdp-add-s2.jpg + iherb-pdp-add-s3.jpg
   Product card : design/pdp/Product_Row.png
   Quantity     : design/pdp/quantity.png (outlined compact variant) */

.tc-cart-rec {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    font-family: inherit;
}

.tc-cart-rec--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.tc-cart-rec__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
}

/* SHEET HEIGHT — 80% of the VISUAL viewport.
 *
 * `vh` is the wrong unit on a mobile browser: it is the *large* viewport, so it ignores the
 * URL bar and the on-screen keyboard and a "92vh" sheet ended up taller than the space the
 * user can actually see. `--tc-cri-max-h` is written by cart-recommendation-modal.js from
 * window.visualViewport.height (the real, currently-visible box) and re-written whenever that
 * box changes. `80dvh` is the fallback for browsers without visualViewport - dvh at least
 * tracks the dynamic toolbar, unlike vh, and it is the taller of the two ratios so nothing is
 * clipped when the var is missing. The body below owns the overflow, so anything past the max
 * scrolls inside the sheet instead of pushing the footer off-screen.
 *
 * The max is not fixed: two or more rows get 90%, which leaves the second row breaking the bottom
 * edge so the sheet reads as having more below; a single row is sized to exactly what it needs,
 * bounded to 60%-90%, so the one rail is whole without the empty space a full-height sheet left
 * under it. See sheetMaxHeight() in cart-recommendation-modal.js.
 * It stays a MAX either way, so a short rail still sizes to its own content. */
.tc-cart-rec__panel {
    position: relative;
    direction: rtl;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: var(--tc-cri-max-h, 80dvh);
    overflow: hidden;
    background: #fff;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 30px rgba(15, 23, 42, 0.16);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(0);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.tc-cart-rec--hidden .tc-cart-rec__panel {
    transform: translateY(100%);
}

/* ---------- handle + header ---------- */
/* The handle is the drag target, so it needs a finger-sized hit area rather than the 4px the
   pill is drawn at - the pill stays 4px, the padding around it is what the finger lands on.
   `touch-action: none` hands the vertical gesture to the pointer handlers in
   cart-recommendation-modal.js; without it the browser starts a scroll and the sheet never
   sees pointermove. */
/* THE GRIP IS A LINE, AND IT IS DRAWN AS ONE.

   This sheet can be swiped down to dismiss (bindSheetDrag in
   cart-recommendation-modal.js), and nothing else on screen says so - the close button
   reads as "close", not as "you can drag this". So the grip stays: it is the one piece
   of the sheet whose only job is to advertise the gesture.

   What it must NOT look like is a filled grey block, which is how it was read before.
   The previous rule drew a 44x4 pill by painting a #d9d9d9 background over a 92x18 box
   and relying on `background-clip: content-box` to cut it back. When that clip is not
   honoured - and on at least one Android browser it was not - the whole padding box
   paints, and the affordance becomes an unexplained slab above the header.

   So the spacing is MARGIN now, not padding, and the element is exactly the pill:
   44x4, nothing to clip, no way for it to render as anything else. */
.tc-cart-rec__handle {
    position: relative;
    flex: 0 0 auto;
    box-sizing: border-box;
    width: 44px;
    height: 4px;
    border-radius: 999px;
    background: #dcdcdc;
    margin: 10px auto 6px;
    padding: 0;
    touch-action: none;
    cursor: grab;
}

/* The pill is 4px tall, which is a fine thing to LOOK at and a poor thing to aim a thumb
   at - the padding that used to inflate the box is what now keeps it a clean line. The
   grab area is given back here instead: an invisible extension, so the target is roughly
   64x24 while the mark on screen stays 44x4. */
.tc-cart-rec__handle::before {
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: -10px;
    right: -10px;
}

.tc-cart-rec__handle:active {
    cursor: grabbing;
}

/* The header is the sheet's second grab area. Only the vertical gesture is claimed here
   (`pan-x` stays with the browser) because the header holds the close button and the
   "go to cart" link, which must still take their own taps. */
.tc-cart-rec__header {
    touch-action: pan-x;
}

.tc-cart-rec__header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 50px;
    padding-inline: 8px 12px;
    border-bottom: 1px solid #f0f0f1;
}

.tc-cart-rec__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #292d32;
    cursor: pointer;
}

.tc-cart-rec__close svg {
    width: 17px;
    height: 17px;
}

.tc-cart-rec__added {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-inline-start: 8px;
    color: #00a049;
}

.tc-cart-rec__added-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.tc-cart-rec__added-text {
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.tc-cart-rec__cart-link {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: #f0f0f1;
    color: #494a5c;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
}

.tc-cart-rec__cart-link:hover,
.tc-cart-rec__cart-link:focus {
    color: #494a5c;
    text-decoration: none;
}

.tc-cart-rec__cart-link svg {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
}

/* ---------- scrollable body + sticky footer ---------- */
.tc-cart-rec__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.tc-cart-rec__footer {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #f0f0f0;
}

.tc-cart-rec__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.tc-cart-rec__btn:hover,
.tc-cart-rec__btn:focus {
    text-decoration: none;
}

.tc-cart-rec__btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.tc-cart-rec__btn--primary {
    border: 1px solid #ed303d;
    background: #ed303d;
    color: #fff;
}

.tc-cart-rec__btn--primary:hover,
.tc-cart-rec__btn--primary:focus {
    color: #fff;
}

.tc-cart-rec__btn--secondary {
    border: 1px solid #ed303d;
    background: #fff;
    color: #ed303d;
}

.tc-cart-rec__btn--secondary:hover,
.tc-cart-rec__btn--secondary:focus {
    color: #ed303d;
}

/* ---------- subtotal + free shipping ---------- */
.tc-cart-rec__cartstate {
    flex: 0 0 auto;
    padding: 12px 16px 14px;
    border-bottom: 1px solid #f0f0f1;
}

.tc-cart-rec__subtotal {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.tc-cart-rec__subtotal-label {
    color: #292d32;
    font-size: 13px;
    font-weight: 700;
}

.tc-cart-rec__subtotal-count {
    color: #8f8f8f;
    font-size: 12px;
    font-weight: 400;
}

.tc-cart-rec__subtotal-value {
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    white-space: nowrap;
}

/* The currency the summary appends to the cart total and to the free-shipping figure
   (withCurrency in cart-recommendation-modal.js). Set apart from the number the same way
   the cards set theirs apart: a gap, and lighter than the amount it belongs to, so the
   figure still reads as the figure. */
.tc-cart-rec__currency {
    margin-inline-start: 4px;
    font-size: 12px;
    font-weight: 400;
}

.tc-cart-rec__ship-bar {
    height: 6px;
    margin-top: 10px;
    border-radius: 999px;
    background: #ededed;
    overflow: hidden;
}

.tc-cart-rec__ship-fill {
    height: 100%;
    border-radius: inherit;
    background: #00b31d;
    transition: width 0.35s ease;
}

.tc-cart-rec__ship-status {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: #292d32;
    font-size: 12px;
}

.tc-cart-rec__ship-status svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: #8f8f8f;
}

.tc-cart-rec__ship-status strong {
    font-weight: 700;
}

.tc-cart-rec__ship-status--free {
    color: #00b31d;
    font-weight: 700;
}

.tc-cart-rec__ship-status--free svg {
    color: #00b31d;
}

/* ---------- section head ---------- */
/*
 * ONE inset, owned by the section.
 *
 * The head and the rail used to carry 16px of their own inline padding each. Because the
 * rail is also the carousel's clip box, that padding sat INSIDE the overflow: slides
 * scrolled underneath it and ran to the panel edge, so a rail that overflowed was flush
 * with the modal while the title above it was inset - two different edges in one section,
 * and the cards read as loose tiles floating in the panel rather than as content belonging
 * to it. Putting the inset on the section makes the clip edge and the content edge the same
 * line: every card starts and ends exactly under the title, in both directions.
 */
.tc-cart-rec__section {
    flex: 0 0 auto;
    padding-top: 14px;
    padding-inline: 16px;
}

.tc-cart-rec__section-head {
    padding: 0 0 12px;
}

.tc-cart-rec__section-title {
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.6;
}

.tc-cart-rec__section-sub {
    color: #8f8f8f;
    font-size: 12px;
    line-height: 1.7;
}

.tc-cart-rec__section-sub:empty {
    display: none;
}

/* ---------- horizontal rail (native scroll snap, no carousel lib) ---------- */
.tc-cart-rec__rail {
    display: flex;
    gap: 8px;
    /* inline inset belongs to .tc-cart-rec__section - see the note there */
    padding: 0 0 20px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.tc-cart-rec__rail::-webkit-scrollbar {
    display: none;
}

/* ---------- product card (Product_Row.png) ----------
   FLAT. The card is an item inside a modal section, not a standalone tile: no surface of its
   own, no outer padding or margin, no radius, no shadow. It inherits the panel it sits on, so
   only its content is visible and the section's inset is the only edge in play. Internal
   rhythm (media -> title -> price -> discount) is untouched; this is the same product-card
   language the storefront rows use, minus a plate they do not have either. */
.tc-rec-card {
    flex: 0 0 172px;
    width: 172px;
    scroll-snap-align: start;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    text-align: right;
}

/* MEDIA ASPECT IS THE STORE'S, NOT OURS.
 *
 * This box was a hard 172x228, so a store configured for Square still got a 3/4 portrait
 * plate here and its square photography was cropped by `object-fit: cover`.
 *
 * The theme already owns this decision: StoreInformationCustomFrameworkSettings
 * .ProductCardImageAspectRatio is resolved once per request in _Root.Head.cshtml and published
 * as the `tc-media-portrait` / `tc-media-square` class on <body>; product-card.css turns that
 * into `--tc-media-ratio` for `.tc-card`. Because that mapping is scoped to `.tc-card`, the
 * token never reached this card - so the SAME body classes are mapped onto `.tc-rec-card`
 * below. No new setting, no plugin-specific format: one source of truth, two consumers. */
.tc-media-portrait .tc-rec-card { --tc-media-ratio: 3 / 4; }
.tc-media-square .tc-rec-card { --tc-media-ratio: 1 / 1; }

.tc-rec-card__media {
    position: relative;
    width: 172px;
    height: auto;
    aspect-ratio: var(--tc-media-ratio, 3 / 4);
}

@supports not (aspect-ratio: 1 / 1) {
    .tc-rec-card__media { height: 228px; }
}

.tc-rec-card__image {
    display: block;
    width: 100%;
    height: 100%;
    /* square corners: a rounded plate is what read as a floating card */
    border-radius: 0;
    overflow: hidden;
    background: #f5f5f5;
}

.tc-rec-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    /* contain, matching the canonical card - cover cropped portrait products */
    object-fit: contain;
}

.tc-rec-card__title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
    margin-top: 10px;
    color: #292d32;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
    text-decoration: none;

    /* LATIN DIGITS IN PRODUCT NAMES.

       Names on this store carry shade numbers, sizes and volumes ("شماره 5/23",
       "حجم 100 میل"), and the sheet's body font renders those with Persian numeral
       glyphs - so the same product read one way here and another way on the card it
       was copied from. `yekanbakhen` is the theme's own Latin-numeral cut of the
       SAME typeface (assets/css/fontYekanBakh-v2.3.less): identical letterforms,
       Western digits, which is why it is used rather than a numeral-shaping hack.
       Names only - prices and counts keep the sheet's numerals.

       Spelled out rather than `yekanbakhen, inherit`: `inherit` is only legal as a
       font-family's ONLY value, so inside a list it invalidates the whole declaration
       and the rule is dropped - measured, the title still computed to
       "yekanbakh, tahoma". This is the theme's own stack with the Latin cut in front. */
    font-family: yekanbakhen, yekanbakh, tahoma, sans-serif;
}

.tc-rec-card__title:hover,
.tc-rec-card__title:focus {
    color: #292d32;
    text-decoration: none;
}

/* THE PRICE SITS ON THE FAR EDGE, LIKE EVERY OTHER PRODUCT BOX ON THE STORE.
 *
 * `.tc-rec-card` sets `text-align: right`, which is correct for the NAME - a title reads
 * from the start of the line - but it carried the price along with it, so these cards put
 * their price on the right while the canonical product card puts it on the left: home
 * rails, the PLP grid and "محصولات مشابه" all do `justify-self: end`
 * (assets/product-card/product-card.css). Two cards side by side on the same screen
 * disagreed about where a price lives.
 *
 * `end` rather than `left`, and `flex-end` rather than `right`, so the pair follows the
 * document's direction: left in this RTL storefront, mirrored automatically in an LTR one.
 * Alignment only - size, colour and spacing are untouched. */
.tc-rec-card__price {
    margin-top: 8px;
    color: #292d32;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    text-align: end;
}

.tc-rec-card__currency {
    margin-inline-start: 4px;
    font-size: 12px;
    font-weight: 400;
}

/* the struck price and its percentage travel WITH the current price - see the note above */
.tc-rec-card__discount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}

.tc-rec-card__old-price {
    color: #bcbcbc;
    font-size: 12px;
    text-decoration: line-through;
    white-space: nowrap;
}

.tc-rec-card__discount-badge {
    color: #ed2e7e;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* ---------- quantitySuperMarket, styled locally only ---------- */
.tc-rec-card__qty {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 2;
    line-height: 0;
}

/* The control itself is the theme's canonical product-card QSM
   (lib/themes/ryan/assets/qsm/qsm.css, .vp-quantity-theme-v1). Only modal-specific
   placement lives here - never a second copy of its design. */
.tc-rec-card__qty .vp-quantity-theme-v1 {
    margin: 0;
}

/* The glyph is NOT restated here. This block used to resize an <svg> that the modal's own
   script injected in place of the canonical <img>; that swap is gone (see the note in
   cart-recommendation-modal.js), so the control paints the same 21px cart glyph as every
   other product card on the storefront, straight out of qsm.css. */

/* FastAddProductToCartCircle renders its own absolutely-positioned host wrapper for
   catalog cards. Inside this modal the card slot is already positioned, so the
   wrapper sits in flow and the slot above decides where the control goes. */
.tc-rec-card__qty .vp-product-item-theme-v2.in-productBox {
    position: static;
    inset: auto;
    transform: none;
    display: block;
}

/* ---------- skeletons (same geometry as the real card) ---------- */
.tc-cart-rec__cartstate-skeleton,
.tc-rec-card__sk-media,
.tc-rec-card__sk-line {
    display: block;
    background: linear-gradient(90deg, #f1f2f4 25%, #f9fafb 50%, #f1f2f4 75%);
    background-size: 200% 100%;
    animation: tc-cart-rec-shimmer 1.2s infinite linear;
}

.tc-cart-rec__cartstate-skeleton {
    height: 60px;
    border-radius: 10px;
}

/* skeleton follows the real card: same box, same square corners */
.tc-rec-card__sk-media {
    width: 172px;
    height: 228px;
    border-radius: 0;
}

.tc-rec-card__sk-line {
    height: 12px;
    border-radius: 6px;
}

.tc-rec-card__sk-line--title {
    margin-top: 18px;
}

.tc-rec-card__sk-line--title2 {
    width: 65%;
    margin-top: 10px;
}

.tc-rec-card__sk-line--price {
    width: 45%;
    height: 21px;
    margin-top: 12px;
}

.tc-cart-rec__empty {
    padding: 8px 16px 24px;
    color: #8f8f8f;
    font-size: 13px;
}

body.tc-cart-rec-open {
    overflow: hidden;
}

@keyframes tc-cart-rec-shimmer {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* =========================================================================
   DIGIKALA PRESENTATION MODE (approved Phase-1 / V2 presentation)
   Same DOM, same API, same quantitySuperMarket - only the presentation
   differs. Selected by CartRecommendationModalSettings.PresentationMode.
   ========================================================================= */

/* Phase-1 shows only: handle + compact header + one continuous flat list */
.tc-cart-rec--digikala .tc-cart-rec__cartstate,
.tc-cart-rec--digikala .tc-cart-rec__section-head,
.tc-cart-rec--digikala .tc-cart-rec__footer {
    display: none;
}

.tc-cart-rec--digikala .tc-cart-rec__section {
    padding-top: 0;
}

/* rail becomes one continuous vertical list */
.tc-cart-rec--digikala .tc-cart-rec__rail {
    display: block;
    padding: 0;
    overflow-x: hidden;
    scroll-snap-type: none;
}

.tc-cart-rec--digikala .tc-rec-card {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    column-gap: 12px;
    flex: none;
    width: auto;
    /* inline inset is the section's; only the row's own vertical rhythm lives here */
    padding: 14px 0 16px;
    border-bottom: 1px solid #ebebeb;
    scroll-snap-align: none;
}

.tc-cart-rec--digikala .tc-rec-card:last-child {
    border-bottom: 0;
}

.tc-cart-rec--digikala .tc-rec-card__media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 96px;
    height: auto;
    aspect-ratio: var(--tc-media-ratio, 1 / 1);
}

.tc-cart-rec--digikala .tc-rec-card__image {
    border-radius: 0;
    background: #fff;
}

.tc-cart-rec--digikala .tc-rec-card__image img {
    object-fit: contain;
}

.tc-cart-rec--digikala .tc-rec-card__title {
    grid-column: 2;
    grid-row: 1;
    min-height: 0;
    margin-top: 0;
}

.tc-cart-rec--digikala .tc-rec-card__price {
    grid-column: 2;
    grid-row: 3;
    margin-top: 0;
    padding-top: 10px;
    text-align: left;
    font-size: 16px;
}

.tc-cart-rec--digikala .tc-rec-card__discount {
    grid-column: 2;
    grid-row: 3;
    justify-content: flex-start;
}

/* Phase-1 quick add: compact red circle over the image */
.tc-cart-rec--digikala .tc-rec-card__qty {
    right: 6px;
    bottom: -6px;
}

/* The circle's size, colour, shadow and glyphs are the canonical product-card
   control's own - 35px / 21px / 92px, shared with home and the category grid.
   Nothing about its design is restated here. */

/* skeleton follows the flat row geometry in this mode */
.tc-cart-rec--digikala .tc-rec-card--skeleton {
    grid-template-rows: auto auto auto;
}

.tc-cart-rec--digikala .tc-rec-card__sk-media {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 96px;
    height: 96px;
    border-radius: 0;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line {
    grid-column: 2;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line--title {
    margin-top: 4px;
}

.tc-cart-rec--digikala .tc-rec-card__sk-line--price {
    width: 45%;
    margin-top: 16px;
}

@media (min-width: 992px) {
    .tc-cart-rec {
        align-items: center;
        padding: 32px;
    }

    .tc-cart-rec__panel {
        /* DESKTOP: roughly twice the usable area of the 620px dialog this shipped with.
           Width does the work - 620 -> 900 is 1.45x on its own, and every extra 172px of width
           is another readable card in the rail, so the visible card count rises with it rather
           than the cards being scaled. Height is raised a little too (88 -> 90vh) but stays a
           cap, and `width: min(900px, calc(100vw - 64px))` keeps the dialog inside the viewport
           at small desktop widths instead of clipping. Deliberately NOT transform: scale() -
           that would blur text and shrink hit targets. Mobile is untouched: this whole block is
           inside (min-width: 992px), and the sheet height there is Task 5B's. */
        width: min(900px, calc(100vw - 64px));
        max-width: 900px;
        max-height: 90vh;
        border-radius: 16px;
    }

    .tc-cart-rec--hidden .tc-cart-rec__panel {
        transform: translateY(24px);
    }

    .tc-cart-rec__handle {
        display: none;
    }

    .tc-cart-rec__header {
        height: 56px;
    }

    /* THE FOOTER ACTIONS DO NOT GROW WITH THE SHEET.

       The two-column grid is right on a 393px phone, where half the row IS a
       comfortable button. Carried onto a 900px dialog it stretched the same two
       buttons to 428px each - a pair of slabs spanning the full width, with the
       label lost in the middle of each. Width is a phone constraint, not a design
       decision, so on desktop the buttons keep the size they have on mobile and the
       row simply stops being a grid.

       `flex-end` puts them at the LEFT of the sheet: the document is RTL, so the end
       of the main axis is the left edge. Expressed in flow rather than as `left` so
       an LTR store gets the mirror of this, not a broken corner. */
    .tc-cart-rec__footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .tc-cart-rec__footer .tc-cart-rec__btn {
        flex: 0 0 auto;
        /* the mobile measurement, kept: 175px is what the two-column grid yields at 393px */
        width: 175px;
    }

    /* DOM order is left alone on purpose. Packed to the left edge in RTL flow the pair
       lands as "ادامه خرید" then "مشاهده سبد خرید" - the same left-to-right arrangement
       the phone shows - so a customer who has used one breakpoint finds the buttons
       where they expect them on the other. */

    /* Desktop has no touch panning, so each rail becomes a Swiper carousel with the theme's own
       previous/next arrows. Mobile keeps the native touch rail. */
    .tc-cart-rec__rail {
        padding-bottom: 12px;
        overscroll-behavior-x: contain;
    }

    .tc-cart-rec__rail--swiper {
        position: relative;
        display: block;
        overflow: hidden;
        scroll-snap-type: none;
    }

    .tc-cart-rec__rail--swiper .swiper-wrapper {
        display: flex;
        align-items: stretch;
        box-sizing: content-box;
    }

    .tc-cart-rec__rail--swiper .swiper-slide {
        flex: 0 0 auto;
        width: 172px;
        height: auto;
    }

    /* arrows follow the theme's slider language (sliderTheme.less: .swiper-next/.swiper-prev),
       kept inside the rail so the modal's own overflow cannot clip them */
    .tc-cart-rec__rail--swiper .swiper-next,
    .tc-cart-rec__rail--swiper .swiper-prev {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        z-index: 5;
        color: #3f3f3f;
        font-size: 40px;
        background: none;
        cursor: pointer;
        transition: all .3s ease;
    }

    .tc-cart-rec__rail--swiper .swiper-next i,
    .tc-cart-rec__rail--swiper .swiper-prev i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 16px;
        box-shadow: 0 0 8px rgba(0, 0, 0, .08);
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background: rgba(255, 255, 255, .3);
        transition: all .3s ease;
    }

    .tc-cart-rec__rail--swiper .swiper-next:hover i,
    .tc-cart-rec__rail--swiper .swiper-prev:hover i {
        background: #fff;
        color: #5e5e5e;
    }

    .tc-cart-rec__rail--swiper .swiper-next.swiper-button-disabled,
    .tc-cart-rec__rail--swiper .swiper-prev.swiper-button-disabled {
        opacity: 0;
        visibility: hidden;
    }

    .tc-cart-rec__rail--swiper .swiper-prev {
        right: 4px;
    }

    .tc-cart-rec__rail--swiper .swiper-prev i {
        padding-left: 3px;
    }

    .tc-cart-rec__rail--swiper .swiper-next {
        left: 4px;
    }

    .tc-cart-rec__rail--swiper .swiper-next i {
        padding-right: 3px;
    }

    /* fallback rails (Swiper unavailable) keep a slim visible scrollbar */
    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper) {
        scrollbar-width: thin;
        scrollbar-color: #d5d5d5 transparent;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar {
        display: block;
        height: 6px;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-track {
        background: transparent;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-thumb {
        background: #dcdcdc;
        border-radius: 3px;
    }

    .tc-cart-rec__rail:not(.tc-cart-rec__rail--swiper)::-webkit-scrollbar-thumb:hover {
        background: #bdbdbd;
    }
}