/* Weekly Specials block. Self-contained: all rules scoped under .ws-block. */
.ws-block { --ws-orange: var(--sj-amber, #C8852C); --ws-panel: #1E1B18; --ws-light: #E9E2D2; margin: 0 auto; }
.ws-block .ws-header { text-align: center; margin: 0 0 1.25rem; }
.ws-block .ws-header img { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; }
.ws-block .ws-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; align-items: stretch; }
@media (min-width: 768px) { .ws-block .ws-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; } }
@media (min-width: 1200px) { .ws-block .ws-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.75rem; } }
.ws-block .ws-card { display: flex; flex-direction: column; margin: 0; padding: 0; min-width: 0; background: var(--ws-panel); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); }
.ws-block .ws-tab { background: var(--ws-orange); color: #1E1B18; font-family: var(--sj-font-heading, "Zilla Slab", serif); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.08em; text-align: center; text-transform: uppercase; padding: 0.35rem 0.5rem; line-height: 1.2; }
.ws-block .ws-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #3a3530; }
.ws-block .ws-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ws-block .ws-panel { flex: 1 1 auto; padding: 0.75rem 0.75rem 0.9rem; text-align: center; color: var(--ws-light); }
.ws-block .ws-card .ws-panel .ws-title { margin: 0; font-family: var(--sj-font-heading, "Zilla Slab", serif); font-weight: 700; font-size: 1.125rem; line-height: 1.2; color: #fff !important; overflow-wrap: break-word; hyphens: manual; }
.ws-block .ws-rule { width: 2.5rem; height: 3px; margin: 0.55rem auto; border: 0; opacity: 1; background: var(--ws-orange); }
.ws-block .ws-card .ws-panel .ws-desc { margin: 0; font-size: 0.9rem; line-height: 1.4; color: var(--ws-light) !important; overflow-wrap: break-word; }


/* 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; }


.youtubeBlockResponsive16by9,.youtubeBlockResponsive4by3{height:0;position:relative}.youtubeBlockResponsive16by9 iframe,.youtubeBlockResponsive4by3 iframe{border:"none";height:100%;left:0;position:absolute;top:0;width:100%}.youtubeBlockResponsive16by9{padding-bottom:56.25%}.youtubeBlockResponsive4by3{padding-bottom:75%}.ccm-edit-mode-disabled-item.youtubeBlockResponsive16by9{padding-bottom:28.125%;padding-top:28.125%}.ccm-edit-mode-disabled-item.youtubeBlockResponsive4by3{padding-bottom:37.5%;padding-top:37.5%}