/*
 * Smakkelijk Core — frontend.
 *
 * Deliberately unopinionated about typography and spacing: the product page is
 * built in Breakdance and inherits from the theme. What is styled here is only
 * what carries meaning — the allergen marks, the table structure and the
 * screen-reader text.
 *
 * The accent colour is a custom property so Breakdance can set it once for the
 * brand instead of overriding every rule. It falls back to the text colour,
 * which is always readable.
 */

.ds-meal-allergens,
.ds-meal-nutrition,
.ds-meal-preparation,
.ds-meal-ingredients {
    --ds-meal-accent: currentColor;
    --ds-meal-muted: rgba(0, 0, 0, 0.35);
}

/* Screen-reader text. Allergen data is safety information, so every cell states
   its full meaning even though the visual mark is enough for sighted readers. */
.ds-meal-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.ds-meal-empty {
    opacity: 0.7;
    font-style: italic;
}


/* --- Ingredients --- */

.ds-meal-ingredients--list {
    margin: 0;
    padding-left: 1.2em;
}

.ds-meal-ingredients--inline {
    margin: 0;
}


/* --- Allergens --- */

.ds-meal-allergens {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.ds-meal-allergens th,
.ds-meal-allergens td {
    padding: 0.5em 0.4em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
    vertical-align: middle;
}

/* 60/20/20. The full table shows at every width — an allergen table that
   collapses into cards on mobile loses the row-by-position reading that makes
   it usable in the first place. */
.ds-meal-allergens th:first-child {
    width: 60%;
}

.ds-meal-allergens th:not(:first-child),
.ds-meal-allergens td {
    width: 20%;
    text-align: center;
}

.ds-meal-allergens thead th {
    font-size: 0.85em;
    line-height: 1.3;
}

.ds-meal-allergens tbody th {
    font-weight: 400;
}

/*
 * The icon sits next to the name, sized in em so it tracks the text — the same
 * arrangement as the preparation blocks, a notch smaller because it repeats
 * fourteen times down a column rather than heading a block of its own.
 *
 * Deliberately inline rather than flex: a table cell set to display:flex leaves
 * the table layout, and the 60/20/20 column widths go with it.
 *
 * Override --ds-meal-allergen-icon-size to resize the whole column, or hide a
 * single one through .ds-meal-allergen-row--{slug} .ds-meal-allergen-icon.
 */
.ds-meal-allergen-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5em;
    line-height: 0;
    color: var(--ds-meal-accent);
}

.ds-meal-allergen-icon svg {
    display: block;
    width: var(--ds-meal-allergen-icon-size, 1.2em);
    height: var(--ds-meal-allergen-icon-size, 1.2em);
}

.ds-meal-allergen-name {
    vertical-align: middle;
}

.ds-meal-mark {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 50%;
    vertical-align: middle;
}

/* Present: filled. No red/green semantics anywhere — a green tick next to
   "present" reads as something positive while it is the warning. */
.ds-meal-mark--present {
    background: var(--ds-meal-accent);
}

/* Traces: half filled, same colour at half strength. */
.ds-meal-mark--traces {
    background: linear-gradient(to right, var(--ds-meal-accent) 0 50%, transparent 50% 100%);
    box-shadow: inset 0 0 0 1px var(--ds-meal-accent);
    opacity: 0.5;
}

/* Absent: an em dash, never a tick. "Free from" is a claim, and for gluten a
   regulated one that depends on a measurement rather than on the recipe. */
.ds-meal-mark--none {
    width: auto;
    height: auto;
    border-radius: 0;
    color: var(--ds-meal-muted);
}

.ds-meal-allergens-none {
    margin: 0;
}


/* --- Nutrition --- */

.ds-meal-nutrition {
    width: 100%;
    border-collapse: collapse;
}

.ds-meal-nutrition th,
.ds-meal-nutrition td {
    padding: 0.4em 0.4em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    text-align: left;
}

.ds-meal-nutrition td {
    text-align: right;
    white-space: nowrap;
}

.ds-meal-nutrition tbody th {
    font-weight: 400;
}

/* "of which saturates" and "of which sugars" sit under their parent row. */
.ds-meal-nutrition .ds-meal-nutrition-sub th {
    padding-left: 1.5em;
    opacity: 0.85;
}


/* --- Preparation --- */

.ds-meal-prep-item {
    display: flex;
    align-items: baseline;
    gap: 0.5em;
    flex-wrap: wrap;
    padding: 0.35em 0;
}

.ds-meal-prep-icon {
    flex: 0 0 auto;
    align-self: center;
    line-height: 0;
    color: var(--ds-meal-accent);
}

.ds-meal-prep-icon svg {
    display: block;
    width: 1.35em;
    height: 1.35em;
}

.ds-meal-prep-label {
    font-weight: 600;
}

.ds-meal-prep-instruction {
    flex: 1 1 12em;
}


/* --- Price per person --- */

.ds-meal-price-pp {
    display: inline-block;
}


/* --- Shop filters --- */

/*
 * The brand tokens by name, with a fallback each so the filter still renders
 * sanely outside this site.
 *
 * Not `currentColor`: a rule that sets both `color` and a `currentColor`-derived
 * background resolves the background against the colour it is setting in that
 * same rule, which paints white on white. The accent has to be a real value.
 */
.ds-meal-filters {
    --ds-meal-accent: var(--sk-evergreen, #0a2d28);
    --ds-meal-on-accent: var(--sk-beige, #fff);
    --ds-meal-muted: rgba(10, 45, 40, 0.45);
    --ds-meal-line: rgba(10, 45, 40, 0.16);
    --ds-meal-handle: 18px;

    display: flex;
    flex-direction: column;
    /* Three pixels of air on either side so a focus ring on the leftmost
       checkbox is not shaved off by a host that clips its sides. */
    padding: 0 3px;
    color: var(--ds-meal-accent);
}

.ds-meal-filters.is-busy {
    opacity: 0.6;
    pointer-events: none;
}

/* With the script running, changing an option submits; the button would only be
   a second way to do the same thing. */
.ds-meal-filters--live .ds-meal-filters-submit {
    display: none;
}


/* --- One hairline between neighbours --- */

/*
 * Spacing as padding rather than gap, so the rule can sit exactly between two
 * blocks instead of floating in the middle of the gap.
 */
.ds-meal-active-filters {
    margin: 0;
    padding: 1.15em 0;
    border: 0;
}

/*
 * No padding of its own: the whitespace above and below the heading belongs to
 * the heading, because the heading is the thing you click to collapse. Width is
 * pinned rather than left to the flex default — a closed panel has nothing but
 * the heading in it, and a shrink-to-fit box would make the hit area jump about
 * as you open and close it.
 */
.ds-meal-filter-group {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
}

.ds-meal-filters > :first-child {
    padding-top: 0;
}

.ds-meal-filters > :first-child > .ds-meal-filter-legend {
    padding-top: 0;
}

.ds-meal-active-filters + .ds-meal-filter-group,
.ds-meal-filter-group + .ds-meal-filter-group {
    border-top: 1px solid var(--ds-meal-line);
}

.ds-meal-filters-submit {
    margin-top: 1.15em;
}

/* Limkin, uppercase. */
.ds-meal-filter-legend,
.ds-meal-active-filters-title {
    font-family: var(--sk-font-sub, inherit);
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    text-transform: uppercase;
    color: var(--ds-meal-accent);
}

/* The heading is the open/close control, like a metabox title bar — so it also
   owns the air around itself, and you can hit it there too. */
.ds-meal-filter-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5em;
    box-sizing: border-box;
    width: 100%;
    padding: 1.05em 0;
    cursor: pointer;
    list-style: none;
    -webkit-user-select: none;
    user-select: none;
}

.ds-meal-filter-legend::-webkit-details-marker {
    display: none;
}

.ds-meal-filter-legend:focus-visible {
    outline: 2px solid var(--ds-meal-accent);
    outline-offset: 3px;
}

.ds-meal-filter-chevron {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 150ms ease;
}

.ds-meal-filter-group[open] > .ds-meal-filter-legend .ds-meal-filter-chevron {
    transform: translateY(1px) rotate(-135deg);
}

/* Only the bottom: the heading's own padding is the air above the content. */
.ds-meal-filter-body {
    padding-bottom: 1.15em;
}

.ds-meal-filter-options {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.35em;
}

/* Fifty ingredients would push everything below them off the screen. The
   shortcode's `height` sets the variable when the template wants to decide how
   many rows stand above the fold; 15em is roughly nine. */
.ds-meal-filter-group--scroll .ds-meal-filter-options {
    max-height: var(--ds-meal-filter-height, 15em);
    overflow-y: auto;
    padding-right: 0.65em;
}


/* --- Scrollbar --- */

/*
 * A thin evergreen bar and nothing behind it: the track is a second vertical
 * line next to the one the panel border already draws, and two lines say no
 * more than one.
 *
 * The two families cannot be mixed. Blink and WebKit hand the scrollbar to the
 * platform the moment `scrollbar-width` or `scrollbar-color` is set to anything
 * but its initial value, and then drop every `::-webkit-scrollbar` rule — which
 * on Windows means a platform bar with step arrows and no way to remove them.
 * So the standard properties are fenced off to the engine that has nothing else:
 * Firefox, the one browser without the pseudo-elements.
 */
@supports not selector(::-webkit-scrollbar) {
    .ds-meal-filter-group--scroll .ds-meal-filter-options {
        scrollbar-width: thin;
        scrollbar-color: var(--ds-meal-accent) transparent;
    }
}

.ds-meal-filter-group--scroll .ds-meal-filter-options::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

.ds-meal-filter-group--scroll .ds-meal-filter-options::-webkit-scrollbar-track {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* The step arrows at either end. Nobody scrolls a filter list a line at a time,
   and they read as a control the panel does not have. */
.ds-meal-filter-group--scroll .ds-meal-filter-options::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

.ds-meal-filter-group--scroll .ds-meal-filter-options::-webkit-scrollbar-thumb {
    background: var(--ds-meal-accent);
    border-radius: 999px;
}

.ds-meal-filter-group--scroll .ds-meal-filter-options::-webkit-scrollbar-thumb:hover {
    background: var(--sk-burgundy, #6f0d22);
}

.ds-meal-filter-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55em;
    cursor: pointer;
    line-height: 1.3;
}

/* The native box is hidden but still there — it keeps the label association,
   the keyboard behaviour and the focus ring that a div cannot. Absolute against
   the label, so it cannot escape to some far-off positioned ancestor. */
.ds-meal-filter-option input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ds-meal-filter-box {
    flex: 0 0 auto;
    position: relative;
    width: 1.05em;
    height: 1.05em;
    border: 1px solid var(--ds-meal-accent);
    border-radius: 3px;
}

.ds-meal-filter-option input:checked + .ds-meal-filter-box {
    background: var(--ds-meal-accent);
}

.ds-meal-filter-option input:checked + .ds-meal-filter-box::after {
    content: "";
    position: absolute;
    inset: 0.2em 0.16em;
    border: solid var(--ds-meal-on-accent);
    border-width: 0 0 2px 2px;
    transform: rotate(-45deg) translate(0.05em, -0.1em);
}

.ds-meal-filter-option input:focus-visible + .ds-meal-filter-box {
    outline: 2px solid var(--ds-meal-accent);
    outline-offset: 2px;
}


/* --- Allergens: ticking one takes it away --- */

/*
 * An exclusion filter that shows a tick reads as "I want this". A cross on a
 * greyed box with the name struck through reads as what it does: this allergen
 * is out.
 */
.ds-meal-filter-group--exclude .ds-meal-filter-option input:checked + .ds-meal-filter-box {
    background: var(--ds-meal-muted);
    border-color: var(--ds-meal-muted);
}

.ds-meal-filter-group--exclude .ds-meal-filter-option input:checked + .ds-meal-filter-box::after {
    content: "";
    inset: 0;
    border: 0;
    transform: none;
    background:
        linear-gradient(to bottom right, transparent 44%, var(--ds-meal-on-accent) 44%, var(--ds-meal-on-accent) 56%, transparent 56%),
        linear-gradient(to bottom left, transparent 44%, var(--ds-meal-on-accent) 44%, var(--ds-meal-on-accent) 56%, transparent 56%);
}

.ds-meal-filter-group--exclude .ds-meal-filter-option input:checked ~ .ds-meal-filter-text {
    text-decoration: line-through;
    color: var(--ds-meal-muted);
}


/* --- Ingredients: AND / OR --- */

/*
 * A two-part segmented control on one pill. Both halves are always the same
 * width so neither reads as the primary choice, and the picked one inverts —
 * anything subtler and you cannot tell which of the two is on.
 */
.ds-meal-filter-logic {
    display: flex;
    width: 100%;
    margin: 0 0 0.9em;
    padding: 2px;
    border: 1px solid var(--ds-meal-line);
    border-radius: 999px;
    background: var(--sk-beige-dark, rgba(10, 45, 40, 0.06));
}

.ds-meal-filter-logic-option {
    position: relative;
    flex: 1 1 50%;
    cursor: pointer;
}

.ds-meal-filter-logic-option input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.ds-meal-filter-logic-label {
    display: block;
    padding: 0.35em 0.9em;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    line-height: 1.5;
    text-align: center;
    text-transform: uppercase;
    color: var(--ds-meal-accent);
    transition: background 150ms, color 150ms;
}

.ds-meal-filter-logic-option input:checked + .ds-meal-filter-logic-label {
    background: var(--ds-meal-accent);
    color: var(--ds-meal-on-accent);
}

.ds-meal-filter-logic-option input:focus-visible + .ds-meal-filter-logic-label {
    outline: 2px solid var(--ds-meal-accent);
    outline-offset: 2px;
}


/* --- Portion size --- */

/*
 * Two range inputs stacked on one track. The inputs span the whole slider, but
 * the rail underneath is inset by half a handle on each side: that inset strip
 * is exactly the travel a handle centre has, so a plain percentage inside the
 * rail lands on the handle — no measuring, and it is already right before the
 * script runs.
 */
/*
 * The labels are centred on their handles, and a handle at either end sits half
 * a handle in from the edge — so a label wider than the handle hangs out of the
 * panel. The slider is inset far enough to swallow that, and the group clips as
 * a backstop: a filter must never be the reason a page scrolls sideways.
 */
.ds-meal-filter-group--weight {
    overflow-x: clip;
}

.ds-meal-filter-group--weight .ds-meal-filter-body {
    padding-left: 10px;
    padding-right: 10px;
}

/* Room above for the two value labels. */
.ds-meal-weight-slider {
    position: relative;
    height: var(--ds-meal-handle);
    margin-top: 1.6em;
}

.ds-meal-weight-rail {
    position: absolute;
    left: calc(var(--ds-meal-handle) / 2);
    right: calc(var(--ds-meal-handle) / 2);
    top: 0;
    bottom: 0;
}

.ds-meal-weight-rail::before,
.ds-meal-weight-rail::after {
    content: "";
    position: absolute;
    top: 50%;
    height: 4px;
    border-radius: 999px;
    transform: translateY(-50%);
}

/* The full track runs half a handle past the rail on both sides, so it reaches
   under the handles when they sit at either end. */
.ds-meal-weight-rail::before {
    left: calc(var(--ds-meal-handle) / -2);
    right: calc(var(--ds-meal-handle) / -2);
    background: var(--ds-meal-line);
}

/* The selected span, painted from the two custom properties. */
.ds-meal-weight-rail::after {
    left: var(--ds-from, 0%);
    right: calc(100% - var(--ds-to, 100%));
    background: var(--ds-meal-accent);
}

.ds-meal-weight-value {
    position: absolute;
    bottom: calc(100% + 0.5em);
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ds-meal-weight-value--from {
    left: var(--ds-from, 0%);
}

.ds-meal-weight-value--to {
    left: var(--ds-to, 100%);
}

/* Full height with a transparent track: the browser then centres the handle on
   the slider itself, which is what keeps it on the line. */
.ds-meal-weight-input {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: none;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
}

.ds-meal-weight-input::-webkit-slider-runnable-track {
    height: 100%;
    background: none;
    border: 0;
}

.ds-meal-weight-input::-moz-range-track {
    height: 100%;
    background: none;
    border: 0;
}

.ds-meal-weight-input::-webkit-slider-thumb {
    pointer-events: auto;
    -webkit-appearance: none;
    width: var(--ds-meal-handle);
    height: var(--ds-meal-handle);
    margin-top: 0;
    border: 3px solid var(--sk-beige, #fff);
    border-radius: 50%;
    background: var(--ds-meal-accent);
    cursor: grab;
}

.ds-meal-weight-input::-moz-range-thumb {
    pointer-events: auto;
    width: var(--ds-meal-handle);
    height: var(--ds-meal-handle);
    box-sizing: border-box;
    border: 3px solid var(--sk-beige, #fff);
    border-radius: 50%;
    background: var(--ds-meal-accent);
    cursor: grab;
}

.ds-meal-weight-input:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--ds-meal-accent);
    outline-offset: 2px;
}

.ds-meal-weight-input:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--ds-meal-accent);
    outline-offset: 2px;
}


/* --- Active filters --- */

.ds-meal-active-filters-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1em;
    margin-bottom: 0.6em;
}

.ds-meal-active-filters-title {
    font-weight: 700;
}

.ds-meal-clear-filters {
    font-size: 0.85em;
}

.ds-meal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-meal-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.6em;
    border: 1px solid var(--ds-meal-line);
    border-radius: 999px;
    font-size: 0.85em;
    line-height: 1.4;
    text-decoration: none;
}

.ds-meal-chip:hover {
    border-color: var(--ds-meal-accent);
}

.ds-meal-chip--exclude .ds-meal-chip-label {
    text-decoration: line-through;
}

.ds-meal-chip-remove {
    font-size: 1.2em;
    line-height: 1;
    opacity: 0.6;
}

.ds-meal-chip:hover .ds-meal-chip-remove {
    opacity: 1;
}


/* --- Delivery slots --- */

/*
 * The same treatment the shop filters use: the native control keeps the label
 * association and the keyboard behaviour, and the mark next to it is what you
 * actually see.
 *
 * Everything you would want to recolour is a custom property, in four groups of
 * three: background, border, title (the day, and the radio mark with it) and
 * muted (the order-by line), each in a resting, a hover and a chosen state.
 * Redefine any of them on `.ds-delivery`.
 *
 * The defaults are black, grey and white, with no reference to the Smakkelijk
 * palette: this block is meant to survive being lifted out into a plugin of its
 * own, and a house style belongs in the site that uses it. Nothing in the plugin
 * skins it, so what you see here is what a fresh install looks like.
 *
 * Background and border walk a real three-step scale, off-white to white and
 * hairline to ink, so the rows read as cards of their own instead of borrowing
 * the page behind them. That is what lets the same block sit on a white site
 * and on a dark one. Title and muted fall back to their resting colour, because
 * a greyscale has nothing to say there; give them states when you have a
 * palette.
 *
 * A chosen row outranks a hovered one, so hovering your choice does not undo it.
 */
.ds-delivery {
    --ds-delivery-background: #f6f6f6;
    --ds-delivery-background-hover: #fbfbfb;
    --ds-delivery-background-active: #ffffff;

    --ds-delivery-border: #d6d6d6;
    --ds-delivery-border-hover: #8a8a8a;
    --ds-delivery-border-active: #141414;

    --ds-delivery-title: #141414;
    --ds-delivery-title-hover: var(--ds-delivery-title);
    --ds-delivery-title-active: var(--ds-delivery-title);

    --ds-delivery-muted: #5a5a5a;
    --ds-delivery-muted-hover: var(--ds-delivery-muted);
    --ds-delivery-muted-active: var(--ds-delivery-muted);

    color: var(--ds-delivery-title);
}

.ds-delivery__title {
    margin: 0 0 0.6em;
    font-weight: 600;
}

.ds-delivery__options {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 0;
    padding: 0;
    list-style: none;
}

/*
 * Two classes, because one loses. On the checkout Breakdance styles every bare
 * label (`.breakdance-woocommerce label`), which outranks a single class and
 * flattens the row back to `display: block` with `line-height: 1`. Colour and
 * line height are restated for the same reason.
 */
.ds-delivery .ds-delivery__option {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.7em;
    padding: 0.9em 1em;
    color: var(--ds-delivery-title);
    line-height: 1.4;
    background: var(--ds-delivery-background);
    border: 1px solid var(--ds-delivery-border);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 150ms, border-color 150ms, color 150ms;
}

.ds-delivery .ds-delivery__option:hover {
    color: var(--ds-delivery-title-hover);
    background: var(--ds-delivery-background-hover);
    border-color: var(--ds-delivery-border-hover);
}

/* The whole row carries the choice, not just the dot. */
.ds-delivery .ds-delivery__option:has(input:checked) {
    color: var(--ds-delivery-title-active);
    background: var(--ds-delivery-background-active);
    border-color: var(--ds-delivery-border-active);
    box-shadow: inset 0 0 0 1px var(--ds-delivery-border-active);
}

.ds-delivery__option input {
    position: absolute;
    left: 0;
    top: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/*
 * The mark reads the row's own colour, so it follows the title variable and
 * both of its states without three more rules of its own.
 */
.ds-delivery__mark {
    flex: 0 0 auto;
    position: relative;
    width: 1.05em;
    height: 1.05em;
    margin-top: 0.15em;
    border: 1px solid currentColor;
    border-radius: 50%;
}

.ds-delivery__option input:checked ~ .ds-delivery__mark::after {
    content: "";
    position: absolute;
    inset: 0.2em;
    border-radius: 50%;
    background: currentColor;
}

.ds-delivery__option input:focus-visible ~ .ds-delivery__mark {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.ds-delivery__text {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.ds-delivery__day {
    font-weight: 600;
}

.ds-delivery__cutoff {
    font-size: 0.9em;
    color: var(--ds-delivery-muted);
    transition: color 150ms;
}

.ds-delivery .ds-delivery__option:hover .ds-delivery__cutoff {
    color: var(--ds-delivery-muted-hover);
}

.ds-delivery .ds-delivery__option:has(input:checked) .ds-delivery__cutoff {
    color: var(--ds-delivery-muted-active);
}