/*
 * Product page rescue styles.
 * Keep this file loaded after the theme/admin custom CSS so the gallery remains stable.
 */

.product-detail .detail-gallery {
    overflow: hidden;
}

.product-detail .detail-gallery .product-image-slider {
    background: #fff;
    /*border: 1px solid #ececec;*/
    border-radius: 15px;
    margin-bottom: 18px;
    overflow: hidden;
}

.product-detail .detail-gallery .product-image-slider figure {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    justify-content: center;
    margin: 0;
    width: 100%;
}

.product-detail .detail-gallery .product-image-slider a {
    align-items: center;
    display: flex;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.product-detail .detail-gallery .product-image-slider img {
    display: block;
    height: 100%;
    /*max-height: 620px;*/
    object-fit: contain;
    opacity: 1 !important;
    width: 100%;
}

.product-detail
    .detail-gallery
    .product-image-slider:not(.slick-initialized)
    figure:not(:first-child) {
    display: none;
}

.product-detail .slider-nav-thumbnails {
    margin: 0;
    max-width: 100%;
    overflow: hidden;
}

.product-detail .slider-nav-thumbnails:not(.slick-initialized) {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-detail .slider-nav-thumbnails:not(.slick-initialized) > div {
    display: block;
    min-width: 0;
}

.product-detail .slider-nav-thumbnails img {
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    display: block;
    height: auto;
    max-height: 120px;
    object-fit: cover;
    width: 100%;
}

.product-detail .slick-initialized.slider-nav-thumbnails img {
    max-height: none;
}

.product-detail .product-info {
    clear: both;
}

.product-detail .ck-content .table {
    display: block;
    margin: 0 auto !important;
    max-width: 100%;
    overflow-x: auto;
}

.product-detail .ck-content .table table,
.product-detail .table-newwidth {
    max-width: 100% !important;
}

.product-detail .benefits-section,
.product-detail .ingredient-section,
.product-detail .why2x2-section,
.product-detail .cta-section,
.product-detail .routine-section {
    box-sizing: border-box;
    max-width: 100%;
}

.product-detail .benefits-section h2,
.product-detail .ingredient-section h2,
.product-detail .why2x2-section h2,
.product-detail .routine-section h2 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-align: center !important;
}

/*
 * Product page polish.
 * Scoped here so the rest of the theme keeps its current behavior.
 */

.product-detail.accordion-detail {
    --av-forest: #0d5a4d;
    --av-forest-dark: #073d35;
    --av-leaf: #278267;
    --av-gold: #c88737;
    --av-cream: #fffaf1;
    --av-line: rgba(13, 90, 77, 0.14);
    color: #334d47;
    margin: 0 auto;
    max-width: 1280px;
    padding: 0 18px 54px;
}

.product-detail.accordion-detail > .row:first-child {
    align-items: flex-start;
    margin-left: -18px;
    margin-right: -18px;
    row-gap: 30px;
}

.product-detail.accordion-detail > .row:first-child > [class*="col-"] {
    padding-left: 18px;
    padding-right: 18px;
}

.product-detail .detail-gallery {
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(18, 54, 46, 0.07);
    padding: 14px;
}

.product-detail .detail-gallery .zoom-icon {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid rgba(13, 90, 77, 0.12);
    border-radius: 50%;
    color: var(--av-forest);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    right: 24px;
    top: 24px;
    width: 32px;
    z-index: 3;
}

.product-detail .detail-gallery .product-image-slider {
    border-color: rgba(13, 90, 77, 0.08);
    border-radius: 12px;
    margin-bottom: 14px;
}

.product-detail .detail-gallery .product-image-slider figure {
    background: #fbfaf6;
}

.product-detail .detail-gallery .product-image-slider img {
    /*padding: 6px;*/
}

.product-detail .slider-nav-thumbnails {
    margin-left: -5px;
    margin-right: -5px;
}

.product-detail .slider-nav-thumbnails .slick-slide,
.product-detail .slider-nav-thumbnails:not(.slick-initialized) > div {
    padding: 0 5px;
}

.product-detail .slider-nav-thumbnails img {
    border: 2px solid transparent;
    border-radius: 9px;
    box-shadow: none;
    cursor: pointer;
    transition:
        border-color 0.2s ease,
        opacity 0.2s ease,
        transform 0.2s ease;
}

.product-detail .slider-nav-thumbnails img:hover,
.product-detail .slider-nav-thumbnails .slick-current img {
    border-color: var(--av-gold);
    opacity: 0.96;
    transform: translateY(-1px);
}

.product-detail .social-share {
    margin-top: 20px;
}

.product-detail .mail-to-friend {
    color: #8a9a95;
    display: inline-flex;
    margin-top: 8px;
}

.product-detail .detail-info {
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(18, 54, 46, 0.06);
    padding: 26px 28px !important;
}

.product-detail .detail-info .title-detail {
    color: var(--av-forest);
    font-size: 30px;
    line-height: 1.16;
    margin-bottom: 10px;
}

.product-detail .product-detail-rating {
    margin-bottom: 12px;
}

.product-detail .detail-info .current-price,
.product-detail .detail-info .product-price ins,
.product-detail .detail-info .price ins {
    color: var(--av-forest) !important;
    font-size: 30px;
    font-weight: 800;
}

.product-detail .short-desc {
    border-bottom: 1px solid rgba(13, 90, 77, 0.09);
    color: #4e645f;
    margin-bottom: 22px !important;
    padding-bottom: 18px;
}

.product-detail .short-desc p,
.product-detail .short-desc li {
    color: #4e645f;
    line-height: 1.65;
}

.product-detail .product-attributes {
    margin: 0 0 18px;
}

.product-detail .attribute-swatches-wrapper {
    margin-bottom: 16px;
}

.product-detail .attribute-name,
.product-detail .dropdown-swatches-wrapper .attribute-name {
    color: var(--av-forest);
    display: block;
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 9px;
}

.product-detail .attribute-swatch {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.product-detail .attribute-swatch-item {
    list-style: none;
}

.product-detail .text-swatch .attribute-swatch-item label {
    cursor: pointer;
    display: block;
    margin: 0;
}

.product-detail .text-swatch .attribute-swatch-item input[type="radio"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.product-detail .text-swatch .attribute-swatch-item span {
    align-items: center;
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.18);
    border-radius: 999px;
    color: #44615a;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    min-height: 38px;
    min-width: 74px;
    justify-content: center;
    padding: 8px 17px;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}

.product-detail
    .text-swatch
    .attribute-swatch-item
    input[type="radio"]:checked
    + span {
    background: var(--av-forest);
    border-color: var(--av-forest);
    box-shadow: 0 8px 18px rgba(13, 90, 77, 0.18);
    color: #fff;
}

.product-detail .text-swatch .attribute-swatch-item:not(.pe-none) span:hover {
    border-color: var(--av-gold);
    color: var(--av-forest);
}

.product-detail .visual-swatch .attribute-swatch-item label {
    cursor: pointer;
    display: inline-flex;
    margin: 0;
    position: relative;
}

.product-detail .visual-swatch .attribute-swatch-item input[type="radio"] {
    height: 1px;
    opacity: 0;
    position: absolute;
    width: 1px;
}

.product-detail .visual-swatch .attribute-swatch-item span {
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(13, 90, 77, 0.22),
        0 5px 12px rgba(13, 90, 77, 0.08);
    display: block;
    height: 34px;
    width: 34px;
}

.product-detail
    .visual-swatch
    .attribute-swatch-item
    input[type="radio"]:checked
    + span {
    box-shadow:
        0 0 0 3px rgba(13, 90, 77, 0.92),
        0 7px 16px rgba(13, 90, 77, 0.14);
}

.product-detail .attribute-swatch-item.pe-none {
    opacity: 0.45;
}

.product-detail .dropdown-swatch select {
    border: 1px solid rgba(13, 90, 77, 0.16);
    border-radius: 10px;
    color: #415852;
    min-height: 42px;
}

.product-detail .product-availability {
    color: var(--av-forest);
    font-size: 13px;
    font-weight: 800;
    margin: 4px 0 17px;
}

.product-detail .detail-extralink {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px !important;
}

.product-detail .detail-qty {
    border-color: rgba(13, 90, 77, 0.18) !important;
    border-radius: 9px !important;
    height: 42px;
    margin: 0 !important;
}

.product-detail .detail-qty .qty-val {
    color: var(--av-forest);
    font-weight: 800;
    height: 40px;
}

.product-detail .product-extra-link2 {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.product-detail .product-extra-link2 .button {
    border-radius: 9px;
    box-shadow: none;
    min-height: 42px;
    padding: 10px 18px;
}

.product-detail .product-extra-link2 .button-add-to-cart {
    background: var(--av-forest);
    border-color: var(--av-forest);
}

.product-detail .product-extra-link2 .button-buy-now {
    background: var(--av-gold);
    border-color: var(--av-gold);
    color: #fff;
}

.product-detail .product-extra-link2 .action-btn {
    align-items: center;
    border: 1px solid rgba(13, 90, 77, 0.14);
    border-radius: 9px;
    display: inline-flex;
    height: 42px;
    justify-content: center;
    margin-left: 0;
    width: 42px;
}

.product-detail .font-xs {
    border-top: 1px solid rgba(13, 90, 77, 0.08);
    clear: both;
    padding-top: 16px;
}

.product-detail .font-xs ul {
    float: none !important;
    margin: 0 !important;
}

.product-detail .font-xs li {
    color: #657771;
    line-height: 1.7;
}

.product-detail .font-xs li span:first-child {
    color: var(--av-forest);
    font-weight: 800;
}

.product-detail .product-info {
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(18, 54, 46, 0.06);
    margin-top: 48px;
    padding: 26px 36px 42px;
}

.product-detail .tab-style3 .nav-tabs {
    border-bottom: 1px solid rgba(13, 90, 77, 0.08);
    gap: 8px;
    margin-bottom: 26px;
}

.product-detail .tab-style3 .nav-tabs .nav-link {
    border: 1px solid rgba(13, 90, 77, 0.12);
    border-radius: 999px;
    color: var(--av-forest);
    font-size: 12px;
    font-weight: 800;
    padding: 9px 16px;
    text-transform: none;
}

.product-detail .tab-style3 .nav-tabs .nav-link.active {
    background: var(--av-forest);
    border-color: var(--av-forest);
    color: #fff;
}

.product-detail .shop_info_tab.entry-main-content {
    border: 0;
    padding: 0;
}

.product-detail .ck-content {
    color: #5b4f43;
}

.product-detail .ck-content > * + * {
    margin-top: 30px;
}

.product-detail .ck-content p {
    line-height: 1.72;
}

.product-detail .ck-content h2,
.product-detail .ck-content h3 {
    color: var(--av-forest);
    letter-spacing: 0 !important;
    margin-bottom: 14px;
    text-align: center;
}

.product-detail .benefits-section,
.product-detail .ingredient-section,
.product-detail .why2x2-section,
.product-detail .cta-section,
.product-detail .routine-section {
    margin-top: 52px !important;
}

.product-detail .benefits-section h2,
.product-detail .ingredient-section h2,
.product-detail .why2x2-section h2,
.product-detail .routine-section h2 {
    color: var(--av-forest) !important;
    font-size: 28px !important;
    letter-spacing: 0 !important;
    margin-bottom: 20px !important;
}

.product-detail .benefits-grid,
.product-detail .ingredients-grid,
.product-detail .why-grid {
    gap: 18px !important;
}

.product-detail .benefit-item,
.product-detail .ingredient-card,
.product-detail .why-item {
    border: 1px solid rgba(214, 154, 74, 0.22) !important;
    border-radius: 11px !important;
    box-shadow: 0 8px 20px rgba(117, 81, 39, 0.06) !important;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.product-detail .benefit-item:hover,
.product-detail .ingredient-card:hover,
.product-detail .why-item:hover {
    box-shadow: 0 12px 26px rgba(117, 81, 39, 0.1) !important;
    transform: translateY(-2px);
}

.product-detail .routine-card,
.product-detail .routine-section table,
.product-detail .routine-section .table,
.product-detail .table-newwidth {
    /*border-radius: 12px !important;*/
    /*box-shadow: 0 10px 24px rgba(13, 90, 77, 0.06);*/
    overflow: hidden;
}

.product-detail .cta-section {
    background: linear-gradient(
        135deg,
        rgba(13, 90, 77, 0.06),
        rgba(200, 135, 55, 0.12)
    );
    border: 1px solid rgba(13, 90, 77, 0.06);
    border-radius: 14px;
    padding: 28px 22px;
    text-align: center;
}

.product-detail > .mt-60 {
    margin-top: 56px !important;
}

.product-detail > .mt-60 .section-title.style-1 {
    color: var(--av-forest);
    font-size: 23px;
    margin-bottom: 22px;
}

.product-detail > .mt-60 .products-grid {
    gap: 22px;
}

.product-detail > .mt-60 .product-card {
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 12px;
    box-shadow: 0 8px 22px rgba(18, 54, 46, 0.07);
    overflow: hidden;
    transition:
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.product-detail > .mt-60 .product-card:hover {
    box-shadow: 0 12px 28px rgba(18, 54, 46, 0.11);
    transform: translateY(-3px);
}

.product-detail > .mt-60 .product-details {
    padding: 15px 15px 17px;
}

.product-detail > .mt-60 .add-to-cart-btn {
    background: var(--av-forest);
    border-radius: 8px;
    color: #fff;
    margin-top: 10px;
    padding: 10px 12px;
    text-align: center;
}

@media (max-width: 768px) {
    .product-detail.accordion-detail {
        padding: 0 12px 40px;
    }

    .product-detail.accordion-detail > .row:first-child {
        margin-left: -8px;
        margin-right: -8px;
    }

    .product-detail.accordion-detail > .row:first-child > [class*="col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }

    .product-detail .detail-gallery {
        padding: 10px;
    }

    .product-detail .detail-gallery .product-image-slider img {
        max-height: 420px;
    }

    .product-detail .slider-nav-thumbnails:not(.slick-initialized) {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .product-detail .detail-info {
        padding: 22px 17px !important;
    }

    .product-detail .detail-info .title-detail {
        font-size: 26px;
    }

    .product-detail .product-info {
        margin-top: 34px;
        padding: 22px 16px 30px;
    }

    .product-detail .tab-style3 .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 8px;
    }

    .product-detail .tab-style3 .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .product-detail .benefits-section,
    .product-detail .ingredient-section,
    .product-detail .why2x2-section,
    .product-detail .cta-section,
    .product-detail .routine-section {
        margin-top: 38px !important;
    }

    .product-detail .benefits-section h2,
    .product-detail .ingredient-section h2,
    .product-detail .why2x2-section h2,
    .product-detail .routine-section h2 {
        font-size: 23px !important;
    }
}

@media (max-width: 480px) {
    .product-detail .detail-extralink,
    .product-detail .product-extra-link2 {
        align-items: stretch;
        flex-direction: column;
    }

    .product-detail .detail-qty,
    .product-detail .product-extra-link2 .button,
    .product-detail .product-extra-link2 .action-btn {
        width: 100%;
    }

    .product-detail .text-swatch .attribute-swatch-item span {
        min-width: 66px;
        padding-left: 13px;
        padding-right: 13px;
    }
}

/*
 * V4 visual redesign.
 * Make the page feel intentionally designed, not just patched.
 */

.product-detail.accordion-detail {
    /*background:*/
    /*    radial-gradient(circle at top left, rgba(200, 135, 55, 0.13), transparent 31%),*/
    /*    radial-gradient(circle at 86% 6%, rgba(13, 90, 77, 0.12), transparent 27%),*/
    /*    linear-gradient(180deg, #fbfaf7 0%, #f6f8f4 54%, #ffffff 100%);*/
    border-radius: 0;
    max-width: none;
    /*padding: 42px max(18px, calc((100vw - 1240px) / 2)) 64px;*/
}

.product-detail.accordion-detail > .row:first-child {
    align-items: stretch;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(13, 90, 77, 0.1);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(16, 58, 50, 0.12);
    margin: 0;
    padding: 18px;
    position: relative;
}

.product-detail.accordion-detail > .row:first-child::before {
    /*background: linear-gradient(90deg, var(--av-forest), var(--av-gold));*/
    border-radius: 18px 18px 0 0;
    content: "";
    height: 5px;
    left: -1px;
    position: absolute;
    right: -1px;
    top: -1px;
}

.product-detail.accordion-detail > .row:first-child > [class*="col-"] {
    padding: 18px;
}

.product-detail.accordion-detail > .row:first-child > .col-md-6:first-child {
    /*background:*/
    /*    linear-gradient(135deg, rgba(13, 90, 77, 0.08), rgba(200, 135, 55, 0.08)),*/
    /*    #fffdf8;*/
    /*border-radius: 15px;*/
}

.product-detail .detail-gallery {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.product-detail .detail-gallery .product-image-slider {
    /*background: #fff;*/
    border: 1px solid rgba(13, 90, 77, 0.09);
    border-radius: 16px;
    /*box-shadow: 0 18px 42px rgba(13, 90, 77, 0.11);*/
    margin-bottom: 16px;
}

.product-detail .detail-gallery .product-image-slider figure {
    background:
        linear-gradient(
            135deg,
            rgba(255, 250, 241, 0.85),
            rgba(255, 255, 255, 0.95)
        ),
        #fff;
}

.product-detail .detail-gallery .product-image-slider img {
    /*padding: 10px;*/
}

.product-detail .slider-nav-thumbnails {
    background: rgba(255, 255, 255, 0.68);
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 13px;
    margin: 0;
    padding: 8px;
}

.product-detail .slider-nav-thumbnails img {
    border-radius: 10px;
}

.product-detail .slider-nav-thumbnails img:hover,
.product-detail .slider-nav-thumbnails .slick-current img {
    border-color: var(--av-forest);
}

.product-detail .social-share {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 12px;
    margin-top: 18px;
    padding: 12px 14px;
}

.product-detail .mail-to-friend {
    margin-left: 4px;
}

.product-detail .detail-info {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf8 100%);
    border: 1px solid rgba(13, 90, 77, 0.1);
    border-radius: 15px;
    box-shadow: 0 18px 46px rgba(13, 90, 77, 0.1);
    height: 100%;
    padding: 34px 38px !important;
    position: relative;
}

.product-detail .detail-info::before {
    background: rgba(13, 90, 77, 0.08);
    border-radius: 999px;
    color: var(--av-forest);
    content: "Aabhaveda Essential";
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin-bottom: 14px;
    padding: 7px 12px;
    text-transform: uppercase;
}

.product-detail .detail-info .title-detail {
    font-size: 34px;
    letter-spacing: 0;
    margin-bottom: 12px;
}

.product-detail .detail-info .current-price,
.product-detail .detail-info .product-price ins,
.product-detail .detail-info .price ins {
    color: var(--av-forest-dark) !important;
    font-size: 36px;
}

.product-detail .short-desc {
    background: rgba(13, 90, 77, 0.045);
    border: 0;
    border-radius: 13px;
    margin-bottom: 24px !important;
    padding: 16px 18px;
}

.product-detail .short-desc ul,
.product-detail .short-desc ol {
    margin-left: 18px;
}

.product-detail .attribute-swatches-wrapper {
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 12px;
    margin-bottom: 14px;
    padding: 13px 14px;
}

.product-detail .attribute-name,
.product-detail .dropdown-swatches-wrapper .attribute-name {
    margin-bottom: 11px;
}

.product-detail .text-swatch .attribute-swatch-item span {
    border-radius: 10px;
    min-width: 82px;
}

.product-detail
    .text-swatch
    .attribute-swatch-item
    input[type="radio"]:checked
    + span {
    background: linear-gradient(135deg, var(--av-forest), #16846e);
}

.product-detail .product-availability {
    align-items: center;
    background: rgba(39, 130, 103, 0.08);
    border-radius: 999px;
    display: inline-flex;
    padding: 7px 12px;
}

.product-detail .detail-extralink {
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 14px;
    padding: 12px;
}

.product-detail .detail-qty {
    align-items: center;
    display: inline-flex;
    height: 46px;
    justify-content: center;
    overflow: hidden;
}

.product-detail .detail-qty .qty-val {
    align-items: center;
    display: inline-flex;
    height: 44px;
    justify-content: center;
    line-height: 44px;
    padding: 0 !important;
    text-align: center;
}

.product-detail .detail-qty .qty-down,
.product-detail .detail-qty .qty-up {
    align-items: center;
    display: inline-flex;
    height: 44px;
    justify-content: center;
}

.product-detail .product-extra-link2 {
    flex: 1;
}

.product-detail .product-extra-link2 .button {
    align-items: center;
    border-radius: 10px;
    display: inline-flex;
    flex: 1 1 auto;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
    padding: 12px 20px;
    text-align: center;
}

.product-detail .product-extra-link2 .button-add-to-cart {
    background: linear-gradient(135deg, var(--av-forest), #0b6d5b);
    box-shadow: 0 10px 22px rgba(13, 90, 77, 0.18);
}

.product-detail .product-extra-link2 .button-buy-now {
    background: linear-gradient(135deg, #d69a4a, #b87424);
    box-shadow: 0 10px 22px rgba(184, 116, 36, 0.18);
}

.product-detail .font-xs {
    background: rgba(255, 250, 241, 0.8);
    border: 1px solid rgba(200, 135, 55, 0.14);
    border-radius: 12px;
    padding: 14px 16px;
}

.product-detail .product-info {
    background: linear-gradient(180deg, #ffffff 0%, #fdfbf7 100%);
    border: 1px solid rgba(13, 90, 77, 0.09);
    border-radius: 18px;
    box-shadow: 0 24px 70px rgba(16, 58, 50, 0.1);
    margin-top: 54px;
    padding: 30px 46px 48px;
}

.product-detail .tab-style3 .nav-tabs {
    background: rgba(13, 90, 77, 0.045);
    border: 0;
    border-radius: 999px;
    /*display: inline-flex;*/
    margin-bottom: 30px;
    padding: 6px;
}

.product-detail .tab-style3 .nav-tabs .nav-link {
    background: transparent;
    border: 0;
    border-radius: 999px;
}

.product-detail .ck-content > p:first-child,
.product-detail .ck-content > div:first-child {
    color: #6b5134;
    font-size: 15px;
}

.product-detail .benefits-section,
.product-detail .ingredient-section,
.product-detail .why2x2-section,
.product-detail .routine-section {
    background: rgba(255, 255, 255, 0.58);
    border-radius: 16px;
    padding: 8px 8px 2px;
}

.product-detail .benefit-item,
.product-detail .ingredient-card,
.product-detail .why-item {
    background: #fff !important;
}

.product-detail .cta-section {
    background:
        linear-gradient(
            135deg,
            rgba(13, 90, 77, 0.11),
            rgba(214, 154, 74, 0.18)
        ),
        #fffaf1;
    border-color: rgba(200, 135, 55, 0.16);
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(117, 81, 39, 0.08);
    margin-left: auto;
    margin-right: auto;
    /*max-width: 980px;*/
}

.product-detail .cta-section .button,
.product-detail .cta-section button,
.product-detail .cta-section a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    line-height: 1.2;
    min-height: 42px;
    text-align: center;
}

.product-detail > .mt-60 {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(13, 90, 77, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(16, 58, 50, 0.08);
    margin-top: 42px !important;
    padding: 26px 28px 30px;
}

.product-detail > .mt-60 .product-card {
    border-radius: 14px;
}

@media (max-width: 991px) {
    .product-detail.accordion-detail {
        padding-top: 28px;
    }

    .product-detail .detail-info {
        padding: 26px 22px !important;
    }

    .product-detail .detail-info .title-detail {
        font-size: 30px;
    }
}

@media (max-width: 768px) {
    .product-detail.accordion-detail > .row:first-child {
        padding: 10px;
    }

    .product-detail.accordion-detail > .row:first-child > [class*="col-"] {
        padding: 10px;
    }

    .product-detail .product-info {
        border-radius: 16px;
        padding: 22px 16px 32px;
    }

    .product-detail .tab-style3 .nav-tabs {
        border-radius: 12px;
        display: flex;
        width: 100%;
    }

    .product-detail > .mt-60 {
        padding: 20px 16px 24px;
    }
}

.product-detail .routine-section {
    text-align: center;
}

.product-detail .routine-card,
.product-detail .routine-section table,
.product-detail .routine-section .table,
.product-detail .routine-section .table-newwidth {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STRUCTURE PASS
   The page had grown cards nested inside cards, each carrying its own
   large shadow: .row:first-child (0 24px 70px) wrapped .detail-gallery
   (0 10px 28px) and .detail-info (0 18px 46px); .mt-60 (0 18px 50px)
   wrapped .product-card (0 8px 22px). Stacked blur reads as haze.

   One rule now: OUTER WRAPPERS ARE LAYOUT, NOT SURFACES. Only real
   cards get a border, and elevation is reserved for things that lift
   on hover or invite a click.

   The description tab is deliberately untouched — .benefits-section,
   .ingredient-section, .why2x2-section, .cta-section, .routine-section
   and their children keep every rule they had.
   ═══════════════════════════════════════════════════════════════════ */

/* --- palette: match the header/menu green and bronze used sitewide -- */

.product-detail {
    --av-forest: #184d45;
    --av-forest-dark: #0f342e;
    --av-gold: #b46e29;
    --av-line: #e8e2d6;
    --av-ink: #3a443f;
    --av-muted: #6d746f;
}

/* --- 1. outer wrappers stop pretending to be cards ------------------ */

.product-detail.accordion-detail > .row:first-child,
.product-detail > .mt-60 {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.product-detail.accordion-detail > .row:first-child > [class*="col-"] {
    padding-bottom: 0;
    padding-top: 0;
}

.product-detail > .mt-60 {
    margin-top: 56px !important;
    padding-top: 34px;
    border-top: 1px solid var(--av-line);
}

/* --- 2. the gallery: one flat surface, image edge to edge ----------- */

.product-detail .detail-gallery {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.product-detail .detail-gallery .product-image-slider {
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 16px;
    margin-bottom: 14px;
    overflow: hidden;
}

.product-detail .detail-gallery .product-image-slider figure {
    background: #fff;
    border-radius: 0;
    margin: 0;
    overflow: hidden;
}

/* fill the frame rather than letterboxing inside it. every product
   image in the library is square and the frame is square, so nothing
   is cropped today; cover (not fill) means a non-square upload later
   crops instead of stretching the bottle out of shape. */
.product-detail .detail-gallery .product-image-slider img {
    height: 100%;
    object-fit: cover;
    object-position: center;
    padding: 0;
    width: 100%;
}

.product-detail .detail-gallery .zoom-icon {
    right: 14px;
    top: 14px;
    box-shadow: 0 2px 8px rgba(24, 77, 69, 0.14);
}

/* --- 3. thumbnails ------------------------------------------------- */

.product-detail .slider-nav-thumbnails img {
    border: 2px solid var(--av-line);
    border-radius: 10px;
    box-shadow: none;
}

.product-detail .slider-nav-thumbnails img:hover,
.product-detail .slider-nav-thumbnails .slick-current img {
    border-color: var(--av-gold);
    opacity: 1;
    transform: none;
}

/* --- 4. the buy column: flat, aligned to the gallery ---------------- */

.product-detail .detail-info {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0 0 0 6px !important;
}

.product-detail .detail-info .title-detail {
    color: var(--av-forest);
    letter-spacing: -0.01em;
    margin-bottom: 10px;
}

/* group the price + rating so the eye lands there before the blurb */
.product-detail .detail-info .product-detail-rating {
    margin-bottom: 6px;
}

.product-detail .detail-info .short-desc {
    border-bottom: 1px solid var(--av-line);
    color: var(--av-muted);
    margin-bottom: 24px !important;
    padding-bottom: 20px;
}

/* --- 5. quantity + buttons ----------------------------------------- */

.product-detail .detail-extralink {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.product-detail .detail-qty {
    border: 1px solid var(--av-line) !important;
    border-radius: 999px;
    box-shadow: none;
}

.product-detail .product-extra-link2 .button-add-to-cart {
    background: var(--av-forest);
    border-color: var(--av-forest);
    box-shadow: none;
}

.product-detail .product-extra-link2 .button-add-to-cart:hover {
    background: var(--av-gold);
    border-color: var(--av-gold);
    box-shadow: 0 8px 18px -8px rgba(180, 110, 41, 0.6);
}

.product-detail .product-extra-link2 .button-buy-now {
    box-shadow: none;
}

.product-detail .product-extra-link2 .button-buy-now:hover {
    box-shadow: 0 8px 18px -8px rgba(180, 110, 41, 0.6);
}

.product-detail .product-extra-link2 .action-btn {
    border: 1px solid var(--av-line);
    box-shadow: none;
}

.product-detail .product-extra-link2 .action-btn:hover {
    border-color: var(--av-gold);
    color: var(--av-gold);
}

/* --- 6. the meta list (SKU / categories / tags) --------------------- */

.product-detail .detail-info .font-xs > ul {
    border-top: 1px solid var(--av-line);
    float: none !important;
    margin: 18px 0 0 !important;
    padding-top: 16px;
}

.product-detail .detail-info .font-xs > ul li {
    color: var(--av-muted);
}

.product-detail .detail-info .font-xs > ul li a {
    color: var(--av-forest);
}

.product-detail .detail-info .font-xs > ul li a:hover {
    color: var(--av-gold);
}

/* --- 7. the tab panel: a plain surface, not a floating slab --------- */

.product-detail .product-info {
    background: #fff;
    border: 1px solid var(--av-line);
    border-radius: 16px;
    box-shadow: none;
    margin-top: 56px;
    padding: 26px 34px 38px;
}

.product-detail .tab-style3 .nav-tabs {
    background: transparent;
    border-bottom: 1px solid var(--av-line);
    border-radius: 0;
    gap: 4px;
    margin-bottom: 26px;
    padding: 0;
}

.product-detail .tab-style3 .nav-tabs .nav-link {
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--av-muted);
    padding: 12px 18px;
}

.product-detail .tab-style3 .nav-tabs .nav-link:hover {
    color: var(--av-gold);
}

.product-detail .tab-style3 .nav-tabs .nav-link.active {
    background: transparent;
    border-bottom-color: var(--av-gold);
    color: var(--av-forest);
}

/* --- 8. related / cross-sell rails ---------------------------------- */

.product-detail > .mt-60 .section-title {
    color: var(--av-forest);
}

.product-detail > .mt-60 .product-card {
    border: 1px solid var(--av-line);
    border-radius: 14px;
    box-shadow: none;
}

.product-detail > .mt-60 .product-card:hover {
    border-color: #ddd0b8;
    box-shadow: 0 14px 32px -22px rgba(24, 77, 69, 0.55);
}

/* --- 9. responsive -------------------------------------------------- */

@media (max-width: 991px) {
    .product-detail .detail-info {
        padding: 26px 0 0 !important;
    }

    .product-detail .product-info {
        padding: 22px 18px 30px;
    }
}

@media (max-width: 768px) {
    .product-detail.accordion-detail > .row:first-child,
    .product-detail.accordion-detail > .row:first-child > [class*="col-"] {
        padding-left: 0;
        padding-right: 0;
    }

    .product-detail .tab-style3 .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
    }

    .product-detail .tab-style3 .nav-tabs .nav-link {
        white-space: nowrap;
    }

    .product-detail > .mt-60 {
        padding: 26px 0 0;
    }
}

/* --- 10. product video slides --------------------------------------
   The gallery frame is square and shared with the image slides, so the
   video fills it the same way. Slick measures slide height on init, so
   the figure keeps the same aspect-ratio box the images use.
   ------------------------------------------------------------------ */

.product-detail .detail-gallery .product-image-slider figure.av-pdp-video-slide {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: #0f1a17;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.product-detail .av-pdp-video-slide video,
.product-detail .av-pdp-video-slide iframe {
    border: 0;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* the nav thumbnail gets a play badge so it reads as a video */
.product-detail .slider-nav-thumbnails .av-pdp-video-thumb {
    display: block;
    position: relative;
}

.product-detail .slider-nav-thumbnails .av-pdp-video-thumb::after {
    background: rgba(15, 26, 23, 0.42);
    border-radius: 10px;
    content: "";
    inset: 0;
    position: absolute;
}

.product-detail .slider-nav-thumbnails .av-pdp-video-thumb i {
    align-items: center;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 50%;
    color: var(--av-forest);
    display: inline-flex;
    font-size: 12px;
    height: 30px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    z-index: 2;
}

/* the magnific-popup zoom must not try to lightbox a video slide */
.product-detail .detail-gallery:has(.slick-current .av-pdp-video-slide) .zoom-icon {
    display: none;
}

/* --- 11. gallery controls + the buy row ----------------------------
   The thumbnail strip now lets slick own .slick-active (it marks which
   slides are in view); .slick-current is the one the highlight follows.
   ------------------------------------------------------------------ */

.product-detail .detail-gallery {
    position: relative;
}

.product-detail .av-gallery-arrow {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--av-line);
    border-radius: 50%;
    color: var(--av-forest);
    display: flex;
    height: 38px;
    justify-content: center;
    opacity: 0;
    padding: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .2s ease, background-color .2s ease, color .2s ease;
    width: 38px;
    z-index: 4;
}

.product-detail .product-image-slider:hover .av-gallery-arrow,
.product-detail .av-gallery-arrow:focus-visible {
    opacity: 1;
}

.product-detail .av-gallery-arrow:hover {
    background: var(--av-forest);
    color: #fff;
}

.product-detail .av-gallery-arrow.slick-prev { left: 12px; }
.product-detail .av-gallery-arrow.slick-next { right: 12px; }

.product-detail .av-gallery-arrow.slick-disabled {
    cursor: default;
    opacity: 0 !important;
}

/* touch devices have no hover, so keep the arrows visible there */
@media (hover: none) {
    .product-detail .av-gallery-arrow {
        opacity: 1;
    }
}

/* --- thumbnail strip ----------------------------------------------- */

.product-detail .slider-nav-thumbnails {
    padding: 0 26px;
    position: relative;
}

.product-detail .slider-nav-thumbnails .slick-prev,
.product-detail .slider-nav-thumbnails .slick-next {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--av-muted);
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    position: absolute;
    top: 0;
    transform: none;
    width: 22px;
    z-index: 3;
}

.product-detail .slider-nav-thumbnails .slick-prev { left: 0; }
.product-detail .slider-nav-thumbnails .slick-next { right: 0; }

.product-detail .slider-nav-thumbnails .slick-prev:hover,
.product-detail .slider-nav-thumbnails .slick-next:hover {
    color: var(--av-gold);
}

.product-detail .slider-nav-thumbnails .slick-disabled {
    opacity: .25;
    pointer-events: none;
}

/* the video thumb wraps its img in a span, so it needs the same box */
.product-detail .slider-nav-thumbnails .av-pdp-video-thumb {
    aspect-ratio: 1 / 1;
    border: 2px solid var(--av-line);
    border-radius: 10px;
    display: block;
    overflow: hidden;
    width: 100%;
}

.product-detail .slider-nav-thumbnails .av-pdp-video-thumb img {
    border: 0;
    border-radius: 0;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.product-detail .slider-nav-thumbnails .slick-current .av-pdp-video-thumb {
    border-color: var(--av-gold);
}

/* --- the buy row: qty and both buttons on one baseline -------------- */

.product-detail .detail-extralink {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px !important;
}

.product-detail .detail-qty,
.product-detail .product-extra-link2 .button-add-to-cart,
.product-detail .product-extra-link2 .button-buy-now,
.product-detail .product-extra-link2 .action-btn {
    /* one shared control height is what makes the row read as a unit */
    height: 52px;
    line-height: 1;
    margin: 0;
}

.product-detail .detail-qty {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    max-width: none;
    padding: 0 12px;
    width: 112px;
}

.product-detail .detail-qty .qty-val,
.product-detail .detail-qty .qty-input {
    -moz-appearance: textfield;
    appearance: textfield;
    background: transparent;
    border: 0;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
    text-align: center;
    width: 100%;
}

.product-detail .detail-qty .qty-val::-webkit-outer-spin-button,
.product-detail .detail-qty .qty-val::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.product-detail .detail-qty .qty-down,
.product-detail .detail-qty .qty-up {
    align-items: center;
    color: var(--av-muted);
    display: flex;
    flex: 0 0 auto;
    height: 100%;
    justify-content: center;
    position: static;
    width: 16px;
}

.product-detail .detail-qty .qty-down:hover,
.product-detail .detail-qty .qty-up:hover {
    color: var(--av-gold);
}

.product-detail .product-extra-link2 {
    align-items: stretch;
    display: flex;
    flex: 1 1 320px;
    gap: 10px;
    margin: 0;
}

.product-detail .product-extra-link2 .button-add-to-cart,
.product-detail .product-extra-link2 .button-buy-now {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    flex: 1 1 0;
    font-size: 15px;
    gap: 8px;
    justify-content: center;
    padding: 0 22px;
    white-space: nowrap;
}

.product-detail .product-extra-link2 .action-btn {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    flex: 0 0 auto;
    justify-content: center;
    width: 52px;
}

@media (max-width: 575px) {
    .product-detail .detail-extralink {
        gap: 8px;
    }

    .product-detail .product-extra-link2 {
        flex: 1 1 100%;
    }

    .product-detail .product-extra-link2 .button-add-to-cart,
    .product-detail .product-extra-link2 .button-buy-now {
        font-size: 14px;
        padding: 0 14px;
    }
}

/* --- 12. lazy video facade ------------------------------------------
   Adopted from Botble 1.26.11, which renders a poster + play button and
   only injects the real iframe on click — a YouTube player costs roughly
   700KB of third-party JS on every product view otherwise. The click is
   handled by .bb-product-video-facade in the shipped front-ecommerce.js,
   so this is styling only; we add no JavaScript.

   The rest of their gallery was not adopted: it rebuilds around
   .bb-product-gallery and drops the classes 50 rules here depend on.
   ------------------------------------------------------------------ */

.product-detail .av-pdp-video-facade {
    background: #0f1a17;
    border: 0;
    cursor: pointer;
    display: block;
    height: 100%;
    padding: 0;
    position: relative;
    width: 100%;
}

.product-detail .av-pdp-video-facade img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.product-detail .av-pdp-video-play {
    align-items: center;
    background: rgba(255, 255, 255, .94);
    border-radius: 50%;
    box-shadow: 0 10px 28px -12px rgba(0, 0, 0, .6);
    color: var(--av-forest);
    display: flex;
    height: 66px;
    justify-content: center;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: background-color .2s ease, transform .2s ease, color .2s ease;
    width: 66px;
}

.product-detail .av-pdp-video-play i {
    font-size: 22px;
    margin-left: 4px; /* optically centres a triangle in a circle */
}

.product-detail .av-pdp-video-facade:hover .av-pdp-video-play,
.product-detail .av-pdp-video-facade:focus-visible .av-pdp-video-play {
    background: var(--av-gold);
    color: #fff;
    transform: translate(-50%, -50%) scale(1.06);
}

/* the injected iframe replaces the button, so it inherits the frame */
.product-detail .av-pdp-video-slide iframe {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

@media (prefers-reduced-motion: reduce) {
    .product-detail .av-pdp-video-play {
        transition-duration: .01ms;
    }
}