/* ─────────────────────────────────────────────────────────────────
   1. IMAGE CONTAINER — fixed height, image fits without distortion
   ───────────────────────────────────────────────────────────────── */

/* Fixed-height wrapper so all cards are equal regardless of image shape */
.product-item .image {
    width: 100%;
    height: 11rem;          /* ~176px — uniform across all cards */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    background: #fff;
}

/* Image fills the wrapper without cropping or distortion */
.product-item .image img,
.product-item .image a img {
    width: 100%;
    height: 100%;
    object-fit: contain;    /* keeps aspect ratio, shows full image */
    display: block;
}

/* ─────────────────────────────────────────────────────────────────
   2. PRICE LABELS — hide "Special Price" / "Regular Price" text
   ───────────────────────────────────────────────────────────────── */

/* !important needed: _module.less sets display:inline with high specificity */
.product-item .price-box .price-container > .price-label,
.product-item .price-label {
    display: none !important;
}

/* Override stylesheet.css:1027 which adds SVG vector as ::before on .old-price.
   We already use text-decoration:line-through so the SVG is redundant and misaligned. */
.product-item .price .old-price::before {
    content: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   3. PRICE LAYOUT — special price left, old price pushed to the end
      margin-inline-start is RTL/LTR aware:
        LTR → pushes old-price to the right
        RTL → pushes old-price to the left (auto flips)
   ───────────────────────────────────────────────────────────────── */

.product-item .price-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem;
}

/* Force both spans to be inline and not stretch */
.product-item .price-box .special-price,
.product-item .price-box .old-price {
    display: inline-flex !important;
    align-items: baseline;
    flex: 0 0 auto;
}

/* Push old-price to the logical end (right in LTR, left in RTL).
   price-box must be full width so margin-inline-start:auto reaches the card edge.
   Also covers span.old-price directly inside div.price (group-priced products in category). */
.product-item .price .price-box {
    width: 100%;
}
.product-item .price-box .old-price,
.product-item .price > .old-price {
    margin-inline-start: auto;
    display: inline-flex !important;
    align-items: baseline;
    flex: 0 0 auto;
}

/* Native strikethrough on the old price number */
.product-item .price-box .old-price .price-wrapper,
.product-item .price > .old-price .price-wrapper {
    text-decoration: line-through;
}

/* Old price — slightly muted, size matches design */
.product-item .price-box .old-price .price,
.product-item .price > .old-price .price {
    font-size: 0.90rem;
    color: #999;
}

/* Override _listings.less:129 margin: 10px 0 25px — too much vertical space */
.product-item .price-box {
    margin: 2px 0 2px !important;
}

/* Override stylesheet.css:1002 — .product-item .price margin: 0.5rem 0 is too large */
.product-item .price {
    margin: 0.1rem 0 !important;
}

/* ─────────────────────────────────────────────────────────────────
   Category page fixes (apply to slider too for consistency)
   ───────────────────────────────────────────────────────────────── */

/* Reduce the gap between product name and price */
.product-item .product-name {
    margin-bottom: 0.25rem;
}
/* Override stylesheet.css:993 — min-height:4.5rem creates too much space under the product name */
.product-item .name {
    min-height: 0.5rem !important;
}

/* Center "Add to Cart" label and icon inside the cart button wrapper */
.product-item .cart {
    justify-content: center !important;
}
.product-item .add-to-cart-container {
    justify-content: center !important;
}
.product-item .add-to-cart-btn {
    display: flex;
    justify-content: center;
    text-align: center !important;   /* override stylesheet.css:675 text-align:left */
    width: 100%;
}
.product-item .add-to-cart-btn .action.tocart {
    justify-content: center;
    text-align: center;
    width: 100%;
}

/* ─────────────────────────────────────────────────────────────────
   existing rules below
   ───────────────────────────────────────────────────────────────── */

.product-item .content{
    width: 100%;
}
.main--title{
    margin-left:20px;
}
.product-options .form-check {
    border-radius: 2rem;
}
.product-options .form-check input[type="radio"] {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    text-align: center;
}
.product-options .form-check input[type="radio"]:checked {
    border-color: rgba(141, 198, 232, 0.83);
}
.product-options label {
    height: unset;
    text-align: center !important;
    display: block;
}
.product-item{
    width:100%;
}
.product-options .form-check:first-child  label{
   background: var(--gradient-primary, radial-gradient(174.86% 141.42% at 100% 0%, #054268 0.03%, #8DC6E8 100%));
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
  border-radius: 1.25rem;
  border: 0.5px solid var(--lightblue-opacities-primary, rgba(141, 198, 232, 0.83));
 }
.product-options input,
.vita--quantity  input {
    background: transparent;
    border: none;
    height: auto !important;
    padding: 0;
    text-align: center;
}
.card-body input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}
.card-body .form-check-label{
    position: relative;
}

/* Create a custom checkbox */
.card-body .checkmark {
    position: absolute;
    top: -1px;
    left: -31px;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border: 2px solid #000;
}

/* When the checkbox is checked, add a blue background */
.card-body input:checked ~ .checkmark {
    border: none;
    background: var(--gradientx-lightblue, radial-gradient(174.86% 141.42% at 100.00% -0.00%, #8DC6E8 0.03%, #D1E8F6 100%));}

/* Create the checkmark/indicator (hidden when not checked) */
.card-body .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.card-body input:checked ~ .checkmark:after {
    display: block;
}

/* Style the checkmark/indicator */
.card-body .checkmark:after {
    left: 9px;
    top: 5px;
    width: 7px;
    height: 12px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

@media (max-width: 767px){
    .product-item .image {
        width: 100%;
        height: auto;
    }
    .product-item .col-12 > .d-flex {
        flex-wrap: wrap;
    }
    .product-item .content {
    width: 100%;
}

}
@media  (min-width:864px) and (max-width:1024px){
    .product-item .content {
    width: 60%;
    padding-right: 1rem;
}
}

/* Grid/List switcher: keep the inactive mode link above toolbar overlays */
@media (min-width: 768px) {
    .toolbar-products .modes,
    .toolbar .modes {
        display: inline-flex;
        align-items: stretch;
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }

    .toolbar-products .modes .modes-mode,
    .toolbar .modes .modes-mode {
        float: none;
        position: relative;
    }

    .toolbar-products .modes a.modes-mode,
    .toolbar .modes a.modes-mode,
    .toolbar .modes a.modes-mode[href=""],
    .toolbar .modes a.modes-mode[href="#"] {
        z-index: 6;
        pointer-events: auto !important;
        cursor: pointer !important;
        position: relative;
    }

    .page-products .toolbar-products {
        position: relative;
        z-index: 20;
    }

    html[dir="rtl"] .toolbar-products .modes,
    html[dir="rtl"] .toolbar .modes {
        float: right;
        margin-left: 1.5rem;
        margin-right: 0;
    }

    html[dir="rtl"] .toolbar-products .modes .modes-mode,
    html[dir="rtl"] .toolbar .modes .modes-mode {
        float: none;
        border-right: 1px solid #ccc;
        border-left: 0;
    }

    html[dir="rtl"] .toolbar .modes-label + .modes-mode {
        border-radius: 0 3px 3px 0;
    }

    html[dir="rtl"] .toolbar .modes-mode:last-child {
        border-radius: 3px 0 0 3px;
        border-left: 1px solid #ccc;
    }
}