/* Option picker + add to basket on Doofinder result cards. Override the variables in your theme. */
.sdo {
    /*
     * Defaults match Swell's product page Add to Basket button. Each store view
     * can override both colours in the admin (Doofinder Card Options).
     */
    --sdo-accent: #00b368;
    --sdo-accent-hover: #008f53;
    --sdo-accent-ink: #fff;
    --sdo-ink: #1f1f1f;
    --sdo-muted: #6b6b6b;
    --sdo-line: #d9d9d9;
    --sdo-soft: #f3f2ef;
    --sdo-danger: #b3261e;
    --sdo-radius: 4px;
    --sdo-height: 40px;
    /* Basket glyph from the theme's icon font, as used on the product page button. */
    --sdo-cart-font: icons;
    --sdo-cart-glyph: "\e009";

    /*
     * .sdo is a flex item in Doofinder's card column, which by default can't
     * shrink below its content; a long option name then widened the whole
     * card past its grid column, over the next card.
     */
    min-width: 0;
    max-width: 100%;
    /* Never let our content's natural width (e.g. a dropdown's longest option) size the card. */
    contain: inline-size;
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--sdo-ink);
    cursor: default;
}

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

/*
 * Doofinder stretches the card's "View more" link over the whole card
 * (.dfd-card-link::after, absolute, z-index 1). Lift the controls above it,
 * or every click lands on the link and opens the product page.
 * .sdo itself stays static so the chooser can still cover the whole card.
 */
.sdo > * {
    position: relative;
    z-index: 2;
}

.sdo-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sdo-row--pills {
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.sdo-row + .sdo-row {
    margin-top: 8px;
}

.sdo-row--pills + .sdo-row {
    margin-top: 0;
}

/*
 * Dropdown and basket button share one line: the dropdown takes the space left
 * and can shrink (min-width: 0), the button keeps its fixed square size, so
 * they never overlap. The placeholder names the attribute, so no label.
 */
.sdo .sdo-select {
    /*
     * width: 100% (not auto): with auto, a <select> is as wide as its longest
     * option and pushed the card over the next one. flex-basis 0 still leaves
     * room for the button.
     */
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
    height: var(--sdo-height);
    margin: 0;
    padding: 0 30px 0 10px;
    border: 1px solid var(--sdo-line);
    border-radius: var(--sdo-radius);
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23555' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    appearance: none;
    cursor: pointer;
}

.sdo-select:focus-visible,
.sdo-btn:focus-visible,
.sdo-swatch:focus-visible,
.sdo-opt:focus-visible,
.sdo-icon-btn:focus-visible {
    outline: 2px solid var(--sdo-accent);
    outline-offset: 2px;
}

/* Single-option attribute: pre-selected, shown as a muted pill. */
.sdo-pill {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    min-height: 30px;
    padding: 4px 10px;
    border-radius: var(--sdo-radius);
    background: var(--sdo-soft);
    color: var(--sdo-muted);
    /* Wrap long names (e.g. "Start Up Program - Marine (Up to 150ltrs)") so they show in full. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.sdo-row:not(.sdo-row--pills) .sdo-pill {
    min-height: var(--sdo-height);
}

/*
 * Doofinder styles every button in its layer with `.dfd-root button` and its
 * :hover/:active/:disabled variants (transparent background, grey text, 38px
 * height, 0.65 disabled opacity). Our rules are scoped under .sdo to beat the
 * base rule, and set Doofinder's --dfd-btn-* variables so its state rules,
 * which are more specific, resolve to our values.
 */
.sdo .sdo-btn {
    --dfd-btn-bg: var(--sdo-accent);
    --dfd-btn-hover-bg: var(--sdo-accent-hover);
    --dfd-btn-active-bg: var(--sdo-accent-hover);
    --dfd-btn-disabled-bg: var(--sdo-accent);
    --dfd-btn-color: var(--sdo-accent-ink);
    --dfd-btn-hover-color: var(--sdo-accent-ink);
    --dfd-btn-active-color: var(--sdo-accent-ink);
    --dfd-btn-disabled-color: var(--sdo-accent-ink);
    --dfd-btn-border-color: transparent;
    --dfd-btn-hover-border-color: transparent;
    --dfd-btn-active-border-color: transparent;
    --dfd-btn-disabled-border-color: transparent;
    --dfd-btn-disabled-opacity: .4;

    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: var(--sdo-height);
    height: var(--sdo-height);
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--sdo-radius);
    background: var(--sdo-accent);
    box-shadow: none;
    color: var(--sdo-accent-ink);
    font: inherit;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: none;
    opacity: 1;
    cursor: pointer;
    transition: opacity .15s, background-color .25s ease-out;
}

.sdo .sdo-btn:hover:not([disabled]),
.sdo .sdo-btn:focus-visible {
    background: var(--sdo-accent-hover);
    color: var(--sdo-accent-ink);
    text-decoration: none;
}

.sdo .sdo-btn[disabled] {
    opacity: .4;
    cursor: not-allowed;
}

/* Square basket button next to the options; full width only when it's alone (simple products). */
.sdo .sdo-cart {
    flex: 0 0 var(--sdo-height);
    width: var(--sdo-height);
    padding: 0;
}

.sdo .sdo-btn--wide {
    flex: 1 1 100%;
    width: 100%;
    padding: 0 12px;
}

/* Add to basket: icon only, like the product page. */
.sdo .sdo-cart::before,
.sdo .sdo-opt-add::before {
    content: var(--sdo-cart-glyph);
    font-family: var(--sdo-cart-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
    speak: none;
}

.sdo .sdo-cart.is-done::before {
    content: none;
}

.sdo .sdo-btn.is-done {
    background: var(--sdo-accent-hover);
    opacity: 1;
}

.sdo .sdo-btn.is-busy::before {
    animation: sdo-pulse .8s ease-in-out infinite alternate;
}

.sdo-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Swatches replace the dropdown for visual (colour/image) attributes. */
.sdo-swatches {
    display: flex;
    flex: 1 1 0;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.sdo .sdo-swatch {
    --dfd-btn-hover-bg: #fff;
    --dfd-btn-active-bg: #fff;
    --dfd-btn-hover-border-color: var(--sdo-muted);
    --dfd-btn-active-border-color: var(--sdo-ink);
    display: inline-flex;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--sdo-line);
    border-radius: 50%;
    background: #fff;
    line-height: 1;
    cursor: pointer;
}

.sdo .sdo-swatch.is-selected {
    border-color: var(--sdo-ink);
    box-shadow: inset 0 0 0 1px var(--sdo-ink);
}

.sdo-chip {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--sdo-soft);
    background-position: center;
    background-size: cover;
    font-size: 11px;
    color: var(--sdo-muted);
}

.sdo-opt .sdo-chip {
    width: 22px;
    height: 22px;
    border: 1px solid var(--sdo-line);
}

/* "Colour" / "Colour: White" on its own line above the swatches and button. */
.sdo-swatch-label {
    margin-bottom: 6px;
    color: var(--sdo-muted);
    overflow-wrap: anywhere;
}

.sdo-swatch-label strong {
    color: var(--sdo-ink);
    font-weight: 600;
}

.sdo-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Price on the card */
.sdo-from {
    margin-right: 2px;
    color: var(--sdo-muted);
    font-size: .85em;
    font-weight: 400;
}

/* Two or more attributes: summary + "Choose options" */
.sdo-summary {
    margin: 0 0 8px;
    color: var(--sdo-muted);
}

/* The chooser flips over the whole card. The Doofinder card is position: relative. */
.sdo > .sdo-chooser {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    padding: 10px;
    border-radius: inherit;
    background: #fff;
    cursor: default;
    animation: sdo-flip .18s ease-out;
}

.sdo-chooser-head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

.sdo-chooser-title {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
    text-align: center;
}

.sdo-chooser-title strong {
    font-size: 14px;
}

.sdo-chooser-title span,
.sdo-crumbs {
    color: var(--sdo-muted);
    font-size: 12px;
}

.sdo-crumbs {
    margin: 0 0 6px;
    text-align: center;
}

.sdo .sdo-icon-btn {
    --dfd-btn-hover-bg: var(--sdo-line);
    --dfd-btn-active-bg: var(--sdo-line);
    --dfd-btn-hover-color: var(--sdo-ink);
    --dfd-btn-active-color: var(--sdo-ink);
    --dfd-btn-disabled-bg: var(--sdo-soft);
    --dfd-btn-disabled-color: var(--sdo-ink);
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--sdo-soft);
    color: var(--sdo-ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.sdo-icon-btn--placeholder {
    visibility: hidden;
}

.sdo-options {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sdo .sdo-opt {
    --dfd-btn-hover-bg: #fff;
    --dfd-btn-active-bg: #fff;
    --dfd-btn-disabled-bg: #fff;
    --dfd-btn-hover-color: var(--sdo-ink);
    --dfd-btn-active-color: var(--sdo-ink);
    --dfd-btn-disabled-color: var(--sdo-ink);
    --dfd-btn-hover-border-color: var(--sdo-accent);
    --dfd-btn-active-border-color: var(--sdo-accent);
    --dfd-btn-disabled-border-color: var(--sdo-line);
    --dfd-btn-disabled-opacity: .55;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 40px;
    margin: 0;
    padding: 6px 10px;
    border: 1px solid var(--sdo-line);
    border-radius: var(--sdo-radius);
    background: #fff;
    color: var(--sdo-ink);
    font: inherit;
    line-height: 1.3;
    text-align: left;
    white-space: normal;
    cursor: pointer;
    left: -1px;
    top: -1px;
}

.sdo .sdo-opt[disabled] {
    cursor: wait;
    opacity: .55;
}

.sdo .sdo-opt.is-busy {
    --dfd-btn-disabled-border-color: var(--sdo-accent);
    --dfd-btn-disabled-opacity: 1;
    opacity: 1;
    border-color: var(--sdo-accent);
}

.sdo-opt.is-busy .sdo-opt-add::before {
    animation: sdo-pulse .8s ease-in-out infinite alternate;
}

.sdo-opt-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.sdo-opt-price {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

.sdo-opt-next {
    color: var(--sdo-muted);
    font-size: 18px;
}

.sdo-opt-add {
    display: inline-flex;
    color: var(--sdo-accent);
}


.sdo-msg {
    margin: 8px 0 0;
    color: var(--sdo-danger);
    font-size: 12px;
}

.sdo-msg a {
    color: inherit;
    text-decoration: underline;
}

@keyframes sdo-flip {
    from { opacity: 0; transform: perspective(600px) rotateY(-8deg); }
    to { opacity: 1; transform: none; }
}

@keyframes sdo-pulse {
    from { opacity: 1; }
    to { opacity: .3; }
}

@media (prefers-reduced-motion: reduce) {
    .sdo-chooser,
    .sdo .sdo-btn.is-busy::before,
    .sdo-opt.is-busy .sdo-opt-add::before {
        animation: none;
    }
}

/* Doofinder's 2-column mobile grid */
@media (max-width: 480px) {
    .sdo {
        --sdo-height: 36px;
        font-size: 12px;
    }

    .sdo-chooser {
        padding: 8px;
    }

    .sdo .sdo-opt {
        padding: 6px 8px;
    }
}