/*
 * Banner Studio Price Calculator — v1.6.0
 *
 * One home per component. If a rule below overrides another, the comment says what it owns.
 * Every colour, radius and space comes from the tokens in this block; no magic numbers in
 * component rules, so the whole card can be re-skinned from here.
 */

:root {
    --bscq-navy: #0f2b4d;
    --bscq-navy-2: #17406e;
    --bscq-ink: #16233a;
    --bscq-orange: #ff6a13;
    --bscq-orange-dark: #dd530a;
    --bscq-orange-soft: #fff4ec;
    --bscq-surface: #f6f8fc;
    --bscq-surface-2: #eef2f8;
    --bscq-line: #d6dfeb;
    --bscq-line-strong: #b9c7da;
    --bscq-muted: #5a6b83;
    --bscq-white: #fff;
    --bscq-danger: #b3261e;
    --bscq-danger-bg: #fdf3f2;
    --bscq-success: #10693f;

    --bscq-r-sm: 8px;
    --bscq-r: 10px;
    --bscq-r-lg: 14px;

    --bscq-s1: 4px;
    --bscq-s2: 8px;
    --bscq-s3: 12px;
    --bscq-s4: 16px;
    --bscq-s5: 20px;
    --bscq-s6: 26px;

    /* Gap left above the price panel once it sticks. Raise it on a theme with a fixed header,
       or the panel slides underneath: .bscq-aside { --bscq-sticky-top: 96px } */
    --bscq-sticky-top: 24px;

    --bscq-control-h: 46px;
    --bscq-ring: 0 0 0 3px rgba(255, 106, 19, .22);
    --bscq-shadow: 0 10px 30px rgba(15, 43, 77, .08);
    --bscq-t: .18s ease;
}

/* ---------------------------------------------------------------- host page */

body.bscq-hide-standard-price .summary > .price,
body.bscq-hide-standard-price .summary .woocommerce-variation-price {
    display: none !important;
}

/* The calculator locks the cart quantity to 1; print quantity lives inside the quote. */
body.bscq-enabled-product form.cart > .quantity {
    display: none !important;
}

/*
 * Duplicate Add to cart suppression.
 * Only on pages where the calculator actually owns the cart form (body.bscq-owns-cart, set in
 * PHP for simple products in Automatic placement). Anything matching that is NOT inside our own
 * form is a second, competing Add to cart rendered by the theme or a page-builder widget.
 * !important is required here: these are third-party stylesheets we do not control.
 */
body.bscq-owns-cart form.cart:not(.bscq-cart-form),
body.bscq-owns-cart .single_add_to_cart_button:not(.bscq-add-to-cart),
body.bscq-owns-cart .elementor-widget-woocommerce-product-add-to-cart,
body.bscq-owns-cart .elementor-add-to-cart,
body.bscq-owns-cart .wc-block-add-to-cart-form {
    display: none !important;
}
body.bscq-owns-cart .bscq-cart-form,
body.bscq-owns-cart .bscq-cart-form .single_add_to_cart_button {
    display: block !important;
}
body.bscq-owns-cart .bscq-cart-form .bscq-add-to-cart {
    display: inline-flex !important;
}

/* ------------------------------------------------------------------ shell */

.bscq-wrap {
    clear: both;
    margin: var(--bscq-s6) 0 var(--bscq-s4);
    padding: var(--bscq-s5);
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r-lg);
    background: var(--bscq-white);
    box-shadow: var(--bscq-shadow);
    color: var(--bscq-ink);
    font-size: 15px;
    line-height: 1.45;
}

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

.bscq-wrap :focus-visible,
.bscq-cart-actions :focus-visible,
.bscq-sticky :focus-visible {
    outline: 2px solid var(--bscq-orange);
    outline-offset: 2px;
}

.bscq-icon { display: block; flex: 0 0 auto; }

.bscq-section { margin-top: var(--bscq-s5); }

.bscq-hidden-fields { display: none !important; }

/* ------------------------------------------------------------------ header */

.bscq-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bscq-s3);
    margin-bottom: var(--bscq-s5);
    padding-bottom: var(--bscq-s4);
    border-bottom: 1px solid var(--bscq-surface-2);
}

.bscq-kicker {
    display: block;
    color: var(--bscq-orange);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.bscq-title {
    margin: 2px 0 0;
    padding: 0;
    color: var(--bscq-navy);
    font-size: clamp(19px, 2.2vw, 24px);
    font-weight: 800;
    line-height: 1.15;
}

.bscq-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 7px 12px;
    border-radius: 999px;
    background: var(--bscq-surface);
    color: var(--bscq-navy);
    font-size: 12px;
    font-weight: 700;
}
.bscq-badge .bscq-icon { width: 16px; height: 16px; color: var(--bscq-success); }

/* ----------------------------------------------------------------- fields */

.bscq-field { min-width: 0; }

.bscq-label {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    color: var(--bscq-navy);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .01em;
}
.bscq-opt {
    color: var(--bscq-muted);
    font-size: 11px;
    font-weight: 500;
}
.bscq-hint {
    display: block;
    margin-top: 5px;
    color: var(--bscq-muted);
    font-size: 11.5px;
    line-height: 1.35;
}

.bscq-control { position: relative; }

/*
 * Authoritative rule for every text-ish control inside the card. Kept as one block so a theme's
 * shorthand cannot reset half of it.
 *
 * !important throughout is deliberate and is the documented exception: WooCommerce themes ship
 * blanket `input, select, textarea { background: … !important }` rules that load after this
 * file. Without these the fields render in the theme's grey "disabled" palette and the values
 * look unreadable. Only the properties themes actually fight over are forced.
 */
.bscq-wrap .bscq-control input[type="text"],
.bscq-wrap .bscq-control input[type="email"],
.bscq-wrap .bscq-control input[type="tel"],
.bscq-wrap .bscq-control input[type="url"],
.bscq-wrap .bscq-control input[type="number"],
.bscq-wrap .bscq-control select,
.bscq-wrap .bscq-control textarea {
    display: block;
    width: 100%;
    min-height: var(--bscq-control-h);
    height: auto !important;
    margin: 0 !important;
    padding: 10px 13px !important;
    border: 1px solid var(--bscq-line) !important;
    border-radius: var(--bscq-r) !important;
    background: var(--bscq-white) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--bscq-ink) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    transition: border-color var(--bscq-t), box-shadow var(--bscq-t);
}

.bscq-wrap .bscq-control textarea {
    min-height: 96px;
    font-weight: 500 !important;
    resize: vertical;
}

.bscq-wrap .bscq-control input::placeholder,
.bscq-wrap .bscq-control textarea::placeholder {
    color: #8a99ad;
    font-weight: 500;
    opacity: 1;
}

.bscq-wrap .bscq-control input:hover,
.bscq-wrap .bscq-control select:hover,
.bscq-wrap .bscq-control textarea:hover { border-color: var(--bscq-line-strong) !important; }

.bscq-wrap .bscq-control input:focus,
.bscq-wrap .bscq-control select:focus,
.bscq-wrap .bscq-control textarea:focus {
    border-color: var(--bscq-orange) !important;
    box-shadow: var(--bscq-ring) !important;
    outline: none;
}

.bscq-wrap .bscq-control input[readonly] {
    background: var(--bscq-surface) !important;
    border-style: dashed !important;
    color: var(--bscq-muted) !important;
    cursor: default;
}

/* Native validation state, so a rejected field is visible without waiting for a submit. */
.bscq-wrap .bscq-control input:user-invalid,
.bscq-wrap .bscq-control input.bscq-invalid {
    border-color: var(--bscq-danger);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* select — native arrow removed, one drawn chevron in its place.
   Specificity must exceed the shared control rule above, which sets the padding shorthand. */
.bscq-wrap .bscq-control.bscq-control-select select {
    padding-right: 40px !important;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
    cursor: pointer;
}
.bscq-control-select > .bscq-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    width: 18px;
    height: 18px;
    color: var(--bscq-muted);
    pointer-events: none;
    transform: translateY(-50%);
}

.bscq-control-icon > .bscq-icon {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--bscq-muted);
    pointer-events: none;
    transform: translateY(-50%);
}
/* Same reason as the select above: must outrank the shared padding shorthand. */
.bscq-wrap .bscq-control.bscq-control-icon input { padding-left: 40px !important; }

/* --------------------------------------------------- number field + stepper */

.bscq-control-number {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    min-height: var(--bscq-control-h);
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    transition: border-color var(--bscq-t), box-shadow var(--bscq-t);
}
.bscq-control-number:hover { border-color: var(--bscq-line-strong); }
.bscq-control-number:focus-within {
    border-color: var(--bscq-orange);
    box-shadow: var(--bscq-ring);
}
.bscq-control-number.bscq-invalid {
    border-color: var(--bscq-danger);
    box-shadow: 0 0 0 3px rgba(179, 38, 30, .14);
}

/* Owns the input inside the stepper group: the shared control rule above draws a border and
   radius that would double up against the group's own frame. !important for the same reason
   as that block — the theme's blanket input rule loads later. */
.bscq-wrap .bscq-control-number input[type="number"] {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0 !important;
    padding: 8px 6px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--bscq-ink) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.bscq-wrap .bscq-control-number input[type="number"]:focus {
    border: 0 !important;
    box-shadow: none !important;
}
.bscq-control-number input[type="number"]::-webkit-outer-spin-button,
.bscq-control-number input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.bscq-num-wrap {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
}

/* A field with a unit suffix mirrors that suffix's width on the left, so the number itself
   stays optically centred in the group rather than drifting left of the "ft". */
.bscq-has-unit .bscq-num-wrap::before {
    content: "";
    flex: 0 0 var(--bscq-unit-w, 30px);
}

.bscq-unit {
    flex: 0 0 auto;
    padding-right: 10px;
    color: var(--bscq-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/*
 * Stepper buttons. Every property a theme's blanket `button {}` rule touches is forced here —
 * without this the theme paints them as full brand-colour submit buttons, which is what made
 * the size row read as three orange blocks instead of a quiet numeric control.
 */
.bscq-wrap .bscq-step {
    display: flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 42px;
    min-width: 42px;
    min-height: 44px;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--bscq-surface) !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--bscq-navy) !important;
    font-size: 0 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--bscq-t), color var(--bscq-t);
}
.bscq-wrap .bscq-step:hover {
    background: #e7edf6 !important;
    color: var(--bscq-orange) !important;
}
.bscq-wrap .bscq-step:active { background: var(--bscq-line) !important; }
.bscq-wrap .bscq-step:disabled,
.bscq-wrap .bscq-step:disabled:hover {
    background: var(--bscq-surface) !important;
    color: #c3cede !important;
    cursor: not-allowed;
}
.bscq-wrap .bscq-step-down { border-right: 1px solid var(--bscq-line) !important; }
.bscq-wrap .bscq-step-up { border-left: 1px solid var(--bscq-line) !important; }
.bscq-step .bscq-icon { width: 18px; height: 18px; }

/* ---------------------------------------------------------------- size row */

/* Four fields since 2.1: Material moved out and the product's own name took its place in a
   row of its own above. Three when the quantity box is switched off for this product. */
.bscq-row-size {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) minmax(0, 1.1fr);
    gap: var(--bscq-s3);
    align-items: start;
}
.bscq-row-size.is-no-qty {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr);
}

.bscq-size-readout {
    grid-column: 1 / -1;
    margin: 2px 0 0;
    color: var(--bscq-muted);
    font-size: 12.5px;
}
.bscq-size-readout strong { color: var(--bscq-navy); font-weight: 700; }
.bscq-size-readout:empty { display: none; }

/* ------------------------------------------------- product + static fields */

.bscq-row-product { margin-bottom: var(--bscq-s4); }

/* Product name and quantity share a row where there is no size row for the stepper to join,
   rather than leaving the name stretched full width with a lone box underneath. */
.bscq-row-product.has-qty {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 220px);
    gap: var(--bscq-s3);
    align-items: start;
}

/*
 * A field the customer reads rather than fills in: the product name, and the specification
 * line. Styled as a calm filled box so it is obviously an answer, not an empty input waiting
 * for one. !important is needed for the same reason the other control rules use it — themes
 * ship blanket input rules that load after this stylesheet.
 */
.bscq-wrap .bscq-control input.bscq-static-field {
    background: var(--bscq-surface) !important;
    border-color: var(--bscq-line) !important;
    color: var(--bscq-navy) !important;
    font-weight: 700 !important;
    cursor: default;
}
.bscq-wrap .bscq-control input.bscq-static-field:hover { border-color: var(--bscq-line) !important; }

.bscq-field-spec { grid-column: 1 / -1; }

/* With the contact fields switched off the specification line is the only thing on the row. */
.bscq-artwork-contact-grid.is-spec-only { grid-template-columns: 1fr; }

.bscq-row-stand { margin-top: var(--bscq-s4); }

/* ------------------------------------------------------------ variations */

/*
 * Variable products only. One group per attribute, each a row of chips. A chip whose value has
 * no matching variation for the rest of the selection is removed from the row entirely (or
 * greyed out, if the product is set that way), so a customer cannot build a combination the
 * shop never created.
 */
.bscq-variations {
    display: grid;
    gap: var(--bscq-s4);
    margin-top: 0;
}

/*
 * Dropdown mode packs the groups two or three to a row, the way the rest of the form reads.
 * Button mode keeps one group per row, because a wrapped row of chips beside another wrapped
 * row of chips is impossible to scan.
 */
/* 180px lets a four-attribute product — size, sides, material, quantity — sit on one row in
   the main column, instead of stranding the quantity on a line of its own. */
.bscq-variations.is-dropdowns {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--bscq-s3) var(--bscq-s4);
}

/* One value left is not a choice: drop the chevron and match the read-only fields. */
.bscq-wrap .bscq-control-select.is-single select {
    background: var(--bscq-surface) !important;
    border-color: var(--bscq-line) !important;
    color: var(--bscq-navy) !important;
    font-weight: 700 !important;
    pointer-events: none;
    padding-right: 14px !important;
}
.bscq-control-select.is-single > .bscq-icon { display: none; }

.bscq-var-group { min-width: 0; }
.bscq-var-group[hidden] { display: none !important; }

.bscq-var-head { margin-bottom: 7px; }
.bscq-var-head .bscq-label { margin-bottom: 0; }

.bscq-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bscq-s2);
}

/* The quantity attribute is usually seven or eight numbers; an even grid reads as a price
   ladder, where a ragged flex row does not. */
.bscq-var-group.is-qty .bscq-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
}

.bscq-swatch {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    padding: 9px 18px;
    border: 1.5px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    color: var(--bscq-ink);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--bscq-t), background var(--bscq-t), color var(--bscq-t), box-shadow var(--bscq-t);
}
/* [hidden] loses to the display rule above, so it has to be restated. */
.bscq-swatch[hidden] { display: none !important; }

/* The radio stays in the tab order and keeps the group keyboard-navigable — it is only
   visually replaced by the chip. */
.bscq-swatch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.bscq-swatch:hover { border-color: var(--bscq-line-strong); background: var(--bscq-surface); }
.bscq-swatch:focus-within {
    border-color: var(--bscq-orange);
    box-shadow: var(--bscq-ring);
}
.bscq-swatch.is-active {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange-soft);
    color: var(--bscq-orange-dark);
    font-weight: 800;
}

/* "Show them greyed out" mode. Struck through as well as faded: colour alone is not a
   difference every customer can see. */
.bscq-swatch.is-unavailable {
    border-color: var(--bscq-line);
    background: var(--bscq-surface-2);
    color: var(--bscq-muted);
    opacity: .5;
    text-decoration: line-through;
    cursor: not-allowed;
}
.bscq-swatch.is-unavailable:hover {
    border-color: var(--bscq-line);
    background: var(--bscq-surface-2);
}

/* Variable products with no quantity attribute get one ordinary stepper, not a whole row. */
.bscq-row-qty {
    display: grid;
    grid-template-columns: minmax(0, 200px);
    margin-top: var(--bscq-s5);
}

/* ------------------------------------------------------------- finishing */

.bscq-finishing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--bscq-s2);
}

.bscq-finish-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 10px 10px 12px;
    border: 1.5px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--bscq-t), background var(--bscq-t);
}
.bscq-finish-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.bscq-finish-card:hover { border-color: var(--bscq-line-strong); background: var(--bscq-surface); }
.bscq-finish-card:focus-within {
    border-color: var(--bscq-orange);
    box-shadow: var(--bscq-ring);
}
.bscq-finish-card.is-active {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange-soft);
    box-shadow: 0 0 0 1px var(--bscq-orange) inset;
}

/* A fixed ratio keeps the row of cards level whatever sizes the shop uploaded. A landscape
   crop suits the subject — a banner edge is wider than it is tall — and keeps the card short
   enough that seven of them do not push the artwork section off the first screen. */
.bscq-finish-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    max-height: 108px;
    border-radius: var(--bscq-r-sm);
    background: var(--bscq-surface-2);
    color: var(--bscq-muted);
}
.bscq-finish-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.bscq-finish-placeholder { width: 34px; height: 34px; }

.bscq-finish-name {
    color: var(--bscq-navy);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}
.bscq-finish-price {
    color: var(--bscq-muted);
    font-size: 11.5px;
    font-weight: 600;
}
.bscq-finish-card.is-active .bscq-finish-name { color: var(--bscq-orange-dark); }
.bscq-finish-card.is-active .bscq-finish-price { color: #8a5a34; }

/* -------------------------------------------------------------- delivery */

.bscq-section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bscq-s2);
}

.bscq-delivery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--bscq-s2);
}

.bscq-delivery-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 74px;
    margin: 0;
    padding: 11px 12px;
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    cursor: pointer;
    transition: border-color var(--bscq-t), background var(--bscq-t);
}
.bscq-delivery-card:hover { border-color: var(--bscq-line-strong); background: var(--bscq-surface); }
.bscq-delivery-card.is-active {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange-soft);
}
/* The radio stays in the tab order — it is only visually replaced by the card. */
.bscq-delivery-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.bscq-delivery-card:focus-within {
    border-color: var(--bscq-orange);
    outline: none;
}
.bscq-delivery-title {
    color: var(--bscq-navy);
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.25;
}
.bscq-delivery-date {
    margin-top: 4px;
    color: var(--bscq-muted);
    font-size: 12px;
    font-weight: 600;
}
.bscq-delivery-card.is-active .bscq-delivery-date { color: var(--bscq-orange-dark); }
.bscq-delivery-price {
    margin-top: 3px;
    color: var(--bscq-muted);
    font-size: 11px;
}
.bscq-delivery-price.bscq-delivery-free { color: var(--bscq-success); }
.bscq-delivery-price .amount { font-weight: 700; }

/* -------------------------------------------------------------- countdown */

/* Timer and discount tiers share one row — each alone left a large empty half. */
.bscq-urgency {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--bscq-s3);
    align-items: stretch;
    margin-top: var(--bscq-s3);
}
.bscq-urgency-solo { grid-template-columns: 1fr; }

.bscq-countdown {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bscq-s3);
    padding: 12px var(--bscq-s4);
    border-radius: var(--bscq-r);
    background: linear-gradient(120deg, var(--bscq-navy), var(--bscq-navy-2));
    color: var(--bscq-white);
}
.bscq-countdown-copy {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.bscq-countdown-copy .bscq-icon { width: 20px; height: 20px; opacity: .8; }
.bscq-countdown-copy strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.25;
}
.bscq-countdown-copy small {
    display: block;
    font-size: 11.5px;
    line-height: 1.3;
    opacity: .7;
}

.bscq-clock {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}
.bscq-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 46px;
    padding: 5px 8px;
    border-radius: var(--bscq-r-sm);
    background: rgba(255, 255, 255, .1);
}
.bscq-time strong {
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.bscq-time small {
    margin-top: 2px;
    font-size: 9.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: .65;
}
.bscq-time-sep {
    padding-top: 7px;
    font-size: 18px;
    font-weight: 700;
    opacity: .4;
}

.bscq-countdown-date {
    text-align: right;
    white-space: nowrap;
}
.bscq-countdown-date small {
    display: block;
    font-size: 11px;
    opacity: .7;
}
.bscq-countdown-date strong {
    display: block;
    margin-top: 2px;
    color: #ffbc8c;
    font-size: 13.5px;
    font-weight: 800;
}

/* --------------------------------------------------------- discount strip */

.bscq-discount-strip {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 10px var(--bscq-s3);
    border: 1px solid #f5cfae;
    border-radius: var(--bscq-r);
    background: #fffaf5;
    font-size: 12px;
}
.bscq-discount-head {
    display: flex;
    align-items: center;
    gap: 6px;
}
.bscq-discount-head .bscq-icon { width: 15px; height: 15px; color: var(--bscq-orange); }
.bscq-discount-strip strong {
    color: var(--bscq-navy);
    font-size: 12.5px;
    font-weight: 800;
}
/* Auto-fit keeps the chips filling the panel instead of bunching at the left. */
.bscq-tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 5px;
}
.bscq-tier {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 5px 6px;
    border: 1px solid #f2ddc9;
    border-radius: var(--bscq-r-sm);
    background: var(--bscq-white);
    color: #7a5537;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    transition: background var(--bscq-t), color var(--bscq-t), border-color var(--bscq-t);
}
.bscq-tier b { font-size: 12.5px; font-weight: 800; }
.bscq-tier.is-active {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange);
    color: var(--bscq-white);
}

/* ----------------------------------------------------------- option row */

.bscq-options-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.3fr);
    gap: var(--bscq-s3);
    align-items: end;
}

.bscq-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.bscq-fieldset > legend.bscq-label {
    float: none;
    width: auto;
    padding: 0;
}

.bscq-segmented {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: hidden;
    min-height: var(--bscq-control-h);
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
}
.bscq-segmented label {
    position: relative;
    display: block;
    margin: 0;
    cursor: pointer;
}
.bscq-segmented input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.bscq-segmented span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 6px;
    color: var(--bscq-muted);
    font-size: 12.5px;
    font-weight: 700;
    text-align: center;
    transition: background var(--bscq-t), color var(--bscq-t);
}
.bscq-segmented label + label span { border-left: 1px solid var(--bscq-line); }
.bscq-segmented label:hover span { background: var(--bscq-surface); color: var(--bscq-navy); }
.bscq-segmented label.is-active span {
    background: var(--bscq-navy);
    color: var(--bscq-white);
}
/* Backdrop banner type uses the orange primary choice shown in the product mockup. */
.bscq-banner-type label.is-active span {
    background: var(--bscq-orange);
    color: var(--bscq-white);
}
.bscq-banner-type span { font-size: 14px; }
.bscq-segmented label:focus-within span {
    outline: 2px solid var(--bscq-orange);
    outline-offset: -2px;
}

/* -------------------------------------------------------------- artwork */

.bscq-artwork-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bscq-s2);
}

.bscq-art-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 44px;
    margin: 0;
    padding: 13px var(--bscq-s3);
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    cursor: pointer;
    transition: border-color var(--bscq-t), background var(--bscq-t);
}
.bscq-art-card:hover { border-color: var(--bscq-line-strong); background: var(--bscq-surface); }
.bscq-art-card input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}
.bscq-art-card:focus-within {
    border-color: var(--bscq-orange);
    outline: 2px solid var(--bscq-orange);
    outline-offset: 2px;
}
.bscq-art-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-bottom: 3px;
    border-radius: var(--bscq-r-sm);
    background: var(--bscq-orange-soft);
    color: var(--bscq-orange);
}
.bscq-art-card strong {
    color: var(--bscq-navy);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.25;
}
.bscq-art-card small {
    color: var(--bscq-muted);
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.35;
}
.bscq-art-card.is-active {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange-soft);
}
.bscq-art-card.is-active .bscq-art-icon { background: var(--bscq-orange); color: var(--bscq-white); }
.bscq-art-card.is-active small { color: #8a5a34; }

/* Three columns, not four: Banner Size left this row in 2.1 to become the full-width
   specification line below it, and the empty fourth column left a hole on the right. */
.bscq-artwork-contact-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bscq-s3);
    margin-top: var(--bscq-s4);
}

.bscq-artwork-panel {
    margin-top: var(--bscq-s3);
    padding: var(--bscq-s4);
    border: 1px solid var(--bscq-line);
    border-radius: var(--bscq-r);
    background: var(--bscq-surface);
}
/* [hidden] loses to any display rule, so restate it. */
.bscq-artwork-panel[hidden] { display: none !important; }

.bscq-panel-title {
    margin-bottom: var(--bscq-s2);
    color: var(--bscq-navy);
    font-size: 12.5px;
    font-weight: 800;
}

.bscq-upload-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 118px;
    margin: 0;
    padding: var(--bscq-s4);
    border: 1.5px dashed var(--bscq-line-strong);
    border-radius: var(--bscq-r);
    background: var(--bscq-white);
    cursor: pointer;
    text-align: center;
    transition: border-color var(--bscq-t), background var(--bscq-t);
}
.bscq-upload-box:hover { border-color: var(--bscq-orange); background: var(--bscq-orange-soft); }
.bscq-upload-box:focus-within {
    border-color: var(--bscq-orange);
    outline: 2px solid var(--bscq-orange);
    outline-offset: 2px;
}
.bscq-upload-box.is-dragging {
    border-color: var(--bscq-orange);
    background: var(--bscq-orange-soft);
    box-shadow: var(--bscq-ring);
}
.bscq-upload-box input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    overflow: hidden;
}
.bscq-upload-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin-bottom: var(--bscq-s2);
    border-radius: 50%;
    background: var(--bscq-orange-soft);
    color: var(--bscq-orange);
}
.bscq-upload-box strong {
    color: var(--bscq-navy);
    font-size: 13.5px;
    font-weight: 700;
}
.bscq-upload-meta {
    margin-top: 3px;
    color: var(--bscq-muted);
    font-size: 11.5px;
}

/* Empty state is intentional copy, not blank space — JS fills it either way. */
.bscq-file-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    max-width: 100%;
    margin-top: var(--bscq-s2);
}
.bscq-file-list:empty { display: none; }
.bscq-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 3px 9px;
    border: 1px solid var(--bscq-line);
    border-radius: 999px;
    background: var(--bscq-surface);
    color: var(--bscq-navy);
    font-size: 11px;
    font-weight: 600;
}
.bscq-file-chip .bscq-icon { width: 13px; height: 13px; color: var(--bscq-muted); }
.bscq-file-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bscq-file-empty { color: var(--bscq-muted); font-size: 11px; }

.bscq-file-link-field,
.bscq-notes-field { margin-top: var(--bscq-s3); }

.bscq-help {
    margin: var(--bscq-s2) 0 0;
    color: var(--bscq-muted);
    font-size: 11.5px;
    line-height: 1.45;
}

/* ------------------------------------------------------- quote sidebar */

/*
 * The form on the left, the price on the right, and the price stays put while the form is
 * filled in. Before 2.0 the total sat in a band at the very bottom, so the number the customer
 * cares about was off screen for most of the time they spent choosing.
 */
.bscq-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    gap: var(--bscq-s5);
    align-items: start;
    margin-top: var(--bscq-s4);
}

.bscq-main { min-width: 0; }

.bscq-aside {
    position: sticky;
    top: var(--bscq-sticky-top);
    min-width: 0;
    /* Sticky elements ignore the parent's padding, so the gap has to come from the element
       itself; without it the card sits flush against the top of the window while scrolling. */
    padding-top: 2px;
}

.bscq-quote {
    padding: var(--bscq-s4);
    border: 1px solid #ffd0ac;
    border-radius: var(--bscq-r-lg);
    background: linear-gradient(165deg, var(--bscq-orange-soft), var(--bscq-white) 55%);
    box-shadow: var(--bscq-shadow);
}

.bscq-quote-head {
    padding-bottom: var(--bscq-s3);
    border-bottom: 1px dashed #f0cdaf;
}
.bscq-total-label {
    display: block;
    color: var(--bscq-navy);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.bscq-total {
    display: block;
    margin: 2px 0 3px;
    color: var(--bscq-orange-dark);
    font-size: clamp(28px, 3.4vw, 36px);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.bscq-total-sub {
    display: block;
    color: var(--bscq-muted);
    font-size: 11.5px;
    font-weight: 600;
}
.bscq-total-sub:empty { display: none; }

/*
 * Shipping + VAT estimate. Deliberately quieter than the headline price: it is what checkout
 * will probably add, not what this line costs.
 */
.bscq-estimate {
    display: grid;
    gap: 4px;
    padding: var(--bscq-s3) 0;
    border-bottom: 1px dashed #f0cdaf;
    font-size: 12.5px;
}
.bscq-estimate:empty { display: none; }
.bscq-estimate-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bscq-s3);
    color: var(--bscq-muted);
}
.bscq-estimate-row span:last-child {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.bscq-estimate-row.is-total {
    margin-top: 2px;
    padding-top: 5px;
    border-top: 1px solid #f0cdaf;
    color: var(--bscq-navy);
    font-weight: 700;
}
.bscq-estimate-note {
    display: block;
    margin-top: 2px;
    color: var(--bscq-muted);
    font-size: 10.5px;
    line-height: 1.4;
}

/* What the customer has configured, restated beside the price so it can be checked without
   scrolling back up the form. */
.bscq-selection {
    display: grid;
    gap: 5px;
    padding: var(--bscq-s3) 0;
    border-bottom: 1px dashed #f0cdaf;
}
.bscq-selection:empty { display: none; }
.bscq-selection-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bscq-s3);
    font-size: 12.5px;
}
.bscq-selection-key {
    color: var(--bscq-muted);
    font-weight: 600;
}
.bscq-selection-value {
    color: var(--bscq-navy);
    font-weight: 700;
    text-align: right;
}

/* Visible since 2.0 — in the sidebar there is room for it, and a live breakdown is the whole
   argument for a calculator over a flat price. */
.bscq-summary-lines {
    display: grid;
    gap: 6px;
    padding: var(--bscq-s3) 0;
    font-size: 12.5px;
}
.bscq-summary-lines:empty { display: none; }
.bscq-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--bscq-s3);
    color: var(--bscq-muted);
}
.bscq-summary-line span:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}
.bscq-summary-line span:last-child {
    color: var(--bscq-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.bscq-summary-line.is-discount span { color: var(--bscq-success); }
.bscq-summary-line.is-note {
    padding-top: 4px;
    border-top: 1px dashed #ecd3bd;
    color: var(--bscq-orange-dark);
    font-weight: 600;
}
.bscq-summary-note {
    color: var(--bscq-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.bscq-quote-note {
    margin: var(--bscq-s3) 0 0;
    color: var(--bscq-muted);
    font-size: 11px;
    line-height: 1.4;
    text-align: center;
}

/* --------------------------------------------------------------- errors */

.bscq-form-error {
    display: flex;
    align-items: flex-start;
    gap: var(--bscq-s2);
    margin-top: var(--bscq-s3);
    padding: 11px 13px;
    border: 1px solid #eec2be;
    border-radius: var(--bscq-r);
    background: var(--bscq-danger-bg);
    color: var(--bscq-danger);
    font-size: 13px;
    font-weight: 600;
}
.bscq-form-error[hidden] { display: none !important; }
.bscq-form-error .bscq-icon { width: 18px; height: 18px; margin-top: 1px; }

/* ---------------------------------------------------------- add to cart */

.bscq-cart-form { width: 100%; margin: 0; }
/* Lives inside the price panel, directly under the total it belongs to. */
.bscq-cart-actions { margin: var(--bscq-s3) 0 0; }

/*
 * Sole owner of the calculator's Add to cart button. !important is unavoidable: WooCommerce
 * themes style .single_add_to_cart_button from their own stylesheet with equal or higher weight.
 */
.bscq-wrap ~ .bscq-cart-actions .bscq-add-to-cart,
.bscq-cart-actions .bscq-add-to-cart,
.bscq-sticky .bscq-add-to-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    min-height: 54px;
    padding: 14px 22px !important;
	margin-bottom: 8px !important;
    border: 0 !important;
    border-radius: var(--bscq-r) !important;
    background: var(--bscq-orange) !important;
    box-shadow: 0 6px 18px rgba(255, 106, 19, .22);
    color: var(--bscq-white) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    cursor: pointer;
    transition: background var(--bscq-t), box-shadow var(--bscq-t), transform var(--bscq-t);
}
/*
 * Relocated cart form (variable products, or a template that swallowed our own form). The
 * theme's button is moved into the slot, so it must pick up the same styling even though it
 * does not carry the .bscq-add-to-cart class.
 */
.bscq-cart-slot[hidden] { display: none !important; }
.bscq-cart-slot form.cart { width: 100%; margin: 0; }
.bscq-cart-slot .quantity { display: none !important; }
.bscq-cart-slot .single_add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 14px 22px !important;
    border: 0 !important;
    border-radius: var(--bscq-r) !important;
    background: var(--bscq-orange) !important;
    box-shadow: 0 6px 18px rgba(255, 106, 19, .22);
    color: var(--bscq-white) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: none !important;
    cursor: pointer;
}
.bscq-cart-slot .single_add_to_cart_button:hover { background: var(--bscq-orange-dark) !important; }
/* The safety-valve path can relocate a form while bscq-owns-cart is on the body; the blanket
   duplicate-hiding rule above must not swallow the one button we just moved into the slot. */
body.bscq-owns-cart [data-bscq-cart-slot],
body.bscq-owns-cart [data-bscq-cart-slot] form.cart { display: block !important; }
body.bscq-owns-cart [data-bscq-cart-slot][hidden] { display: none !important; }
body.bscq-owns-cart [data-bscq-cart-slot] .single_add_to_cart_button { display: flex !important; }

.bscq-cart-actions .bscq-add-to-cart:hover,
.bscq-sticky .bscq-add-to-cart:hover {
    background: var(--bscq-orange-dark) !important;
/*     box-shadow: 0 9px 22px rgba(255, 106, 19, .3); */
    transform: translateY(-1px);
}
.bscq-cart-actions .bscq-add-to-cart:active { transform: translateY(0); }
/* .is-loading, never [disabled] — a disabled submit control is dropped from the POST. */
.bscq-cart-actions .bscq-add-to-cart[disabled],
.bscq-cart-actions .bscq-add-to-cart.is-loading,
.bscq-sticky .bscq-add-to-cart.is-loading {
    background: var(--bscq-line-strong) !important;
    box-shadow: none;
    cursor: progress;
    pointer-events: none;
    transform: none;
}
.bscq-add-to-cart .bscq-icon { width: 19px; height: 19px; }

/* Mobile sticky bar — revealed by JS only when the real button scrolls out of view. */
.bscq-sticky {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 998;
    display: flex;
    align-items: center;
    gap: var(--bscq-s3);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--bscq-line);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -6px 20px rgba(15, 43, 77, .12);
}
.bscq-sticky[hidden] { display: none !important; }
.bscq-sticky-price { flex: 0 0 auto; line-height: 1.15; }
.bscq-sticky-price small {
    display: block;
    color: var(--bscq-muted);
    font-size: 10.5px;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.bscq-sticky-price strong {
    display: block;
    color: var(--bscq-navy);
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.bscq-sticky .bscq-sticky-cta { flex: 1 1 auto; min-height: 48px; }

/* The sticky bar is a small-screen affordance only. */
@media (min-width: 861px) {
    .bscq-sticky { display: none !important; }
}

/* ---------------------------------------------------------- responsive */

/* The price panel takes 350px out of the row, so the size fields run out of room well before
   the viewport does. This breakpoint is deliberately wider than the ones below it. */
@media (max-width: 1400px) {
    .bscq-row-size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
    .bscq-row-size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bscq-delivery-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .bscq-options-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bscq-artwork-contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Below this the timer needs the full row for its three clock boxes. */
    .bscq-urgency { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .bscq-wrap { padding: var(--bscq-s4); }
    .bscq-countdown {
        flex-wrap: wrap;
        gap: var(--bscq-s3);
    }
    .bscq-countdown-copy { flex: 1 1 100%; }
    .bscq-clock { flex: 0 0 auto; }
    .bscq-countdown-date { flex: 1 1 auto; }
    /* Stacked cards would be three tall blocks; icon + title on one line with the description
       indented under it keeps each option to two compact rows. */
    .bscq-artwork-options { grid-template-columns: 1fr; }
    .bscq-art-card {
        flex-flow: row wrap;
        align-items: center;
        gap: 0 var(--bscq-s3);
    }
    .bscq-art-icon { margin-bottom: 0; }
    .bscq-art-card strong { flex: 1 1 auto; }
    .bscq-art-card small { flex: 1 1 100%; padding-left: calc(32px + var(--bscq-s3)); }
    /* Sticky bar overlays the bottom of the page; keep the card clear of it. */
    .bscq-wrap { margin-bottom: 88px; }
}

/* One column below this: a 300px price panel beside a form leaves neither enough room, and
   the sticky bar already repeats the total once the panel scrolls away. */
@media (max-width: 980px) {
    .bscq-layout {
        grid-template-columns: 1fr;
        gap: var(--bscq-s4);
    }
    .bscq-aside { position: static; }
}

@media (max-width: 600px) {
    .bscq-wrap {
        margin-top: var(--bscq-s4);
        padding: var(--bscq-s3);
        border-radius: var(--bscq-r);
    }
    .bscq-head {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--bscq-s2);
    }
    .bscq-row-size { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bscq-delivery-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .bscq-options-grid { grid-template-columns: 1fr; }
    .bscq-artwork-contact-grid { grid-template-columns: 1fr; }
    .bscq-finishing-grid { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
    .bscq-var-group.is-qty .bscq-swatches { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
    .bscq-swatch { padding: 9px 13px; font-size: 13px; }
    .bscq-time { min-width: 42px; }
    .bscq-countdown-date { text-align: left; }

    /* Two steppers plus an in-field unit leave too few pixels for the number itself in a
       half-width column. The Unit select sits directly above in the same row, so the suffix
       is redundant here — drop it and give the digits the space. The steppers keep their
       full 44px target. */
    .bscq-unit { display: none; }
    .bscq-has-unit .bscq-num-wrap::before { content: none; }
}

/* Small phones: two 42px steppers in a half-width column left only ~44px for the number,
   which clips a value like 1000.5. Trim the buttons and the input padding to buy it back. */
@media (max-width: 430px) {
    .bscq-wrap .bscq-step { width: 36px; min-width: 36px; }
    .bscq-wrap .bscq-control-number input[type="number"] { padding: 8px 2px !important; }
}

/* Only the narrowest phones fall back to a single column — at 375px, width and height
   side by side is far more usable than six stacked full-width rows. Below ~355px there is
   no longer room for both, so everything goes to one column. */
@media (max-width: 355px) {
    .bscq-row-size,
    .bscq-finishing-grid,
    .bscq-delivery-grid { grid-template-columns: 1fr; }
    .bscq-row-size > .bscq-field { grid-column: span 1 !important; }
    .bscq-step { width: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    .bscq-wrap *,
    .bscq-cart-actions *,
    .bscq-sticky * {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .bscq-cart-actions .bscq-add-to-cart:hover,
    .bscq-sticky .bscq-add-to-cart:hover { transform: none; }
}

@media print {
    .bscq-sticky,
    .bscq-cart-actions { display: none !important; }
}