/* ==========================================================================
   Variant sheet (quick view) - assets/quickview/quickview.js
   --------------------------------------------------------------------------
   Design: Design/common/1.png. A bottom sheet over the listing: the product's photos side
   by side, the name with a link to the product page, the variant controls, and the
   product page's own mobile buy bar fixed at its foot (CTA, in-cart stepper or the
   out-of-stock panel, beside the price). Mobile: bottom sheet. Desktop (>= 768px): a
   centred dialog. While the product loads every block is there as a skeleton, so the
   sheet opens at its real size and nothing moves when the answer lands.

   Colours are the store's: the CTA and the selected ring use the theme colour the
   product page's own buy bar uses (--ryan-primary), the price and badge the product
   card's.
   ========================================================================== */

.tc-qv {
    --tc-qv-ink: #0C0C0C;
    --tc-qv-text: #3F4064;
    --tc-qv-muted: #81858B;
    --tc-qv-rule: #EDEDED;
    --tc-qv-chip-rule: #C9CCD1;
    --tc-qv-accent: var(--ryan-primary, #007AD0);
    --tc-qv-link: #168FDF;
    --tc-qv-alert: #ED303D;
    --tc-qv-skeleton: #ECECEC;
    --tc-qv-skeleton-shine: #F7F7F7;
    --tc-qv-backdrop: rgba(16, 22, 40, 0.45);
    --tc-qv-photo-ratio: 3 / 4;
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
    font-family: yekanbakh, tahoma, sans-serif;
    direction: rtl;
}

.tc-media-square .tc-qv {
    --tc-qv-photo-ratio: 1 / 1;
}

.tc-qv.is-open {
    visibility: visible;
    pointer-events: auto;
}

.tc-qv__backdrop {
    position: absolute;
    inset: 0;
    background: var(--tc-qv-backdrop);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.tc-qv.is-open .tc-qv__backdrop {
    opacity: 1;
}

.tc-qv__sheet {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-height: 88vh;
    max-height: 88dvh;
    background: #FFFFFF;
    border-radius: 16px 16px 0 0;
    color: var(--tc-qv-ink);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tc-qv.is-open .tc-qv__sheet {
    transform: translateY(0);
}

.tc-qv__sheet:focus {
    outline: none;
}

body.tc-qv-lock {
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header - a map app's place sheet: the grip, then the name with round tool
   buttons (share, close) at its end. The whole strip is the drag handle.
   -------------------------------------------------------------------------- */

.tc-qv__top {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    padding: 20px 16px 12px;
    touch-action: none;
    cursor: grab;
    transition: box-shadow 0.15s ease;
}

.tc-qv.is-scrolled .tc-qv__top {
    box-shadow: 0 1px 0 #E3E3E3;
}

.tc-qv.is-dragging .tc-qv__top {
    cursor: grabbing;
}

/* the product page's own sheet grip (.pdp-more-grip): 40x4, #E0E0E0, rounded */
.tc-qv__grip {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #E0E0E0;
    transform: translateX(-50%);
    pointer-events: none;
}

/* while the finger holds it the sheet follows it exactly - no easing behind the finger */
.tc-qv.is-dragging .tc-qv__sheet,
.tc-qv.is-dragging .tc-qv__backdrop {
    transition: none;
}

.tc-qv__headrow {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tc-qv__title {
    display: -webkit-box;
    flex: 1 1 auto;
    min-width: 0;
    margin: 4px 0 0;
    overflow: hidden;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    color: var(--tc-qv-ink);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.tc-qv__tools {
    display: flex;
    flex: 0 0 auto;
    gap: 10px;
    margin-top: 2px;
}

/* the round grey tool buttons */
.tc-qv__tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #F1F3F4;
    color: #202124;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.tc-qv__tool:active {
    background: #E3E5E8;
}

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

.tc-qv__tool:focus-visible {
    outline: 2px solid var(--tc-qv-accent);
    outline-offset: 2px;
}

.tc-qv__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: 16px;
}

/* --------------------------------------------------------------------------
   Photos - side by side, the next one peeking in so the row reads as scrollable
   -------------------------------------------------------------------------- */

.tc-qv__gallery {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 0 16px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 16px;
    scrollbar-width: none;
}

.tc-qv__gallery::-webkit-scrollbar {
    display: none;
}

.tc-qv__photo {
    flex: 0 0 35.2%; /* a fifth smaller than the 44% it was: the row shows more, each photo less */
    aspect-ratio: var(--tc-qv-photo-ratio);
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: transparent;
    scroll-snap-align: start;
    cursor: zoom-in;
}

/* drawn over the photo, so the ring does not change the photo's size */
.tc-qv__photo {
    position: relative;
}

/* The photo of the chosen variant is framed the way a chosen "large photo" value is: a 2px ring
   in the accent, and the photo drawn 4px inside it so the ring never sits on the picture. The
   frame keeps the photo's own box - the photo shrinks into it - so choosing never moves the row.
   The grey behind a photo is the photo's, so the gap inside the ring stays white. */
.tc-qv__photo.is-variant::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--tc-qv-accent);
    border-radius: inherit;
    pointer-events: none;
}

.tc-qv__photo img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background: #F4F2F0;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
    transition: width 0.15s ease, height 0.15s ease, margin 0.15s ease, border-radius 0.15s ease;
}

/* 2px ring + 4px gap */
.tc-qv__photo.is-variant img {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    margin: 6px;
    border-radius: 7px;
}

/* --------------------------------------------------------------------------
   Under the name: the rating and the way to the product page
   -------------------------------------------------------------------------- */

.tc-qv__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin: 0 16px 12px;
    min-height: 22px;
}

/* the product page's rating chip (pdp-digikala.css .dk-rating__score): its gold star, the score in
   bold, the count in brackets - here with a chevron, because it is also the way to the reviews */
.tc-qv__rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    line-height: 24px;
    color: #424750;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-qv__rating-star {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: #F9BC00;
}

.tc-qv__rating-value {
    font-weight: 700;
}

.tc-qv__rating-go {
    display: flex;
    margin-inline-start: 2px;
    color: #81858B;
}

.tc-qv__rating-go svg {
    width: 16px;
    height: 16px;
}

/* five stars, each filled to its share of the rating: a grey star under a gold one clipped.
   Right to left, as the page reads - the first star is the rightmost and a part-filled one
   fills from its right edge */
.tc-qv-stars {
    display: inline-flex;
    gap: 1px;
    direction: rtl;
}

.tc-qv-star {
    position: relative;
    display: block;
    width: 15px;
    height: 15px;
}

.tc-qv-star svg {
    position: absolute;
    inset: 0;
    width: 15px;
    height: 15px;
    color: #DADCE0;
}

.tc-qv-star svg + svg {
    color: #FCBC3A;
    clip-path: inset(0 0 0 calc(100% - var(--fill, 0%)));
}

.tc-qv__more {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 2px;
    margin-inline-start: auto;
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-qv-link);
    text-decoration: none;
}

.tc-qv__more:hover {
    color: var(--tc-qv-link);
}

.tc-qv__more svg {
    width: 14px;
    height: 14px;
}

/* --------------------------------------------------------------------------
   Variant groups
   -------------------------------------------------------------------------- */

.tc-qv__attrs {
    padding: 0 16px;
}

.tc-qv-group {
    margin-top: 24px;
}

.tc-qv-group[hidden] {
    display: none;
}

.tc-qv-group__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.tc-qv-group__label {
    font-size: 14px;
    line-height: 22px;
    color: var(--tc-qv-muted);
}

.tc-qv-group__value {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 22px;
    color: var(--tc-qv-ink);
}

.tc-qv-group.is-invalid .tc-qv-group__label {
    color: var(--tc-qv-alert);
}

.tc-qv-group__enlarge {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-qv-link);
    cursor: pointer;
}

.tc-qv-group__enlarge svg {
    width: 18px;
    height: 18px;
}

.tc-qv-group__values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 10px;
}

.tc-qv-group--fixed .tc-qv-group__fixed {
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-qv-muted);
}

/* colour and image values: a circle with a white gap and a ring when chosen */
.tc-qv-swatch {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

.tc-qv-swatch__face {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
    background-color: #FFFFFF;
    background-position: center;
    background-size: cover;
}

.tc-qv-swatch__photo,
.tc-qv-swatch__name {
    display: none;
}

.tc-qv-swatch.is-selected {
    border-color: var(--tc-qv-accent);
}

.tc-qv-group.is-invalid .tc-qv-swatch:not(.is-soldout) {
    border-color: rgba(237, 48, 61, 0.35);
}

.tc-qv-swatch.is-soldout {
    cursor: default;
}

.tc-qv-swatch.is-soldout .tc-qv-swatch__face {
    opacity: 0.55;
    box-shadow: none;
    outline: 1.5px dashed var(--tc-qv-chip-rule);
    outline-offset: 2px;
}

.tc-qv-swatch__tag {
    position: absolute;
    top: -9px;
    left: 50%;
    padding: 0 5px;
    border-radius: 4px;
    background: #E9E9EA;
    font-size: 10px;
    line-height: 16px;
    color: var(--tc-qv-muted);
    white-space: nowrap;
    transform: translateX(-50%);
}

/* "large photo": the values show their own photos instead of the colour circles */
.tc-qv-group.is-large .tc-qv-swatch {
    width: 76px;
    height: 76px;
    border-radius: 14px;
}

.tc-qv-group.is-large .tc-qv-swatch__face {
    display: none;
}

.tc-qv-group.is-large .tc-qv-swatch__photo {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 10px;
    object-fit: cover;
    background: #F4F2F0;
}

.tc-qv-group.is-large .tc-qv-swatch:not(:has(.tc-qv-swatch__photo)) .tc-qv-swatch__face {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 10px;
}

/* every other choice: a pill */
.tc-qv-pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--tc-qv-chip-rule);
    border-radius: 19px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    line-height: 20px;
    color: var(--tc-qv-text);
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, color 0.15s ease;
}

/* a value's name with its numbers in Latin digits ("1/5 متری"), as the store writes them - the
   theme's Latin-digit cut of the same face (yekanbakhen) */
.tc-qv-pill,
.tc-qv-group__value,
.tc-qv-photos__cap {
    font-family: yekanbakhen, yekanbakh, tahoma, sans-serif;
}

/* chosen: the accent's ring, a light wash of it inside, the name in it */
.tc-qv-pill.is-selected {
    border: 1.5px solid var(--tc-qv-accent);
    background: rgba(var(--ryan-primary-rgb, 0, 122, 208), 0.08);
    color: var(--tc-qv-accent);
    font-weight: 700;
}

.tc-qv-group.is-invalid .tc-qv-pill:not(.is-soldout) {
    border-color: rgba(237, 48, 61, 0.45);
}

/* a value that does not exist with what is chosen before it (the variant map): the product page's
   unavailable chip (product.less .tc-attr--pills .disableItem) - dashed on grey - still choosable,
   as there; the buy bar then says the combination is out of stock */
.tc-qv-pill.is-unavailable:not(.is-selected) {
    border-style: dashed;
    border-color: #94969C;
    background: #F2F2F2;
    color: #A1A3A8;
}

.tc-qv-swatch.is-unavailable:not(.is-selected) .tc-qv-swatch__face {
    opacity: 0.55;
    outline: 1.5px dashed #94969C;
    outline-offset: 2px;
}

/* a value that is gone: struck through corner to corner, as in the design */
.tc-qv-pill.is-soldout {
    color: #C4C6CA;
    border-color: #E3E4E6;
    cursor: default;
}

.tc-qv-pill.is-soldout::after {
    content: "";
    position: absolute;
    inset: 50% -4px auto;
    height: 1px;
    background: #D5D7DA;
    transform: rotate(-24deg);
}

.tc-qv-text {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--tc-qv-chip-rule);
    border-radius: 10px;
    background: #FFFFFF;
    font: inherit;
    font-size: 16px;
    line-height: 1.6;
    color: var(--tc-qv-ink);
    resize: vertical;
}

.tc-qv-group.is-invalid .tc-qv-text {
    border-color: var(--tc-qv-alert);
}

.tc-qv__message {
    margin: 16px 16px 0;
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-qv-muted);
}

.tc-qv__message:empty {
    display: none;
}

.tc-qv__message.is-error {
    color: var(--tc-qv-alert);
}

/* --------------------------------------------------------------------------
   The line between choosing (photos, variants) and reading (the tabs and their
   sections), so the two never read as one block. Its own element rather than a
   border on the tab bar: the bar sticks under the sheet's header, which has a rule
   of its own, and a border on the bar would double it there.
   -------------------------------------------------------------------------- */

.tc-qv__divide {
    height: 1px;
    margin-top: 28px;
    background: var(--tc-qv-rule);
}

/* --------------------------------------------------------------------------
   Tabs - the product page's sections, under what buying needs first. The bar
   stays at the top of the sheet while its content scrolls.
   -------------------------------------------------------------------------- */

.tc-qv__tabs {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    margin-top: 8px;
    padding: 0 4px;
    overflow-x: auto;
    border-bottom: 1px solid #E3E3E3;
    background: #FFFFFF;
    scrollbar-width: none;
}

.tc-qv__tabs::-webkit-scrollbar {
    display: none;
}

.tc-qv__tabs[hidden] {
    display: none;
}

.tc-qv-tab {
    position: relative;
    display: inline-flex;
    /* grows to share the bar, but only so far: two or three tabs sit side by side from the
       start of the bar instead of each stretching across a third or half of it */
    flex: 1 0 auto;
    max-width: 136px;
    align-items: center;
    justify-content: center;
    height: 48px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #474747;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-qv-tab.is-active {
    color: var(--tc-qv-accent);
    font-weight: 700;
}

/* the marker: as wide as the label, 3px, rounded on top */
.tc-qv-tab__label {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
}

.tc-qv-tab.is-active .tc-qv-tab__label::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: 0;
    left: -2px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--tc-qv-accent);
}

.tc-qv-tab:focus-visible {
    outline: 2px solid var(--tc-qv-accent);
    outline-offset: -4px;
    border-radius: 8px;
}

/* the sections, stacked as on the product page: each headed, a rule between them */
.tc-qv-sec {
    padding: 20px 16px 4px;
}

.tc-qv-sec + .tc-qv-sec {
    margin-top: 12px;
    border-top: 1px solid #EEEEEE;
}

.tc-qv-sec__title {
    margin: 0 0 14px;
    font-size: 17px;
    font-weight: 700;
    line-height: 26px;
    color: var(--tc-qv-ink);
}

/* a long description: its opening, faded, then "ادامه مطلب" */
.tc-qv-rich.is-clamped {
    max-height: 420px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.tc-qv-readmore {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--tc-qv-link);
    cursor: pointer;
}

.tc-qv-readmore svg {
    width: 16px;
    height: 16px;
    transform: rotate(180deg);
    transition: transform 0.2s ease;
}

.tc-qv-readmore[aria-expanded="false"] svg {
    transform: none;
}

.tc-qv-panel-skel {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tc-qv-skel--text {
    width: 100%;
    height: 12px;
    border-radius: 6px;
}

.tc-qv-skel--text.is-short {
    width: 60%;
}

.tc-qv-panel-error {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--tc-qv-muted);
}

.tc-qv-retry {
    padding: 6px 14px;
    border: 1px solid var(--tc-qv-chip-rule);
    border-radius: 16px;
    background: #FFFFFF;
    font: inherit;
    font-size: 13px;
    color: var(--tc-qv-text);
    cursor: pointer;
}

.tc-qv-empty {
    margin: 0;
    font-size: 13px;
    line-height: 22px;
    color: var(--tc-qv-muted);
}

/* the product page's own description and usage markup, kept inside the sheet */
.tc-qv-rich {
    font-size: 14px;
    line-height: 2;
    color: var(--tc-qv-text);
    overflow-wrap: anywhere;
}

.tc-qv-rich img,
.tc-qv-rich video,
.tc-qv-rich iframe {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px;
}

.tc-qv-rich table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.tc-qv-rich p {
    margin: 0 0 12px;
}

/* specifications: the phone product page's own table (_PdpmSpecTable, pdp-mobile.css "Specification
   table") - the name on a soft grey tile, the value beside it in ink, each group under its title */
.tc-qv .tc-pdpm-spec {
    --spec-tile: #F5F5F6;
    width: 100%;
    margin: 8px 0 0;
    border: 0;
    border-collapse: separate;
    border-spacing: 0 4px;
    background: none;
    table-layout: fixed;
}

.tc-qv .tc-pdpm-spec tr {
    border: 0;
    background: none;
}

.tc-qv .tc-pdpm-spec th,
.tc-qv .tc-pdpm-spec td {
    padding: 7px 12px;
    border: 0;
    font-size: var(--tc-fs-small, 14px);
    line-height: 1.9;
    text-align: right;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.tc-qv .tc-pdpm-spec th {
    width: 120px;
    border-radius: 8px;
    background: var(--spec-tile);
    font-weight: 400;
    color: #62666D;
}

.tc-qv .tc-pdpm-spec td {
    padding-right: 14px;
    background: none;
    font-weight: 500;
    color: #23262B;
}

.tc-qv .tc-pdpm-spec__v + .tc-pdpm-spec__v::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    margin: 0 8px;
    border-radius: 50%;
    background: #C0C2C5;
    vertical-align: middle;
}

.tc-qv .tc-pdpm-spec__group {
    margin: 0;
    padding: 20px 0 8px;
    font-size: var(--tc-fs-h3, 15px);
    font-weight: var(--tc-fw-title, 700);
    line-height: 1.7;
    color: var(--tc-qv-ink);
}

.tc-qv .tc-qv-spec > .tc-pdpm-spec__group:first-child {
    padding-top: 0;
}

/* reviews - the product page's rating block (pdp-rating.css), then a map app's tools and list */
.tc-qv-reviews__summary {
    padding-bottom: 16px;
    border-bottom: 1px solid #F1F2F4;
}

.tc-qv-reviews__none {
    padding-top: 14px;
}

/* the reviews' tools: search and a chip per star, then the sort chips */
.tc-qv-rtools {
    margin-top: 16px;
}

.tc-qv-chips {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -16px 12px;
    padding: 0 16px;
    overflow-x: auto;
    scrollbar-width: none;
}

.tc-qv-chips[hidden] {
    display: none;
}

.tc-qv-chips::-webkit-scrollbar {
    display: none;
}

.tc-qv-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: #F1F3F4;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: #1F1F1F;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-qv-chip.is-active {
    background: #DCE3EA;
}

.tc-qv-chip__check {
    display: none;
}

.tc-qv-chip.is-active .tc-qv-chip__check {
    display: inline-flex;
}

.tc-qv-chip svg {
    width: 18px;
    height: 18px;
}

/* the bare search icon at the row's start */
.tc-qv-chip--icon {
    width: 40px;
    padding: 0;
    justify-content: center;
    background: transparent;
}

.tc-qv-chip--icon svg {
    width: 22px;
    height: 22px;
}

.tc-qv-chip__star {
    display: inline-flex;
    color: #FBBC04;
}

.tc-qv-chip__star svg {
    width: 14px;
    height: 14px;
}

.tc-qv-chip__n {
    margin-inline-start: 4px;
    color: var(--tc-qv-muted);
}

/* the search that takes the first row's place */
.tc-qv-rsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    margin-bottom: 12px;
    padding: 0 6px 0 4px;
    padding-inline-start: 14px;
    border-radius: 22px;
    background: #F1F3F4;
}

.tc-qv-rsearch[hidden] {
    display: none;
}

.tc-qv-rsearch__icon {
    display: flex;
    color: #474747;
}

.tc-qv-rsearch__icon svg {
    width: 20px;
    height: 20px;
}

.tc-qv-rsearch__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 16px;
    color: var(--tc-qv-ink);
    -webkit-appearance: none;
    appearance: none;
}

.tc-qv-rsearch__input::-webkit-search-cancel-button {
    display: none;
}

.tc-qv-rsearch__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #474747;
    cursor: pointer;
}

.tc-qv-rsearch__close svg {
    width: 20px;
    height: 20px;
}

.tc-qv-reviews__found {
    margin: 0 0 4px;
    font-size: 13px;
    line-height: 20px;
    color: var(--tc-qv-muted);
}

.tc-qv-reviews__found[hidden] {
    display: none;
}

.tc-qv-reviews mark {
    padding: 0;
    background: transparent;
    font-weight: 700;
    color: var(--tc-qv-ink);
}

/* one review */
.tc-qv-review {
    padding: 16px 0;
    border-bottom: 1px solid #F1F2F4;
}

.tc-qv-review__who {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.tc-qv-review__id {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.tc-qv-review__sub {
    font-size: 12px;
    line-height: 18px;
    color: var(--tc-qv-muted);
}

.tc-qv-review__avatar {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
}

.tc-qv-review__avatar.is-small {
    width: 22px;
    height: 22px;
    font-size: 11px;
}

.tc-qv-review__name {
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tc-qv-ink);
}

.tc-qv-review__rating {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tc-qv-review__rating .tc-qv-star,
.tc-qv-review__rating .tc-qv-star svg {
    width: 13px;
    height: 13px;
}

.tc-qv-review__when {
    font-size: 12px;
    line-height: 18px;
    color: var(--tc-qv-muted);
}

.tc-qv-review__title {
    margin: 8px 0 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 22px;
    color: var(--tc-qv-ink);
}

/* four lines, then "more" */
.tc-qv-review__text {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 22px;
    color: var(--tc-qv-text);
    white-space: pre-line;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.tc-qv-review__text.is-open {
    display: block;
    -webkit-line-clamp: unset;
}

.tc-qv-review__expand {
    padding: 2px 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--tc-qv-ink);
    cursor: pointer;
}

.tc-qv-review__expand[hidden] {
    display: none;
}

/* the shop's answer, set apart as a map app sets the owner's */
.tc-qv-review__reply {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #F6F7F9;
}

.tc-qv-review__reply-head {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    line-height: 20px;
    color: var(--tc-qv-ink);
}

.tc-qv-review__reply-head span {
    font-weight: 400;
    color: var(--tc-qv-muted);
}

.tc-qv-review__reply p {
    margin: 4px 0 0;
    font-size: 13px;
    line-height: 21px;
    color: var(--tc-qv-text);
    white-space: pre-line;
}

.tc-qv-review__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}

.tc-qv-review__like {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    height: 36px;
    margin-inline-start: -8px;
    padding: 0 8px;
    border: 0;
    border-radius: 18px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    color: #474747;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.tc-qv-review__like:active {
    background: #F1F3F4;
}

.tc-qv-review__like svg {
    width: 20px;
    height: 20px;
}

.tc-qv-review__like.is-on {
    color: var(--tc-qv-accent);
}

.tc-qv-review__like.is-on svg {
    fill: rgba(var(--ryan-primary-rgb, 0, 122, 208), 0.16);
}

.tc-qv-review__like-count {
    font-weight: 700;
}

.tc-qv-review__like-count:empty {
    display: none;
}

.tc-qv-review__note {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 12px;
    line-height: 18px;
    color: var(--tc-qv-muted);
}

.tc-qv-review.is-skeleton .tc-qv-skel--text {
    margin-top: 10px;
}

.tc-qv-reviews__more {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 12px;
    border: 1px solid #DADCE0;
    border-radius: 22px;
    background: #FFFFFF;
    font: inherit;
    font-size: 14px;
    color: var(--tc-qv-accent);
    cursor: pointer;
}

.tc-qv-reviews__more[hidden] {
    display: none;
}

.tc-qv-reviews__more.is-busy {
    color: transparent;
    background: linear-gradient(90deg, var(--tc-qv-skeleton) 0%, var(--tc-qv-skeleton-shine) 50%, var(--tc-qv-skeleton) 100%);
    background-size: 200% 100%;
    animation: tc-qv-shimmer 1.2s linear infinite;
}

/* --------------------------------------------------------------------------
   Photos - a grid of the product's photos, then the variants' own, captioned
   -------------------------------------------------------------------------- */

.tc-qv-photos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.tc-qv-photos__title {
    margin: 20px 0 10px;
    font-size: 15px;
    font-weight: 700;
    line-height: 24px;
    color: var(--tc-qv-ink);
}

.tc-qv-photos__item {
    position: relative;
    aspect-ratio: var(--tc-qv-photo-ratio);
    padding: 0;
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #F4F2F0;
    cursor: zoom-in;
}

.tc-qv-photos__item[data-qv-vphoto] {
    cursor: pointer;
}

.tc-qv-photos__item[disabled] {
    cursor: default;
    opacity: 0.55;
}

.tc-qv-photos__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -webkit-user-drag: none;
    user-select: none;
}

.tc-qv-photos__item[data-qv-vphoto] img {
    object-fit: cover;
}

/* the dark caption a map app sets on a menu photo */
.tc-qv-photos__cap {
    position: absolute;
    right: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(32, 33, 36, 0.72);
    overflow: hidden;
    font-size: 12px;
    line-height: 20px;
    color: #FFFFFF;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------------------
   Buy bar - the product page's mobile buy bar (.bottom-fix-pdp-mobile), measured:
   16px padding, a 1px #EDEDED rule and a soft upward shadow; a 48px CTA with 12px
   corners in the theme colour; the price 20px/900 with the toman mark beside it
   -------------------------------------------------------------------------- */

.tc-qv__bar {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 81px;
    padding: 16px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--tc-qv-rule);
    background: #FFFFFF;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

.tc-qv__action {
    display: flex;
    flex: 0 1 auto;
    min-width: 0;
}

.tc-qv__bar.is-soldout .tc-qv__action {
    flex: 1 1 auto;
}

/* The add-to-cart button is the product page's own (_AddToCart markup, .km-add-product-to-cart in
   .pdp-buybar__cta), drawn by assets/pdp-buybar/pdp-buybar-cta.css exactly as the product page's bar
   draws it. What is left here: the bar's layout around it, and the "call for price" link, which the
   product page has no bar button for. */
.tc-qv__action .pdp-buybar__cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
}

a.tc-qv__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 168px;
    height: 48px;
    padding: 0 16px;
    border-radius: 12px;
    background: var(--tc-qv-accent);
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    text-decoration: none;
    white-space: nowrap;
}

a.tc-qv__cta:hover,
a.tc-qv__cta:focus {
    color: #FFFFFF;
}

/* where the theme's loader (core.js) is not on the page */
.tc-qv__cta.is-busy {
    opacity: 0.75;
    pointer-events: none;
}

/* the QSM V2 stepper the selected variant gets once it is on a cart line - its look is the product
   page bar's own (.pdp-buybar__qty, assets/pdp-buybar/pdp-buybar-qty.css); this only places it */
.tc-qv__qty {
    display: flex;
    align-items: center;
    min-height: 48px;
}

.tc-qv__bar.is-busy .tc-qv__action {
    opacity: 0.6;
    pointer-events: none;
    transition: opacity 0.15s ease 0.12s;
}

.tc-qv__price {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 0;
    text-align: left;
}

.tc-qv__now {
    display: flex;
    align-items: center;
    gap: 4px;
    direction: rtl;
}

.tc-qv__amount {
    font-size: 20px;
    font-weight: 900;
    line-height: 28px;
    color: var(--tc-qv-ink);
}

.tc-qv__unit img {
    display: block;
    width: auto;
    height: 22px;
    max-width: none;
}

.tc-qv__was {
    display: flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
}

.tc-qv__old {
    font-size: 14px;
    line-height: 20px;
    color: #BCBCBC;
    text-decoration: line-through;
}

/* the product card's discount badge, in the bar's size */
.tc-qv__pct.tc-card__discount-badge {
    font-size: 15px;
}

.tc-qv__oos {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
}

.tc-qv__oos-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #F4F4F5;
    color: var(--tc-qv-muted);
}

.tc-qv__oos-icon svg {
    width: 22px;
    height: 22px;
}

.tc-qv__oos-text {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    line-height: 18px;
    color: var(--tc-qv-muted);
}

.tc-qv__oos-text strong {
    font-size: 15px;
    line-height: 24px;
    color: var(--tc-qv-ink);
}

/* --------------------------------------------------------------------------
   Skeleton
   -------------------------------------------------------------------------- */

.tc-qv-skel {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--tc-qv-skeleton);
}

.tc-qv-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--tc-qv-skeleton) 0%, var(--tc-qv-skeleton-shine) 50%, var(--tc-qv-skeleton) 100%);
    background-size: 200% 100%;
    animation: tc-qv-shimmer 1.2s linear infinite;
}

.tc-qv__photo.tc-qv-skel {
    cursor: default;
}

.tc-qv-skel--line {
    width: 88%;
    height: 14px;
    margin: 7px 0;
    border-radius: 7px;
}

.tc-qv-skel--line.is-short {
    width: 56%;
}

.tc-qv-skel--meta {
    width: 140px;
    height: 14px;
    border-radius: 7px;
}

.tc-qv-skel--tab {
    flex: 0 0 auto;
    width: 64px;
    height: 14px;
    margin: 17px 8px;
    border-radius: 7px;
}

.tc-qv-skel--card {
    width: 100%;
    height: 132px;
    border-radius: 16px;
}

.tc-qv-skel--card.is-low {
    height: 64px;
    border-radius: 20px;
}

.tc-qv-skel--label {
    width: 96px;
    height: 14px;
    border-radius: 7px;
}

.tc-qv-skel--chip {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.tc-qv-group:nth-child(2) .tc-qv-skel--chip {
    width: 56px;
    height: 38px;
    border-radius: 19px;
}

.tc-qv-skel--cta {
    width: 168px;
    height: 48px;
    border-radius: 12px;
}

.tc-qv-skel--price {
    width: 112px;
    height: 24px;
    border-radius: 8px;
}

.tc-qv.is-loading .tc-qv__tools [data-qv-share] {
    visibility: hidden;
}

@keyframes tc-qv-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

@keyframes tc-qv-pulse {
    50% { opacity: 0.4; }
}

/* --------------------------------------------------------------------------
   Photo viewer - full screen, swipe between the photos, pinch or double-tap to zoom
   -------------------------------------------------------------------------- */

.tc-qv-viewer {
    position: fixed;
    inset: 0;
    z-index: 10060;
    display: none;
    flex-direction: column;
    background: #FFFFFF;
}

.tc-qv-viewer.is-open {
    display: flex;
}

.tc-qv-viewer__close {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
    color: #1F1F1F;
    cursor: pointer;
}

.tc-qv-viewer__close svg {
    width: 22px;
    height: 22px;
}

/* the structural rules Swiper's own stylesheet would give - the storefront loads only a few of
   them (Head.cshtml), so the viewer states the ones a horizontal, zoomable slider needs */
.tc-qv-viewer__swiper {
    position: relative;
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    overflow: hidden;
    touch-action: pan-y;
}

.tc-qv-viewer__swiper > .swiper-wrapper {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    transition-property: transform;
}

.tc-qv-viewer__swiper .swiper-slide {
    position: relative;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.tc-qv-viewer__swiper .swiper-zoom-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

.tc-qv-viewer__swiper .swiper-zoom-container > img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.tc-qv-viewer__counter {
    position: absolute;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    z-index: 2;
    padding: 2px 12px;
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.55);
    font-family: yekanbakh, tahoma, sans-serif;
    font-size: 13px;
    line-height: 24px;
    color: #FFFFFF;
    transform: translateX(-50%);
}

/* --------------------------------------------------------------------------
   Desktop: a centred dialog
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
    .tc-qv {
        align-items: center;
    }

    /* twice the phone's width, so the photos, the choices and the sections have room; never wider
       than the window leaves */
    .tc-qv__sheet {
        width: min(960px, calc(100vw - 48px));
        max-height: 86vh;
        border-radius: 16px;
        overflow: hidden;
        transform: translateY(24px);
        opacity: 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .tc-qv.is-open .tc-qv__sheet {
        transform: none;
        opacity: 1;
    }

    /* about the size a photo had in the 480px dialog (32%): the wider row shows more of them
       rather than larger ones */
    .tc-qv__photo {
        flex-basis: 17%;
    }

    /* the button and the price sit together at the END of the bar - the left - 134px apart, and
       the rest of the wide bar is empty, its rule and shadow still running edge to edge. The
       content never takes more than a phone's width (448px, a 480px sheet less its 16px sides),
       which is what a sold-out bar's stretching button fills. */
    .tc-qv__bar {
        justify-content: flex-end;
        gap: 134px;
        padding-right: max(16px, calc(100% - 464px));
    }

    /* A reading width, not the dialog's: the choices and every section (reviews, specs, the
       description...) keep to 720px from the right edge, where a line of text or a row of bars is
       still read as one, instead of running 928px across. The gallery and the tab bar stay full
       width - they are rows to scroll and to steer, not text. */
    .tc-qv__attrs > *,
    .tc-qv-sec > * {
        max-width: 720px;
    }

    /* the rating block's two halves (the score and the bars) as on the product page's own column,
       not stretched apart */
    .tc-qv .pdp-rating__summary {
        max-width: 560px;
    }

    /* the photos section: four across within the reading width, about the gallery's own size,
       instead of two of half a dialog each */
    .tc-qv-photos {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    /* a dialog, not a sheet: nothing to drag */
    .tc-qv__grip {
        display: none;
    }

    .tc-qv__top {
        cursor: default;
    }

    .tc-qv-viewer__swiper .swiper-zoom-container > img {
        max-height: 92vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-qv__sheet,
    .tc-qv__backdrop {
        transition: none;
    }

    .tc-qv-skel::after {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   The "in your cart" dot - a product whose variant is chosen in this sheet shows no
   count on its card (a count could not say which variant it counts); an orange dot
   at the top-left of its add circle, a little off it, says some variant is in the
   cart. Drawn by FastAddProductToCartCircle and HomepageShowcase, kept in step by
   syncInCartDots in quickview.js.
   -------------------------------------------------------------------------- */

/* No position is set on the hosts: both are already absolutely placed on the card (QSM's
   .in-productBox, the showcase's .tc-sc-card__cart), and the dot needs nothing more. A
   `position: relative` here pulled them out of that placement and dropped the circles below
   the photo. The dot is the size of the product page's selected-swatch dot (6px). */
.tc-incart-dot {
    position: absolute;
    top: -4px;
    left: -4px;
    z-index: 3;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FF8A00;
    pointer-events: none;
}

.tc-incart-dot[hidden] {
    display: none;
}

/* ==========================================================================
   Phones: the product page's own look (pdp-mobile.css), measured off it - the sheet is the
   product page in small, so its title, variant chips, tabs and section heads are the page's,
   not a second design of them.
   - title 16/600, as the page's h1
   - a group's head "سایز: قطر 150" 14.5/600 in ink, 14px over its chips
   - values as the page's chips: 36px, 8px corners, 12px, a grey hairline; the chosen one a
     dark double ring; in one row that runs edge to edge and scrolls; a colour is a chip with
     its 20px circle and its name, the chosen circle ticked
   - groups 20px apart; tabs 12/600 grey, the current one dark with a 4px dark bar
   - section heads 15/700
   ========================================================================== */
@media (max-width: 767.98px) {
    .tc-qv__title {
        font-size: 16px;
        font-weight: 600;
        line-height: 25.6px;
    }

    .tc-qv-group {
        margin-top: 20px;
    }

    .tc-qv-group__head {
        align-items: center;
        gap: 4px;
        margin-bottom: 12px;
    }

    .tc-qv-group__label {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 28.8px;
        color: #0C0C0C;
    }

    .tc-qv-group__value {
        font-size: 14.5px;
        font-weight: 600;
        line-height: 28.8px;
        color: #0C0C0C;
    }

    .tc-qv-group__values {
        flex-wrap: nowrap;
        gap: 8px;
        margin: 0 -16px;
        padding: 2px 16px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .tc-qv-group__values::-webkit-scrollbar {
        display: none;
    }

    .tc-qv-pill,
    .tc-qv-group:not(.is-large) .tc-qv-swatch {
        flex: 0 0 auto;
        gap: 6px;
        width: auto;
        min-width: 0;
        height: 36px;
        padding: 6px 12px;
        border: 1px solid #E0E0E2;
        border-radius: 8px;
        background: #FFFFFF;
        font-family: yekanbakhen, yekanbakh, tahoma, sans-serif;
        font-size: 12px;
        font-weight: 400;
        line-height: 21.6px;
        color: #424242;
        transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
    }

    .tc-qv-pill:active,
    .tc-qv-group:not(.is-large) .tc-qv-swatch:active {
        transform: scale(.97);
    }

    .tc-qv-pill.is-selected,
    .tc-qv-group:not(.is-large) .tc-qv-swatch.is-selected {
        border: 1px solid #424750;
        background: #FFFFFF;
        box-shadow: inset 0 0 0 1px #424750;
        color: #424242;
        font-weight: 400;
    }

    .tc-qv-group.is-invalid .tc-qv-pill:not(.is-soldout),
    .tc-qv-group.is-invalid .tc-qv-swatch:not(.is-soldout) {
        border-color: rgba(237, 48, 61, 0.55);
    }

    /* not with what is chosen: faded, as the page's .disableItem */
    .tc-qv-pill.is-unavailable:not(.is-selected),
    .tc-qv-group:not(.is-large) .tc-qv-swatch.is-unavailable:not(.is-selected) {
        border: 1px solid #E0E0E2;
        background: #FFFFFF;
        color: #424242;
        opacity: .45;
    }

    .tc-qv-swatch.is-unavailable:not(.is-selected) .tc-qv-swatch__face {
        opacity: 1;
        outline: 0;
    }

    .tc-qv-group:not(.is-large) .tc-qv-swatch__face {
        position: relative;
        flex: 0 0 20px;
        width: 20px;
        height: 20px;
        border: 1px solid #E0E0E2;
        box-shadow: none;
    }

    .tc-qv-group:not(.is-large) .tc-qv-swatch.is-selected .tc-qv-swatch__face::after {
        content: "";
        position: absolute;
        inset: 0;
        background: center / 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E");
        filter: drop-shadow(0 0 1px rgba(0, 0, 0, .5));
    }

    .tc-qv-group:not(.is-large) .tc-qv-swatch__name {
        display: inline;
        white-space: nowrap;
    }

    .tc-qv-group:not(.is-large) .tc-qv-swatch__tag {
        top: -8px;
    }

    .tc-qv__tabs {
        padding: 0 4px;
        border-bottom-color: #E0E0E2;
    }

    .tc-qv-tab {
        flex: 0 0 auto;
        max-width: none;
        height: 42px;
        padding: 0 12px;
        font-size: 12px;
        font-weight: 600;
        color: #81858B;
        transition: color .15s ease;
    }

    .tc-qv-tab.is-active {
        color: #424750;
        font-weight: 600;
    }

    .tc-qv-tab.is-active .tc-qv-tab__label::after {
        right: -12px;
        left: -12px;
        height: 4px;
        border-radius: 8px 8px 0 0;
        background: #0C0C0C;
    }

    .tc-qv-sec__title {
        margin-bottom: 12px;
        font-size: 15px;
        font-weight: 700;
        line-height: 1.7;
    }
}