/* =========================================================
   DENTOT.VN - SINGLE PRODUCT
   Premium Product Detail / Adaptive Variations
   WooCommerce / Flatsome / Responsive
   Scope: .shop-container > .product
   ========================================================= */


/* =========================================================
   01. DESIGN TOKENS
   ========================================================= */

.shop-container>.product {
    --dt-sp-primary: #ff7600;
    --dt-sp-primary-dark: #e85f00;
    --dt-sp-primary-soft: #fff4e9;

    --dt-sp-heading: #17191c;
    --dt-sp-text: #3d4248;
    --dt-sp-muted: #727880;
    --dt-sp-soft: #979da4;

    --dt-sp-bg: #fafafa;
    --dt-sp-card: #ffffff;

    --dt-sp-border: #e4e7ea;
    --dt-sp-border-warm: #ffc88f;

    --dt-sp-shadow:
        0 18px 48px rgba(20, 26, 34, 0.065),
        0 4px 12px rgba(20, 26, 34, 0.025);

    --dt-sp-sticky-top: 112px;

    color: var(--dt-sp-text);

    font-size: 15px;
    line-height: 1.6;

    text-rendering: optimizeLegibility;
}


/* =========================================================
   02. PRODUCT PAGE
   ========================================================= */

.shop-container>.product .product-main {
    padding: 28px 0 48px;

    background:
        linear-gradient(180deg,
            #fffdfa 0%,
            #fafafa 100%);
}


.shop-container>.product .product-main>.content-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;

    width: min(1260px,
            calc(100% - 36px));

    max-width: none !important;

    margin: 0 auto !important;
    padding: 0 !important;
}


/* =========================================================
   03. FULL WIDTH BREADCRUMB
   ========================================================= */

.shop-container>.product .dt-product-breadcrumb {
    position: relative;
    z-index: 5;

    flex: 0 0 100%;

    width: 100%;

    margin: 0 0 18px;
}


/* =========================================================
   04. BREADCRUMB
   ========================================================= */

.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb {
    display: flex;

    align-items: center;
    flex-wrap: wrap;

    width: 100%;

    margin: 0 !important;
    padding: 11px 15px;

    border: 1px solid #dfe3e6;
    border-radius: 12px;

    color: #555d64;

    background:
        linear-gradient(135deg,
            #ffffff 0%,
            #fffaf5 100%);

    box-shadow:
        0 5px 18px rgba(20, 26, 34, 0.035);

    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.4;

    text-transform: none !important;
}


.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb a {
    display: inline-flex;

    align-items: center;

    min-height: 30px;

    padding: 0 6px;

    border-radius: 7px;

    color: #3f474e;

    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.3;

    text-decoration: none !important;

    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}


.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb a:first-child {
    margin-left: -6px;
}


.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb .divider {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin: 0 7px !important;
    padding: 0 !important;

    color: #806c5b !important;

    opacity: 1 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    pointer-events: none;
}


.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb .divider i,

.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb .divider::before,

.shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb .divider::after {
    color: #806c5b !important;

    opacity: 1 !important;

    font-weight: 700 !important;
}


@media (hover: hover) {

    .shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb a:hover {
        color: var(--dt-sp-primary-dark);

        background: #fff1e4;
    }

}


/* =========================================================
   05. DESKTOP COLUMNS
   ========================================================= */

@media screen and (min-width: 1024px) {

    .shop-container>.product .product-gallery {
        width: 46% !important;
        max-width: 46% !important;
        flex-basis: 46% !important;

        padding: 0 16px 0 0 !important;
    }


    .shop-container>.product .product-summary {
        width: 54% !important;
        max-width: 54% !important;
        flex-basis: 54% !important;

        padding: 0 0 0 16px !important;
    }


    .shop-container>.product #product-sidebar {
        display: none !important;
    }

}


/* =========================================================
   06. STICKY PRODUCT GALLERY
   ========================================================= */

@media screen and (min-width: 1024px) {

    .shop-container>.product .product-gallery .col-inner {
        position: sticky;

        top: var(--dt-sp-sticky-top);

        align-self: flex-start;
    }

}


/* =========================================================
   07. GALLERY
   ========================================================= */

.shop-container>.product .product-gallery .product-images {
    position: relative;

    overflow: hidden;

    margin: 0 !important;

    border: 1px solid var(--dt-sp-border);
    border-radius: 22px;

    background: #ffffff;

    box-shadow: var(--dt-sp-shadow);
}


.shop-container>.product .woocommerce-product-gallery__image {
    background: #ffffff;
}


.shop-container>.product .woocommerce-product-gallery__image a {
    display: flex;

    align-items: center;
    justify-content: center;
}


.shop-container>.product .woocommerce-product-gallery__image img {
    display: block;

    width: 100% !important;
    height: auto !important;

    object-fit: contain;
}


/* =========================================================
   08. REMOVE WISHLIST
   ========================================================= */

.shop-container>.product .product-gallery .wishlist-button,

.shop-container>.product .product-gallery .yith-wcwl-add-to-wishlist,

.shop-container>.product .product-gallery .wishlist-icon,

.shop-container>.product .product-images .wishlist-button,

.shop-container>.product .product-images .yith-wcwl-add-to-wishlist,

.shop-container>.product .product-images [class*="wishlist"] {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;

    pointer-events: none !important;
}


/* =========================================================
   09. GALLERY CONTROLS
   ========================================================= */

.shop-container>.product .product-images .zoom-button,

.shop-container>.product .product-gallery .flickity-prev-next-button {
    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 1px solid var(--dt-sp-border) !important;
    border-radius: 50% !important;

    color: #4e545b !important;

    background: rgba(255, 255, 255, 0.96) !important;

    box-shadow:
        0 8px 22px rgba(20, 26, 34, 0.07) !important;
}


/* =========================================================
   10. PRODUCT SUMMARY
   ========================================================= */

.shop-container>.product .product-summary {
    position: relative;

    min-width: 0;

    color: var(--dt-sp-text);

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* =========================================================
   11. PRODUCT TITLE
   Uppercase / Maximum 2 lines
   ========================================================= */

.shop-container>.product .product-title {
    display: -webkit-box;

    width: 100%;

    margin: 0 0 13px !important;

    overflow: hidden;

    color: var(--dt-sp-heading);

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    line-clamp: 2;

    font-size:
        clamp(29px,
            2.6vw,
            39px);

    font-weight: 800;
    line-height: 1.17;

    letter-spacing: -0.035em;

    text-transform: uppercase !important;

    text-overflow: ellipsis;
}


/* =========================================================
   12. TITLE GRADIENT LINE
   ========================================================= */

.shop-container>.product .product-summary>.is-divider {
    display: block !important;

    width: min(100%, 620px) !important;
    max-width: none !important;

    height: 3px !important;

    margin: 0 0 18px !important;

    border: 0 !important;
    border-radius: 999px;

    opacity: 1 !important;

    background:
        linear-gradient(90deg,
            #e85f00 0%,
            #ff7600 25%,
            rgba(255, 118, 0, 0.55) 52%,
            rgba(255, 118, 0, 0.18) 76%,
            rgba(255, 118, 0, 0) 100%) !important;
}


/* =========================================================
   13. HIDE VARIABLE RANGE PRICE
   ========================================================= */

.shop-container>.product.product-type-variable .product-summary .price-wrapper,

.shop-container>.product.dt-variable-product .product-summary .price-wrapper,

.shop-container>.product.product-type-variable .product-summary>p.price,

.shop-container>.product.dt-variable-product .product-summary>p.price,

.shop-container>.product.product-type-variable .product-page-price,

.shop-container>.product.dt-variable-product .product-page-price {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
   14. SHORT DESCRIPTION
   ========================================================= */

.shop-container>.product .product-short-description {
    margin: 0 0 18px;

    padding: 12px 14px;

    border: 1px solid var(--dt-sp-border);
    border-radius: 11px;

    color: #555c64;

    background: #ffffff;

    font-size: 14px;
    line-height: 1.55;
}


.shop-container>.product .product-short-description::before {
    display: none !important;

    content: none !important;
}


.shop-container>.product .product-short-description p {
    margin: 0;
}


/* =========================================================
   15. HIDE NATIVE VARIATIONS
   ========================================================= */

.shop-container>.product .variations_form.dt-variants-ready>table.variations {
    position: absolute !important;

    width: 1px !important;
    height: 1px !important;

    margin: -1px !important;
    padding: 0 !important;

    overflow: hidden !important;

    clip: rect(0, 0, 0, 0) !important;

    white-space: nowrap !important;

    border: 0 !important;
}


/* =========================================================
   16. VARIATION CONFIGURATOR
   ========================================================= */

.shop-container>.product .dt-variants {
    position: relative;

    margin: 0 !important;

    overflow: hidden;

    border: 1px solid #dde1e5;
    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 8px 26px rgba(20, 26, 34, 0.035);
}


/* =========================================================
   17. VARIATION HEADER
   Compact
   ========================================================= */

.shop-container>.product .dt-variants__header {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 58px;

    margin: 0;
    padding: 10px 16px;

    border-bottom: 1px solid #e4e7ea;

    background:
        linear-gradient(180deg,
            #fffaf5 0%,
            #ffffff 100%);
}


.shop-container>.product .dt-variants__title-wrap {
    min-width: 0;

    margin: 0;
    padding: 0;
}


.shop-container>.product .dt-variants__eyebrow {
    display: block;

    margin: 0 0 3px;

    color: #e85f00;

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.15;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.shop-container>.product .dt-variants__title {
    display: block;

    margin: 0;

    color: #20252a;

    font-size: 15px;
    font-weight: 800;
    line-height: 1.2;
}


.shop-container>.product .dt-variants__tools {
    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;
}


.shop-container>.product .dt-variants__progress {
    margin: 0;

    color: #59616a;

    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;

    white-space: nowrap;
}


.shop-container>.product .dt-variants__reset {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 31px;

    margin: 0;
    padding: 0 10px;

    border: 1px solid #dde1e5;
    border-radius: 9px;

    color: #626970;

    background: #ffffff;

    cursor: pointer;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}


.shop-container>.product .dt-variants__reset:disabled {
    opacity: 0.4;

    cursor: default;
}


/* =========================================================
   18. CONFIGURATOR PROGRESS LINE
   ========================================================= */

.shop-container>.product .dt-variants__progress-line {
    position: absolute;

    right: 0;
    bottom: -1px;
    left: 0;

    height: 2px;

    overflow: hidden;
}


.shop-container>.product .dt-variants__progress-line::before {
    display: block;

    width: var(--dt-variant-progress,
            0%);

    height: 100%;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #ff7600,
            #ffac36);

    transition: width 0.3s ease;

    content: "";
}


/* =========================================================
   19. VARIATION LIST
   ========================================================= */

.shop-container>.product .dt-variant-list {
    margin: 0;

    padding: 0 16px;
}


/* =========================================================
   20. VARIATION ROW
   FIX: Reduce excessive vertical spacing
   ========================================================= */

.shop-container>.product .dt-variant-row {
    position: relative;

    display: grid;

    grid-template-columns:
        138px minmax(0, 1fr);

    align-items: center;

    gap: 14px;

    width: 100%;
    min-height: 66px;

    margin: 0 !important;
    padding: 9px 0 !important;

    border-bottom: 1px solid #e8ebee;

    line-height: 1.25;
}


.shop-container>.product .dt-variant-row:last-child {
    border-bottom: 0;
}


/* =========================================================
   21. VARIATION LABEL COLUMN
   FIX: Remove inherited Flatsome button spacing
   ========================================================= */

.shop-container>.product .dt-variant-row__toggle {
    display: flex !important;

    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    gap: 4px;

    width: 100%;
    min-width: 0;
    min-height: 0 !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    color: inherit;

    background: transparent !important;

    box-shadow: none !important;

    text-align: left;

    line-height: 1.2 !important;

    text-transform: none !important;

    cursor: default;
}


.shop-container>.product .dt-variant-row__toggle:hover,

.shop-container>.product .dt-variant-row__toggle:focus {
    background: transparent !important;

    box-shadow: none !important;
}


/* =========================================================
   22. ATTRIBUTE LABEL
   ========================================================= */

.shop-container>.product .dt-variant-row__label {
    display: block;

    margin: 0 !important;
    padding: 0 !important;

    color: #252b31;

    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.25;

    text-transform: uppercase;
}


/* =========================================================
   23. ATTRIBUTE STATUS
   ========================================================= */

.shop-container>.product .dt-variant-row__selected {
    display: block;

    max-width: 130px;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden;

    color: #92989f;

    font-size: 9.5px;
    font-weight: 500;
    line-height: 1.25;

    text-overflow: ellipsis;

    white-space: nowrap;

    text-transform: uppercase;
}


.shop-container>.product .dt-variant-row__selected.is-selected {
    color: #d95a00;

    font-weight: 700;
}


.shop-container>.product .dt-variant-row__chevron {
    display: none;
}


/* =========================================================
   24. VARIATION OPTIONS
   FIX: Keep buttons vertically centered
   ========================================================= */

.shop-container>.product .dt-variant-options {
    display: flex;

    flex-wrap: wrap;
    align-items: center;
    align-content: center;

    gap: 7px;

    min-width: 0;
    min-height: 36px;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   25. OPTION BUTTON
   ========================================================= */

.shop-container>.product .dt-variant-option {
    position: relative;

    display: inline-flex !important;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-width: 0 !important;
    min-height: 36px !important;
    height: 36px !important;

    margin: 0 !important;
    padding: 0 11px !important;

    border: 1px solid #d4d9de !important;
    border-radius: 9px !important;

    color: #343a40 !important;

    background: #ffffff !important;

    box-shadow: none !important;

    cursor: pointer;

    font-size: 10.5px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    text-align: center;

    text-transform: uppercase !important;

    white-space: nowrap;

    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}


.shop-container>.product .dt-variant-option.is-selected {
    color: #d95a00 !important;

    border-color:
        rgba(255,
            118,
            0,
            0.72) !important;

    background: #fff4e9 !important;

    box-shadow:
        0 4px 12px rgba(255, 118, 0, 0.07) !important;
}


.shop-container>.product .dt-variant-option.is-selected::after {
    margin-left: 5px;

    color: var(--dt-sp-primary);

    font-size: 9px;
    font-weight: 900;

    content: "✓";
}


.shop-container>.product .dt-variant-option:disabled,

.shop-container>.product .dt-variant-option.is-disabled {
    opacity: 0.42;

    cursor: not-allowed;

    text-decoration: line-through;

    background: #f6f7f8 !important;
}


/* =========================================================
   26. SHOW MORE
   ========================================================= */

.shop-container>.product .dt-variant-more {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    height: 36px;
    min-height: 36px;

    margin: 0 !important;
    padding: 0 10px !important;

    border: 1px dashed #cbd0d5 !important;
    border-radius: 9px;

    color: #555d65;

    background: #fafbfc !important;

    box-shadow: none !important;

    cursor: pointer;

    font-size: 10px;
    font-weight: 700;
    line-height: 1;

    text-transform: none;
}


.shop-container>.product .dt-variant-option.is-extra {
    display: none !important;
}


.shop-container>.product .dt-variant-row.is-expanded .dt-variant-option.is-extra {
    display: inline-flex !important;
}


/* =========================================================
   27. SELECTED CONFIGURATION
   ========================================================= */

.shop-container>.product .dt-variants__selection {
    display: none;

    align-items: center;

    gap: 7px;

    margin: 0 16px 12px;

    padding: 8px 10px;

    border: 1px dashed #d5d9de;
    border-radius: 9px;

    color: #555d65;

    background: #fafbfc;

    font-size: 9.5px;
    line-height: 1.35;
}


.shop-container>.product .dt-variants__selection.is-visible {
    display: flex;
}


.shop-container>.product .dt-variants__selection-label {
    flex: 0 0 auto;

    color: #747b83;

    font-weight: 800;

    text-transform: uppercase;
}


.shop-container>.product .dt-variants__selection-value {
    min-width: 0;

    overflow: hidden;

    color: #343a40;

    font-weight: 700;

    text-overflow: ellipsis;

    white-space: nowrap;
}


/* =========================================================
   28. COMPLEX PRODUCT ACCORDION
   ========================================================= */

.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row {
    display: block;

    min-height: 0;

    padding: 0 !important;
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row__toggle {
    position: relative;

    min-height: 50px !important;

    padding:
        8px 30px 8px 0 !important;

    cursor: pointer;
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row__selected {
    max-width: none;
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row__chevron {
    position: absolute;

    top: 50%;
    right: 4px;

    display: block;

    width: 7px;
    height: 7px;

    border-right: 1.5px solid #7e858d;
    border-bottom: 1.5px solid #7e858d;

    transform:
        translateY(-65%) rotate(45deg);

    transition:
        transform 0.2s ease;
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row.is-open .dt-variant-row__chevron {
    transform:
        translateY(-30%) rotate(225deg);
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-options {
    display: none;

    min-height: 0;

    padding: 0 0 10px !important;
}


.shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row.is-open .dt-variant-options {
    display: flex;
}


/* =========================================================
   29. VARIATION RESULT
   ========================================================= */

.shop-container>.product .variations_form .single_variation_wrap {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.shop-container>.product .variations_form .single_variation {
    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


.shop-container>.product .variations_form .single_variation:empty {
    display: none !important;
}


/* =========================================================
   30. VARIATION PRICE
   ========================================================= */

.shop-container>.product .variations_form .woocommerce-variation-price {
    display: block;

    width: 100%;

    margin: 8px 0 !important;
    padding: 11px 15px;

    border: 1px solid var(--dt-sp-border-warm);
    border-radius: 11px;

    background:
        linear-gradient(135deg,
            #fffaf5,
            #fff5e9);
}


.shop-container>.product .variations_form .woocommerce-variation-price .price {
    display: flex;

    align-items: baseline;

    margin: 0 !important;

    color: var(--dt-sp-primary-dark) !important;

    font-size: 23px !important;
    font-weight: 800 !important;
    line-height: 1.2;
}


.shop-container>.product .variations_form .woocommerce-variation-price .amount,

.shop-container>.product .variations_form .woocommerce-variation-price .woocommerce-Price-currencySymbol {
    color: var(--dt-sp-primary-dark) !important;

    font-weight: 800 !important;
}


/* =========================================================
   31. BUY AREA
   ========================================================= */

.shop-container>.product .variations_button {
    display: flex;

    align-items: stretch;

    gap: 10px;

    width: 100%;

    margin-top: 0 !important;
}


/* =========================================================
   32. QUANTITY
   ========================================================= */

.shop-container>.product .variations_button .ux-quantity {
    display: grid;

    grid-template-columns:
        39px 46px 39px;

    flex: 0 0 auto;

    height: 50px;

    overflow: hidden;

    border: 1px solid var(--dt-sp-border);
    border-radius: 11px;

    background: #ffffff;
}


.shop-container>.product .variations_button .ux-quantity__button {
    width: 39px !important;
    min-width: 39px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    color: #3f454c !important;

    background: #fafbfc !important;

    box-shadow: none !important;
}


.shop-container>.product .variations_button .qty {
    width: 46px !important;
    height: 48px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    border-right: 1px solid var(--dt-sp-border) !important;
    border-left: 1px solid var(--dt-sp-border) !important;

    color: #252a30;

    font-size: 14px !important;
    font-weight: 700;

    text-align: center;
}


/* =========================================================
   33. ADD TO CART
   ========================================================= */

.shop-container>.product .single_add_to_cart_button {
    display: flex !important;

    align-items: center;
    justify-content: center;

    flex: 1 1 auto;

    min-height: 50px;

    margin: 0 !important;
    padding: 0 20px !important;

    border: 0 !important;
    border-radius: 11px !important;

    color: #ffffff !important;

    background:
        linear-gradient(110deg,
            #f36500,
            #ff7900 58%,
            #ff9918) !important;

    box-shadow:
        0 9px 24px rgba(255, 118, 0, 0.20);

    font-size: 14px !important;
    font-weight: 800 !important;

    text-transform: none !important;
}


.shop-container>.product .single_add_to_cart_button:not(.disabled)::after {
    margin-left: 9px;

    font-size: 17px;

    content: "→";
}


.shop-container>.product .single_add_to_cart_button.disabled {
    color: #969ca3 !important;

    background: #e9ebed !important;

    box-shadow: none !important;
}


/* =========================================================
   34. REMOVE META / SOCIAL
   ========================================================= */

.shop-container>.product .product-summary .product_meta,

.shop-container>.product .product-summary .share-icons,

.shop-container>.product .product-summary .social-icons.share-icons,

.shop-container>.product .product-summary .share-row {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    opacity: 0 !important;
    visibility: hidden !important;
}


/* =========================================================
   35. PRODUCT FOOTER
   ========================================================= */

.shop-container>.product .product-footer {
    padding: 8px 0 56px;

    background: #fafafa;
}


.shop-container>.product .product-footer>.container {
    width: min(1260px,
            calc(100% - 36px));

    max-width: none;

    padding: 0;
}


/* =========================================================
   36. PRODUCT TABS
   ========================================================= */

.shop-container>.product .woocommerce-tabs {
    position: relative;

    overflow: hidden;

    border: 1px solid var(--dt-sp-border);
    border-radius: 18px;

    background: #ffffff;

    box-shadow: var(--dt-sp-shadow);
}


.shop-container>.product .product-tabs {
    position: relative;

    display: flex;

    align-items: center;

    gap: 8px;

    margin: 0 !important;
    padding: 14px !important;

    overflow-x: auto;
    overflow-y: hidden;

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom:
        1px solid var(--dt-sp-border) !important;
    border-left: 0 !important;

    background: #fafbfc;

    box-shadow: none !important;

    scrollbar-width: none;
}


.shop-container>.product .product-tabs::-webkit-scrollbar {
    display: none;
}


/* =========================================================
   37. REMOVE FLATSOME TAB TOP LINE
   ========================================================= */

.shop-container>.product .product-tabs::before,

.shop-container>.product .product-tabs::after,

.shop-container>.product .product-tabs li::before,

.shop-container>.product .product-tabs li::after,

.shop-container>.product .product-tabs li a::before,

.shop-container>.product .product-tabs li a::after,

.shop-container>.product .product-tabs li.active::before,

.shop-container>.product .product-tabs li.active::after,

.shop-container>.product .product-tabs li.active a::before,

.shop-container>.product .product-tabs li.active a::after {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    border: 0 !important;

    opacity: 0 !important;

    background: none !important;

    box-shadow: none !important;

    content: none !important;
}


.shop-container>.product .product-tabs li {
    flex: 0 0 auto;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
}


.shop-container>.product .product-tabs li a {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 42px;

    margin: 0 !important;
    padding: 0 16px;

    border: 1px solid transparent !important;
    border-radius: 10px;

    color: #555c64;

    background: transparent;

    box-shadow: none !important;

    font-size: 13.5px;
    font-weight: 650;
    line-height: 1;

    white-space: nowrap;

    text-transform: none;
}


.shop-container>.product .product-tabs li.active a {
    color: var(--dt-sp-primary-dark) !important;

    border-color: #ffc995 !important;

    background: #fff5eb !important;

    font-weight: 750;
}


/* =========================================================
   38. TAB CONTENT
   ========================================================= */

.shop-container>.product .tab-panels {
    padding: 30px 30px 34px;
}


.shop-container>.product .tab-panels .panel {
    color: #484f56;

    font-size: 15px;
    line-height: 1.8;
}


.shop-container>.product .tab-panels .panel p {
    color: #4f565e;

    font-size: 15px;
    line-height: 1.8;
}


/* =========================================================
   39. DESCRIPTION TABLES
   ========================================================= */

.shop-container>.product .tab-panels table {
    width: 100%;

    margin: 16px 0 24px;

    overflow: hidden;

    border: 1px solid #dfe3e7;

    border-collapse: separate;
    border-spacing: 0;

    border-radius: 13px;

    background: #ffffff;
}


.shop-container>.product .tab-panels table th,

.shop-container>.product .tab-panels table td {
    padding: 12px 14px;

    border: 0;
    border-bottom: 1px solid #e5e8eb;

    vertical-align: middle;

    font-size: 13.5px;
    line-height: 1.55;
}


.shop-container>.product .tab-panels table th {
    width: 27%;

    color: #30363c;

    background: #f8f9fa;

    font-weight: 750;
}


.shop-container>.product .tab-panels table td {
    color: #555c64;

    background: #ffffff;
}


/* =========================================================
   40. HOVER
   ========================================================= */

@media (hover: hover) {

    .shop-container>.product .dt-variant-option:not(:disabled):hover {
        color: #d95a00 !important;

        border-color:
            rgba(255,
                118,
                0,
                0.5) !important;

        background: #fffaf5 !important;
    }


    .shop-container>.product .single_add_to_cart_button:not(.disabled):hover {
        box-shadow:
            0 13px 28px rgba(255, 118, 0, 0.27);
    }

}


/* =========================================================
   41. TABLET
   ========================================================= */

@media screen and (max-width: 1023px) {

    .shop-container>.product .product-main {
        padding: 20px 0 38px;
    }


    .shop-container>.product .product-main>.content-row {
        width: calc(100% - 26px);
    }


    .shop-container>.product .product-gallery,

    .shop-container>.product .product-summary {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;

        padding: 0 !important;
    }


    .shop-container>.product .product-summary {
        margin-top: 24px;
    }


    .shop-container>.product #product-sidebar {
        display: none !important;
    }

}


/* =========================================================
   42. MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    .shop-container>.product .product-main {
        padding: 12px 0 28px;
    }


    .shop-container>.product .product-main>.content-row {
        width: calc(100% - 16px);
    }


    /* ---------------------------------------------------------
       Breadcrumb
       --------------------------------------------------------- */

    .shop-container>.product .dt-product-breadcrumb {
        margin-bottom: 11px;

        overflow: hidden;
    }


    .shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb {
        flex-wrap: nowrap;

        padding: 9px 10px;

        overflow-x: auto;
        overflow-y: hidden;

        border-radius: 10px;

        font-size: 12px;

        white-space: nowrap;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb::-webkit-scrollbar {
        display: none;
    }


    .shop-container>.product .dt-product-breadcrumb .woocommerce-breadcrumb a {
        flex: 0 0 auto;

        min-height: 28px;

        padding: 0 5px;

        font-size: 12px;

        white-space: nowrap;
    }


    /* ---------------------------------------------------------
       Gallery
       --------------------------------------------------------- */

    .shop-container>.product .product-gallery .product-images {
        border-radius: 16px;
    }


    .shop-container>.product .product-summary {
        margin-top: 17px;
    }


    /* ---------------------------------------------------------
       Product title
       --------------------------------------------------------- */

    .shop-container>.product .product-title {
        font-size: 25px;
        line-height: 1.2;
    }


    .shop-container>.product .product-summary>.is-divider {
        width: 100% !important;

        height: 2px !important;

        margin-bottom: 15px !important;
    }


    /* ---------------------------------------------------------
       Configurator header
       --------------------------------------------------------- */

    .shop-container>.product .dt-variants {
        border-radius: 15px;
    }


    .shop-container>.product .dt-variants__header {
        min-height: 54px;

        padding: 9px 12px;
    }


    .shop-container>.product .dt-variants__title {
        font-size: 13px;
    }


    .shop-container>.product .dt-variants__progress {
        font-size: 9px;
    }


    .shop-container>.product .dt-variants__reset {
        min-height: 29px;

        padding: 0 8px;

        font-size: 9px;
    }


    /* ---------------------------------------------------------
       Mobile configurator rows
       --------------------------------------------------------- */

    .shop-container>.product .dt-variant-list {
        padding: 0 12px;
    }


    .shop-container>.product .dt-variant-row,

    .shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row {
        display: block;

        min-height: 0 !important;

        padding: 0 !important;
    }


    .shop-container>.product .dt-variant-row__toggle,

    .shop-container>.product .dt-variants.is-accordion-mode .dt-variant-row__toggle {
        position: relative;

        min-height: 49px !important;

        padding:
            8px 28px 8px 0 !important;

        cursor: pointer;
    }


    .shop-container>.product .dt-variant-row__label {
        font-size: 11px;
    }


    .shop-container>.product .dt-variant-row__selected {
        font-size: 9px;
    }


    .shop-container>.product .dt-variant-row__chevron {
        position: absolute;

        top: 50%;
        right: 4px;

        display: block;

        width: 7px;
        height: 7px;

        border-right: 1.5px solid #7f868d;
        border-bottom: 1.5px solid #7f868d;

        transform:
            translateY(-65%) rotate(45deg);
    }


    .shop-container>.product .dt-variant-row.is-open .dt-variant-row__chevron {
        transform:
            translateY(-30%) rotate(225deg);
    }


    .shop-container>.product .dt-variant-options {
        display: none;

        flex-wrap: nowrap;

        gap: 7px;

        min-height: 0;

        padding: 0 0 10px !important;

        overflow-x: auto;

        scrollbar-width: none;

        -webkit-overflow-scrolling: touch;
    }


    .shop-container>.product .dt-variant-options::-webkit-scrollbar {
        display: none;
    }


    .shop-container>.product .dt-variant-row.is-open .dt-variant-options {
        display: flex;
    }


    .shop-container>.product .dt-variant-option {
        flex: 0 0 auto;

        min-height: 36px !important;
        height: 36px !important;

        padding: 0 10px !important;

        font-size: 10px !important;
    }


    .shop-container>.product .dt-variant-option.is-extra {
        display: inline-flex !important;
    }


    .shop-container>.product .dt-variant-more {
        display: none !important;
    }


    /* ---------------------------------------------------------
       Variation price
       --------------------------------------------------------- */

    .shop-container>.product .variations_form .woocommerce-variation-price {
        margin: 7px 0 !important;

        padding: 11px 13px;
    }


    .shop-container>.product .variations_form .woocommerce-variation-price .price {
        font-size: 21px !important;
    }


    /* ---------------------------------------------------------
       Buy controls
       --------------------------------------------------------- */

    .shop-container>.product .variations_button {
        gap: 7px;
    }


    .shop-container>.product .variations_button .ux-quantity {
        grid-template-columns:
            33px 38px 33px;

        height: 48px;
    }


    .shop-container>.product .variations_button .ux-quantity__button {
        width: 33px !important;
        min-width: 33px !important;
        height: 46px !important;
    }


    .shop-container>.product .variations_button .qty {
        width: 38px !important;
        height: 46px !important;
    }


    .shop-container>.product .single_add_to_cart_button {
        min-height: 48px;

        padding: 0 11px !important;

        font-size: 12px !important;
    }


    /* ---------------------------------------------------------
       Tabs
       --------------------------------------------------------- */

    .shop-container>.product .product-footer>.container {
        width: calc(100% - 16px);
    }


    .shop-container>.product .product-tabs {
        gap: 5px;

        padding: 10px !important;
    }


    .shop-container>.product .product-tabs li a {
        min-height: 40px;

        padding: 0 13px;

        font-size: 12.5px;
    }


    .shop-container>.product .tab-panels {
        padding: 21px 15px 25px;
    }

}


/* =========================================================
   43. VERY SMALL MOBILE
   ========================================================= */

@media screen and (max-width: 360px) {

    .shop-container>.product .dt-variants__progress {
        display: none;
    }


    .shop-container>.product .product-title {
        font-size: 23px;
    }

}


/* =========================================================
   44. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .shop-container>.product .dt-variant-option,

    .shop-container>.product .single_add_to_cart_button,

    .shop-container>.product .dt-variants__progress-line::before {
        transition: none !important;
    }

}