/*
 * Darealmop_RecentlyViewed — "Recently viewed" product row.
 *
 * A horizontally-scrollable row of the reused featured-products cards
 * (.dm-content-products__* markup). Every cosmetic value is a --dm-* custom
 * property with a sensible fallback, so a theme restyles it without forking the
 * template. The card interior (photo, name, sku, price) is styled by
 * Darealmop_ContentElements' widgets.css; the fallbacks below let the row stand
 * on its own if that module's CSS is not present.
 */

/* The container starts hidden and is revealed by JS once cards are injected.
   [hidden] is enforced with !important so it wins over the display below. */
.dm-recently-viewed[hidden] {
    display: none !important;
}

.dm-recently-viewed {
    display: block;
    padding: var(--dm-recently-viewed-padding, var(--dm-content-section-padding, 48px)) 0;
}

.dm-recently-viewed__header {
    max-width: var(--dm-content-max-width, 1440px);
    margin: 0 auto var(--dm-recently-viewed-header-gap, 24px);
    padding: 0 var(--dm-content-gutter, 24px);
}

.dm-recently-viewed__title {
    margin: 0;
    font-size: var(--dm-recently-viewed-title-size, 1.5rem);
    font-weight: var(--dm-recently-viewed-title-weight, 600);
    color: var(--dm-recently-viewed-title-color, inherit);
}

.dm-recently-viewed__body {
    max-width: var(--dm-content-max-width, 1440px);
    margin: 0 auto;
    padding: 0 var(--dm-content-gutter, 24px);
}

/* Horizontal scroller: cards laid out in a single scrollable row with
   scroll-snap. Each cell has a fixed-ish width so the row is browsable. */
.dm-recently-viewed__track {
    list-style: none;
    margin: 0;
    padding: 0 0 var(--dm-recently-viewed-track-pad, 8px);
    display: flex;
    gap: var(--dm-recently-viewed-gap, 16px);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.dm-recently-viewed__cell {
    flex: 0 0 var(--dm-recently-viewed-card-width, 220px);
    max-width: var(--dm-recently-viewed-card-width, 220px);
    scroll-snap-align: start;
}

@media (max-width: 768px) {
    .dm-recently-viewed__cell {
        flex-basis: var(--dm-recently-viewed-card-width-mobile, 160px);
        max-width: var(--dm-recently-viewed-card-width-mobile, 160px);
    }
}

/* Custom scrollbar (WebKit/Blink) — colours are tokenised. */
.dm-recently-viewed__track::-webkit-scrollbar {
    height: var(--dm-recently-viewed-scrollbar-size, 8px);
}
.dm-recently-viewed__track::-webkit-scrollbar-thumb {
    background: var(--dm-recently-viewed-scrollbar-thumb, rgba(0, 0, 0, 0.25));
    border-radius: 999px;
}
.dm-recently-viewed__track::-webkit-scrollbar-track {
    background: var(--dm-recently-viewed-scrollbar-track, transparent);
}

/* --- Standalone fallbacks for the reused card interior --------------------
   Only apply when Darealmop_ContentElements' widgets.css has NOT already sized
   these; they are intentionally minimal and overridden by that module's fuller
   rules when it is present (its rules are loaded and equally specific, so this
   just guarantees a usable card if the row ships without it). */
.dm-recently-viewed .dm-content-products__item-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.dm-recently-viewed .dm-content-products__photo {
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.dm-recently-viewed .dm-content-products__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.dm-recently-viewed .dm-content-products__details {
    padding: 12px 4px 0;
    display: flex;
    flex-direction: column;
}

.dm-recently-viewed .dm-content-products__name {
    margin: 0 0 4px;
    font-size: var(--dm-recently-viewed-name-size, 0.95rem);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dm-recently-viewed .dm-content-products__sku {
    display: block;
    margin-bottom: 6px;
    font-size: var(--dm-recently-viewed-sku-size, 0.75rem);
    opacity: 0.6;
}

.dm-recently-viewed .dm-content-products__price-old {
    text-decoration: line-through;
    margin-right: 8px;
    opacity: 0.65;
}