/* ─────────────────────────────────────────────────────────────────
   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;
    }
}

/* ---------- PLP sidebar: "Filters" (active) section + checkbox filters ---------- */
.vc-active-filters {
    margin: 0 0 1rem;
    padding: 0 0 .85rem;
    border-bottom: 1px solid #e5e5e5;
}
.vc-active-filters__title {
    display: block;
    border: 0 !important;
    padding: 0 0 .6rem !important;
    font-size: 1rem;
    font-weight: 700;
    color: #054268;
}
.vc-active-filters__group { margin-bottom: .75rem; }
.vc-active-filters__label {
    display: block;
    margin-bottom: .3rem;
    font-size: .7rem;
    font-weight: 700;
    color: #054268;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.vc-active-filters .items {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
/* selected value = pill using the brand light blue */
.vc-active-filters .item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    margin: 0;
    padding: .2rem .35rem .2rem .7rem !important;
    border-radius: 999px;
    background: var(--lightblue-500, #8DC6E8);
    font-size: .8125rem;
    line-height: 1.3;
}
.vc-active-filters .filter-value {
    color: #054268;
    font-weight: 600;
    overflow-wrap: anywhere;
}
.vc-active-filters .action.remove {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    flex: 0 0 auto;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: rgba(5, 66, 104, .15);
    text-decoration: none;
    overflow: hidden;
    transition: background .15s ease;
}
.vc-active-filters .action.remove:before {
    content: "\00d7";
    display: block;
    font: 700 .95rem/1.1rem Arial, sans-serif;
    text-align: center;
    color: #054268;
}
.vc-active-filters .action.remove:hover { background: #054268; }
.vc-active-filters .action.remove:hover:before { color: #fff; }
.vc-active-filters .action.remove span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}
.layered-filter-block-container .filter-actions { padding: 0; margin: 0 0 1rem; }
.layered-filter-block-container .filter-actions .action.clear {
    font-size: .8125rem;
    font-weight: 600;
    color: #054268;
    text-decoration: underline;
}

/* section titles (Category / Price / Brand ...) */
.filter-options-title {
    font-weight: 700;
    color: #054268;
}

.filter-options .items,
.vc-cat-tree { list-style: none; margin: 0; padding: 0; }
.vc-cat-tree--nested { padding-inline-start: 1rem; }
.filter-options-content a.vc-check-link {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.vc-checkbox {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    margin: 0;
    accent-color: #054268;
    pointer-events: none; /* the surrounding link handles the click */
}
.vc-tree-node--current > .vc-check-link .vc-check-label { font-weight: 700; }
.vc-item--checked .vc-check-label { font-weight: 600; }

/* ---------- RTL (Arabic store view): nested category indentation + checkbox spacing ---------- */
/* The base theme indents nested lists with `padding-left` only (stylesheet.css:
   "#layered-filter-block .filter-options li .items"), which does nothing in RTL.
   Use logical properties so the indent follows the text direction in both languages. */
#layered-filter-block .filter-options li .items,
#layered-filter-block .filter-options .vc-cat-tree--nested {
    padding-left: 0;
    padding-right: 0;
    padding-inline-start: 15px;
    padding-inline-end: 0;
}
/* Space between the checkbox and its label, independent of direction. */
#layered-filter-block .filter-options-content a.vc-check-link {
    gap: 0; /* spacing is done by the checkbox margin below */
}
#layered-filter-block .filter-options-content .vc-checkbox {
    margin-inline-start: 0;
    margin-inline-end: .5rem;
}