/* =============================================================
   LOVEU | 03 Featured Products V1
   Layout: Bootstrap 5 .container / 12 columns, 3×2 desktop cards.
   All selectors are scoped to this module, never Header/Banner.
   ============================================================= */
body.loveu-site .loveu-featured {
    background: var(--loveu-paper, #fff);
    padding-block: clamp(1rem, 2.5vw, 2.7rem) clamp(4rem, 7vw, 7rem);
}
body.loveu-site .loveu-featured__heading {
    margin: 0 auto clamp(1.65rem, 2.6vw, 2.6rem);
    text-align: center;
}
body.loveu-site .loveu-featured__heading h2 {
    margin: 0 0 .35rem;
    font: 600 clamp(1.65rem, 2.15vw, 2.3rem)/1.3 var(--loveu-font, Arial, sans-serif);
    color: var(--loveu-text, #222832);
}
body.loveu-site .loveu-featured__heading p {
    margin: 0 auto;
    max-width: 47rem;
    font: 400 .875rem/1.65 var(--loveu-font, Arial, sans-serif);
    color: var(--loveu-muted, #6d7480);
}
body.loveu-site .loveu-featured__grid { justify-content: flex-start; }
body.loveu-site .loveu-featured__grid > [class*="col-"] { min-width: 0; }
body.loveu-site .loveu-featured__item { margin: 0; height: 100%; }
body.loveu-site .loveu-featured__card {
    position: relative;
    isolation: isolate;
    display: block;
    overflow: hidden;
    border-radius: .65rem;
    width: 100%;
    aspect-ratio: 1.25 / 1;
    background: #e9e8e5;
    text-decoration: none;
    color: #fff;
}
body.loveu-site .loveu-featured__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform .45s ease;
}
body.loveu-site .loveu-featured__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.3rem;
    padding: 1.2rem;
    text-align: center;
    background: rgba(14, 18, 23, .72);
    color: #fff;
    opacity: 0;
    transition: opacity .28s ease;
}
body.loveu-site .loveu-featured__name {
    font: 600 clamp(.875rem, 1.15vw, 1.1rem)/1.5 var(--loveu-font, Arial, sans-serif);
    overflow-wrap: anywhere;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
body.loveu-site .loveu-featured__more {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 8.5rem;
    min-height: 2.5rem;
    padding: .5rem 1rem;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.17);
    color: #fff;
    font: 500 .8125rem/1.3 var(--loveu-font, Arial, sans-serif);
    transition: background .2s ease;
}
body.loveu-site .loveu-featured__card:hover .loveu-featured__overlay,
body.loveu-site .loveu-featured__card:focus-visible .loveu-featured__overlay { opacity: 1; }
body.loveu-site .loveu-featured__card:hover .loveu-featured__image,
body.loveu-site .loveu-featured__card:focus-visible .loveu-featured__image { transform: scale(1.045); }
body.loveu-site .loveu-featured__card:hover .loveu-featured__more,
body.loveu-site .loveu-featured__card:focus-visible .loveu-featured__more {
    background: var(--loveu-navy, #10336d);
}
body.loveu-site .loveu-featured__card:focus-visible {
    outline: 3px solid var(--loveu-navy, #10336d);
    outline-offset: 3px;
}
/* Progressive enhancement: visible even if JS is unavailable. */
@keyframes loveu-featured-enter { from { opacity: .78; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    body.loveu-site .loveu-featured__item.is-visible { animation: loveu-featured-enter .42s ease-out both; }
}
/* Touch interfaces have no dependable hover; keep product name/CTA available. */
@media (hover: none) {
    body.loveu-site .loveu-featured__overlay {
        justify-content: flex-end;
        gap: .55rem;
        background: linear-gradient(to top, rgba(8,14,26,.85), transparent 78%);
        opacity: 1;
    }
    body.loveu-site .loveu-featured__more { min-height: 2.1rem; }
}
@media (max-width: 575.98px) {
    body.loveu-site .loveu-featured { padding-top: 1rem; padding-bottom: 3.5rem; }
    body.loveu-site .loveu-featured__heading { margin-bottom: 1.55rem; }
    body.loveu-site .loveu-featured__heading h2 { font-size: 1.55rem; }
    body.loveu-site .loveu-featured__heading p { font-size: .8rem; }
    body.loveu-site .loveu-featured__card { aspect-ratio: .9 / 1; border-radius: .5rem; }
    body.loveu-site .loveu-featured__name { font-size: .8rem; }
    body.loveu-site .loveu-featured__overlay { padding: .6rem; gap: .5rem; }
    body.loveu-site .loveu-featured__more { min-width: 5.5rem; padding: .45rem .55rem; font-size: .72rem; }
}
@media (prefers-reduced-motion: reduce) {
    body.loveu-site .loveu-featured__card *,
    body.loveu-site .loveu-featured__card { transition: none; }
}