/**
 * TEMPORARY — "Time Limited Offers" page (ID 795736) — .best-frag-wrapper
 * product-card grid.
 *
 * The `<section class="best-frag-wrapper">` block of `<a><article
 * class="best-frag-item"><img>...<div class="text-wrapper"><h2>` cards is
 * raw HTML pasted directly into this page's content (not a shortcode or
 * template), and had zero matching CSS anywhere in the theme — confirmed:
 * .best-frag-item and .text-wrapper have no rules in any stylesheet in this
 * repo. Two OTHER temp-legacy folders (brochure/, text-only-category/)
 * style .best-frag-wrapper's own layout for their own pages, but neither
 * styles the card face — this file only adds the card face
 * (.best-frag-item / img / .text-wrapper / h2) plus its own wrapper grid,
 * scoped to this one page via loader.php so it can't affect those other
 * pages' layouts.
 */

 
 div#payday-offer-banner {
    background: url(https://valentte.com/wp-content/uploads/2026/10/Oct-2nd-Sale_1-1.webp);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: block !important;
}

.best-frag-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    max-width: 1267px;
    margin: 20px 0 0;
    padding: 0 50px;
}

.best-frag-wrapper > a {
    display: block;
    text-decoration: none;
}

.best-frag-item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.best-frag-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.best-frag-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.best-frag-item .text-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 16px 18px;
    text-align: center;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.best-frag-item .text-wrapper h2 {
    margin: 0;
    color: #ffffff;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0.3px;
    line-height: 1.3;
}

@media (max-width: 1024px) {
    .best-frag-wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        padding: 0 20px;
    }
}

@media (max-width: 480px) {
    .best-frag-wrapper {
        grid-template-columns: 1fr;
    }

    .best-frag-item .text-wrapper h2 {
        font-size: 20px;
    }
}

/**
 * Section headings — `.sec-heading-txt` (Daily Discount Offers, Reed
 * Diffusers, Candles, Gift Sets & Bundles, Skincare, Wax Melts & Room Mists,
 * You'll also love). Each is raw pasted HTML: a div.sec-heading-txt wrapping
 * one or two <h1>s (font-size set inline per heading, not touched here) and
 * a <p> subtext — no matching CSS anywhere in the theme before this fix, so
 * they rendered left-aligned, hard against the left edge, with inconsistent
 * gaps between the heading text, the subtext, and the product grid below.
 * Only text-align + spacing is handled here — inline font-size/font-weight
 * on individual headings is left as-is.
 */
.sec-heading-txt {
    max-width: 760px;
    margin: 0 auto 28px;
    padding: 0 20px;
    text-align: center;
}

.sec-heading-txt h1,
.sec-heading-txt h2,
.sec-heading-txt h3 {
    margin: 0 0 6px;
}

.sec-heading-txt p {
    margin: 14px 0 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text, #5c5c5c);
}

@media (max-width: 600px) {
    .sec-heading-txt {
        margin: 0 auto 20px;
    }
}