.sommy-pairing__page { overflow-anchor: none; max-width: 80rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
@media (min-width: 768px) { .sommy-pairing__page { padding-left: 1.5rem; padding-right: 1.5rem; } }

.sommy-pairing__title { color: #111827; }
.sommy-pairing__intro { margin-bottom: 1.5rem; }
.sommy-pairing__category-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    margin-top: -0.25rem;
    margin-bottom: 1rem;
}
.sommy-pairing__cat-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2rem;
    padding: 0 1rem;
    color: #730a16;
    background: rgba(181, 25, 31, 0.07);
    border: 1px solid rgba(181, 25, 31, 0.18);
    border-radius: 9999px;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sommy-pairing__cat-chip:hover { background: rgba(181, 25, 31, 0.13); border-color: #b5191f; color: #b5191f; }
.sommy-pairing__section-title { color: #111827; }
.sommy-pairing__section-break {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(181, 25, 31, 0.25) 20%, rgba(181, 25, 31, 0.25) 80%, transparent);
}
.sommy-pairing__advice-row { max-width: 76rem; gap: 2rem; }
.sommy-pairing__advice-column { max-width: 64rem; }

@media (min-width: 768px) {
    .sommy-pairing__advice-column {
        flex: 1 1 auto;
        max-width: 58rem;
    }
}

@media (min-width: 1280px) {
    .sommy-pairing__advice-column { max-width: 60rem; }
}

.sommy-pairing__advies {
    position: relative;
    padding: 1rem;
    background: #ffffff;
    border: 1px solid #e9dcd1;
    box-shadow: 0 4px 14px rgba(24, 3, 6, 0.06);
}
.sommy-pairing__advies::after,
.sommy-pairing__advies::before {
    content: '';
    display: none;
}
@media (min-width: 768px) {
    .sommy-pairing__advies::before {
        display: block;
        position: absolute;
        right: -14px;
        top: 3.25rem;
        width: 0;
        height: 0;
        border-top: 13px solid transparent;
        border-bottom: 13px solid transparent;
        border-left: 14px solid #e9dcd1;
    }
    .sommy-pairing__advies::after {
        display: block;
        position: absolute;
        right: -12px;
        top: 3.375rem;
        width: 0;
        height: 0;
        border-top: 12px solid transparent;
        border-bottom: 12px solid transparent;
        border-left: 13px solid #ffffff;
    }
}
.sommy-pairing__advies-eyebrow {
    color: #730a16;
    font-size: 1rem;
}
.sommy-pairing__advies-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.625rem;
}
.sommy-pairing__advies-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.75rem; height: 1.75rem;
    flex: 0 0 1.75rem;
    border-radius: 9999px;
    background: #b5191f; color: #ffffff;
}
.sommy-pairing__advies-quote {
    color: #730a16;
    opacity: 0.6;
    flex: 0 0 24px;
    margin-top: 0.125rem;
}
.sommy-pairing__quote-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}
.sommy-pairing__advies-text {
    color: #111827;
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .sommy-pairing__advies-text {
        font-size: 1.375rem;
        line-height: 1.22;
    }
}

.sommy-pairing__reason {
    margin-top: 0.875rem;
    border-top: 1px solid #e9dcd1;
    padding-top: 0.625rem;
}
.sommy-pairing__reason-title {
    color: #730a16;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.375rem 0;
}
.sommy-pairing__reason-text {
    color: #1f2937;
    font-size: 0.9375rem;
    line-height: 1.6;
    white-space: pre-line;
    max-width: 72ch;
    margin: 0.5rem 0 0;
}
.sommy-pairing__sommy { display: none; }
@media (min-width: 768px) {
    .sommy-pairing__advies { padding: 1.5rem; }
    .sommy-pairing__sommy { display: block; width: 9rem; flex: 0 0 9rem; }
    .sommy-pairing__sommy img {
        display: block;
        width: 100%;
        height: auto;
        user-select: none;
        pointer-events: none;
    }
}
.sommy-pairing__coupon {
    background: linear-gradient(135deg, #b5191f, #730a16);
    color: #ffffff;
    box-shadow: 0 8px 22px rgba(181, 25, 31, 0.18);
}
.sommy-pairing__coupon-btn {
    color: #b5191f; background: #ffffff;
    border: 0; outline: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sommy-pairing__coupon-btn:hover { background: #f3ebe4; transform: translateY(-1px); }
.sommy-pairing__coupon-display {
    background: rgba(255, 255, 255, 0.15);
    border: 2px dashed rgba(255, 255, 255, 0.6);
}
.sommy-pairing__coupon-action { flex: 0 1 auto; min-width: 0; max-width: 24rem; }
.sommy-pairing__coupon-error { margin: 0.75rem 0 0; font-size: 0.875rem; line-height: 1.5; }
.sommy-pairing__coupon-display { overflow-wrap: anywhere; }
.sommy-pairing__coupon :is(button, [tabindex]):focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.sommy-pairing__coupon-muted { color: rgba(255, 255, 255, 0.85); }
.sommy-pairing__featured {
    position: relative;
    background: #ffffff;
    border: 1px solid #e9dcd1;
    box-shadow: 0 6px 18px rgba(24, 3, 6, 0.06);
    overflow: visible;
}
.sommy-pairing__featured-layout {
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    padding: 1rem;
}
.sommy-pairing__featured-image {
    position: relative;
    flex-shrink: 0;
    display: flex; align-items: flex-start; justify-content: center;
    background: transparent;
    width: 100%;
}
.sommy-pairing__featured-image img {
    display: block;
    max-width: 100%;
    max-height: 12rem;
    width: auto;
    height: auto;
}
@media (min-width: 768px) {
    .sommy-pairing__featured-image { align-self: center; width: 9rem; }
    .sommy-pairing__featured-image img {
        width: 100%;
        max-width: none;
        max-height: 20rem;
        height: auto;
        margin-top: 0;
    }
}
@media (min-width: 1024px) {
    .sommy-pairing__featured-image { width: 12rem; }
}
.sommy-pairing__featured-content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sommy-pairing__featured-side { grid-column: 1 / -1; flex-wrap: wrap; flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sommy-pairing__featured-side .sommy-pairing__featured-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; }
.sommy-pairing__featured-actions form { flex: 1; min-width: min(100%, 10rem); width: 100%; }
.sommy-pairing__featured-actions .sommy-pairing__cart { width: 100%; }
.sommy-pairing__featured-actions .sommy-pairing__cart svg { flex-shrink: 0; }
.sommy-pairing__featured-actions .sommy-pairing__featured-view {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.625rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.5;
    border-radius: 0.5rem;
}
@media (min-width: 768px) {
    .sommy-pairing__featured-layout {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        padding: 1.5rem;
        padding-left: 4.5rem;
    }
    .sommy-pairing__featured-content { max-width: 38rem; }
    .sommy-pairing__featured-side {
        width: 10.5rem;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        border-left: 1px solid #e9dcd1;
        padding-left: 1.5rem;
    }
    .sommy-pairing__featured-side > * { width: 100%; }
    .sommy-pairing__featured-side > div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.625rem;
    }
    .sommy-pairing__featured-side .sommy-pairing__price {
        width: 100%;
        text-align: center;
        letter-spacing: -0.03em;
    }
    .sommy-pairing__featured-side .sommy-pairing__featured-stock {
        width: auto !important;
        align-self: center;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 0.375rem 0.75rem;
        border-radius: 9999px;
        background: rgba(22, 180, 123, 0.09);
        line-height: 1;
    }
    .sommy-pairing__featured-side .sommy-pairing__featured-stock svg { flex: 0 0 auto; }
    .sommy-pairing__featured-side .sommy-pairing__cart {
        width: 100%;
        min-height: 3.25rem;
        margin-top: 0.625rem;
        border-radius: 0.875rem;
        box-shadow: 0 10px 18px rgba(181, 25, 31, 0.16);
        letter-spacing: 0;
    }
    .sommy-pairing__featured-actions .sommy-pairing__featured-view { width: 100%; }
}
@media (min-width: 1024px) {
    .sommy-pairing__featured-side { width: 12rem; }
}
.sommy-pairing__ribbon {
    position: absolute;
    top: -6px; left: 0.75rem;
    width: 3rem; padding: 0.625rem 0 1.25rem;
    background: linear-gradient(180deg, #b5191f 0%, #730a16 100%);
    color: #ffffff;
    text-align: center;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
    box-shadow: 0 4px 10px rgba(181, 25, 31, 0.25);
    z-index: 1;
}
.sommy-pairing__ribbon-num { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.sommy-pairing__ribbon-label { font-size: 0.625rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.125rem; opacity: 0.9; }
.sommy-pairing__ribbon-star { display: block; margin: 0.375rem auto 0; width: 0.625rem; height: 0.625rem; }
.sommy-pairing__featured-eyebrow {
    color: #b5191f;
    font-size: 0.8125rem;
    font-weight: 700;
    margin: 0 0 0.375rem;
}
.sommy-pairing__featured-title {
    overflow-wrap: anywhere;
    color: #111827;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    margin: 0 0 0.75rem;
}
.sommy-pairing__featured-meta {
    color: #4b5563;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}
.sommy-pairing__featured-type { text-transform: capitalize; }
.sommy-pairing__featured-desc {
    color: #1f2937;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}
.sommy-pairing__featured-stock {
    color: #087a52;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}
.sommy-pairing__unavailable { margin: 0; color: #4b5563; font-size: 0.875rem; font-weight: 600; }
.sommy-pairing__more-title { color: #111827; }
.sommy-pairing__wine-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #e9dcd1;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sommy-pairing__wine-card:hover {
    border-color: rgba(181, 25, 31, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(181, 25, 31, 0.1);
}
.sommy-pairing__wine-imgwrap { overflow: hidden; border-radius: 0.75rem 0.75rem 0 0; background: #f4f4f5; aspect-ratio: auto; height: 18rem; }
.sommy-pairing__wine-imgwrap img { width: auto; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.sommy-pairing__wine-meta { color: #6b7280; }
.sommy-pairing__wine-meta-type { color: #6b7280; text-transform: capitalize; }
.sommy-pairing__pairing-desc { color: #4b5563; font-style: italic; }
.sommy-pairing__wine-description { margin-bottom: 1rem; }
.sommy-pairing__wine-description > p { margin: 0; }
.sommy-pairing__description-toggle { display: none; }

/* The slot Sommy's sentence is still being written into.
   Held at roughly the height the sentence will take, because the whole point of
   showing the wines early is that the card is readable - and a card that grows by
   sixty pixels under the reader once the copy lands is not. */
.sommy-pairing__description-writing {
    min-height: 2.75rem;
    color: #6b7280;
    font-style: italic;
}
.sommy-pairing__description-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding-top: 0.2rem;
}
.sommy-pairing__description-skeleton span {
    display: block;
    height: 0.7rem;
    border-radius: 0.35rem;
    /* Static outside the animation, so the reduced-motion rule at the foot of this
       file leaves a plain grey bar rather than a blank space. */
    background: linear-gradient(90deg, #ececf1 25%, #f6f6f8 37%, #ececf1 63%);
    background-size: 400% 100%;
    animation: sommy-description-shimmer 1.4s ease infinite;
}
.sommy-pairing__description-skeleton span:last-child { width: 62%; }
@keyframes sommy-description-shimmer {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.sommy-pairing__price {
    overflow-wrap: anywhere;
    color: #b5191f;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.sommy-pairing__cart {
    color: #ffffff; background: #b5191f;
    border: 0; outline: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sommy-pairing__featured .sommy-pairing__cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: 0.875rem;
    text-decoration: none;
}
.sommy-pairing__cart:hover:not(:disabled) { background: #730a16; transform: translateY(-1px); box-shadow: 0 12px 22px rgba(181, 25, 31, 0.22); }
.sommy-pairing__cart:disabled { background: #9ca3af; cursor: not-allowed; }
.sommy-pairing__view {
    color: #730a16; background: transparent;
    border: 1px solid rgba(181, 25, 31, 0.4);
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sommy-pairing__view:hover { background: rgba(181, 25, 31, 0.06); border-color: #b5191f; color: #b5191f; }
.sommy-pairing__more {
    color: #ffffff; background: #b5191f;
    border: 0; outline: none;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sommy-pairing__more:hover:not(:disabled) { background: #730a16; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(181, 25, 31, 0.18); }
.sommy-pairing__more:disabled { opacity: 0.6; cursor: not-allowed; }
.sommy-pairing__more-err { color: #b5191f; }
.sommy-pairing__more-empty { color: #555e6a; }

.sommy-pairing__selection { margin-bottom: 1.25rem; }
.sommy-pairing__selection-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sommy-pairing__results-title { margin: 0; color: #111827; font-size: 1.25rem; font-weight: 700; scroll-margin-top: 8rem; }
.sommy-pairing__selection-summary { margin: 0.25rem 0 0; color: #4b5563; font-size: 0.8125rem; overflow-wrap: anywhere; }
.sommy-pairing__selection-head > div { min-width: 0; }
.sommy-pairing__selection-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid #c8b4ae;
    border-radius: 0.5rem;
    color: #730a16;
    background: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}
.sommy-pairing__selection-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.sommy-pairing__selection-form { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.sommy-pairing__filter-panel { min-width: 0; padding: 0 1.5rem; border: 1px solid #e3d9d0; border-radius: 1rem; background: #fff; }
.sommy-pairing__filter-row { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); align-items: start; gap: 1.5rem; padding: 1.25rem 0; }
.sommy-pairing__filter-row + .sommy-pairing__filter-row { border-top: 1px solid #eee7e1; }
.sommy-pairing__filter-label { display: flex; align-items: center; min-height: 3rem; margin: 0; color: #1f2937; font-size: 1rem; line-height: 1.4; font-weight: 600; }
.sommy-pairing__selection-form fieldset { min-width: 0; border: 0; margin: 0; padding: 0; }
.sommy-pairing__filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; }
.sommy-pairing__filter-actions > :first-child { margin-right: auto; }
.sommy-pairing__filter-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.625rem; }
.sommy-pairing__filter-options--countries { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sommy-pairing__filter-options--countries .sommy-pairing__filter-option { min-height: 3.25rem; font-size: 0.8125rem; }
.sommy-pairing__filter-option { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 3rem; margin: 0; padding: 0.625rem 1.5rem 0.625rem 0.75rem; border: 1px solid #d8d2cc; border-radius: 0.5rem; color: #1f2937; background: #faf8f6; font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-align: center; overflow-wrap: anywhere; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.sommy-pairing__filter-option:hover { border-color: #a68f86; background: #f4ece6; }
.sommy-pairing__filter-option:has(input:checked),
.sommy-pairing__filter-option[aria-pressed="true"] { border-color: #730a16; background: #730a16; color: #fff; }
.sommy-pairing__filter-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sommy-pairing__filter-option:has(input:focus-visible) { outline: 2px solid #730a16; outline-offset: 3px; }
.sommy-pairing__filter-option:has(input:disabled),
.sommy-pairing__filter-option:disabled { opacity: 0.6; cursor: wait; }
.sommy-pairing__filter-option input:disabled { cursor: wait; }
.sommy-pairing__filter-check { visibility: hidden; position: absolute; right: 0.5rem; font-weight: 600; pointer-events: none; }
.sommy-pairing__filter-option:has(input:checked) .sommy-pairing__filter-check,
.sommy-pairing__filter-option[aria-pressed="true"] .sommy-pairing__filter-check { visibility: visible; }
.sommy-pairing__apply { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.75rem 1.25rem; border: 0; border-radius: 0.75rem; background: #b5191f; color: #fff; font-size: 0.9375rem; font-weight: 600; cursor: pointer; }
.sommy-pairing__apply svg { flex-shrink: 0; }
.sommy-pairing__apply:hover { background: #730a16; }
.sommy-pairing__apply:disabled, .sommy-pairing__text-button:disabled { opacity: 0.6; cursor: wait; }
.sommy-pairing__active-style { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; padding: 0.75rem 1rem; border-left: 3px solid #b5191f; background: #fff5f5; }
.sommy-pairing__style-title { margin: 0; font-size: 0.9375rem; font-weight: 600; color: #111827; }
.sommy-pairing__style-traits { margin: 0.25rem 0 0; font-size: 0.8125rem; line-height: 1.5; color: #4b5563; }
.sommy-pairing__text-button { display: inline-block; min-height: 2.75rem; padding: 0.375rem 0; border: 0; background: transparent; color: #730a16; font-size: 0.875rem; line-height: 1.5; font-weight: 600; text-align: left; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
.sommy-pairing__text-button:hover { color: #b5191f; }
.sommy-pairing__explore { position: relative; display: flex; align-items: center; gap: 0.125rem; margin-bottom: 1rem; }
.sommy-pairing__explore > .sommy-pairing__text-button { min-width: 0; }
.sommy-pairing__style-info { display: inline-flex; flex: 0 0 2rem; align-self: stretch; align-items: center; justify-content: center; width: 2rem; min-height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #730a16; cursor: pointer; }
.sommy-pairing__style-info:hover, .sommy-pairing__style-info[aria-expanded="true"] { background: radial-gradient(circle, #f7eeea 1rem, transparent 1rem); }
.sommy-pairing__style-tooltip { position: absolute; z-index: 2; bottom: 100%; left: 0; width: min(18rem, 100%); padding-bottom: 0.375rem; }
.sommy-pairing__style-tooltip--below { top: 100%; bottom: auto; padding-top: 0.375rem; padding-bottom: 0; }
.sommy-pairing__wine-card:has(.sommy-pairing__style-info[aria-expanded="true"]),
.sommy-pairing__featured:has(.sommy-pairing__style-info[aria-expanded="true"]) { z-index: 5; }
.sommy-pairing__style-tooltip p { margin: 0; padding: 0.625rem 0.75rem; border: 1px solid #e9dcd1; border-radius: 0.5rem; background: #fff; box-shadow: 0 3px 12px rgb(55 33 26 / 10%); color: #4b5563; font-size: 0.75rem; font-weight: 400; line-height: 1.45; overflow-wrap: anywhere; }
@media (pointer: coarse) {
    .sommy-pairing__style-info { flex-basis: 2.75rem; width: 2.75rem; }
}
.sommy-pairing__results-status { min-height: 1.5em; margin: 0.75rem 0 0; font-size: 0.875rem; color: #4b5563; }
.sommy-pairing__empty { margin-top: 1rem; padding: 1rem; background: #f4f4f5; border-radius: 0.5rem; }
.sommy-pairing__empty p { margin: 0 0 0.5rem; }
.sommy-pairing__new-boundary { margin: 0; padding: 0.625rem 1rem; border-top: 3px solid #b5191f; color: #730a16; background: #fff5f5; font-size: 0.875rem; font-weight: 600; }
.sommy-pairing__page :is(button, a, input, summary):focus-visible { outline: 2px solid #730a16; outline-offset: 3px; }
.sommy-pairing__page :is(article, h2, #sommy-more-exhausted):focus { outline: 2px solid #730a16; outline-offset: 4px; }
@media (min-width: 768px) and (max-width: 1023px) {
    .sommy-pairing__filter-row { grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; }
    .sommy-pairing__filter-options--countries { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .sommy-pairing__page { padding-top: 1rem; }
    .sommy-pairing__title { font-size: 1.5rem; line-height: 1.25; margin-bottom: 0.75rem; }
    .sommy-pairing__intro { margin-bottom: 1rem; }
    .sommy-pairing__category-row { gap: 0.375rem; }
    .sommy-pairing__cat-chip { padding: 0 0.75rem; font-size: 0.75rem; }
    .sommy-pairing__advies-text { font-size: 1rem; line-height: 1.4; }
    .sommy-pairing__advies-quote { display: none; }
    .sommy-pairing__ribbon { display: none; }
    .sommy-pairing__featured-title { font-size: 1.125rem; }
    .sommy-pairing__featured-desc { font-size: 0.875rem; }
    .sommy-pairing__wine-description { margin-bottom: 0.375rem; }
    .sommy-pairing__description-toggle { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; min-height: 2.75rem; padding: 0.5rem 0; border: 0; background: transparent; color: #730a16; font-size: 0.875rem; font-weight: 600; line-height: 1.5; text-align: left; cursor: pointer; }
    .sommy-pairing__description-toggle svg { flex-shrink: 0; }
    .sommy-pairing__description-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
    .sommy-pairing__description-text { display: none; }
    .sommy-pairing__wine-description > .sommy-pairing__description-text--expanded { display: block; margin: 0.375rem 0 0.625rem; }

    .sommy-pairing__featured { margin-bottom: 1.5rem; }
    /* Mobile: the #1 pick uses the same price and action styling as the grid cards. */
    .sommy-pairing__featured-side { gap: 0.75rem; }
    .sommy-pairing__featured-side .sommy-pairing__featured-actions { justify-content: flex-start; gap: 0.5rem; }
    .sommy-pairing__featured-actions form { flex: 1 1 0%; min-width: auto; width: auto; }
    .sommy-pairing__featured .sommy-pairing__cart {
        gap: 0.375rem;
        padding: 0.625rem 0.75rem;
        font-size: 0.875rem;
        line-height: 1.5;
        border-radius: 0.5rem;
    }
    .sommy-pairing__selection-head { align-items: flex-start; flex-direction: column; gap: 0.625rem; }
    .sommy-pairing__selection-toggle { min-height: 2.75rem; }
    .sommy-pairing__filter-panel { padding: 0 1rem; border-radius: 0.875rem; }
    .sommy-pairing__filter-row { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1.125rem 0; }
    .sommy-pairing__filter-label { min-height: 0; }
    .sommy-pairing__filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sommy-pairing__filter-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
    .sommy-pairing__filter-actions .sommy-pairing__text-button { justify-self: start; }
    .sommy-pairing__filter-actions #sommy-selection-clear { justify-self: end; text-align: right; }
    .sommy-pairing__apply { grid-column: 1 / -1; width: 100%; padding: 0.75rem; }
    .sommy-pairing__wine-imgwrap { aspect-ratio: auto; height: 12rem; }
    .sommy-pairing__wine-imgwrap img { max-height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
    .sommy-pairing__page *, .sommy-pairing__page *::before, .sommy-pairing__page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.sommy-alt {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem 3rem;
}

@media (min-width: 768px) {
    .sommy-alt {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

.sommy-alt__divider {
    border: 0;
    border-top: 1px solid #e9dcd1;
    margin: 0 0 2rem;
}

.sommy-alt__head {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 768px) {
    .sommy-alt__head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 1.5rem;
    }
}

.sommy-alt__title {
    color: #111827;
    max-width: 44rem;
}

.sommy-alt__view-all {
    color: #730a16;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.sommy-alt__view-all:hover {
    color: #b5191f;
    border-bottom-color: #b5191f;
}

.sommy-alt__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .sommy-alt__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

.sommy-alt__card {
    min-height: 100%;
    background: #ffffff;
    border: 1px solid #e9dcd1;
    box-shadow: 0 6px 18px rgba(24, 3, 6, 0.05);
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.sommy-alt__card:hover {
    border-color: rgba(181, 25, 31, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(181, 25, 31, 0.1);
}

.sommy-alt__image-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f4f4f5;
}

.sommy-alt__card:hover .sommy-alt__card-img { transform: scale(1.035); }

.sommy-alt__card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.sommy-alt__card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.125rem;
}

@media (min-width: 768px) {
    .sommy-alt__card-body { padding: 1.25rem; }
}

.sommy-alt__card-title {
    color: #111827;
    transition: color 0.15s;
}

.sommy-alt__card:hover .sommy-alt__card-title { color: #730a16; }

.sommy-alt__card-desc {
    color: #4b5563;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sommy-alt__card-cta {
    color: #730a16;
    font-weight: 600;
}

.sommy-alt__new {
    margin-top: 2rem;
    text-align: center;
}

.sommy-alt__new-cta {
    color: #ffffff;
    background: #b5191f;
    border: 0;
    text-decoration: none;
    box-shadow: 0 10px 18px rgba(181, 25, 31, 0.16);
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
}

.sommy-alt__new-cta:hover {
    background: #730a16;
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(181, 25, 31, 0.22);
}

/* Shown when a shopper's preferences hide the dish's best advice. Reads as a qualification
   of the advice above it, not as an error. */
.sommy-pairing__advies-narrowed {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(0 0 0 / 0.08);
}

.sommy-pairing__advies-narrowed-text {
    margin: 0 0 0.35rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.45;
    color: #555e6a;
}

.sommy-pairing__advies-narrowed-text q {
    font-style: italic;
}