.beer-handle {
    background: #ffffff;
    border: 1px solid #000000;
    margin-left: -3px;
}
.beer-reveal {
    /*border-right: 6px solid #eee;*/
    border-width: 0 6px 0 0;
    /*border-right-width: 6px;*/
    border-style: solid;
    border-image: linear-gradient(to bottom, red, rgba(0, 0, 0, 0)) 1 100%;
}
.beer-reveal > img {
    filter: brightness(.97); 
}
.beer-reveal[data-beer-label]:after,
.beer-slider[data-beer-label]:after {
    /*width: 88px;*/
    font-size: 24px;
    font-weight: 500;
    top: 45%;
    background-color: #ff0000;
    color: #ffffff;
    -webkit-box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);
    -moz-box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);
    box-shadow: 1px 1px 5px 0px rgba(119,119,119,1);

}
.beer-reveal[data-beer-label]:after {
    left: 0;
    text-align: center;
}
.beer-slider[data-beer-label]:after {
    right: 0;
    text-align: center;
    /*padding-left: 15px;*/
    /*padding-right: 15px;*/
}
img.after-image {
    filter: brightness(.97) /*invert(0.96)*/ sepia(.10) saturate(1.1);
    /*filter: invert(1.2);*/
    /*-webkit-filter: invert(1.2);*/
    /*filter: grayscale(0.4);*/
}
.carousel-inner {
    border-radius: 4px;
    /*margin-top: -40px;*/
    -webkit-box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
    -moz-box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
    box-shadow: 0px 1px 1px 0px rgba(119,119,119,1);
}
.carousel-thumbnails {
    
    /*border-radius: 25px;*/
}
/* Carousel indicator outside */
.carousel-item {
    /*height: 450px;*/
}
.carousel-indicators li:first-child {
    margin-left: 0px;
}
.carousel-indicators li:last-child {
    margin-right: 0px;
}
.carousel-indicators li {
    width: 150px;
    height: 100%;
    background-color: transparent;
    text-indent: 0;
    display: inline-block;
}
.carousel-indicators li img {
    border-radius: 0px;
    filter: grayscale(1.0);
    /*border: 1px solid #777777;*/
    border-radius: 4px;
}
.carousel-indicators li.active img {
    filter: grayscale(0.4);
}
.carousel-indicators {
    margin: 0;
    /*bottom: -80px;*/
    position: relative;
    /*display: inline-block;*/
}




/* Vertical Loop */
.trial {
    margin: 0px auto;
    /*max-width: 480px;*/
    /*width: 100%;*/
    height: 90px;
    overflow: hidden;
}

.trial ul {
    width: 100%
}

.trial ul li {
	list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 30px
}

.trial a {
    text-decoration: none;
    color: #ffffff;
}


.rating-star-wrapper {
    align-items: center;
    color: #ffc300;
    display: inline-flex;
    vertical-align: middle;
}
.rating-star-line {
    display: flex;
}
.rating-star-fill {
    display: flex;
    overflow: hidden;
    position: absolute;
    top: 0;
}
.rating-star {
    fill: currentColor;
    flex-shrink: 0;
}


/* The live stage under the hero (section_live.html, live_stage.js), 2026-09-06.
   One headline that rewrites itself as the feed moves, a sheet drawn like the
   product's own output, and the last rows as tiles. The same beige as the
   hero, so the two read as one opening; the pink dot is the only hot colour. */
.live-stage { background: #F5F3EF; padding: 8px 0 88px; color: #1B1A17; }
.ls-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 800; letter-spacing: .16em; color: #00633e; text-decoration: none; }
.ls-kicker:hover { color: #054d32; text-decoration: none; }
.ls-dot { width: 9px; height: 9px; border-radius: 50%; background: #D6336C; animation: ls-pulse 1.6s infinite; }
@keyframes ls-pulse {
    0% { box-shadow: 0 0 0 0 rgba(214, 51, 108, .55); }
    70% { box-shadow: 0 0 0 10px rgba(214, 51, 108, 0); }
    100% { box-shadow: 0 0 0 0 rgba(214, 51, 108, 0); }
}
/* One line, never wrapped by the browser: live_stage.js shrinks the type to the column; the {br} each
   language carries becomes a break only on a narrow screen. */
.ls-head { margin: 18px 0 0; font-size: clamp(30px, 4.4vw, 56px); font-weight: 900; line-height: 1.16; letter-spacing: -.02em; white-space: nowrap; min-height: 1.16em; color: #1B1A17; transition: opacity .25s; }
.ls-head .ls-br { display: none; }
.ls-dek { margin: 10px 0 0; font-size: 17px; font-weight: 700; color: #6E6960; transition: opacity .25s; }
.ls-head.ls-swap, .ls-dek.ls-swap { opacity: 0; }
.ls-hl { background: linear-gradient(transparent 60%, #DCEBE2 60%); padding: 0 .06em; border-radius: 2px; }
.ls-hl.ls-site { color: #054d32; }
.ls-stage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 28px; margin-top: 34px; align-items: stretch; }
/* The sheet and the tiles column stretch to one height: the skeleton rows flex to fill whatever the tiles take. */
.ls-sheet { display: flex; flex-direction: column; background: #fff; border-radius: 18px; box-shadow: 0 36px 64px -36px rgba(27, 26, 23, .45), 0 0 0 1px rgba(27, 26, 23, .05); overflow: hidden; }
.ls-sheet-top { display: flex; align-items: center; gap: 14px; padding: 18px 22px; border-bottom: 1px solid #E4DFD5; flex-wrap: wrap; }
.ls-fav { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid #E4DFD5; flex: none; box-sizing: border-box; display: grid; place-items: center; font-weight: 900; font-size: 18px; color: #00633e; }
.ls-fav-txt { background: #DCEBE2; border-color: transparent; }
.ls-s-name { font-weight: 800; font-size: 18px; line-height: 1.2; color: #1B1A17; }
.ls-collect { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 22px 2px; }
.ls-collect-h { font-size: 12px; font-weight: 800; letter-spacing: .06em; color: #6E6960; margin-right: 4px; }
.ls-topic { background: #00633e; color: #fff; font-weight: 800; font-size: 14px; padding: 7px 13px; border-radius: 999px; white-space: nowrap; }
.ls-topic-2 { background: #fff; color: #00633e; box-shadow: inset 0 0 0 1.5px #BFD9CB; }
.ls-tbl { flex: 1; display: flex; flex-direction: column; padding: 6px 22px 14px; }
.ls-row { display: grid; grid-template-columns: 30px 2.1fr 1.3fr 1fr .7fr; gap: 16px; align-items: center; padding: 10px 0; min-height: 34px; flex: 1; box-sizing: border-box; border-bottom: 1px solid #E4DFD5; }
.ls-row-h { flex: none; padding: 10px 0 8px; }
.ls-n { font-size: 12px; color: #6E6960; font-variant-numeric: tabular-nums; }
.ls-bar { height: 12px; border-radius: 6px; background: #EAE6DE; }
.ls-bar-h { height: 8px; background: #DDD8CE; }
.ls-bar-g { background: #DCEBE2; }
.ls-in { animation: ls-rise .5s both; animation-delay: calc(var(--i) * 90ms); }
@keyframes ls-rise {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}
.ls-s-link { margin-left: auto; font-size: 14px; font-weight: 800; color: #00633e; text-decoration: none; white-space: nowrap; }
.ls-s-link:hover { color: #054d32; text-decoration: underline; }
.ls-wall { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ls-wall-h { font-size: 12px; font-weight: 800; letter-spacing: .14em; color: #6E6960; padding: 2px 4px 4px; text-transform: uppercase; }
.ls-tiles { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ls-tile { display: flex; align-items: center; gap: 14px; padding: 12px 14px; background: rgba(255, 255, 255, .55); border: 1px solid #E4DFD5; border-radius: 14px; text-decoration: none; color: #1B1A17; min-width: 0; width: 100%; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background .25s, border-color .25s, transform .35s, box-shadow .25s; }
.ls-tile:hover { background: #fff; color: #1B1A17; transform: translateX(3px); text-decoration: none; }
.ls-tile.ls-on { background: #fff; border-color: #00633e; box-shadow: 0 10px 24px -14px rgba(0, 99, 62, .5); }
.ls-tile .ls-fav { width: 34px; height: 34px; border-radius: 9px; font-size: 15px; }
.ls-t-text { min-width: 0; }
.ls-t-name { font-weight: 800; font-size: 15px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-t-topic { font-size: 13px; color: #6E6960; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-t-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex: none; }
.ls-t-when { font-size: 13px; color: #6E6960; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ls-t-where { font-size: 12px; color: #8E8980; white-space: nowrap; }
.ls-tile.ls-fresh { animation: ls-slide .6s both; }
.ls-tile.ls-fresh .ls-t-when { color: #D6336C; font-weight: 800; }
@keyframes ls-slide {
    from { opacity: 0; transform: translateY(-14px); }
    to { opacity: 1; transform: none; }
}
/* The way out to /live: a full-width button under the tiles, the one solid green block in the section. */
.ls-map { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 15px 18px; background: #00633e; color: #fff; border-radius: 14px; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: 0 16px 28px -18px rgba(0, 99, 62, .8); transition: transform .2s, box-shadow .2s, background .2s; }
.ls-map:hover { color: #fff; background: #054d32; transform: translateY(-1px); box-shadow: 0 20px 32px -18px rgba(0, 99, 62, .9); text-decoration: none; }
.ls-map svg { width: 22px; height: 22px; flex: none; }
.ls-map-arrow { margin-left: auto; font-size: 18px; line-height: 1; }
.ls-tile:focus-visible, .ls-kicker:focus-visible, .ls-map:focus-visible, .ls-s-link:focus-visible { outline: 2px solid #00633e; outline-offset: 3px; }
@media (max-width: 991px) {
    .ls-stage { grid-template-columns: 1fr; }
    .ls-tiles { flex-direction: row; overflow-x: auto; padding-bottom: 6px; }
    .ls-tile { flex: none; width: 250px; }
}
@media (max-width: 576px) {
    .ls-head .ls-br { display: block; }
    .ls-row { grid-template-columns: 24px 2fr 1.2fr 1fr; }
    .ls-row > :nth-child(5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .ls-dot, .ls-in, .ls-tile.ls-fresh { animation: none; }
    .ls-head, .ls-dek, .ls-tile { transition: none; }
}
/* live stage - END */