/* =========================================================================
   SHOWCASE CARD - the featured product card on the home page.
   -------------------------------------------------------------------------
   EXTRACTED 2026-09-18 from the <style> block inside
   Views/Home/components/_FeaturedShowcase.cshtml, byte-for-byte apart from
   un-escaping Razor's '@@' back to '@'. Nothing was redesigned in the move.

   Why it moved: the owner asked the favourites page to use "exact same match"
   as the home featured card. That card is _ShowcaseCard.cshtml, and its styling
   lived inside the home partial, so no other page could have it. It is a shared
   stylesheet now, loaded by both _FeaturedShowcase and MyFavorites/Index.

   The card markup also leans on a handful of Tailwind utilities from the
   compiled mainpage-v2.css. That file is minified Tailwind WITH a preflight
   reset, so loading it on another page would restyle that whole page - the few
   utilities the card actually uses are therefore re-declared at the bottom of
   this file, scoped under .showcase-card so they cannot leak.
   ========================================================================= */

/* ---- Section padding (top/bottom 16px) ---- */
    .mainpage-v2 .nm-featured-section { padding-top: 16px; padding-bottom: 16px; }

    /* ---- Per-section spacing ---- */
    /* gap between sections: 20px desktop, 16px at <=900 */
    .mainpage-v2 .featured-section { margin-bottom: 20px; }
    .mainpage-v2 .featured-section:last-child { margin-bottom: 0; }
    /* gap between the section header (title + View All) and the carousel: 16px desktop, 12px at <=900 */
    .mainpage-v2 .featured-section .mb-7 { margin-bottom: 16px; }
    @media (max-width: 899px) {
        .mainpage-v2 .featured-section { margin-bottom: 16px; }
        .mainpage-v2 .featured-section:last-child { margin-bottom: 0; }
        .mainpage-v2 .featured-section .mb-7 { margin-bottom: 12px; }
    }
    /* smaller section title on desktop (override xl:text-heading-5) */
    @media (min-width: 1280px) {
        .mainpage-v2 .featured-section h2 { font-size: 20px !important; }
    }

    /* ---- Top title-row "View All" button (hover: blue bg, white text) ---- */
    .mainpage-v2 .featured-view-all {
        padding-top: 6px;
        padding-bottom: 6px;
        font-size: 12px;
    }
    .mainpage-v2 .featured-view-all:hover {
        background-color: var(--color-blue) !important;
        border-color: var(--color-blue) !important;
        color: #fff !important;
    }

    /* ---- Carousel: clip to the container; slides stretch to equal height ---- */
    /* Small vertical padding so the card's bottom (and top) 1px border isn't shaved off
       by this overflow:hidden clip — the bordered frame fills the slide edge to edge. */
    .mainpage-v2 .featured-swiper { overflow: hidden; padding-top: 1px; padding-bottom: 3px; }
    /* site.css styles every .swiper-slide with padding + grey bg + radius; reset that
       here so the card's own bordered frame fills the slide (no padding outside the border). */
    .mainpage-v2 .featured-swiper .swiper-slide {
        height: auto;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        cursor: default;
        text-align: start;
    }

    /* ---- Side nav buttons (like the categories carousel; kept visible on mobile) ---- */
    .mainpage-v2 .featured-carousel-viewport { position: relative; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next {
        position: absolute;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        z-index: 10;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 9999px;
        color: var(--color-dark, #1C274C);
        background: #fff;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.12);
        opacity: 0.6;   /* subdued at rest (icon + container more visible); full opacity on hover */
        cursor: pointer;
        padding: 0;
        outline: none;
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease, transform .2s ease;
    }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev svg,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next svg { width: 16px; height: 16px; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev { left: -16px; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next { right: -16px; }
    /* remove Swiper's default font-icon arrow */
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev::after,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next::after { content: none; }
    .mainpage-v2 .featured-carousel-viewport .swiper-button-prev:not(.swiper-button-disabled):hover,
    .mainpage-v2 .featured-carousel-viewport .swiper-button-next:not(.swiper-button-disabled):hover {
        background: var(--color-blue, #3C50E0);
        border-color: var(--color-blue, #3C50E0);
        color: #fff;
        opacity: 1;
    }
    /* at the start/end: hide the unusable arrow */
    .mainpage-v2 .featured-carousel-viewport .swiper-button-disabled {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
    /* RTL: swap sides and mirror the chevrons */
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-prev { left: auto; right: -16px; }
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-next { right: auto; left: -16px; }
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-prev svg,
    [dir="rtl"] .mainpage-v2 .featured-carousel-viewport .swiper-button-next svg { transform: scaleX(-1); }

    /* ---- Phone breakpoint: align the whole featured-section content to the start,
            and move the action icons to the bottom-left (still stacked vertically) ---- */
    @media (max-width: 639px) {
        .mainpage-v2 .featured-section .showcase-card__head { text-align: start; padding-top: 6px; }
        .mainpage-v2 .featured-section .showcase-actions , .showcase-widget .showcase-actions {
            inset-inline-end: auto;
            inset-inline-start: 0;
            align-items: flex-start;
        }
        /* button at the start (left edge), tooltip follows to its right */
        .mainpage-v2 .featured-section .showcase-action-row , .showcase-widget .showcase-action-row { flex-direction: row; }
        /* smaller favorite button on mobile (whole round button = 24px) */
        .mainpage-v2 .featured-section .showcase-action-btn , .showcase-widget .showcase-action-btn {
            width: 28px !important;
               height: 28px !important;
               min-width: 28px;
               box-sizing: border-box;
               aspect-ratio: 1 / 1;
               flex: 0 0 auto;   /* was 24 with a 14px icon - 5px of room inside the
                  border, which looked like the heart was welded to the ring. */
        }
        .mainpage-v2 .featured-section .showcase-action-btn svg , .showcase-widget .showcase-action-btn svg { width: 18px; height: 18px; }
        /* smaller text on mobile; price smaller than the title */
        .mainpage-v2 .featured-section .showcase-card__head h3 { font-size: 13px !important; }
        .mainpage-v2 .featured-section .showcase-card__price { font-size: 11px; }
        /* hug the content so there's no large empty gap below the image */
        .mainpage-v2 .featured-section .showcase-card__frame { min-height: auto; }
        .mainpage-v2 .featured-section .showcase-card__media { padding-bottom: 0; }
    }

    /* ---- Card frame ---- */
    .mainpage-v2 .showcase-card__frame { min-height: auto; }
    .mainpage-v2 .showcase-card__head { padding: 4px 16px 0; }

    /* ---- Discount badge (top-left on the image) ---- */
    .mainpage-v2 .showcase-card__badge {
        position: absolute;
        top: 8px;
        left: 8px;
        z-index: 3;
        background: #e02424;
        color: #fff;
        font-size: 12px;       /* desktop size */
        font-weight: 600;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 6px;
    }
    /* mobile only: smaller badge */
    @media (max-width: 767.98px) {
        .mainpage-v2 .showcase-card__badge {
            font-size: 11px;
            padding: 4px 7px;
            border-radius: 5px;
        }
    }

    .mainpage-v2 .showcase-card__head h3 {
        font-size: 16px !important;
        line-height: 1.5 !important;
        font-weight: 500 !important;
        display: flex;                  /* centre the title within the reserved 2-line space */
        align-items: center;            /* vertical centre */
        justify-content: center;        /* horizontal (start on phone, see breakpoint) */
        min-height: 3em;                /* reserve 2 lines so prices line up (line-height 1.5) */
        margin-bottom: 6px;
        overflow: hidden;
    }
    .mainpage-v2 .showcase-card__head h3,
    .mainpage-v2 .showcase-card__head h3 a {
        color: var(--color-dark) !important;
    }
    .mainpage-v2 .showcase-card__head h3 a {
        display: -webkit-box;
        -webkit-line-clamp: 2;          /* wrap up to 2 lines, then ellipsis */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;        /* trailing "…" when the title doesn't fit */
        white-space: normal !important; /* defeat any inherited nowrap so text wraps */
        overflow-wrap: anywhere;
        width: 100%;                    /* definite width so line-clamp can ellipsize */
        margin-bottom: 0;
    }
    .mainpage-v2 .showcase-card:hover .showcase-card__head h3,
    .mainpage-v2 .showcase-card:hover .showcase-card__head h3 a {
        color: var(--color-blue) !important;
    }
    .mainpage-v2 .showcase-card__price {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        font-size: 14px; font-weight: 500;
    }
    /* before/after prices stacked vertically (rendered only on discounted cards) */
    .mainpage-v2 .showcase-card__price-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        line-height: 1.2;
    }
    /* placeholder reserves the original-price line's height when there is no discount, so all cards stay aligned */
    .mainpage-v2 .showcase-card__price-stack .is-placeholder {
        visibility: hidden;
    }
    .mainpage-v2 .showcase-card__price-stack .is-placeholder::after {
        content: "\00a0";
    }
    /* Lease teaser, under the price. Quieter than the price it sits below - smaller and muted -
       because it is a second way to pay, not the headline figure.
       Height IS reserved on lease-less cards, but only within a section that has at least one lease
       (ProductCard.ReserveLeaseLine): the head sits above the image, so an unmatched line would push
       one card's image out of line with its neighbours. */
    .mainpage-v2 .showcase-card__lease.is-placeholder { visibility: hidden; }

    .mainpage-v2 .showcase-card__lease {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        font-weight: 400;
        line-height: 1.3;
        color: var(--color-dark-4, #6b7280);
    }

    .mainpage-v2 .showcase-card__media { padding: 4px 0 0; position: relative; }
    /* Image scales proportionally inside a square box (no squashing). */
    .mainpage-v2 .showcase-card__media a { display: block; width: 100%; }
    .mainpage-v2 .showcase-card__media img {
        display: block;          /* remove the inline baseline gap below the image */
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        transition: transform .3s ease;
    }
    /* Subtle zoom on hover (frame has overflow:hidden so it stays clipped). */
    .mainpage-v2 .nm-featured-section .showcase-card:hover .showcase-card__media img {
        transform: scale(1.05);
    }

    /* ---- Actions panel (always visible, bottom inline-end) ---- */
    .mainpage-v2 .showcase-actions , .showcase-widget .showcase-actions {
        position: absolute; inset-block-end: 0; inset-inline-end: 0;
        display: flex; flex-direction: column; gap: 8px; padding: 10px;
        transform: none;
    }

    /* each row: button + tooltip, tooltip sits before the button (inline-start) */
    .mainpage-v2 .showcase-action-row , .showcase-widget .showcase-action-row {
        display: flex; flex-direction: row-reverse; align-items: center; gap: 14px;
    }

    .mainpage-v2 .showcase-action-btn , .showcase-widget .showcase-action-btn {
        position: relative; z-index: 10;
        display: flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 9999px;   /* 40, not 36: the 20px icon sat 8px
               from a 1px border and read as touching it (owner, 2026-09-18 - "heart look
               connected to it"). The ICON is unchanged; only the circle grew. */
        border: 1px solid var(--color-gray-2);
        background: #fff; color: var(--color-dark);
        box-shadow: 0 1px 2px rgba(0,0,0,.06);
        -webkit-appearance: none; appearance: none; padding: 0; cursor: pointer; outline: none;
        transition: color .2s ease, background-color .2s ease;
    }
    .mainpage-v2 .showcase-action-btn:hover , .showcase-widget .showcase-action-btn:hover { background: var(--color-blue); color: #fff; }
    /* favorited state (toggled by site.js toggleFav via btn-wishlist-red) */
    .mainpage-v2 .showcase-action-btn.btn-wishlist-red , .showcase-widget .showcase-action-btn.btn-wishlist-red { color: #E83C3C; border-color: #F3C0C0; }
    .mainpage-v2 .showcase-action-btn.btn-wishlist-red:hover , .showcase-widget .showcase-action-btn.btn-wishlist-red:hover { background: #E83C3C; border-color: #E83C3C; color: #fff; }

    /* ---- Tooltip pill ---- */
    .mainpage-v2 .showcase-tooltip , .showcase-widget .showcase-tooltip {
        position: relative; align-self: center;
        background: #fff; color: var(--color-dark);
        font-size: 12px; line-height: 1.25rem; font-weight: 500; text-transform: capitalize;
        border-radius: 9999px; padding: 6px 12px;
        box-shadow: 0 1px 3px rgba(0,0,0,.12);
        opacity: 0; transform: translateX(20px);
        transition: opacity .5s ease, transform .5s ease;
        white-space: nowrap;
    }
    .mainpage-v2 .showcase-action-row:hover .showcase-tooltip , .showcase-widget .showcase-action-row:hover .showcase-tooltip { opacity: 1; transform: translateX(0); }
    .mainpage-v2 .showcase-tooltip__arrow , .showcase-widget .showcase-tooltip__arrow {
        position: absolute; top: 50%; inset-inline-end: -13px; transform: translateY(-50%);
        width: 0; height: 0;
        border: 7px solid transparent; border-inline-start-color: #fff;
    }


/* -------------------------------------------------------------------------
   Tailwind utilities the card markup uses, scoped so they affect ONLY a
   showcase card. Kept deliberately minimal: these mirror mainpage-v2.css for
   the classes present in _ShowcaseCard.cshtml, and nothing else.
   ------------------------------------------------------------------------- */
.showcase-card .relative { position: relative; }
.showcase-card .overflow-hidden { overflow: hidden; }
.showcase-card .rounded-lg { border-radius: .5rem; }
.showcase-card .border { border-width: 1px; border-style: solid; }
.showcase-card .border-gray-2 { border-color: #e5e7eb; }
.showcase-card .bg-white { background-color: #fff; }
.showcase-card .text-center { text-align: center; }
.showcase-card .flex { display: flex; }
.showcase-card .items-center { align-items: center; }
.showcase-card .justify-center { justify-content: center; }
.showcase-card .line-through { text-decoration: line-through; }
.showcase-card .text-dark { color: #191919; }
.showcase-card .text-dark-4 { color: #9e9e9e; }
.showcase-card .text-sm { font-size: .875rem; }
.showcase-card .font-normal { font-weight: 400; }
/* line-clamp-2 is absent from the compiled file, so the home card relies on the
   block above; declared here for the same two-line title everywhere. */
.showcase-card .line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* -------------------------------------------------------------------------
   REUSING JUST THE FAVOURITE WIDGET OUTSIDE THE HOME PAGE.
   Every rule above is scoped to .mainpage-v2, the class on the home page's
   root, so the heart widget would be completely unstyled anywhere else. Each
   widget selector therefore carries a second scope, .showcase-widget, which
   any page can put on the element wrapping the button. The home selectors are
   untouched, so the home card cannot change as a side effect.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   HOME: match the shop heart exactly (owner, 2026-09-18: "home page reduce
   heart size to 18 like shop").

   The variant above steps down at 639px, while shop steps down at 767.98px.
   Between those two widths home therefore showed a 20px heart in a 40px circle
   while shop showed 18px in 28px - the two pages disagreed for no reason other
   than a mismatched breakpoint. This aligns home to shop's breakpoint and its
   28/18 pair.

   min/max width and height together, not just width/height: the button sits in
   flex parents, and a flex item can be compressed past a plain width but never
   past its min/max - that is what actually guarantees a circle instead of an
   oval.
   ------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mainpage-v2 .showcase-action-btn,
    .mainpage-v2 .featured-section .showcase-action-btn,
    .showcase-widget .showcase-action-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        max-width: 28px !important;
        min-height: 28px !important;
        max-height: 28px !important;
        flex: 0 0 28px !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    .mainpage-v2 .showcase-action-btn svg,
    .mainpage-v2 .featured-section .showcase-action-btn svg,
    .showcase-widget .showcase-action-btn svg {
        width: 18px !important;
        height: 18px !important;
        display: block;
    }
    /* the row must not shrink its own button */
    .mainpage-v2 .showcase-action-row,
    .showcase-widget .showcase-action-row { flex: 0 0 auto; }
}