.coffee-subscriptions {
    --coffee-accent: #f0591c;
    --coffee-brown: #593b2b;
    --coffee-brown-dark: #35251d;
    --coffee-border: #e5e1de;
    --coffee-ink: #282524;
    --coffee-muted: #6d6564;
    --coffee-paper: #ffffff;
    --coffee-soft: #f5f5f7;
    --coffee-tint: #fff3ed;
    --coffee-font-body:
        var(--e-global-typography-text-font-family, "Textos"), sans-serif;
    --coffee-font-heading:
        var(--e-global-typography-primary-font-family, "T\00edtulos"), sans-serif;
    --coffee-heading-weight: var(--e-global-typography-primary-font-weight, 500);
    --coffee-screen-height: calc(100svh - var(--coffee-header-offset, 0px));
    --coffee-space: clamp(14px, calc(var(--coffee-screen-height) * 0.035), 40px);
    --coffee-radius: 0px;
    --coffee-title-size: clamp(1.1rem, calc(var(--coffee-screen-height) * 0.045), 2.5rem);
    --coffee-option-size: clamp(0.95rem, calc(var(--coffee-screen-height) * 0.034), 2rem);
    --coffee-icon-size: clamp(28px, calc(var(--coffee-screen-height) * 0.075), 76px);
    --coffee-summary-size: 1.5rem;
    --coffee-error: #a52a18;
    --coffee-motion: 180ms;
    color: var(--coffee-ink);
    margin-block: 2rem;
    font-family: var(--coffee-font-body);
    letter-spacing: 0;
}

.coffee-subscriptions *,
.coffee-subscriptions *::before,
.coffee-subscriptions *::after {
    box-sizing: border-box;
}

.coffee-subscriptions [hidden] {
    display: none !important;
}

.coffee-subscriptions h2 {
    font-size: 1.75rem;
    line-height: 1.25;
}

.coffee-subscriptions h3 {
    font-size: 1.25rem;
    line-height: 1.35;
}

/* ---------- Asistente a pantalla completa ---------- */

.coffee-subscriptions.coffee-subscriptions--wizard {
    box-sizing: border-box;
    width: var(--coffee-viewport-width, 100%);
    max-width: none;
    margin: 0 calc(50% - var(--coffee-viewport-width, 100%) / 2);
    background: var(--coffee-paper);
}

.coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced {
    display: flex;
    flex-direction: column;
    height: var(--coffee-screen-height);
    overflow: hidden;
}

.coffee-subscriptions.coffee-subscriptions--wizard svg {
    display: block;
    width: 100%;
    height: 100%;
    stroke-width: 1.5;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__screen,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__pack {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    position: relative;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__stage {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 0 auto;
    padding: clamp(10px, calc(var(--coffee-screen-height) * 0.03), 32px) var(--coffee-space);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__header h2 {
    font-family: var(--coffee-font-heading);
    font-weight: var(--coffee-heading-weight);
    font-size: var(--coffee-title-size);
    line-height: 1.15;
    margin: 0.3em 0 0;
}

.coffee-subscriptions__eyebrow {
    display: block;
    color: var(--coffee-muted);
    font-size: clamp(0.65rem, calc(var(--coffee-screen-height) * 0.014), 0.8rem);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choices {
    flex: 1;
    min-height: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option {
    position: relative;
    display: flex;
    align-items: center;
    gap: clamp(12px, calc(var(--coffee-screen-height) * 0.03), 32px);
    margin: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0 var(--coffee-space);
    border: 0;
    border-top: 1px solid var(--coffee-border);
    border-radius: var(--coffee-radius);
    background: var(--coffee-soft);
    color: var(--coffee-ink);
    font-family: var(--coffee-font-heading);
    font-size: var(--coffee-option-size);
    font-weight: var(--coffee-heading-weight);
    text-align: left;
    text-decoration: none;
    text-transform: none;
    line-height: 1.15;
    letter-spacing: 0;
    cursor: pointer;
    transition:
        background var(--coffee-motion),
        color var(--coffee-motion);
    overflow: hidden;
    overflow-wrap: anywhere;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice:nth-child(even),
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:nth-child(even) {
    background: var(--coffee-paper);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__symbol {
    display: block;
    width: var(--coffee-icon-size);
    height: var(--coffee-icon-size);
    flex: 0 0 var(--coffee-icon-size);
    color: var(--coffee-option-color, var(--coffee-brown));
    transition: transform var(--coffee-motion);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__direction {
    width: clamp(16px, calc(var(--coffee-screen-height) * 0.028), 28px);
    height: clamp(16px, calc(var(--coffee-screen-height) * 0.028), 28px);
    flex: 0 0 auto;
    margin-left: auto;
    color: var(--coffee-accent);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice:hover,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:hover,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:has(input:checked) {
    background: var(--coffee-tint);
    color: var(--coffee-brown-dark);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice:hover .coffee-subscriptions__symbol,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:hover .coffee-subscriptions__symbol {
    transform: rotate(-8deg);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice:focus-visible,
.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:has(input:focus-visible) {
    outline: 3px solid var(--coffee-accent);
    outline-offset: -5px;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__header--pack {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    padding-block: clamp(8px, calc(var(--coffee-screen-height) * 0.018), 20px);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__header--pack .coffee-subscriptions__eyebrow {
    flex: 1;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__progress {
    color: var(--coffee-accent);
    font-weight: 600;
    font-size: clamp(0.75rem, calc(var(--coffee-screen-height) * 0.018), 1rem);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__back {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: clamp(32px, calc(var(--coffee-screen-height) * 0.055), 48px);
    height: clamp(32px, calc(var(--coffee-screen-height) * 0.055), 48px);
    padding: 0.26em;
    border: 1px solid var(--coffee-border);
    border-radius: 50%;
    background: var(--coffee-paper);
    color: var(--coffee-brown);
    cursor: pointer;
    transition:
        color var(--coffee-motion),
        background var(--coffee-motion);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__back:hover {
    background: var(--coffee-brown);
    color: var(--coffee-paper);
}

.coffee-subscriptions.coffee-subscriptions--wizard fieldset {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard legend {
    display: block;
    float: left;
    width: 100%;
    margin: 0;
    padding: 0 var(--coffee-space) clamp(8px, calc(var(--coffee-screen-height) * 0.025), 28px);
    font-family: var(--coffee-font-heading);
    font-weight: var(--coffee-heading-weight);
    font-size: var(--coffee-title-size);
    line-height: 1.15;
    color: var(--coffee-ink);
}

.coffee-subscriptions.coffee-subscriptions--wizard legend + * {
    clear: both;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options {
    --coffee-row: calc(var(--coffee-screen-height) / max(var(--coffee-option-count, 4), 4));
    --coffee-icon-size: clamp(24px, calc(var(--coffee-row) * 0.62), 76px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(var(--coffee-option-count), minmax(0, 1fr));
    gap: 0;
    flex: 1;
    min-height: 0;
    font-size: min(var(--coffee-option-size), calc(var(--coffee-row) * 0.42));
}

@media (min-width: 1024px) {
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) {
        --coffee-col: calc(100vw / max(var(--coffee-option-count, 2), 2));
        --coffee-icon-size: clamp(32px, min(calc(var(--coffee-screen-height) * 0.14), calc(var(--coffee-col) * 0.3)), 120px);
        grid-template-columns: repeat(var(--coffee-option-count), minmax(0, 1fr));
        grid-template-rows: minmax(0, 1fr);
        font-size: min(var(--coffee-option-size), calc(var(--coffee-col) * 0.11));
    }

    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) .coffee-subscriptions__choice,
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) .coffee-subscriptions__option {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: clamp(10px, calc(var(--coffee-screen-height) * 0.035), 40px);
        padding: var(--coffee-space) clamp(10px, calc(var(--coffee-col) * 0.08), 40px);
        border-top: 0;
        border-left: 1px solid var(--coffee-border);
        text-align: center;
    }

    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) .coffee-subscriptions__choice:first-child,
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) .coffee-subscriptions__option:first-child {
        border-left: 0;
    }

    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__options:not(.coffee-subscriptions__options--stacked) .coffee-subscriptions__direction {
        margin-left: 0;
    }
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option {
    font-size: inherit;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option-text {
    min-width: 0;
}

/* ---------- Paso con barra de cantidad ---------- */

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__scale {
    display: none;
}

.coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced .coffee-subscriptions__scale {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: clamp(14px, calc(var(--coffee-screen-height) * 0.035), 40px);
    min-height: 0;
    padding: 0 var(--coffee-space) clamp(12px, calc(var(--coffee-screen-height) * 0.03), 32px);
}

.coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced .coffee-subscriptions__step--scale .coffee-subscriptions__options {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced .coffee-subscriptions__scale {
        width: min(880px, 70vw);
        margin-inline: auto;
        padding-inline: 0;
    }
}

.coffee-subscriptions__scale-readout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, calc(var(--coffee-screen-height) * 0.02), 24px);
    margin: 0;
    color: var(--coffee-brown-dark);
}

.coffee-subscriptions__scale-readout .coffee-subscriptions__symbol {
    --coffee-icon-size: clamp(32px, calc(var(--coffee-screen-height) * 0.1), 92px);
}

.coffee-subscriptions__scale-value {
    font-family: var(--coffee-font-heading);
    font-weight: var(--coffee-heading-weight);
    font-size: clamp(1.75rem, calc(var(--coffee-screen-height) * 0.09), 4.5rem);
    line-height: 1;
    white-space: nowrap;
}

.coffee-subscriptions__scale-track {
    position: relative;
    padding-inline: 2px;
}

.coffee-subscriptions__scale-track input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: var(--coffee-track-size, 12px);
    margin: 0;
    padding: 0;
    border-radius: 999px;
    background: linear-gradient(
        to right,
        var(--coffee-accent) 0 var(--coffee-scale-progress, 0%),
        var(--coffee-border) var(--coffee-scale-progress, 0%) 100%
    );
    cursor: pointer;
    touch-action: pan-y;
}

.coffee-subscriptions__scale-track input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--coffee-thumb-size, 32px);
    height: var(--coffee-thumb-size, 32px);
    border: 4px solid var(--coffee-paper);
    border-radius: 50%;
    background: var(--coffee-accent);
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    cursor: grab;
}

.coffee-subscriptions__scale-track input[type="range"]::-moz-range-thumb {
    width: var(--coffee-thumb-size, 32px);
    height: var(--coffee-thumb-size, 32px);
    border: 4px solid var(--coffee-paper);
    border-radius: 50%;
    background: var(--coffee-accent);
    box-shadow: 0 2px 8px rgb(0 0 0 / 25%);
    cursor: grab;
}

.coffee-subscriptions__scale-track input[type="range"]:focus-visible {
    outline: 3px solid var(--coffee-accent);
    outline-offset: 6px;
}

.coffee-subscriptions__scale-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-inline: calc(var(--coffee-thumb-size, 32px) / 2);
}

.coffee-subscriptions__scale-ticks span {
    width: 2px;
    height: 8px;
    border-radius: 2px;
    background: var(--coffee-border);
}

.coffee-subscriptions__scale-bounds {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: var(--coffee-muted);
    font-size: clamp(0.7rem, calc(var(--coffee-screen-height) * 0.016), 0.9rem);
}

.coffee-subscriptions__scale-price {
    min-height: 1.5em;
    margin: 0;
    color: var(--coffee-brown-dark);
    font-family: var(--coffee-font-heading);
    font-size: clamp(1rem, calc(var(--coffee-screen-height) * 0.03), 1.5rem);
    font-weight: var(--coffee-heading-weight);
    text-align: center;
}

.coffee-subscriptions__scale-price[data-error="true"] {
    color: var(--coffee-error);
    font-family: var(--coffee-font-body);
    font-size: clamp(0.75rem, calc(var(--coffee-screen-height) * 0.017), 0.9rem);
    font-weight: 400;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__next {
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: min(320px, 100%);
    padding: clamp(10px, calc(var(--coffee-screen-height) * 0.018), 18px) 28px;
    border: 1px solid var(--coffee-accent);
    border-radius: var(--coffee-radius);
    background: var(--coffee-accent);
    color: var(--coffee-paper);
    font-family: var(--coffee-font-body);
    font-size: clamp(0.9rem, calc(var(--coffee-screen-height) * 0.02), 1rem);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--coffee-motion);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__next:hover {
    background: var(--coffee-brown);
    border-color: var(--coffee-brown);
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__next span {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ---------- Resumen ---------- */

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__review {
    overflow: auto;
}

.coffee-subscriptions__review-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(20px, calc(var(--coffee-screen-height) * 0.06), 64px);
    padding: 0 var(--coffee-space) var(--coffee-space);
}

.coffee-subscriptions__review-grid dl {
    margin: 0;
}

.coffee-subscriptions__review-grid dt {
    margin: 0;
    padding-top: clamp(6px, calc(var(--coffee-screen-height) * 0.016), 20px);
    color: var(--coffee-muted);
    font-size: clamp(0.7rem, calc(var(--coffee-screen-height) * 0.017), 0.875rem);
    font-weight: 400;
}

.coffee-subscriptions__review-grid dd {
    padding: 4px 0 clamp(6px, calc(var(--coffee-screen-height) * 0.016), 20px);
    border-bottom: 1px solid var(--coffee-border);
    font-family: var(--coffee-font-heading);
    font-size: clamp(0.95rem, calc(var(--coffee-screen-height) * 0.028), 1.5rem);
    overflow-wrap: anywhere;
}

.coffee-subscriptions__checkout {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(4px, calc(var(--coffee-screen-height) * 0.012), 14px);
    min-width: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__checkout .coffee-subscriptions__symbol {
    --coffee-icon-size: clamp(28px, calc(var(--coffee-screen-height) * 0.07), 72px);
}

.coffee-subscriptions__checkout h3 {
    margin: 0;
    font-family: var(--coffee-font-heading);
    font-size: clamp(1rem, calc(var(--coffee-screen-height) * 0.028), 1.5rem);
}

.coffee-subscriptions__checkout p {
    margin: 0;
}

.coffee-subscriptions__checkout .coffee-subscriptions__price {
    margin: 0;
    font-family: var(--coffee-font-heading);
    font-size: clamp(1.1rem, calc(var(--coffee-screen-height) * 0.033), 1.75rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__submit {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    margin-top: auto;
    background: var(--coffee-accent);
    border: 1px solid var(--coffee-accent);
    color: var(--coffee-paper);
    padding: clamp(10px, calc(var(--coffee-screen-height) * 0.02), 18px) 24px;
    font-family: var(--coffee-font-body);
    font-size: clamp(0.9rem, calc(var(--coffee-screen-height) * 0.02), 1rem);
    font-weight: 600;
    border-radius: var(--coffee-radius);
}

.coffee-subscriptions__submit span {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__submit:hover {
    background: var(--coffee-brown);
    border-color: var(--coffee-brown);
}

.coffee-subscriptions__retry {
    background: transparent;
    color: var(--coffee-brown);
    text-decoration: underline;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
}

.coffee-subscriptions.coffee-subscriptions--wizard [data-pack-error]:not(:empty) {
    color: var(--coffee-error);
}

.coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced [data-pack-step]:not([hidden]),
.coffee-subscriptions.coffee-subscriptions--wizard.is-enhanced [data-pack-review]:not([hidden]) {
    animation: coffee-step-in var(--coffee-motion) ease-out;
}

@keyframes coffee-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (min-width: 1024px) {
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice:first-child,
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option:first-child {
        border-top-color: transparent;
    }
}

@media (max-width: 640px) {
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__choice,
    .coffee-subscriptions.coffee-subscriptions--wizard .coffee-subscriptions__option {
        gap: 14px;
    }

    .coffee-subscriptions__review-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(10px, calc(var(--coffee-screen-height) * 0.02), 24px);
    }

    .coffee-subscriptions__scale-track {
        --coffee-thumb-size: 36px;
        --coffee-track-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .coffee-subscriptions.coffee-subscriptions--wizard {
        --coffee-motion: 0ms;
    }
}

/* ---------- Formulario de producto y estilos base ---------- */

.coffee-subscriptions__choices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.coffee-subscriptions .coffee-subscriptions__choice {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid var(--coffee-border);
    border-radius: 6px;
    background: var(--coffee-soft);
    color: var(--coffee-ink);
    text-decoration: none;
    font: inherit;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    min-height: 100px;
    overflow-wrap: anywhere;
}

.coffee-subscriptions .coffee-subscriptions__choice:hover {
    border-color: var(--coffee-accent);
    background: var(--coffee-tint);
}

.coffee-subscriptions__symbol {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.coffee-subscriptions fieldset {
    border: 0;
    margin: 1.25rem 0;
    padding: 0;
    min-width: 0;
}

.coffee-subscriptions legend {
    padding: 0;
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.coffee-subscriptions__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.coffee-subscriptions__options label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 1rem;
    border: 1px solid var(--coffee-border);
    border-radius: 4px;
    cursor: pointer;
    overflow-wrap: anywhere;
}

.coffee-subscriptions__options label:has(input:checked) {
    border-color: var(--coffee-accent);
    background: var(--coffee-tint);
}

.coffee-subscriptions input[type="radio"] {
    accent-color: var(--coffee-accent);
    flex-shrink: 0;
}

.coffee-subscriptions__actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.coffee-subscriptions .button {
    min-height: 44px;
    padding: 0.65rem 1.1rem;
    border-radius: 4px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.coffee-subscriptions button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.coffee-subscriptions :focus-visible {
    outline: 2px solid var(--coffee-accent);
    outline-offset: 3px;
}

.coffee-subscriptions .form-row {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-block: 1rem;
}

.coffee-subscriptions select,
.coffee-subscriptions input[type="number"] {
    max-width: 100%;
    min-height: 44px;
    font: inherit;
    padding: 0.5rem;
    border: 1px solid var(--coffee-border);
    border-radius: 4px;
}

.coffee-subscriptions input[type="number"] {
    width: 110px;
}

.coffee-subscriptions__price {
    font-size: 1.125rem;
    margin-block: 0.75rem;
}

.coffee-subscriptions__progress {
    font-size: 0.875rem;
    color: var(--coffee-muted);
    min-height: 1.5em;
}

.coffee-subscriptions--product {
    padding-block: 1.5rem;
    border-block: 1px solid var(--coffee-border);
}

.coffee-subscriptions dt {
    font-weight: 600;
    margin-top: 0.75rem;
}

.coffee-subscriptions dd {
    margin-inline-start: 0;
}

@media (max-width: 520px) {

    .coffee-subscriptions:not(.coffee-subscriptions--wizard) .coffee-subscriptions__choices,
    .coffee-subscriptions:not(.coffee-subscriptions--wizard) .coffee-subscriptions__options {
        grid-template-columns: minmax(0, 1fr);
    }

    .coffee-subscriptions:not(.coffee-subscriptions--wizard) .coffee-subscriptions__choice {
        min-height: 80px;
        padding: 1rem;
    }
}