/* =========================================================
   DailyDrape — Trending Products Page
   Complete stylesheet
========================================================= */

/* Page layout */
body.page-template-page-trending .dd-trending-page {
    box-sizing: border-box;
    padding: 34px 0 56px;
    color: #292538;
}

body.page-template-page-trending .dd-trending-page *,
body.page-template-page-trending .dd-trending-page *::before,
body.page-template-page-trending .dd-trending-page *::after {
    box-sizing: border-box;
}

body.page-template-page-trending .dd-trending-page > .dd-container {
    width: min(1450px, calc(100% - 48px));
    margin-inline: auto;
}

/* Page heading */
body.page-template-page-trending .dd-trending-page-header {
    max-width: 760px;
    margin: 0 auto 30px;
    text-align: center;
}

body.page-template-page-trending .dd-trending-page-eyebrow {
    margin: 0 0 9px;
    color: #c41069;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 2px;
    line-height: 1.5;
    text-transform: uppercase;
}

body.page-template-page-trending .dd-trending-page-title {
    margin: 0;
    color: #272337;
    font-family: inherit;
    font-size: clamp(30px, 4vw, 42px);
    font-weight: 750;
    letter-spacing: -1.2px;
    line-height: 1.18;
}

body.page-template-page-trending .dd-trending-page-title span {
    color: #d41472;
}

body.page-template-page-trending .dd-trending-page-description {
    max-width: 560px;
    margin: 12px auto 0;
    color: #77717e;
    font-size: 15px;
    line-height: 1.65;
}

body.page-template-page-trending .dd-trending-page-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 16px 0 0;
    padding: 6px 11px;
    color: #6f5264;
    background: #fff0f6;
    border: 1px solid #f7dfeb;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

/* Product grid */
body.page-template-page-trending .dd-trending-products-grid,
body.page-template-page-trending .dd-trending-page-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 18px;
    row-gap: 22px;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

body.page-template-page-trending .dd-trending-products-grid > *,
body.page-template-page-trending .dd-trending-page-grid > * {
    min-width: 0;
}

/* Empty state */
body.page-template-page-trending .dd-trending-page-empty {
    padding: 42px 22px;
    background: #fff;
    border: 1px solid #eee5e9;
    border-radius: 15px;
    text-align: center;
}

body.page-template-page-trending .dd-trending-page-empty h2 {
    margin: 0 0 10px;
    color: #292538;
    font-size: 23px;
    line-height: 1.3;
}

body.page-template-page-trending .dd-trending-page-empty p {
    margin: 0 0 20px;
    color: #77717e;
    font-size: 14px;
    line-height: 1.65;
}

/* =========================================================
   Pagination
   Explicitly reset default browser and theme list styles.
========================================================= */

body.page-template-page-trending nav.dd-trending-page-pagination {
    display: block !important;
    width: 100%;
    margin: 34px 0 0;
    padding: 0;
    text-align: center;
}

body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
}

body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    list-style-type: none !important;
    background: transparent !important;
    border: 0 !important;
}

body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li::before {
    display: none !important;
    content: none !important;
}

body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li::marker {
    content: "" !important;
}

/* Pagination links and page numbers */
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers,
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > span.page-numbers {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    min-width: 40px;
    min-height: 40px;
    margin: 0 !important;
    padding: 0 12px !important;
    color: #403849 !important;
    background: #fff !important;
    border: 1px solid #eee3eb !important;
    border-radius: 9px !important;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: none;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease;
}

/* Hover and keyboard focus */
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers:hover,
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers:focus-visible {
    color: #fff !important;
    background: #b80d60 !important;
    border-color: #b80d60 !important;
    outline: none;
}

body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers:focus-visible {
    outline: 2px solid #d41472;
    outline-offset: 3px;
}

/* Active page */
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > span.page-numbers.current {
    color: #fff !important;
    background: #d41472 !important;
    border-color: #d41472 !important;
    font-weight: 700;
}

/* Ellipsis */
body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > span.page-numbers.dots {
    min-width: 24px;
    padding-inline: 3px !important;
    color: #817988 !important;
    background: transparent !important;
    border-color: transparent !important;
}

/* Tablet: three columns */
@media (max-width: 1100px) {
    body.page-template-page-trending .dd-trending-products-grid,
    body.page-template-page-trending .dd-trending-page-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 16px;
        row-gap: 20px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    body.page-template-page-trending .dd-trending-page {
        padding: 24px 0 36px;
    }

    body.page-template-page-trending .dd-trending-page > .dd-container {
        width: calc(100% - 32px);
    }

    body.page-template-page-trending .dd-trending-page-header {
        margin: 0 0 22px;
        text-align: left;
    }

    body.page-template-page-trending .dd-trending-page-eyebrow {
        margin-bottom: 8px;
        font-size: 9px;
        letter-spacing: 1.7px;
    }

    body.page-template-page-trending .dd-trending-page-title {
        font-size: clamp(28px, 7.5vw, 34px);
        letter-spacing: -.8px;
        line-height: 1.2;
    }

    body.page-template-page-trending .dd-trending-page-description {
        max-width: 360px;
        margin: 9px 0 0;
        font-size: 13px;
        line-height: 1.6;
    }

    body.page-template-page-trending .dd-trending-page-count {
        margin-top: 12px;
        padding: 5px 10px;
        font-size: 11px;
    }

    /* Two-column product grid */
    body.page-template-page-trending .dd-trending-products-grid,
    body.page-template-page-trending .dd-trending-page-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 15px;
    }

    /* Compact pagination */
    body.page-template-page-trending nav.dd-trending-page-pagination {
        margin-top: 25px;
    }

    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers {
        gap: 6px !important;
    }

    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers,
    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > span.page-numbers {
        min-width: 36px;
        min-height: 36px;
        padding: 0 10px !important;
        border-radius: 8px !important;
        font-size: 12px;
    }

    body.page-template-page-trending .dd-trending-page-empty {
        padding: 30px 16px;
        border-radius: 12px;
    }

    body.page-template-page-trending .dd-trending-page-empty h2 {
        font-size: 20px;
    }
}

/* Very small mobile screens */
@media (max-width: 380px) {
    body.page-template-page-trending .dd-trending-page > .dd-container {
        width: calc(100% - 24px);
    }

    body.page-template-page-trending .dd-trending-products-grid,
    body.page-template-page-trending .dd-trending-page-grid {
        column-gap: 9px;
        row-gap: 12px;
    }

    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers {
        gap: 5px !important;
    }

    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers,
    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > span.page-numbers {
        min-width: 33px;
        min-height: 34px;
        padding: 0 8px !important;
    }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    body.page-template-page-trending nav.dd-trending-page-pagination > ul.page-numbers > li > a.page-numbers {
        transition: none;
    }
}