#my_fav.container {
    max-width: 1283px;
    margin: 50px auto 0;
    font-family: 'DM Sans', sans-serif;
    padding-bottom: 120px;
}

#my_fav h1 {
    font-weight: 700;
    font-size: 1.5rem;
    color: #191919;
}

.favorites-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.favorite-card {
    border: 1px solid #70707036;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    align-items: flex-start;
    padding: 10px;
    /*cursor: pointer;*/
    position: relative;
}


    .favorite-card:hover {
        transform: translateY(-10px);
    }

.verified-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: #fff;
    color: #191919;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
}

    .verified-badge span {
        color: #0f9d58;
    }

.favorite-image {
    position: relative;
    min-width: 150px;
    height: 150px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 20px;
    border-radius: 4px;
    cursor: pointer;
}

.card-content .card-size, #my_fav .card-location {
    color: #383838;
    font-size: 0.7rem;
    font-weight: normal;
}


#my_fav .card-content {
    flex: 1;
}

#my_fav .card-title {
    font-size: 1rem;
    color: #191919;
    margin-bottom: 0;
    line-height: inherit;
    margin-top: 14px;
    font-weight: bold;
    cursor: pointer;
}

#my_fav .card-location {
    display: flex;
    justify-content: space-between;
}

.card-date {
    padding-left: 9px;
    border-left: 1px solid #ccc;
    height: 11px;
    line-height: 11px;
}

#my_fav .card-price {
    color: #191919;
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 10px;
    position: relative;
}

.card-negotiable {
    color: #707070;
    font-size: 0.7rem;
    margin-bottom: 10px;
    font-weight: normal;
    font-style: italic;
    position: relative;
    top: -4px;
}


.favorite-card input[type=checkbox] {
    position: absolute;
    top: 12px;
    right: 14px;
    cursor: pointer;
    /*z-index: 2*/
}

#my_fav .delete-button {
    background-color: #4285f4;
    color: white;
    border: none;
    padding: 0px 9px;
    margin-bottom: 20px;
    display: block;
    margin-right: unset;
    border-radius: 5px;
    cursor: pointer;
    height: 34px;
}

@media (max-width: 768px) {
    #my_fav .favorite-card {
        flex-direction: column;
        text-align: center;
    }

    #my_fav .favorite-image {
        margin-right: 0;
        margin-bottom: 10px;
        width: 100%;
    }

    #my_fav .card-price {
        font-size: 20px;
    }

    #my_fav .card-content {
        width: 100%;
    }
}

@media (max-width:450px) {
    .favorites-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

.favorites-grid {
    position: relative;
}

div#LoaderSpinner {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------------------------------------------------------------------------
   Per-card remove control.

   Replaces the tick-a-checkbox-then-press-Delete flow: removing one favourite
   is a single-item action, so it sits on the item itself - the same gesture
   that added it, in the same corner, as on every other page of the site.

   Positioned exactly where the checkbox used to sit so the card layout is
   unchanged; the old .favorite-card input[type=checkbox] rule above is left in
   place and simply has nothing to match any more.
   --------------------------------------------------------------------------- */
.favorite-card .fav-remove {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #e33;               /* filled heart: this item IS a favourite */
    cursor: pointer;
    line-height: 0;
    transition: background-color .15s ease, transform .15s ease, color .15s ease;
}

.favorite-card .fav-remove:hover,
.favorite-card .fav-remove:focus-visible {
    background-color: rgba(238, 51, 51, .12);
    transform: scale(1.08);
}

.favorite-card .fav-remove:focus-visible {
    outline: 2px solid #e33;
    outline-offset: 2px;
}

.favorite-card .fav-remove[disabled] {
    opacity: .5;
    cursor: default;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .favorite-card .fav-remove { transition: none; }
    .favorite-card .fav-remove:hover { transform: none; }
}

/* Reserve the heart's corner so the title never runs underneath it.
   .card-content is flex:1, so without this the title stretches the full width and the
   absolutely-positioned heart sits on top of the last words. 34px button + 10px offset
   + a little breathing room. */
#my_fav .card-content {
    padding-right: 52px;
}

#my_fav .card-title {
    overflow-wrap: anywhere;   /* a long unbroken model name must wrap, not slide under */
}

@media (max-width: 768px) {
    /* Stacked layout: the card is centred, so centre-align the reserved space instead of
       pushing everything left. */
    #my_fav .card-content {
        padding-right: 0;
    }

    #my_fav .card-title {
        padding-inline: 44px;
    }
}

/* ---------------------------------------------------------------------------
   Price block on the favourite card.

   Mirrors the home card's stack: the struck-through original sits above the
   current price, with the lease line beneath as an alternative rather than a
   second price. Every string is server-rendered - this file only positions it.
   --------------------------------------------------------------------------- */
#my_fav .fav-price {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 6px;
    line-height: 1.25;
}

#my_fav .fav-price-was {
    font-size: 0.72rem;
    color: #8a8a8a;
    text-decoration: line-through;
}

#my_fav .fav-price-now {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-blue, #0B5FFF);
}

/* The lease line is an alternative to the price above it, not another price -
   quieter weight keeps the eye on the one the shopper is choosing. */
#my_fav .fav-price-lease {
    font-size: 0.72rem;
    color: #383838;
}

/* Top-LEFT: the remove heart owns the top-right corner. */
#my_fav .favorite-image { position: relative; }

#my_fav .fav-discount-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 7px;
    border-radius: 3px;
    background: #e33;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
}

@media (max-width: 768px) {
    #my_fav .fav-price { align-items: center; }
}

/* The price sits at the BOTTOM of the card, under the location line.
   .card-content is the flex column, so pushing the price block to the end with
   margin-top:auto keeps it pinned to the bottom edge on cards whose titles wrap
   to different heights - otherwise prices in a row sit at ragged heights. */
#my_fav .card-content {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

#my_fav .fav-price {
    margin-top: auto;
    padding-top: 6px;
}

/* ===========================================================================
   FAVOURITES NOW RENDER THE HOME FEATURED CARD (owner, 2026-09-18)
   ---------------------------------------------------------------------------
   myfavorite.js emits .card-grid-style-3 > .card-grid-inner, the same structure
   as the home featured row and the shop grid, so the look comes from the global
   style.css plus shop.css (pulled in by Index.cshtml) instead of being restated
   here. Only the differences this page actually has belong below.

   Everything above this banner that targets .favorite-card, .favorite-image,
   .card-content, .card-title, .card-size, .card-date, .verified-badge or
   .fav-price no longer matches anything - that markup is gone. It is left in
   place rather than deleted in the same change that rewrote the card, so a
   regression can be judged against the old rules; it is safe to remove once the
   new card has been through a release.
   =========================================================================== */

/* Equal-height cards. The columns stretch, but .card-grid-style-3 is only as
   tall as its content, so a card with no lease line sat short and left a ragged
   bottom edge across the row. */
#dataContainer > .col { display: flex; }
#dataContainer > .col > .card-grid-style-3 { width: 100%; }
#dataContainer > .col > .card-grid-style-3,
#dataContainer > .col > .card-grid-style-3 > .card-grid-inner { height: 100%; }
#dataContainer > .col > .card-grid-style-3 > .card-grid-inner {
    display: flex;
    flex-direction: column;
}
/* Push the price block to the bottom so prices line up across the row even when
   titles wrap to different heights. */
#dataContainer .card-grid-inner .info-right { display: flex; flex-direction: column; flex: 1 1 auto; }
#dataContainer .card-grid-inner .info-right .price-info { margin-top: auto; }

/* SQUARE IMAGE (owner, 2026-09-18).
   The card image was letterboxed to whatever the source happened to be, so a row of
   favourites had images of three different heights and the titles below them never
   lined up. aspect-ratio pins the box to 1:1 and `contain` keeps the whole product
   visible inside it - `cover` would crop a phone's edges off. */
#dataContainer .image-box {
    position: relative;
    /* height MUST be reset. style.css pins .card-grid-style-3 .card-grid-inner .image-box
       to `height: 165px; line-height: 165px`, and aspect-ratio is ignored outright when the
       box already has a definite height - so declaring aspect-ratio alone did nothing at all
       and the image stayed 165px tall. This is why the first attempt looked like no change. */
    height: auto;
    line-height: normal;
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
#dataContainer .image-box .shopImg {
    display: block;
    width: 100%;
    height: 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
/* The <img> is a fallback behind the background; keep it inside the square too. */
#dataContainer .image-box .shopImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    max-height: 100%;
}

/* The favourite control is the home featured card's widget now, styled by the shared
   showcase-card.css under the .showcase-widget scope. Nothing about its appearance is set
   here on purpose - that is what let it drift from the other pages in the first place.
   Only behaviour states that the shared file has no reason to know about: */
#dataContainer .showcase-action-btn.fav-remove { cursor: pointer; }
#dataContainer .showcase-action-btn.fav-remove.is-busy { opacity: .5; pointer-events: none; }

/* The discount badge sits with the other image-box labels; without a stacking
   position it overlapped the verified tick on cards that carry both. */
#dataContainer .image-box .fav-discount-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
}
#dataContainer .image-box .isVerified + .fav-discount-badge { top: 42px; }

/* EMPTY STATE AND LOADER, CENTRED ON SCREEN (owner, 2026-09-18, again).
   ---------------------------------------------------------------------------
   First attempt centred the message inside a 60vh box, but that box begins
   BELOW the page heading, so the message landed about a third of the way down
   and still read as top-aligned. This centres it in the viewport height that is
   actually left under the header and the "My Favorites" heading, which is what
   "middle of the screen" means here.

   Targeted on "a direct child of the container that is not a card" rather than
   on .col-12.text-center: the loader and the empty state carry different class
   lists, and a future third state would otherwise miss the rule. Cards are
   always plain .col, so :not(.col) separates them cleanly.

   The container is a Bootstrap .row (display:flex, wrap), so a full-width child
   needs flex-basis:100% to take the whole row before it can centre anything
   inside itself. */
#dataContainer > *:not(.col) {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    /* 100vh minus the header and page heading, floored so it never collapses on
       a short window and never forces a scroll just to centre. */
    min-height: clamp(320px, calc(100vh - 260px), 620px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* The illustration is a background image on an empty div and site.css gives it a
   fixed 196.93x181 box; keep that intrinsic size but let it shrink on a phone. */
#dataContainer > *:not(.col) .no-data-message {
    flex: 0 0 auto;
    margin: 0 auto;
    max-width: 100%;
}

#dataContainer > *:not(.col) h4,
#dataContainer > *:not(.col) h6 { margin: 0; }

/* The spinner is centred by the same rule, so the page does not jump between
   loading and empty. */
#dataContainer > #LoaderSpinner .spinner-border { margin: 0 auto; }

/* Responsiveness.
   row-cols-* in the view sets the column COUNT (2 / 3 / 4). These rules keep the
   contents legible as that count changes - the card keeps its proportions, and
   the text steps down rather than the layout breaking. */

@media (max-width: 991.98px) {
    #dataContainer .card-grid-inner { padding: 12px; }
}

@media (max-width: 575.98px) {
    /* Two across on a phone is deliberate - it matches the shop, and one giant
       card per row makes a list of favourites unscannable. Everything shrinks to
       suit rather than the column count dropping to one. */
    #dataContainer .card-grid-inner { padding: 10px; }
    #dataContainer .card-grid-inner .itemName { font-size: 13px; line-height: 1.3; }
    #dataContainer .card-grid-inner .nameDataContainer { font-size: 11px; }

    /* The heart's size on a phone is set globally in site.css, for every page at
       once - see NO LATCHED HOVER ON TOUCH there. Nothing page-specific here, so
       favourites cannot drift from home and shop again. */
}

/* Breathing room under the page title on a phone (owner, 2026-09-18).
   The h1 sits directly on top of the first row of cards at narrow widths, because
   the grid's own gap only separates cards from each other, not from what is above
   them. Desktop already has enough room from the wider layout, so this is scoped
   to small screens rather than changing the spacing everywhere. */
@media (max-width: 767.98px) {
    #my_fav > h1 { margin-bottom: 18px; }
    #my_fav #dataContainer { margin-top: 6px; }
}

/* THE WIDGET MUST BE A CIRCLE, NOT AN OVAL (owner, 2026-09-18: "it's not round
   like home" / "when i focus it look oval").
   ---------------------------------------------------------------------------
   showcase-card.css gives .showcase-action-btn width:36px, height:36px and
   border-radius:9999px, so it IS a circle on the home page. Here it sits inside
   .tools, and style.css pins

       .card-grid-style-3 .card-grid-inner .tools { width: 30px; }

   so the button was squeezed to 30px wide while keeping its 36px height - a
   30x36 oval that a focus ring then draws attention to. On home the widget lives
   in .showcase-actions, which has no such width, which is why it looks right there.

   Releasing the .tools width is the actual fix. The explicit size and
   aspect-ratio below are belt and braces: flex-shrink:0 stops any future flex
   parent squashing it, and aspect-ratio keeps it square even if one dimension is
   overridden somewhere else. */
#dataContainer .tools.showcase-widget {
    width: auto;
    top: 10px;
    right: 10px;
}

#dataContainer .showcase-action-btn {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-sizing: border-box;
}

/* The tooltip is hover-only and sits to the left of the button; inside a 10px
   corner it would push the button off the card on a narrow card, so it is not
   reserved any space. */
#dataContainer .tools.showcase-widget .showcase-action-row { gap: 10px; }

/* Match the 28px circle and keep it un-squeezable (owner, 2026-09-18). border-box puts the
   1px border INSIDE the 28px, so a width cap on an ancestor can no longer flatten the width
   and leave the height - which is what made it read as an oval. */
#dataContainer .showcase-action-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    flex: 0 0 auto;
    border-radius: 50% !important;
    padding: 0 !important;
}