/*
 * Override Magento core layout rules for product-info-main.
 * The core CSS (_module.less) sets width: 40% and float: right on .product-info-main
 * because it was designed for a standalone 2-col layout without Bootstrap grid.
 * Now that product-info-main lives inside a col-xl-6 container, it must fill 100%
 * of its parent column with no float.
 */
@media (min-width: 768px) {
    .page-layout-1column .product-info-main,
    .product-info-main {
        width: 100% !important;
        float: none !important;
    }
}

/*
 * Hide the duplicate "IN STOCK" text from product-info-stock-sku.
 * The green/yellow badge in title.phtml already shows stock status
 * dynamically via $_product->isSaleable() covering both states.
 */
.product-info-stock-sku .stock {
    display: none;
}

/* ── Price box: put special-price and old-price on the same line ── */
/* !important needed: _module.less:176 sets display:table-cell with higher specificity */
.product-info-price .price-box {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
}

/* Force both price spans to be inline items — prevent them from stretching full width */
.product-info-price .price-box .special-price,
.product-info-price .price-box .old-price {
    display: inline-flex !important;
    align-items: baseline;
    flex: 0 0 auto;
}

/* Hide the "Special Price" and "Regular Price" text labels */
/* !important needed: _module.less:95 uses a 4-class selector setting display:inline */
.product-info-price .price-box .price-container > .price-label,
.product-info-price .price-label {
    display: none !important;
}

/* Old (regular/crossed-out) price: smaller than the main price */
.product-info-price .old-price .price {
    font-size: 0.85rem;
    color: #999;
}

/* Native CSS strikethrough on the old price — no SVG needed */
.product-info-price .old-price .price-wrapper {
    text-decoration: line-through;
}

.product-options .form-check input[type="radio"] {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    z-index: 111111;
}
.product-options .form-check {
    position:relative;
}
.product-options .form-check label {
    padding:0;
    text-align: center;
    justify-content: center;
    font-family: "DM Sans";
    font-weight: 600;
    color: var(--black-opacities-primary, rgba(20, 20, 20, 0.83));
    border-radius: 2rem;
    border: 0.5px solid var(--black-opacities-background, rgba(20, 20, 20, 0.04));
    background: var(--gradientx-transparent, linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat);
   
}
.product-options .form-check label span{
    color: var(--black-opacities-primary, rgba(20, 20, 20, 0.83));
}
.product-options .form-check input[type="radio"]:checked ~ label{
  border: 0.5px solid var(--lightblue-opacities-primary, rgba(141, 198, 232, 0.83));
  background:  linear-gradient(to bottom right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom right / 50% 50% no-repeat, linear-gradient(to bottom left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) bottom left / 50% 50% no-repeat, linear-gradient(to top left, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top left / 50% 50% no-repeat, linear-gradient(to top right, rgba(20, 20, 20, 0.00) 20%, rgba(20, 20, 20, 0.03) 50%) top right / 50% 50% no-repeat;
}
.product-options .form-check input[type="radio"]:checked ~ label span{
    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;
}
.product-details .nav-tabs .nav-item {
    width: 15%;
}

.vita--quantity input {
    border: none;
    background: transparent;
    text-align: center;
    height: auto !important;
    padding: 0;
}
.product--details .nav-tabs .nav-item {
    width: 15%;
}
.product-item{
    width: 264px !important;
}
@media (max-width: 767px){
    .product--image {
        padding: 1rem;
    }
    .vita--label {
        padding: 0.4rem 0;
        margin: 1rem;
    }
    .product--content > .d-flex:nth-of-type(2) {
        flex-wrap: wrap;
    }
    .product-item .btn-secondary {
        width: auto;
    }
    .product-item .image {
        width: 100%;
        height: auto;
    }
    .show-all {
        margin: 0 !important;
    }
    .product--details  {
        padding: 0 !important;
    }
    .product--details .tab-pane {
        padding: 1rem 0 0 !important;
    }
}