/* Untappd Taps: tile layouts (grid, scroller and cards). The list layout uses theme styles only. */
.untappd-tile { text-align: center; }
.untappd-tile-box {
    position: relative;
    aspect-ratio: 1 / 1;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.untappd-tile-img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.untappd-tile-fallback {
    display: block;
    padding: 0.5rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
    color: #1e1b18;
}
.untappd-tile-name { margin-top: 0.5rem; line-height: 1.2; }
.untappd-tile-brewery { line-height: 1.2; }

/* Scroller: one row, native sideways scrolling; the tile width is set so a partial tile always shows at the right edge. */
.untappd-scroller { position: relative; --untappd-gap: 1rem; --untappd-visible: 2.5; }
.untappd-scroller-track {
    display: flex;
    gap: var(--untappd-gap);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
}
.untappd-scroller-item {
    flex: 0 0 calc((100% - (var(--untappd-gap) * (var(--untappd-visible) - 0.5))) / var(--untappd-visible));
    min-width: 0;
}
@media (min-width: 768px) { .untappd-scroller { --untappd-visible: 3.5; } }
@media (min-width: 992px) { .untappd-scroller { --untappd-visible: 5.5; } }
.untappd-scroller-btn {
    position: absolute;
    top: 35%;
    transform: translateY(-50%);
    z-index: 2;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 50%;
    background: #fff;
    color: #1e1b18;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}
.untappd-scroller-btn:hover, .untappd-scroller-btn:focus-visible { background: #f4ecd8; }
.untappd-scroller-prev { left: 0.25rem; }
.untappd-scroller-next { right: 0.25rem; }

/* Cards: content-height cards inside the scroller (all cards in the row stretch to the tallest). Colors: heading maroon and
 * charcoal come from the theme tokens (--sj-red, --sj-charcoal); card background, border and muted text have no theme
 * token, so they are set here. Arrows sit in their own gutters beside the track so they never cover a card. */
.untappd-scroller-cards .untappd-scroller-track { margin: 0 3rem; }
.untappd-scroller-cards .untappd-scroller-item { display: flex; }
.untappd-scroller-cards .untappd-scroller-btn { top: 50%; }
/* Cards: a fixed width in pixels at every viewport (tune --untappd-card-width here; 230px leaves no partial card at 1200px+, where the row is 976px wide and holds exactly four, so 240px), so how many are visible simply depends on the
 * room available and a partial card shows at the right edge. --untappd-autoscroll-speed is pixels per second for the slow auto scroll
 * (view.js reads it). The duplicated set used for the seamless loop stays hidden until view.js starts the loop. */
.untappd-scroller-cards { --untappd-card-width: 240px; --untappd-autoscroll-speed: 30; }
.untappd-scroller-cards .untappd-scroller-item { flex: 0 0 var(--untappd-card-width); }
.untappd-scroller-cards:not(.untappd-looping) .untappd-dup { display: none; }
.untappd-scroller-cards .untappd-scroller-prev { left: 0.2rem; }
.untappd-scroller-cards .untappd-scroller-next { right: 0.2rem; }
@media (max-width: 575.98px) {
    .untappd-scroller-cards .untappd-scroller-track { margin: 0; }
    .untappd-scroller-cards .untappd-scroller-btn { display: none; }
}
.untappd-card {
    box-sizing: border-box;
    flex: 1 1 auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0.6rem 0.75rem 0.5rem;
    background: #fffdf8;
    border: 1px solid #e3d8c4;
    border-top: 4px solid var(--sj-red, #9E2B25);
    color: var(--sj-charcoal, #2b2b2b);
}
.untappd-card-top { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.35rem; }
.untappd-card-name {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--sj-font-heading, "Zilla Slab", "Roboto Slab", serif);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.15;
    hyphens: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.untappd-card-brewery {
    margin-bottom: 0.35rem;
    font-size: 14px;
    line-height: 1.2;
    color: #6b6257;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.untappd-card-chip {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e3d8c4;
    overflow: hidden;
}
.untappd-card-chip img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: contain; }
.untappd-card-bottom {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding-top: 0.4rem;
    border-top: 1px solid #e3d8c4;
}
.untappd-card-style {
    min-width: 0;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sj-red, #9E2B25);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.untappd-card-abv { flex: 0 0 auto; font-weight: 700; }