/* Home page "Live & Upcoming Auctions" widget (plan §9.3) — class-for-class port of the PS build's
   kbauction_home.css. Scoped to #kbauc-home-widget with its own token set, matching this module's
   established "never reach across into another page's CSS custom properties" rule. */
#kbauc-home-widget {
    --kbauc-home-primary: #4f46e5;
    --kbauc-home-accent: #06b6d4;
    --kbauc-home-live: #dc2626;
    --kbauc-home-success: #16a34a;
    --kbauc-home-muted-bg: #f1f5f9;
    --kbauc-home-border: #e6e9f0;
    --kbauc-home-text: #1e2338;
    --kbauc-home-text-muted: #6b7280;
    --kbauc-home-radius: 16px;
    --kbauc-home-shadow: 0 2px 10px rgba(30, 35, 56, .05);
    --kbauc-home-shadow-hover: 0 16px 32px rgba(79, 70, 229, .16);

    max-width: 1200px;
    margin: 0 auto;
    color: var(--kbauc-home-text);
}

/* Client QA feedback, 2026-09-09: heading reverted to a bare theme <h3> (same element OC core's
   own homepage widgets use — featured.twig/bestseller.twig/latest.twig/special.twig all render
   `<h3>{{ heading_title }}</h3>` with no wrapper class), so it inherits the theme's real h3 rule
   (stylesheet.css `h3 { font-size: 21px; }` + `h1..h6 { color: #444; }`) instead of this widget's
   own custom 22px/700-weight/#666 override. */
#kbauc-home-widget .kbauc-home-widget-header {
    margin-bottom: 18px;
}

/* "View All" link moved below the grid, right-aligned. */
#kbauc-home-widget .kbauc-home-widget-footer {
    text-align: right;
    margin-top: 18px;
}

/* Client QA feedback, 2026-09-09: plain theme link — theme's own default link color
   (catalog/view/theme/default/stylesheet/stylesheet.css `a { color: #23a1d1; }`) at normal body
   weight/size, not this widget's own bold/13px "badge-style" link (that custom look was itself a
   partial fix from 2026-09-08 that only recolored the old styling instead of removing it). */
#kbauc-home-widget .kbauc-home-view-all {
    color: #23a1d1;
    text-decoration: none;
    white-space: nowrap;
}

#kbauc-home-widget .kbauc-home-view-all:hover {
    text-decoration: underline;
}

#kbauc-home-widget .kbauc-home-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 18px;
}

#kbauc-home-widget .kbauc-home-card {
    display: block;
    border-radius: var(--kbauc-home-radius);
    background: #fff;
    border: 1px solid var(--kbauc-home-border);
    box-shadow: var(--kbauc-home-shadow);
    overflow: hidden;
    text-decoration: none;
    color: var(--kbauc-home-text);
    transition: transform .18s ease, box-shadow .18s ease;
}

#kbauc-home-widget a.kbauc-home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--kbauc-home-shadow-hover);
    color: var(--kbauc-home-text);
}

#kbauc-home-widget .kbauc-home-card-media {
    position: relative;
    aspect-ratio: 4 / 3;
    background: var(--kbauc-home-muted-bg);
}

#kbauc-home-widget .kbauc-home-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#kbauc-home-widget .kbauc-home-card-img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--kbauc-home-text-muted);
}

#kbauc-home-widget .kbauc-home-card-img-placeholder i {
    font-size: 30px;
}

/* Pill shape/colors and the pulsing dot are the shared .kbauc-badge* rules (widgets_shared.css,
   enqueued alongside this file) — this card's own media area only needs to position that shared
   pill in its own top-left corner. */
#kbauc-home-widget .kbauc-home-card-media .kbauc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
}

#kbauc-home-widget .kbauc-home-card-body {
    padding: 12px 14px 14px;
}

/* Client QA feedback, 2026-09-09: the whole card is a link to the product (same role as OC core's
   own `.product-thumb h4 a` product-name link), so its title text now uses the theme's actual link
   color (stylesheet.css `a { color: #23a1d1; }`) instead of inheriting this card's own custom
   dark-navy --kbauc-home-text token via `.kbauc-home-card`. */
#kbauc-home-widget .kbauc-home-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #23a1d1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#kbauc-home-widget .kbauc-home-card-countdown {
    font-size: 12px;
    color: var(--kbauc-home-text-muted);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Live-ticking DD/HH/MM/SS tile timer — built client-side by kbauc_listing_countdown.js inside
   .kbauc-home-card-countdown itself; the -live/-upcoming class colors the tiles to match the
   card's own badge pill. */
#kbauc-home-widget .kbauc-mini-countdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

#kbauc-home-widget .kbauc-mini-tile {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    padding: 4px 5px;
    border-radius: 6px;
    line-height: 1.15;
    background: var(--kbauc-badge-upcoming, #4f46e5);
    color: #fff;
}

#kbauc-home-widget .kbauc-home-countdown-live .kbauc-mini-tile {
    background: var(--kbauc-badge-live, #dc2626);
}

#kbauc-home-widget .kbauc-mini-tile-val {
    font-size: 16px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#kbauc-home-widget .kbauc-mini-tile-lbl {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .02em;
    opacity: .8;
}

#kbauc-home-widget .kbauc-mini-sep {
    color: var(--kbauc-home-text-muted);
    font-weight: 700;
    font-size: 15px;
}

#kbauc-home-widget .kbauc-home-card-price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

#kbauc-home-widget .kbauc-home-card-price-label {
    font-size: 11px;
    color: var(--kbauc-home-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Client QA feedback, 2026-09-08: theme's own product price convention (stylesheet.css
   `.product-thumb .price { color: #444; }` / `.price-new { font-weight: 600; }`), not this
   widget's own custom green "success" token. */
#kbauc-home-widget .kbauc-home-card-price-value {
    font-size: 15px;
    font-weight: 600;
    color: #444;
}

@media (max-width: 576px) {
    #kbauc-home-widget {
        padding: 4px 14px 28px;
    }

    #kbauc-home-widget .kbauc-home-widget-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}