/* ===========================================================================
   QSM - canonical QuantitySupermarket stylesheet.

   PART 1 of 2 - extracted from the V6 asset generation:
     assets/v6/css/vp/quantitySuperMarket.less

   This file is generation-independent on purpose. QSM must render identically
   whether or not StoreInformationCustomFrameworkSettings.ThemeCssVersionUrl
   selects the V6 generation, so Head.cshtml registers it by a fixed path with
   AddCssFileParts (appended, therefore emitted after the theme monolith).

   LESS tokens and mixins were resolved to literals rather than kept as a LESS
   build, because the theme has no frontend build step and every token resolves
   to the same value in both generations:

     @BaseColor1 / @colorBase1        #eb3a3a
     @color-primary                   #ED303D
     @colorError / @BaseColorError    #fb3449
     @color-secondary-200             #F2F2F2
     @color-secondary-300             #E6E6E6
     @mobileTablet                    only screen and (max-width: 959px)
     @mobile                          only screen and (max-width: 719px)
     .transition()                    transition: all 0.3s ease-in-out
     .squareSingleLine(@w)            width/height/line-height: @w; text-align: center
     @quantityThemeV1_BtnWidth        30px
     @quantityThemeV1_ExpandWidth     80px
     @quantityProductPage_Height      44px  (48px on mobile)

   V6's own .vp-quantity-supermarket-theme-v2 block is deliberately NOT copied
   here. The current V2 design is the one in PART 2 (merged from qsm-v2.css),
   which supersedes it and is what the cart recommendation modal, the product
   page and the cart line already render today.

   Selectors are anchored on `html` for the same reason PART 2 is: the
   CustomVPLandingV1 plugin ships its own older copy of the theme stylesheet and
   loads it after the theme's, re-declaring these selectors at equal
   specificity. The extra element keeps this sheet the winning source without
   restating the design or resorting to !important.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   V1 container - .vp-quantity-supermarket
   Hosts: _ProductAddToShoppingCart.cshtml, ShoppingCartOverpage, minicart rows.
   --------------------------------------------------------------------------- */
html .vp-quantity-supermarket-theme {
    width: 90px;
    height: 30px;
    line-height: 27px;
    overflow: hidden;
    text-align: center;
    border: 1px solid #eb3a3a;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    position: relative;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

html .vp-quantity-supermarket-theme .vp-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 4;
    background: rgba(255, 255, 255, 0.9);
    color: #eb3a3a;
    font-size: 18px;
    display: none;
}

html .vp-quantity-supermarket-theme .vp-loading i {
    vertical-align: middle;
}

html .vp-quantity-supermarket-theme .vp-btn {
    z-index: 2;
    position: absolute;
    top: 0;
    height: 100%;
    width: 28px;
    text-align: center;
    line-height: 2;
    transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-quantity-supermarket-theme .vp-btn {
        width: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

html .vp-quantity-supermarket-theme .vp-btn i {
    font-size: 14px;
    vertical-align: middle;
}

html .vp-quantity-supermarket-theme .vp-btn.vp-plus {
    right: 0;
    color: #eb3a3a;
    border: 1px solid #eb3a3a;
    border-radius: 0 8px 8px 0;
}

html .vp-quantity-supermarket-theme .vp-btn.vp-minus {
    left: 0;
    color: #eb3a3a;
    border: 1px solid #f2f2f2;
    border-radius: 8px 0 0 8px;
}

html .vp-quantity-supermarket-theme .vp-quantity-supermarket {
    display: block !important;
    border: 0;
    background: transparent;
    font-size: 17px;
    color: #000;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out;
}

html .vp-quantity-supermarket-theme .vp-quantity-supermarket::-webkit-outer-spin-button,
html .vp-quantity-supermarket-theme .vp-quantity-supermarket::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html .vp-quantity-supermarket-theme.vp-empty {
    width: 30px;
    border-radius: 50%;
}

html .vp-quantity-supermarket-theme.vp-empty .vp-quantity-supermarket,
html .vp-quantity-supermarket-theme.vp-empty .vp-quantity-supermarket-v2 {
    opacity: 0;
    visibility: hidden;
}

html .vp-quantity-supermarket-theme.vp-empty .vp-btn.vp-minus {
    opacity: 0;
    transform: scale(0);
    border: unset;
}

html .vp-quantity-supermarket-theme.vp-empty .vp-btn.vp-plus {
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: unset;
}


/* ---------------------------------------------------------------------------
   Catalog card context - resets the raw numeric input inside .product_box so no
   bare "0" can ever paint into a card.
   --------------------------------------------------------------------------- */
html .product_box .vp-quantity-supermarket {
    display: block !important;
    border: 0;
    background: transparent;
    font-size: 17px;
    color: #000;
    text-align: center;
    width: 100%;
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out;
}

html .product_box .vp-quantity-supermarket::-webkit-outer-spin-button,
html .product_box .vp-quantity-supermarket::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html .product_box.vp-empty {
    width: 32px;
    border-radius: 40px;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .product_box.vp-empty {
        width: 25px;
    }
}

html .product_box.vp-empty .vp-quantity-supermarket,
html .product_box.vp-empty .vp-quantity-supermarket-v2 {
    opacity: 0;
    visibility: hidden;
}

html .product_box.vp-empty .vp-btn.vp-minus {
    opacity: 0;
    transform: scale(0);
    border: unset;
}

html .product_box.vp-empty .vp-btn.vp-plus {
    right: 50%;
    transform: translateX(50%);
    border: unset;
}


/* ===========================================================================
   TARGET PRESENTATION - .vp-quantity-theme-v1

   The circular / expandable product-card quick-add control. Selected by the
   view through vp-parent-class="vp-quantity-theme-v1" on the
   .vp-quantity-supermarket-v3 input; QuantitySupermarketItemV3 copies that
   attribute onto the container it generates.

   States, all driven by QuantitySupermarketItemV3:
     .vp-empty    30px circle, white fill, primary-coloured plus     (not in cart)
     default      30px circle, primary fill, cart glyph + count      (in cart, idle)
     .vp-expand   80px pill, minus / quantity / plus all visible     (interacting)
   =========================================================================== */
/* CANONICAL PRODUCT-CARD GEOMETRY.
 *
 * Home rails and the category grid render the same component through the same
 * vp-parent-class, so they take their diameter, glyph, pill and typography from
 * this one definition. Only placement is host-specific - see the .product_box
 * rules further down.
 *
 * The minicart line (_TimurHeader.cshtml) carries vp-quantity-theme-v1 as well but
 * is a different presentation and keeps the geometry it shipped with; it is pinned
 * back to 30px in the modifier block below rather than tracking the card size. */
html .vp-quantity-theme-v1 {
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.4);
    background-color: #ED303D;
    color: #fff;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    position: relative;
    transition: all 0.3s ease-in-out;
}

html .vp-quantity-theme-v1 .vp-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 4;
    background: #ED303D;
    color: #fff;
    font-size: 21px;
    display: none;
}

html .vp-quantity-theme-v1 .vp-loading i {
    vertical-align: middle;
}

html .vp-quantity-theme-v1 .vp-btn {
    z-index: 2;
    position: absolute;
    top: 0;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    transition: transform 0.3s, opacity 0.3s;
}

html .vp-quantity-theme-v1 .vp-btn i {
    font-size: 19px;
    vertical-align: middle;
}

html .vp-quantity-theme-v1 .vp-btn.vp-plus {
    right: 0;
    transform: scaleX(0);
    opacity: 0;
}

html .vp-quantity-theme-v1 .vp-btn.vp-minus {
    left: 0;
    transform: scaleX(0);
    opacity: 0;
}

html .vp-quantity-theme-v1 .vp-btn.vp-quantity-label {
    right: 0;
}

/* Cart glyph sizing — both circular states.
 *
 * The two cart SVGs (quick-atc-add-to-cart-grey.svg on the empty white circle,
 * quick-atc-cart-white.svg on the collapsed in-cart red circle) would otherwise be
 * stretched to the button's full box by a theme rule, filling the circle edge to
 * edge with no breathing room.
 *
 * The Donissi reference puts the cart artwork at roughly 55% of the circle
 * diameter (~31x27 of ink in a ~56px circle => 55.4% wide, 48.2% tall). A 21px box
 * in the 35px circle paints 19.3x16.8 of ink, i.e. 55.0% x 48.0% - within half a
 * point of the reference on both axes, and 21/35 keeps the glyph at exactly 60% of
 * the box the way the original 18/30 pair did.
 *
 * Absolutely centred rather than flex-centred so .vp-btn keeps the line-height
 * centring the <i> icons in the expanded pill rely on. The centring is
 * scale-independent, so it needs no adjustment when the geometry changes.
 */
html .vp-quantity-theme-v1 .vp-btn.vp-plus img,
html .vp-quantity-theme-v1 .vp-btn.vp-quantity-label img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 21px;
    height: 21px;
    min-width: 0;
    max-width: none;
    object-fit: contain;
    display: block;
}

html .vp-quantity-theme-v1 .vp-btn.vp-quantity-label .quantity {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    line-height: 28px;
    font-weight: 500;
    font-size: 14px;
    text-align: center;
    padding-left: 1px;
}

html .vp-quantity-theme-v1 .vp-quantity-supermarket-v3 {
    display: block !important;
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 19px;
    text-align: center;
    z-index: 1;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.3s;
    transform: scaleX(0);
}

html .vp-quantity-theme-v1 .vp-quantity-supermarket-v3::-webkit-outer-spin-button,
html .vp-quantity-theme-v1 .vp-quantity-supermarket-v3::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html .vp-quantity-theme-v1.vp-expand {
    width: 92px;
}

html .vp-quantity-theme-v1.vp-expand .vp-minus,
html .vp-quantity-theme-v1.vp-expand .vp-plus,
html .vp-quantity-theme-v1.vp-expand .vp-quantity-supermarket-v3,
html .vp-quantity-theme-v1.vp-quantity-minicart .vp-minus,
html .vp-quantity-theme-v1.vp-quantity-minicart .vp-plus,
html .vp-quantity-theme-v1.vp-quantity-minicart .vp-quantity-supermarket-v3 {
    transform: scaleX(1);
    opacity: 1;
}

html .vp-quantity-theme-v1.vp-expand .vp-quantity-label,
html .vp-quantity-theme-v1.vp-quantity-minicart .vp-quantity-label {
    transform: scaleX(0);
    opacity: 0;
}

html .vp-quantity-theme-v1.vp-empty {
    width: 35px;
    background-color: #fff;
    color: #ED303D;
}

html .vp-quantity-theme-v1.vp-empty .vp-minus,
html .vp-quantity-theme-v1.vp-empty .vp-quantity-supermarket-v3,
html .vp-quantity-theme-v1.vp-empty .vp-quantity-label {
    transform: scaleX(0);
    opacity: 0;
}

html .vp-quantity-theme-v1.vp-empty .vp-plus {
    transform: scaleX(1);
    opacity: 1;
}

html .vp-quantity-theme-v1 .vp-btn.p-event {
    pointer-events: none;
    opacity: 0.4;
}


/* Minicart line modifier - always expanded, softer shadow.
 *
 * _TimurHeader.cshtml asks for "vp-quantity-theme-v1 vp-quantity-minicart", so the
 * minicart inherits the canonical card geometry above. It is a different
 * presentation on a different surface and is out of scope for the card sizing, so
 * it is pinned to the 30px / 80px geometry it shipped with. */
html .vp-quantity-minicart {
    box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}

html .vp-quantity-theme-v1.vp-quantity-minicart {
    width: 80px;
    height: 30px;
    line-height: 30px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-btn {
    width: 30px;
    height: 30px;
    line-height: 30px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-btn i {
    font-size: 16px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-btn.vp-plus img,
html .vp-quantity-theme-v1.vp-quantity-minicart .vp-btn.vp-quantity-label img {
    width: 18px;
    height: 18px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-btn.vp-quantity-label .quantity {
    line-height: 24px;
    font-size: 12px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-quantity-supermarket-v3 {
    font-size: 16px;
}

html .vp-quantity-theme-v1.vp-quantity-minicart .vp-loading {
    font-size: 18px;
}


/* ---------------------------------------------------------------------------
   Product page stepper - .vp-quantity-productPage
   Default presentation for a V3 input that carries no vp-parent-class.
   --------------------------------------------------------------------------- */
html .vp-quantity-productPage {
    width: 116px;
    height: 44px;
    line-height: 44px;
    border: 1px solid #E6E6E6;
    border-radius: 12px;
    background: #fff;
    position: relative;
    display: inline-block;
    box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.06);
    overflow: hidden;
    transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-quantity-productPage {
        width: 124px;
        height: 48px;
        line-height: 48px;
    }
}

html .vp-quantity-productPage .vp-loading {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    z-index: 4;
    background: rgba(255, 255, 255, 0.9);
    color: #eb3a3a;
    font-size: 18px;
    display: none;
}

html .vp-quantity-productPage .vp-loading i {
    vertical-align: middle;
}

html .vp-quantity-productPage .vp-btn {
    z-index: 2;
    position: absolute;
    top: 0;
    height: 100%;
    line-height: 44px;
    width: 36px;
    text-align: center;
    transition: all 0.3s ease-in-out;
}

html .vp-quantity-productPage .vp-btn i {
    font-size: 18px;
    vertical-align: middle;
}

html .vp-quantity-productPage .vp-btn.vp-plus {
    right: 0;
    color: #eb3a3a;
    border-left: 1px solid #F2F2F2;
}

html .vp-quantity-productPage .vp-btn.vp-minus {
    left: 0;
    color: #fb3449;
    border-right: 1px solid #F2F2F2;
}

html .vp-quantity-productPage .vp-btn.p-event {
    pointer-events: none;
    color: #E6E6E6;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-quantity-productPage .vp-btn {
        width: 40px;
        height: 48px;
        line-height: 48px;
    }
}

html .vp-quantity-productPage .vp-quantity-supermarket-v3 {
    display: block !important;
    width: 100%;
    border: 0;
    background: transparent;
    font-size: 20px;
    color: #000;
    text-align: center;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    transition: all 0.3s ease-in-out;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-quantity-productPage .vp-quantity-supermarket-v3 {
        font-size: 22px;
    }
}

html .vp-quantity-productPage .vp-quantity-supermarket-v3::-webkit-outer-spin-button,
html .vp-quantity-productPage .vp-quantity-supermarket-v3::-webkit-inner-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

html .vp-quantity-productPage.vp-empty {
    display: none;
}


/* ---------------------------------------------------------------------------
   Hosts - where a QSM control is allowed to sit.
   These position the control; they never restyle it.
   --------------------------------------------------------------------------- */
html .vp-product-item-theme.cart-item {
    position: absolute;
    top: calc(100% - 55px);
    left: 116px;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-product-item-theme.cart-item {
        position: unset;
        top: calc(100% - 40px);
        left: unset;
        right: 16px;
        display: flex;
        margin-left: 16px;
        z-index: 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 719px) {
    html .vp-product-item-theme.cart-item {
        margin-left: 8px;
    }
}

html .vp-product-item-theme.cart-item .vp-quantity-supermarket-theme,
html .vp-product-item-theme.cart-item .vp-quantity-supermarket-theme-v2 {
    height: 32px;
    line-height: 32px;
    width: 90px;
}

/* Deliberately NOT anchored on `html`, unlike the rest of this sheet.

   .vp-product-item-theme-v2.cart-item is the product page's add-to-cart host
   (Views/Product/_AddToCart.cshtml) - it is not a product-card host. The product page
   template cancels this placement with `.page-product .cart-item { position: unset }`,
   which is the same specificity as the theme sheet's original copy of the rules below and
   beat it on source order (the template's <style> is in the body, after every head sheet).
   Anchoring these on `html` would raise them above that override and take the control out
   of flow on the product page, collapsing the add-to-cart row and dropping the button 24px
   out of line with the stepper. The theme sheet still ships these same rules unanchored,
   so matching its specificity here keeps the cascade exactly as it was. */
.vp-product-item-theme-v2.cart-item {
    position: absolute;
    top: calc(100% - 55px);
    left: 116px;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    .vp-product-item-theme-v2.cart-item {
        position: unset;
        top: calc(100% - 40px);
        left: unset;
        right: 16px;
        display: flex;
        margin-left: 16px;
        z-index: 0;
    }
}

@media only screen and (min-width: 0px) and (max-width: 719px) {
    .vp-product-item-theme-v2.cart-item {
        margin-left: 8px;
    }
}

.vp-product-item-theme-v2.cart-item .vp-quantity-supermarket-theme,
.vp-product-item-theme-v2.cart-item .vp-quantity-supermarket-theme-v2 {
    height: 32px;
    line-height: 32px;
    width: 90px;
}

html .vp-product-item-theme-v2 .in-cart-notice {
    margin-right: 16px;
    padding: 2px 0;
    height: 44px;
    line-height: 16px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
}

html .vp-product-item-theme-v2 .in-cart-notice .vp-btn {
    font-size: 12px;
}

html .vp-product-item-theme-v2 .in-cart-notice.vp-show {
    display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .vp-product-item-theme-v2 .in-cart-notice.vp-show {
        display: none;
    }
}

html .vp-product-item-theme-v2.in-productBox {
    position: absolute;
    bottom: 16px;
    right: 0;
    z-index: 5;
}

html .vp-product-item-theme-v2 .vp-add-to-cart {
    display: none;
    justify-content: center;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    height: 44px;
    font-size: 18px;
    border-radius: 8px;
    padding: 0 16px;
}

html .vp-product-item-theme-v2 .vp-add-to-cart svg,
html .vp-product-item-theme-v2 .vp-add-to-cart path {
    fill: #fff;
}

html .vp-product-item-theme-v2 .vp-add-to-cart.vp-show {
    display: flex;
}

/* Catalog-card placement.
   Reused from the in-flight ProductBox work (assets/css/vp/quantityProductBox.less),
   which measured it against the RyanPro reference: the control sits flush with the
   bottom of the picture and 7px inside its right edge. Because this theme renders
   the control one level further out - in the .m-b-12 block after .photo - the
   generic bottom:16px/right:0 above lands it 4px high and 4px past the image edge.
   Scoped to .product_box so only the catalog card is repositioned. */
html .product_box .vp-product-item-theme-v2.in-productBox {
    bottom: 12px;
    right: 9.5px;
}

/* Category / manufacturer / search cards (ViewType 5) render the host inside .body,
   which is static, so the rule above resolves against .product_box and drops the
   control beside the price instead of at the picture. Making .body the containing
   block puts the control back on the picture: .body's top edge is the picture's
   bottom edge plus a fixed gap, so `bottom: 100%` plus that gap lands the control
   flush with the picture's bottom-right corner - the same relationship the home
   card gets from .m-b-12.

   The gap and the .body/picture width difference both change at the theme's 959px
   breakpoint (12px/4px above, 28px/12px below), which is why the offsets are
   restated there. .body carries no other positioned descendants, so promoting it to
   a containing block moves nothing else. */
html .product_box.category > .body {
    position: relative;
}

html .product_box.category .vp-product-item-theme-v2.in-productBox {
    position: absolute;
    display: block;
    top: auto;
    bottom: 100%;
    margin-bottom: 12px; /* .body's offset below the picture */
    right: 9.5px;        /* 4px .body overhang + 5.5px inset, matching home */
    transform: none;
}

@media only screen and (min-width: 0px) and (max-width: 959px) {
    html .product_box.category .vp-product-item-theme-v2.in-productBox {
        margin-bottom: 28px;
        right: 17.5px; /* 12px overhang + the same 5.5px inset */
    }
}

/* ===========================================================================
   PART 2 of 2 - merged verbatim from assets/css/qsm-v2.css.

   Why it is here and not loaded separately: the desired end state is ONE
   canonical QSM stylesheet. qsm-v2.css carried the current V2 design - the one
   the product page, the cart line and the cart recommendation modal render
   today - and it supersedes V6's older .vp-quantity-supermarket-theme-v2 block,
   which is why that block was not copied into PART 1.

   Its Head.cshtml registration has been removed; the physical file is left on
   disk untouched. Nothing below was redesigned - it is the established V2
   presentation, moved.

   Its .vp-quantity-productBox section is retained because the installed plugin
   Widgets.CartRecommendationModal emits vp-quick-add on its card input
   (Views/Product/_RecommendedProductCard.cshtml), and the V2 item class adds
   .vp-quantity-productBox for quick-add hosts. Removing it would regress that
   plugin. It is a V2-host presentation and is distinct from the canonical
   product-card control, .vp-quantity-theme-v1, defined in PART 1.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   quantitySuperMarket V2 - shared visual for the theme's V2 quantity control.

   One design, used by every host: catalog product cards (FastAddProductToCart)
   and the cart recommendation modal. Implements design/pdp/quantity.png, the
   outlined compact variant (4th column from the right): 1px hairline border,
   white fill, no drop shadow, red controls, dark count, trash at the minimum,
   grey no-entry glyph plus a caption at the maximum.

   Host layouts only position the control; they must not restyle it.

   Every selector is anchored on `html`. Some storefront pages (the CustomVPLandingV1
   landing pages, for one) ship their own older copy of the theme stylesheet and load it
   after this file, re-declaring the same control at the same specificity. The extra
   element keeps this sheet the winning source wherever it lands in the cascade, without
   restating the design anywhere or resorting to !important. Genuinely host-specific
   theme rules (the product page, the cart line) are more specific still and keep working.
   --------------------------------------------------------------------------- */
html .vp-quantity-supermarket-theme-v2 {
    /* glyphs are inlined so they do not depend on an icon font being present */
    --tc-qsm-trash: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 26'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h20'/%3E%3Cpath d='M9.5 6V3.2c0-.7.6-1.2 1.2-1.2h2.6c.7 0 1.2.5 1.2 1.2V6'/%3E%3Cpath d='M4.5 6.5l1 16c.05 1 .8 1.5 1.7 1.5h9.6c.9 0 1.65-.5 1.7-1.5l1-16'/%3E%3C/g%3E%3C/svg%3E");
    --tc-qsm-noentry: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='M5.4 18.6 18.6 5.4' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E");
    --tc-qsm-plus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14'/%3E%3Cpath d='M5 12h14'/%3E%3C/g%3E%3C/svg%3E");
    --tc-qsm-minus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    /* compact state: the cart-with-plus control from the reference sheet */
    --tc-qsm-cartplus: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 1.6v5M15 4.1h5'/%3E%3Cpath d='M1.8 2.7h2.4l2.6 10.8h10.4l1.5-5'/%3E%3Ccircle cx='8.4' cy='18.6' r='1.6'/%3E%3Ccircle cx='16.4' cy='18.6' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
    /* the plain cart, used when the compact control carries a count badge instead of the plus */
    --tc-qsm-cart: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.8 2.7h2.4l2.6 10.8h10.4l2.2-7.6H5.6'/%3E%3Ccircle cx='8.4' cy='18.6' r='1.6'/%3E%3Ccircle cx='16.4' cy='18.6' r='1.6'/%3E%3C/g%3E%3C/svg%3E");

    display: flex;
    direction: rtl;
    align-items: center;
    justify-content: space-between;
    position: relative;
    width: 100px;
    height: 34px;
    padding: 0 8px;
    line-height: normal;
    overflow: hidden;
    border: 1px solid #ededed;
    /* the reference sheet is a rounded rectangle, not a capsule */
    border-radius: 12px;
    background: #fff;
    box-shadow: none;
    /* expand / collapse between the compact add control and the quantity pill */
    transition: width .28s cubic-bezier(.4, 0, .2, 1),
                border-radius .28s cubic-bezier(.4, 0, .2, 1),
                padding .28s cubic-bezier(.4, 0, .2, 1);
}

/* empty state: compact rounded square holding just the add icon */
html .vp-quantity-supermarket-theme-v2.vp-collapsed {
    width: 34px;
    height: 34px;
    padding: 0;
    justify-content: center;
    border: 1px solid #ededed;
    border-radius: 10px;
    box-shadow: none;
}

html .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-plus {
    display: flex;
    align-items: center;
    justify-content: center;
    /* static: the theme offsets this button with `left`, which a positioned box would honour
       and shift the glyph out of the compact square. The badge hangs off the container. */
    position: static;
    width: 100%;
    height: 100%;
    transform: none;
    border: unset;
}

/* ---------------------------------------------------------------------------
   Icons are owned by the component, never by the host.

   Hosts render their own glyph markup (the product page ships <i class="fal fa-plus">,
   the script builds the same), and on card hosts that icon font resolves to an empty
   glyph. Painting every glyph here from an inlined mask gives one icon per control on
   every host, with no font dependency and no second plus stacked on a host's own.
   --------------------------------------------------------------------------- */
html .vp-quantity-supermarket-theme-v2 .vp-btn i {
    display: none;
}

html .vp-quantity-supermarket-theme-v2 .vp-btn::after {
    content: "";
    display: block;
    flex: 0 0 auto;
    background-color: currentColor;
    -webkit-mask-image: var(--tc-qsm-glyph, none);
    mask-image: var(--tc-qsm-glyph, none);
    /* the shorthand's `center / contain` is unreliable here: the inlined SVGs carry no
       intrinsic size, so a dropped size leaves the glyph drawn at the default 300x150
       and clipped to a fragment. Size and position are set on their own properties. */
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* The glyph box above is only ever given a mask for .vp-plus and .vp-minus. The quantity
   label paints its cart icon from its own ::before, so on the label the box above falls
   back to `mask-image: none` and paints as an unmasked currentColor square on top of the
   icon and the count. The label has no ::after glyph to draw; take the box away. */
html .vp-quantity-supermarket-theme-v2 .vp-btn.vp-quantity-label::after {
    content: none;
}

/* compact state: the cart-with-plus control from the reference sheet */
html .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-plus::after {
    --tc-qsm-glyph: var(--tc-qsm-cartplus);
    width: 21px;
    height: 21px;
    color: #1a1a1a;
}

/* compact state carrying a cart quantity: plain cart plus the count badge */
html .vp-quantity-supermarket-theme-v2.vp-collapsed.vp-has-count .vp-btn.vp-plus::after {
    --tc-qsm-glyph: var(--tc-qsm-cart);
}

/* attr() reads the element's own attributes, so the badge hangs off the container that
   carries the count rather than off the button inside it */
html .vp-quantity-supermarket-theme-v2.vp-collapsed.vp-has-count::before {
    content: attr(data-vp-count);
    position: absolute;
    z-index: 1;
    top: 6px;
    left: 9px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: #f5333f;
}

html .vp-quantity-supermarket-theme-v2:not(.vp-collapsed) .vp-btn.vp-plus::after {
    --tc-qsm-glyph: var(--tc-qsm-plus);
    width: 17px;
    height: 17px;
}

html .vp-quantity-supermarket-theme-v2:not(.vp-collapsed) .vp-btn.vp-minus::after {
    --tc-qsm-glyph: var(--tc-qsm-minus);
    width: 17px;
    height: 17px;
}

/* The empty state shows the add icon only. The count and the decrement stay in the DOM and
   collapse to zero width, so the change is a transition rather than a display jump. */
html .vp-quantity-supermarket-theme-v2 .vp-btn.vp-minus,
html .vp-quantity-supermarket-theme-v2 .vp-input {
    transition: opacity .18s ease, width .28s cubic-bezier(.4, 0, .2, 1);
}

html .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-btn.vp-minus,
html .vp-quantity-supermarket-theme-v2.vp-collapsed .vp-input {
    width: 0;
    min-width: 0;
    flex: 0 0 0;
    padding: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
}

/* expanded state: plus at the right, count in the middle, minus at the left (RTL) */
html .vp-quantity-supermarket-theme-v2 .vp-btn,
html .vp-quantity-supermarket-theme-v2 .vp-input {
    position: static;
    transform: none;
}

html .vp-quantity-supermarket-theme-v2 .vp-btn.vp-plus { order: 1; }
html .vp-quantity-supermarket-theme-v2 .vp-input { order: 2; }
html .vp-quantity-supermarket-theme-v2 .vp-btn.vp-minus { order: 3; }

html .vp-quantity-supermarket-theme-v2:not(.vp-collapsed) .vp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 100%;
    border: 0;
    cursor: pointer;
    color: #f5333f !important;
}

/* hosts may render the add action as an SVG cart icon; the component paints the glyph */
html .vp-quantity-supermarket-theme-v2 .vp-btn .shopping-icon {
    display: none;
}

html .vp-quantity-supermarket-theme-v2 .vp-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

html .vp-quantity-supermarket-theme-v2 .vp-quantity-supermarket-v2 {
    width: 100%;
    padding: 0;
    border: 0;
    text-align: center;
    background: transparent;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a1a;
}

/* at the minimum the decrement reads as a delete, as in the design sheet */
html .vp-quantity-supermarket-theme-v2.vp-min .vp-btn.vp-minus::after {
    --tc-qsm-glyph: var(--tc-qsm-trash);
    width: 16px;
    height: 17px;
}

/* maximum reached: the increment becomes a grey no-entry glyph and stops responding */
html .vp-quantity-supermarket-theme-v2.vp-max .vp-btn.vp-plus {
    pointer-events: none;
}

html .vp-quantity-supermarket-theme-v2.vp-max .vp-btn.vp-plus::after {
    --tc-qsm-glyph: var(--tc-qsm-noentry);
    width: 17px;
    height: 17px;
    color: #c9c9c9;
}

/* "maximum" caption under the count, exactly as the design sheet shows it */
html .vp-quantity-supermarket-theme-v2.vp-max .vp-input::after {
    content: attr(data-tc-max-label);
    display: block;
    margin-top: -2px;
    font-size: 10px;
    font-weight: 400;
    line-height: 1;
    color: #9a9a9a;
    white-space: nowrap;
}

html .vp-quantity-supermarket-theme-v2.vp-max .vp-quantity-supermarket-v2 {
    line-height: 1;
}

html .vp-quantity-supermarket-theme-v2 .vp-btn.p-event {
    opacity: .45;
}

html .vp-quantity-supermarket-theme-v2 .vp-loading {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(255, 255, 255, .85);
    color: #f5333f;
}

/* ===========================================================================
   ProductBox host variant - quick-add surfaces only (catalog cards, the
   recommendation modal cards).

   Ported from the reference implementation:
     G:\Projects\Design\RyanPro\index02.html  ->  دسته‌بندی‌ها, first product card
     assets/css/style.css  .product_box .vp-quantity-productBox  (lines 22001-22115)

   Geometry, colours, transitions and the two SVG assets are the reference's own.
   The state/API engine stays the shared V2 one; only the presentation differs,
   so PDP and the cart line (management hosts, no vp-quick-add) keep theirs.
   =========================================================================== */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    padding: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 50px;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .4);
    background-color: #ED303D;
    color: #fff;
    transition: all .3s ease-in-out;
}

/* empty: white circle carrying the grey add-to-cart glyph */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-empty {
    width: 30px;
    background-color: #fff;
    color: #ED303D;
    border-radius: 50px;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn {
    z-index: 2;
    position: absolute;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    transition: transform .3s, opacity .3s;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn::after {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn.vp-plus {
    right: 0;
    left: auto;
    transform: scaleX(0);
    opacity: 0;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn.vp-minus {
    left: 0;
    right: auto;
    transform: scaleX(0);
    opacity: 0;
}

/* the count sits in its own label, shown only while the control is collapsed */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn.vp-quantity-label {
    right: 0;
    left: auto;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    pointer-events: none;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-input {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform: scaleX(0);
    opacity: 0;
    transition: transform .3s, opacity .3s;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-quantity-supermarket-v2 {
    display: block !important;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 30px;
    text-align: center;
    pointer-events: none;
}

/* expanded: the reference widens the pill to 80px and swaps the label for the controls */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox:not(.vp-collapsed) {
    width: 80px;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox:not(.vp-collapsed) .vp-btn.vp-minus,
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox:not(.vp-collapsed) .vp-btn.vp-plus,
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox:not(.vp-collapsed) .vp-input {
    transform: scaleX(1);
    opacity: 1;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox:not(.vp-collapsed) .vp-btn.vp-quantity-label {
    transform: scaleX(0);
    opacity: 0;
}

/* collapsed with a cart quantity: red circle, white cart, count label */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count .vp-btn.vp-quantity-label {
    transform: scaleX(1);
    opacity: 1;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count::before {
    content: none;
}

/* the two glyphs are the reference's own SVG files, not a redrawn mask */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-empty .vp-btn.vp-plus::after {
    content: "";
    width: 18px;
    height: 18px;
    background: url("../img/qsm/quick-atc-add-to-cart-grey.svg") center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count .vp-btn.vp-quantity-label::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 50%;
    width: 16px;
    height: 16px;
    margin: -12px -8px 0 0;
    background: url("../img/qsm/quick-atc-cart-white.svg") center / contain no-repeat;
    opacity: .9;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-btn.p-event {
    pointer-events: none;
    opacity: .4;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox .vp-loading {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: #ED303D;
    color: #fff;
    font-size: 18px;
    border-radius: inherit;
}

/* reference: .product_box .vp-quantity-productBox.vp-empty .vp-plus is the one control shown */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-empty .vp-btn.vp-plus {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 30px;
    height: 30px;
    transform: scaleX(1);
    opacity: 1;
}

html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-empty .vp-btn.vp-plus::after {
    margin: 6px auto 0;
}

/* Placement against the card. Measured on the reference (RyanPro index02.html, دسته‌بندی‌ها
   first card): the control is bottom-aligned with the product image (0px) and inset 6.91px
   from the image's right edge. The catalog host sat 8px below the image and overhung its
   right edge by 4px, so both axes are corrected here rather than in the shared card CSS. */
.product_box .vp-quantity.top:has(.vp-quantity-productBox) {
    /* The +20% enlargement and the 12px -> 20px lift that went with it were a
       PLP-specific experiment. Ordinary PLP grid cards now render the canonical V3
       control instead, so this presentation is back to the geometry its remaining
       consumers (homepage deals, CustomVPLandingV1, the recommendation modal) were
       built against. */
    bottom: 12px !important;
    transform: translateX(-11px);
}

/* the collapsed in-cart circle keeps only its count label */
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count .vp-btn.vp-plus,
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count .vp-btn.vp-minus,
html .vp-quantity-supermarket-theme-v2.vp-quantity-productBox.vp-collapsed.vp-has-count .vp-input {
    transform: scaleX(0);
    opacity: 0;
}