/*
 * The product page's pieces that look the same on a phone and a desktop (ProductTemplate.Simple):
 * the installment cards and the tag chips. Loaded on both; pdp-mobile.css only places them on a
 * phone (the gutter, the 48px to the seller, the sideways scroll), the desktop placing is at the end.
 */

/* The plugins' banners (SnappPay, TorobPay, DigiPay) as rows of three equal cards: the logo on its
   brand chip, "۴ قسط ماهانه", then the instalment. The plugins draw their own markup and sheets;
   these rules only re-lay it out inside .tc-pdp-inst, so the cart page keeps the plugins' look.
   product.js fills the amounts (price / 4) and hides a card the product cannot be bought with -
   hence the fixed "۴" here, and the inline display it sets is left alone (no !important).
   Three columns whatever the count: one card keeps a third of the row instead of stretching
   across it, a fourth starts the next row at the right (RTL); a hidden card takes no cell. */
.tc-pdp-inst.tc-pdp-inst {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

/* nothing drawn, no block */
.tc-pdp-inst.tc-pdp-inst:not(:has(> [class*="pay_details"]:not([style*="none"]))) {
    display: none;
}

body .tc-pdp-inst.tc-pdp-inst > .snapp-pay_details.snappay-installment-box,
body .tc-pdp-inst.tc-pdp-inst > .digi-pay_details.digipay-installment-box,
body .tc-pdp-inst.tc-pdp-inst > .torob-pay_details {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 12px 6px;
    border: 1px solid #E0E0E2;
    border-radius: 12px;
    background: #FFF;
    box-shadow: none;
    font-family: inherit;
    text-align: center;
}

/* the text column: no tinted panel, centred, the plugin's long title out */
body .tc-pdp-inst.tc-pdp-inst .snapp-pay_details > .snappay-installment-content,
body .tc-pdp-inst.tc-pdp-inst .digi-pay_details > .digipay-installment-content,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details > .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--tc-ink, #23254E);
    text-align: center;
    overflow: visible;
}

body .tc-pdp-inst.tc-pdp-inst .torob-pay_details > .content {
    gap: 8px;
}

body .tc-pdp-inst.tc-pdp-inst .snappay-installment-title,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-title,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption .title,
body .tc-pdp-inst.tc-pdp-inst .snappay-installment-label,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-label,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption .detail > span:first-child {
    display: none;
}

body .tc-pdp-inst.tc-pdp-inst .snappay-installment-content::before,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-content::before,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption::before {
    content: "۴ قسط ماهانه";
    font-size: var(--tc-fs-caption, 12px);
    font-weight: 400;
    line-height: 18px;
    color: #81858B;
    white-space: nowrap;
}

/* the instalment: the figure bold, "تومان" small beside it; a long figure takes its own line.
   Centred in every card - SnappPay and DigiPay pin their row to the start (align-self). */
body .tc-pdp-inst.tc-pdp-inst .snappay-installment-price-row,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-price-row,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption .detail {
    display: flex;
    align-self: center;
    width: auto;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: center;
    gap: 0 3px;
    max-width: 100%;
    margin: 0;
    padding: 0;
    color: var(--tc-ink, #23254E);
    font-size: var(--tc-fs-small, 13px);
    font-weight: var(--tc-fw-title, 700) !important;
    line-height: 22px;
    letter-spacing: 0;
    white-space: nowrap;
}

body .tc-pdp-inst.tc-pdp-inst .snappay-installment-price,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-price,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption .detail > .main-price-torobpay {
    color: var(--tc-ink, #23254E);
    font-size: var(--tc-fs-body, 14px);
    font-weight: var(--tc-fw-title, 700) !important;
    letter-spacing: 0;
}

body .tc-pdp-inst.tc-pdp-inst .snappay-installment-currency,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-currency,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption .detail > span:last-child {
    color: #81858B;
    font-size: 11px;
    font-weight: 400 !important;
}

/* the logos: one 30px chip each, on the brand's own colour (SnappPay's mark is white) */
body .tc-pdp-inst.tc-pdp-inst .snapp-pay_details > .snappay-installment-logo,
body .tc-pdp-inst.tc-pdp-inst .digi-pay_details > .digipay-installment-logo,
body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .logo_torobpay {
    order: -1;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    height: 30px;
    padding: 4px 10px;
    border-radius: 8px;
    box-sizing: border-box;
}

body .tc-pdp-inst.tc-pdp-inst .snapp-pay_details > .snappay-installment-logo {
    background: #1266D8;
}

body .tc-pdp-inst.tc-pdp-inst .digi-pay_details > .digipay-installment-logo {
    background: #EEF3FF;
}

body .tc-pdp-inst.tc-pdp-inst .torob-pay_details .logo_torobpay {
    background: #9CE669;
}

body .tc-pdp-inst.tc-pdp-inst .snappay-installment-logo img,
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-logo img,
body .tc-pdp-inst.tc-pdp-inst .logo_torobpay img {
    width: auto;
    max-width: 56px;
    height: auto;
    max-height: 20px;
}

/* DigiPay's logo carries its own white margin: drawn larger to match the other two */
body .tc-pdp-inst.tc-pdp-inst .digipay-installment-logo img {
    max-height: 30px;
    margin: -4px 0;
}

/* the tags as "related searches": grey pill chips with a search mark */
body .tc-pdp-tags .tc-pdpm-tags__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px 0 12px;
    border-radius: 17px;
    background: #F0F0F1;
    font-size: var(--tc-fs-small, 13px);
    line-height: 20px;
    color: #424750;
    white-space: nowrap;
    text-decoration: none;
}

body .tc-pdp-tags .tc-pdpm-tags__chip:hover,
body .tc-pdp-tags .tc-pdpm-tags__chip:focus-visible {
    background: #E0E0E2;
    color: #0C0C0C;
    text-decoration: none;
}

body .tc-pdp-tags .tc-pdpm-tags__chip svg {
    flex: none;
    color: #81858B;
}

/* the desktop's buy box (.box-product): the cards under the add-to-cart button. The box is narrow
   (238px of content at 1440), so the cards sit closer and their label a step smaller to fit a third */
.box-product .tc-pdp-inst.tc-pdp-inst {
    gap: 6px;
    margin: 16px 0 0;
}

body .box-product .tc-pdp-inst.tc-pdp-inst > .snapp-pay_details.snappay-installment-box,
body .box-product .tc-pdp-inst.tc-pdp-inst > .digi-pay_details.digipay-installment-box,
body .box-product .tc-pdp-inst.tc-pdp-inst > .torob-pay_details {
    padding: 10px 2px;
}

body .box-product .tc-pdp-inst.tc-pdp-inst .snappay-installment-content::before,
body .box-product .tc-pdp-inst.tc-pdp-inst .digipay-installment-content::before,
body .box-product .tc-pdp-inst.tc-pdp-inst .torob-pay_details .caption::before {
    font-size: 11px;
}

/* the desktop's tags: the same chips, wrapping onto rows (no sideways scroll on a desktop) */
.tc-pdp-tags--desktop {
    margin: 0 0 32px;
    padding: 24px;
    border-radius: 16px;
    background: #FFF;
}

.tc-pdp-tags--desktop .tc-pdpm-tags__head {
    margin-bottom: 16px;
    font-size: var(--tc-fs-section, 15px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 24px;
    color: #0C0C0C;
}

.tc-pdp-tags--desktop .tc-pdpm-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tc-pdp-tags--desktop .tc-pdpm-tags__list > li {
    margin: 0;
    padding: 0;
}

/* in the top section beside the photos: no card of its own, the column is the card */
.tc-pdp-tags--desktop.tc-pdp-tags--inline {
    margin: 16px 0;
    padding: 0;
    background: none;
}

/* over the section tabs (Digikala's place): the page's own width, no card - the rule above and the
   tabs below already frame it */
.tc-pdp-tags--desktop.tc-pdp-tags--band {
    margin: 0;
    padding: 0 0 32px;
    border-radius: 0;
    background: none;
}

.tc-pdp-tags--band h2.tc-pdpm-tags__head {
    margin: 0 0 16px;
    padding: 0;
}

/* The description's tables (the editor's bare <table> in .product-full-description-content): flat, in a
   frame you can see - a 1px #E0E0E2 border with square corners, a light grey header row, fine lines
   between the rows and the columns, no shadows. The table is only as wide as its content (360-720px
   on a desktop), so the values sit near their names; a two-column table is a list of name/value
   pairs, the name in grey. Older layers (product.less's FULL DESCRIPTION, content-format.less's
   .tc-prose and, in the phone's bottom sheet, .tc-prose-compact) draw their own table with
   !important, hence one :is() as specific as the sheet's path for both places, and the !important
   here. */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) table {
    width: auto !important;
    min-width: min(100%, 360px);
    max-width: min(100%, 720px);
    margin: 24px 0 !important;
    border: 1px solid #E0E0E2 !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    border-radius: 0 !important;
    background: #FFF !important;
    box-shadow: none !important;
    font-size: var(--tc-fs-body, 14.5px);
    line-height: 1.8;
    overflow: hidden;
}

body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(th, td) {
    padding: 12px 16px !important;
    border: 0 !important;
    border-bottom: 1px solid #EDEDEF !important;
    background: none !important;
    color: #0C0C0C;
    font-size: inherit;
    font-weight: var(--tc-fw-text, 400);
    line-height: inherit;
    text-align: right;
    vertical-align: top;
}

/* fills the editor set inline on a row or a section (a tinted header row) go: one look for all */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(thead, tbody, tfoot, tr) {
    border: 0 !important;
    background: none !important;
}

/* a fine line between the columns (RTL: on each cell's left side, none after the last) */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(th, td):not(:last-child) {
    border-left: 1px solid #EDEDEF !important;
}

/* the header: small grey words on a light grey band */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) thead th,
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) tr:first-child > th {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    border-bottom-color: #E0E0E2 !important;
    background: #F7F7F8 !important;
    color: #62666D !important;
    font-size: var(--tc-fs-caption, 12px) !important;
    font-weight: var(--tc-fw-label, 600) !important;
}

/* and what the editor wrapped inside a header cell (a bold, a sized span) */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(thead th, tr:first-child > th) * {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
}

/* the frame closes the last row */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(tbody, table) > tr:last-child > *,
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) tbody:last-child tr:last-child > * {
    border-bottom: 0 !important;
}

/* name / value: the name as wide as its text, grey */
body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) tr > :first-child:nth-last-child(2) {
    /* auto, not a percentage: a percentage cell stretches a shrink-to-fit table to its max-width */
    width: auto;
    white-space: nowrap;
}

body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) tbody td:first-child:nth-last-child(2) {
    color: #62666D;
    font-weight: var(--tc-fw-text, 400);
}

/* a phone: the table takes the width, a long name may wrap (up to 40% of it) */
@media only screen and (max-width: 959px) {
    body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) table {
        width: 100% !important;
        min-width: 0;
        max-width: 100%;
        margin: 16px 0 !important;
    }

    body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) :is(th, td) {
        padding: 10px 12px !important;
    }

    body.page-product :is(.product-full-description-content.product-full-description-content, .tc-sheet .tc-sheet__pane > .tc-sheet-prose.product-full-description-content) tr > :first-child:nth-last-child(2) {
        width: auto;
        max-width: 40%;
        white-space: normal;
    }
}

/* Desktop, under the title: the average beside its star, then the reviews as a grey chip with a
   chevron that opens their tab - Digikala's row (ProductTemplate.Simple, .tc-pdp-rate) */
.tc-pdp-rate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 12px 0 0;
}

.tc-pdp-rate__avg {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 20px;
    color: #0C0C0C;
}

.tc-pdp-rate__avg svg {
    flex: none;
}

/* before the first review: the brand's average, with its word, in grey */
.tc-pdp-rate__avg--inherited {
    font-weight: var(--tc-fw-text, 400);
    color: #81858B;
}

.tc-pdp-rate .tc-pdp-rate__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 28px;
    padding: 0 10px 0 8px;
    border-radius: 14px;
    background: #F0F0F1;
    font-size: var(--tc-fs-caption, 12px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 20px;
    color: #0C0C0C;
    text-decoration: none;
}

.tc-pdp-rate .tc-pdp-rate__chip:hover,
.tc-pdp-rate .tc-pdp-rate__chip:focus-visible {
    background: #E0E0E2;
    color: #0C0C0C;
    text-decoration: none;
}

.tc-pdp-rate__chip svg {
    flex: none;
    color: #62666D;
}

/* Desktop buy box (.box-product): the struck-out price and the discount sit right under the price,
   read as one figure - their rows were each 31px tall, which left a wide gap between them */
.box-product .priceParent .km-price {
    row-gap: 0;
    margin-bottom: 0;
}

.box-product .priceParent .km-price .vp-price-product,
.box-product .priceParent .km-price .vp-price-product * {
    line-height: 26px;
}

.box-product .priceParent .km-price .vp-price-product .vp-price-box {
    align-items: center;
}

.box-product .priceParent .km-price .km-unit {
    height: 22px;
}

.box-product .priceParent .km-price .km-parent-discount,
.box-product .priceParent .km-price .km-parent-discount * {
    line-height: 20px;
}

/* the price row keeps a few px under its digits (the toman mark is taller): the old price comes up into them */
.box-product .priceParent .km-price .km-parent-discount {
    margin-top: -6px;
}

/* Desktop, over the title: brand > the category with only this brand, as on the phone
   (.tc-pdpm-brandrow) - two quiet grey links with a hairline under each (ProductTemplate.Simple) */
.tc-pdp-brandrow {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
}

.tc-pdp-brandrow .tc-pdp-brandrow__link {
    min-width: 0;
    /* no rule under them: two quiet links, the hover darkens them */
    padding: 3px 0 2px;
    overflow: hidden;
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-decoration: none;
    color: #62666D;
    transition: color .15s ease;
}

.tc-pdp-brandrow .tc-pdp-brandrow__link:hover,
.tc-pdp-brandrow .tc-pdp-brandrow__link:focus-visible {
    color: #23254E;
    text-decoration: none;
}

.tc-pdp-brandrow__sep {
    display: inline-flex;
    flex: none;
    color: #A1A3A8;
}

/* the rating row sits under the title's line now, not over it: 14px under the line (the title
   block's own 32px bottom margin goes when the row follows it), 24px over the variants */
body.page-product .km-product-page-top .km-product-left > .tc-pdp-rate {
    margin: 14px 0 24px;
}

body.page-product .km-product-page-top .km-product-left > .km-product-title.justDesktop:has(+ .tc-pdp-rate) {
    margin-bottom: 0 !important;
}

@media only screen and (min-width: 960px) {
    /* brand > category stands apart from the title under it */
    body.page-product .km-product-page-top .km-product-left .km-product-title .km-product-brand {
        margin-bottom: 16px;
    }

    /* the product's name: two steps down the type ladder (base.less), 22 -> 17 */
    body.page-product .km-product-page-top .km-product-left .km-product-title .km-title-title h1 {
        font-size: var(--tc-fs-h2, 17px);
        line-height: 1.8;
    }
}

.tc-pdp-rate__count {
    margin-right: 2px;
    font-weight: var(--tc-fw-text, 400);
    color: #A1A3A8;
}

/* phones: the same row under the title, on one line that scrolls sideways past the screen's edge
   as Digikala's does - the star and the average, the AI summary's pill, then the reviews */
.tc-pdp-rate--phone {
    flex-wrap: nowrap;
    gap: 8px;
    margin: 10px 0 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.tc-pdp-rate--phone::-webkit-scrollbar {
    display: none;
}

.tc-pdp-rate--phone > * {
    flex: none;
}

.tc-pdp-rate--phone .tc-pdp-rate__avg {
    margin-left: 4px;
}

/* "موجود در انبار <the store>": the buy box and the side box. A closed carton with a green tick;
   the line is hidden while the chosen variant is out of stock */
body.page-product .km-product-page-top .km-product-left .tc-bb__fact.tc-stock,
body.page-product .km-product-page-content .km-cart-content-left.tc-sb .tc-sb__fact.tc-stock {
    color: #424750;
}

body.page-product .km-product-page-top .km-product-left .tc-bb__fact.tc-stock svg,
body.page-product .km-product-page-content .km-cart-content-left.tc-sb .tc-sb__fact.tc-stock svg {
    color: #3F4064;
}

.tc-stock b {
    font-weight: 600;
    color: #23254E;
}

.tc-stock[hidden] {
    display: none !important;
}

/* THE DESKTOP PHOTO'S ZOOM (pdp-zoom.js): a lens over the photo, and beside the photo a white
   panel with what the lens covers, magnified. The old js-image-zoom lens and panel are not drawn. */
body.page-product .tc-pdp-media .vp-gallery-big :is(.vp-lens, .vp-lens-big) {
    display: none !important;
}

body.page-product .tc-pdp-media .vp-gallery-big[data-tc-zoom] {
    cursor: zoom-in;
}

.tc-zoom-lens {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .95);
    border-radius: 10px;
    background: rgba(255, 255, 255, .22);
    box-shadow: 0 0 0 1px rgba(12, 12, 12, .28), 0 6px 18px rgba(12, 12, 12, .12);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    will-change: transform;
}

.tc-zoom-panel {
    position: fixed;
    z-index: 60;
    box-sizing: border-box;
    border: 1px solid #E0E0E2;
    border-radius: 16px;
    background-color: #FFF;
    background-repeat: no-repeat;
    box-shadow: 0 16px 48px rgba(12, 12, 12, .14), 0 2px 8px rgba(12, 12, 12, .06);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(.985);
    transform-origin: right center;
    transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
}

.tc-zoom-panel.is-on {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .16s ease, transform .16s ease, visibility 0s;
}

/* The product rows under the page (similar, related, also bought - Components/*Products, drawn as
   the home page's showcase row) keep the hairline frame the page's rows had before they became
   showcase rows (product.less, "THE ROWS NEED AN EDGE NOW THAT THE PAGE IS WHITE"): on the white
   page it says where each row starts and stops. Wide screens; on a phone the rows run edge to
   edge like every other section. */
@media only screen and (min-width: 960px) {
    body.page-product .tc-showcase {
        padding: 20px 16px 16px;
        border: 1px solid #EDEDED;
        border-radius: 0;
        background: #fff;
    }
}