/* =========================================================
   DENTOT.VN - PRODUCT ARCHIVE
   Product Grid / Sorting / Premium Lighting / Responsive
   WooCommerce + Flatsome
   Scope: .category-page-row
   ========================================================= */


/* =========================================================
   01. ANIMATED IMAGE BORDER
   ========================================================= */

@property --dt-image-border-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}


@keyframes dt-image-border-spin {

    0% {
        --dt-image-border-angle: 0deg;
    }

    100% {
        --dt-image-border-angle: 360deg;
    }

}


/* =========================================================
   02. DESIGN TOKENS
   ========================================================= */

.category-page-row {
    --dt-shop-primary: #ff7600;
    --dt-shop-primary-dark: #e85f00;
    --dt-shop-primary-light: #ff9d28;

    --dt-shop-heading: #17191c;
    --dt-shop-text: #42484f;
    --dt-shop-muted: #7d848b;

    --dt-shop-border: #e5e8eb;
    --dt-shop-border-orange: #ffd0a5;

    --dt-shop-card: #ffffff;
    --dt-shop-bg-soft: #f7f8f9;
    --dt-shop-orange-soft: #fff6ed;

    --dt-shop-shadow:
        0 12px 34px rgba(20, 26, 32, 0.055),
        0 3px 10px rgba(20, 26, 32, 0.025);

    --dt-shop-shadow-hover:
        0 22px 50px rgba(20, 26, 32, 0.10),
        0 10px 26px rgba(255, 118, 0, 0.075);

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

    text-rendering: optimizeLegibility;
}


/* =========================================================
   03. SHOP CONTAINER
   ========================================================= */

.category-page-row .shop-container {
    width: 100%;
    max-width: 100%;

    min-width: 0;

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


/* =========================================================
   04. SORT TOOLBAR
   ========================================================= */

.category-page-row .dt-shop-sortbar {
    position: relative;

    display: flex;

    align-items: center;

    gap: 15px;

    width: 100%;

    min-height: 58px;

    margin: 0 0 22px !important;

    padding: 10px 13px;

    border: 1px solid #e2e6e9;
    border-radius: 14px;

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

    box-shadow:
        0 8px 25px rgba(20, 26, 32, 0.04);
}


/* =========================================================
   05. SORT TOOLBAR LIGHT
   ========================================================= */

.category-page-row .dt-shop-sortbar::before {
    position: absolute;

    top: -1px;
    left: 20px;

    width: 160px;
    height: 2px;

    border-radius: 999px;

    background:
        linear-gradient(90deg,
            #e95d00 0%,
            #ff7900 38%,
            rgba(255, 121, 0, 0) 100%);

    content: "";

    pointer-events: none;
}


/* =========================================================
   06. RESULT COUNT
   ========================================================= */

.category-page-row .dt-shop-sortbar__result {
    display: flex;

    align-items: center;

    flex: 0 0 auto;
}


.category-page-row .dt-shop-sortbar .woocommerce-result-count {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    min-height: 34px;

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

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

    color: #50575e;

    background: #ffffff;

    font-size: 11px;
    font-weight: 600;
    line-height: 1;

    white-space: nowrap;
}


.category-page-row .dt-shop-sortbar .woocommerce-result-count::before {
    display: block;

    flex: 0 0 auto;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: var(--dt-shop-primary);

    box-shadow:
        0 0 0 4px rgba(255, 118, 0, 0.09);

    content: "";
}


/* =========================================================
   07. SORTING AREA
   ========================================================= */

.category-page-row .dt-shop-sortbar__sorting {
    display: flex;

    align-items: center;

    flex: 1 1 auto;

    gap: 10px;

    min-width: 0;
}


.category-page-row .dt-shop-sortbar__label {
    flex: 0 0 auto;

    color: #858c93;

    font-size: 9px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    white-space: nowrap;
}


.category-page-row .dt-shop-sortbar .woocommerce-ordering {
    position: relative;

    flex: 1 1 auto;

    width: auto;

    min-width: 0;

    margin: 0 !important;
}


/* =========================================================
   08. HIDE NATIVE SELECT
   ========================================================= */

.category-page-row .dt-shop-sortbar select.orderby {
    position: absolute !important;

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

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

    overflow: hidden !important;

    clip-path: inset(50%) !important;

    opacity: 0 !important;

    pointer-events: none !important;
}


/* =========================================================
   09. SORT OPTIONS
   ========================================================= */

.category-page-row .dt-shop-sort-options {
    display: flex;

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

    flex-wrap: nowrap;

    gap: 6px;

    width: 100%;
}


.category-page-row .dt-shop-sort-option {
    position: relative;

    display: inline-flex !important;

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

    flex: 0 1 auto;

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

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

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

    color: #424950 !important;

    background: #ffffff !important;

    box-shadow: none !important;

    cursor: pointer;

    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1 !important;

    text-transform: none !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;
}


/* =========================================================
   10. ACTIVE SORT
   ========================================================= */

.category-page-row .dt-shop-sort-option.is-active {
    color: #d95700 !important;

    padding-left: 21px !important;

    border-color: #ffb979 !important;

    background:
        linear-gradient(135deg,
            #fff8f1,
            #fff0e0) !important;

    font-weight: 750 !important;
}


.category-page-row .dt-shop-sort-option.is-active::before {
    position: absolute;

    left: 8px;

    display: block !important;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--dt-shop-primary);

    box-shadow:
        0 0 0 3px rgba(255, 118, 0, 0.10);

    content: "" !important;
}


@media (hover: hover) {

    .category-page-row .dt-shop-sort-option:not(.is-active):hover {
        color: #d95700 !important;

        border-color: #ffc999 !important;

        background: #fff9f3 !important;

        transform: translateY(-1px);
    }

}


/* =========================================================
   11. PRODUCT GRID
   ========================================================= */

.category-page-row .shop-container .products.row {
    display: grid !important;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 20px !important;

    width: 100% !important;
    max-width: 100% !important;

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


.category-page-row .shop-container .products.row>.product-small {
    float: none !important;

    display: block !important;

    flex: none !important;

    width: auto !important;
    max-width: none !important;
    flex-basis: auto !important;

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


/* =========================================================
   12. PRODUCT OUTER
   ========================================================= */

.category-page-row .products .product-small>.col-inner {
    display: flex;

    width: 100%;
    height: 100%;

    margin: 0 !important;
}


/* =========================================================
   13. PRODUCT CARD
   ========================================================= */

.category-page-row .products .product-small .product-small.box,

.category-page-row .products .product-small .box {
    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;
    height: 100%;

    margin: 0 !important;

    overflow: hidden;

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

    background: #ffffff;

    box-shadow: var(--dt-shop-shadow);

    transition:
        transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   14. PRODUCT CARD TOP LIGHT
   ========================================================= */

.category-page-row .products .product-small .product-small.box::before,

.category-page-row .products .product-small .box::before {
    position: absolute;

    top: -1px;
    right: 18%;
    left: 18%;

    z-index: 20;

    height: 2px;

    border-radius: 999px;

    opacity: 0;

    background:
        linear-gradient(90deg,
            transparent 0%,
            #ff6900 35%,
            #ff9f27 65%,
            transparent 100%);

    transform: scaleX(0.35);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;

    content: "";

    pointer-events: none;
}


@media (hover: hover) {

    .category-page-row .products .product-small .product-small.box:hover,

    .category-page-row .products .product-small .box:hover {
        border-color: #ffd0a5;

        box-shadow: var(--dt-shop-shadow-hover);

        transform: translateY(-6px);
    }


    .category-page-row .products .product-small .product-small.box:hover::before,

    .category-page-row .products .product-small .box:hover::before {
        opacity: 1;

        transform: scaleX(1);
    }

}


/* =========================================================
   15. IMAGE AREA
   White background
   ========================================================= */

.category-page-row .products .product-small .box-image {
    position: relative;

    isolation: isolate;

    width:
        calc(100% - 16px) !important;

    margin:
        8px 8px 0 !important;

    overflow: hidden;

    aspect-ratio: 1 / 1;

    border: 1px solid #eef0f2;
    border-radius: 14px;

    background: #ffffff !important;

    transition:
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


/* =========================================================
   16. RUNNING LIGHT BORDER
   ========================================================= */

.category-page-row .products .product-small .box-image::before {
    position: absolute;

    inset: 0;

    z-index: 15;

    padding: 1.5px;

    border-radius: inherit;

    opacity: 0.82;

    background:
        conic-gradient(from var(--dt-image-border-angle),

            rgba(255, 118, 0, 0) 0deg,
            rgba(255, 118, 0, 0) 235deg,

            rgba(255, 166, 70, 0.05) 255deg,
            rgba(255, 166, 70, 0.28) 275deg,

            #ff7600 300deg,
            #ff9b1f 320deg,
            #ffd169 337deg,
            #fff4d8 347deg,

            rgba(255, 118, 0, 0.30) 355deg,
            rgba(255, 118, 0, 0) 360deg);

    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    -webkit-mask-composite: xor;

    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);

    mask-composite: exclude;

    filter:
        drop-shadow(0 0 3px rgba(255, 118, 0, 0.18));

    animation:
        dt-image-border-spin 3.4s linear infinite;

    content: "";

    pointer-events: none;

    transition:
        opacity 0.3s ease,
        filter 0.3s ease;
}


/* =========================================================
   17. IMAGE BORDER HOVER
   ========================================================= */

@media (hover: hover) {

    .category-page-row .product-small .box:hover .box-image {
        border-color:
            rgba(255, 118, 0, 0.28);

        box-shadow:
            0 10px 26px rgba(255, 118, 0, 0.075);
    }


    .category-page-row .product-small .box:hover .box-image::before {
        opacity: 1;

        filter:
            drop-shadow(0 0 5px rgba(255, 118, 0, 0.38));
    }

}


/* =========================================================
   18. IMAGE WRAPPERS WHITE
   ========================================================= */

.category-page-row .product-small .box-image .image-fade_in_back,

.category-page-row .product-small .box-image .image-zoom,

.category-page-row .product-small .box-image .image-cover,

.category-page-row .product-small .box-image>div,

.category-page-row .product-small .box-image a {
    background: #ffffff !important;
}


/* =========================================================
   19. IMAGE WRAPPER SIZE
   ========================================================= */

.category-page-row .product-small .box-image .image-fade_in_back,

.category-page-row .product-small .box-image .image-zoom,

.category-page-row .product-small .box-image .image-cover {
    width: 100%;
    height: 100% !important;

    padding: 0 !important;
}


/* =========================================================
   20. PRODUCT IMAGE
   ========================================================= */

.category-page-row .product-small .box-image img {
    display: block;

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

    margin: 0 !important;
    padding: 9px;

    object-fit: contain;
    object-position: center;

    background: #ffffff !important;

    transform: scale(0.97);

    transition:
        transform 0.45s cubic-bezier(0.22,
            1,
            0.36,
            1);
}


@media (hover: hover) {

    .category-page-row .product-small .box:hover .box-image img {
        transform: scale(1.045);
    }

}


/* =========================================================
   21. IMAGE LIGHT SWEEP
   ========================================================= */

.category-page-row .product-small .box-image::after {
    position: absolute;

    top: -45%;
    left: -55%;

    z-index: 10;

    width: 28%;
    height: 190%;

    opacity: 0;

    background:
        linear-gradient(110deg,
            transparent 0%,
            rgba(255, 255, 255, 0.04) 25%,
            rgba(255, 255, 255, 0.72) 50%,
            rgba(255, 255, 255, 0.05) 75%,
            transparent 100%);

    transform: rotate(14deg);

    transition:
        left 0.75s ease,
        opacity 0.2s ease;

    content: "";

    pointer-events: none;
}


@media (hover: hover) {

    .category-page-row .product-small .box:hover .box-image::after {
        left: 130%;

        opacity: 1;
    }

}


/* =========================================================
   22. REMOVE IMAGE TOOLS / WISHLIST
   ========================================================= */

.category-page-row .product-small .image-tools,

.category-page-row .product-small .grid-tools,

.category-page-row .product-small .wishlist-icon,

.category-page-row .product-small .yith-wcwl-add-to-wishlist {
    display: none !important;
}


/* =========================================================
   23. REMOVE CATEGORY KICKER
   ========================================================= */

.category-page-row .dt-product-kicker {
    display: none !important;
}


/* =========================================================
   24. PRODUCT CONTENT
   ========================================================= */

.category-page-row .product-small .box-text,

.category-page-row .product-small .box-text-products {
    display: flex;

    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;

    padding:
        13px 15px 15px !important;

    text-align: left !important;
}


.category-page-row .product-small .box-text-inner {
    display: flex;

    flex: 1 1 auto;
    flex-direction: column;

    width: 100%;
}


/* =========================================================
   25. PRODUCT TITLE
   UPPERCASE / MAXIMUM 2 LINES
   ========================================================= */

.category-page-row .product-small .title-wrapper {
    display: block;

    min-height: 44px;

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


.category-page-row .product-small .product-title {
    margin: 0 !important;
    padding: 0 !important;
}


.category-page-row .product-small .product-title a {
    display: -webkit-box;

    overflow: hidden;

    color:
        var(--dt-shop-heading) !important;

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

    line-clamp: 2;

    font-size: 14px;
    font-weight: 750;
    line-height: 1.48;

    letter-spacing: -0.005em;

    text-decoration: none !important;

    text-overflow: ellipsis;

    text-transform: uppercase !important;

    transition:
        color 0.2s ease;
}


@media (hover: hover) {

    .category-page-row .product-small .product-title a:hover {
        color:
            var(--dt-shop-primary-dark) !important;
    }

}


/* =========================================================
   26. PRICE
   ========================================================= */

.category-page-row .product-small .price-wrapper {
    display: flex;

    align-items: center;

    min-height: 27px;

    margin:
        8px 0 12px !important;
}


.category-page-row .product-small .price {
    display: flex;

    align-items: baseline;
    flex-wrap: wrap;

    gap: 3px;

    margin: 0 !important;

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

    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3;
}


.category-page-row .product-small .price .amount,

.category-page-row .product-small .price .woocommerce-Price-currencySymbol {
    color:
        var(--dt-shop-primary-dark) !important;

    font-weight: 800 !important;
}


/* =========================================================
   27. PRODUCT CTA
   ========================================================= */

.category-page-row .dt-product-cta {
    display: flex;

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

    gap: 10px;

    width: 100%;

    min-height: 42px;

    margin-top: auto;

    padding:
        0 8px 0 12px;

    border:
        1px solid #ffd0a5;

    border-radius: 10px;

    color:
        #d95a00 !important;

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

    box-shadow:
        0 3px 10px rgba(255, 118, 0, 0.045);

    font-size: 12px;
    font-weight: 750;
    line-height: 1;

    text-decoration: none !important;

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


.category-page-row .dt-product-cta__icon {
    display: inline-flex;

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

    flex: 0 0 auto;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    color: #ffffff;

    background:
        linear-gradient(135deg,
            #ee6100,
            #ff8c12);

    font-size: 14px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        transform 0.25s ease;
}


@media (hover: hover) {

    .category-page-row .dt-product-cta:hover {
        color: #ffffff !important;

        border-color: transparent;

        background:
            linear-gradient(110deg,
                #ed6000 0%,
                #ff7600 56%,
                #ff981e 100%);

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

        transform:
            translateY(-1px);
    }


    .category-page-row .dt-product-cta:hover .dt-product-cta__icon {
        color:
            var(--dt-shop-primary-dark);

        background: #ffffff;

        transform:
            translateX(2px);
    }

}


/* =========================================================
   28. WOOCOMMERCE BADGES
   ========================================================= */

.category-page-row .product-small .badge-container {
    top: 14px !important;
    right: 14px !important;
    left: auto !important;

    z-index: 18;
}


.category-page-row .product-small .badge-inner {
    min-width: 0;

    padding: 6px 9px;

    border-radius: 999px;

    background:
        linear-gradient(110deg,
            #ed6000,
            #ff8d13) !important;

    box-shadow:
        0 6px 16px rgba(255, 118, 0, 0.18);

    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   29. ACCESSIBILITY
   ========================================================= */

.category-page-row .product-title a:focus-visible,

.category-page-row .dt-product-cta:focus-visible,

.category-page-row .dt-shop-sort-option:focus-visible {
    outline:
        2px solid rgba(255, 118, 0, 0.40);

    outline-offset: 2px;
}


/* =========================================================
   30. MEDIUM DESKTOP
   ========================================================= */

@media screen and (max-width: 1180px) and (min-width: 850px) {

    .category-page-row .shop-container .products.row {
        gap: 15px !important;
    }


    .category-page-row .dt-shop-sortbar {
        gap: 9px;

        padding:
            9px 10px;
    }


    .category-page-row .dt-shop-sortbar__sorting {
        gap: 7px;
    }


    .category-page-row .dt-shop-sort-options {
        gap: 4px;
    }


    .category-page-row .dt-shop-sort-option {
        min-height: 32px;

        padding:
            0 7px !important;

        font-size:
            9px !important;
    }


    .category-page-row .dt-shop-sort-option.is-active {
        padding-left:
            17px !important;
    }


    .category-page-row .dt-shop-sort-option.is-active::before {
        left: 6px;
    }

}


/* =========================================================
   31. TABLET
   ========================================================= */

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

    .category-page-row .shop-container .products.row {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        gap: 14px !important;
    }


    .category-page-row .dt-shop-sortbar {
        display: grid;

        grid-template-columns: 1fr;

        gap: 9px;

        padding: 11px;
    }


    .category-page-row .dt-shop-sortbar__sorting {
        display: block;
    }


    .category-page-row .dt-shop-sortbar__label {
        display: block;

        margin-bottom: 7px;
    }


    .category-page-row .dt-shop-sort-options {
        justify-content:
            flex-start;

        flex-wrap: wrap;
    }

}


/* =========================================================
   32. MOBILE
   2 products per row
   ========================================================= */

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

    .category-page-row .shop-container .products.row {
        grid-template-columns:
            repeat(2,
                minmax(0, 1fr));

        gap: 9px !important;
    }


    /* Product card */

    .category-page-row .products .product-small .product-small.box,

    .category-page-row .products .product-small .box {
        border-radius: 13px;

        box-shadow:
            0 7px 20px rgba(20, 26, 32, 0.045);
    }


    /* Image */

    .category-page-row .products .product-small .box-image {
        width:
            calc(100% - 10px) !important;

        margin:
            5px 5px 0 !important;

        border-radius: 10px;

        background: #ffffff !important;
    }


    .category-page-row .products .product-small .box-image::before {
        padding: 1.2px;

        animation-duration: 3.8s;

        filter:
            drop-shadow(0 0 2px rgba(255, 118, 0, 0.16));
    }


    .category-page-row .product-small .box-image img {
        padding: 4px;

        background: #ffffff !important;
    }


    /* Content */

    .category-page-row .product-small .box-text,

    .category-page-row .product-small .box-text-products {
        padding:
            10px 9px 10px !important;
    }


    /* Product title */

    .category-page-row .product-small .title-wrapper {
        min-height: 38px;
    }


    .category-page-row .product-small .product-title a {
        font-size: 11.5px;
        line-height: 1.48;

        letter-spacing: 0;

        text-transform: uppercase !important;
    }


    /* Price */

    .category-page-row .product-small .price-wrapper {
        min-height: 22px;

        margin:
            6px 0 8px !important;
    }


    .category-page-row .product-small .price {
        font-size: 12.5px !important;
    }


    /* CTA */

    .category-page-row .dt-product-cta {
        min-height: 36px;

        padding:
            0 6px 0 8px;

        border-radius: 8px;

        font-size: 9.5px;
    }


    .category-page-row .dt-product-cta__icon {
        width: 21px;
        height: 21px;

        font-size: 11px;
    }


    /* Sorting */

    .category-page-row .dt-shop-sort-options {
        display: grid;

        grid-template-columns:
            repeat(3,
                minmax(0, 1fr));

        gap: 5px;
    }


    .category-page-row .dt-shop-sort-option {
        width: 100%;

        min-height: 34px;

        padding: 4px !important;

        font-size:
            8.5px !important;

        white-space: normal;
    }


    .category-page-row .dt-shop-sort-option.is-active {
        padding: 4px !important;
    }


    .category-page-row .dt-shop-sort-option.is-active::before {
        display: none !important;
    }

}


/* =========================================================
   33. VERY SMALL MOBILE
   ========================================================= */

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

    .category-page-row .shop-container .products.row {
        gap: 6px !important;
    }


    .category-page-row .product-small .box-text,

    .category-page-row .product-small .box-text-products {
        padding:
            8px 7px 8px !important;
    }


    .category-page-row .product-small .product-title a {
        font-size: 10.5px;

        text-transform: uppercase !important;
    }


    .category-page-row .dt-product-cta {
        font-size: 8.5px;
    }

}


/* =========================================================
   34. REDUCED MOTION
   ========================================================= */

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

    .category-page-row .product-small .box,

    .category-page-row .product-small .box-image img,

    .category-page-row .product-small .box-image::after,

    .category-page-row .dt-product-cta,

    .category-page-row .dt-product-cta__icon,

    .category-page-row .dt-shop-sort-option {
        transition: none !important;
    }


    .category-page-row .products .product-small .box-image::before {
        animation: none !important;

        --dt-image-border-angle: 310deg;
    }

}