/* Exclusive product-page purchase mode.
 * WooCommerce's real variation/quantity form is rendered again inside the Quick
 * COD popup, so the original product-summary purchase form must never compete
 * with the sticky COD CTA. Keep this deliberately scoped to enabled product
 * pages and to the product summary; related-product buttons are untouched. */
body.ssqc-exclusive-product.single-product div.product .summary form.cart,
body.ssqc-exclusive-product.single-product div.product .summary .wp-block-woocommerce-add-to-cart-form,
body.ssqc-exclusive-product.single-product div.product .summary .wp-block-woocommerce-add-to-cart-with-options,
body.ssqc-exclusive-product.single-product div.product .summary .single_add_to_cart_button {
    display: none !important;
}

/* Extra safety for themes that clone only the WooCommerce purchase button into
 * a product-page sticky/summary UI. The Quick COD submit button uses its own
 * class, so hiding the native WooCommerce button globally on this product page
 * cannot hide the COD action. */
body.ssqc-exclusive-product.single-product .single_add_to_cart_button {
    display: none !important;
}

.ssqc-card {
    --ssqc-border: #e3e7ec;
    --ssqc-text: #111827;
    --ssqc-muted: #6b7280;
    --ssqc-bg: #ffffff;
    --ssqc-soft: #fafbfc;
    --ssqc-accent: var(--ast-global-color-0, #111111);
    box-sizing: border-box;
    clear: both;
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 26px 0 22px;
    padding: 20px;
    border: 1px solid var(--ssqc-border);
    border-radius: 14px;
    background: var(--ssqc-bg);
    color: var(--ssqc-text);
    box-shadow: 0 7px 22px rgba(0, 0, 0, .03);
    font-family: inherit;
}

.ssqc-card *,
.ssqc-card *::before,
.ssqc-card *::after { box-sizing: border-box; }
.ssqc-card [hidden] { display: none !important; }
.ssqc-card[dir="rtl"],
html[dir="rtl"] .ssqc-card,
body.rtl .ssqc-card { text-align: right; }
.ssqc-card[dir="ltr"] { text-align: left; }

.ssqc-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.ssqc-head-title { min-width: 0; }
.ssqc-head-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
}
.ssqc-title {
    margin: 0 !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
}
.ssqc-cod-pill {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #f4f5f7;
    color: #374151;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.ssqc-form { margin: 0; }
.ssqc-provider-status {
    margin: -2px 0 14px;
    padding: 9px 11px;
    border: 1px solid #fde68a;
    border-radius: 9px;
    background: #fffbeb;
    color: #92400e;
    font-size: 12.5px;
    line-height: 1.4;
}

/* Desktop: customer details on the left. Product controls and totals share the
 * right column as two visually joined sections. The three areas are static in
 * the DOM, so mobile/RTL never needs risky JavaScript re-parenting. */
.ssqc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, .95fr);
    grid-template-areas:
        "main purchase"
        "main summary";
    column-gap: 18px;
    row-gap: 0;
    align-items: start;
}
.ssqc-main-column { grid-area: main; }
.ssqc-main-column,
.ssqc-customer-fields { min-width: 0; }

.ssqc-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "name phone"
        "city city"
        "address address";
    gap: 11px 13px;
    align-content: start;
}
.ssqc-name-field { grid-area: name; }
.ssqc-phone-field { grid-area: phone; }
.ssqc-city-field { grid-area: city; }
.ssqc-district-field { grid-area: district; }
.ssqc-address-field { grid-area: address; }
.ssqc-card.ssqc-has-districts .ssqc-field-grid {
    grid-template-areas:
        "name phone"
        "city district"
        "address address";
}
.ssqc-district-field[hidden] { display: none !important; }

.ssqc-field {
    display: block;
    min-width: 0;
    margin: 0;
    color: var(--ssqc-text);
    font-size: 12.75px;
    font-weight: 600;
}
.ssqc-field > span { display: block; margin-bottom: 5px; }
.ssqc-field input,
.ssqc-field textarea,
.ssqc-field select {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid #d3d8df !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    color: #111827 !important;
    font: inherit !important;
    font-size: 14.5px !important;
    line-height: 1.4 !important;
    box-shadow: none !important;
    outline: none;
}
.ssqc-field textarea {
    min-height: 76px;
    height: 76px;
    resize: none;
    overflow-y: auto;
}
.ssqc-field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    padding-inline-end: 38px !important;
}
.ssqc-card[dir="rtl"] .ssqc-field select,
html[dir="rtl"] .ssqc-card .ssqc-field select,
body.rtl .ssqc-card .ssqc-field select {
    background-position: left 12px center !important;
    padding-inline-start: 38px !important;
    padding-inline-end: 12px !important;
}
.ssqc-field select:invalid { color: #6b7280 !important; }
.ssqc-field select:disabled {
    background-color: #f7f8fa !important;
    color: #a0a7b2 !important;
    cursor: not-allowed;
}
.ssqc-field input:focus,
.ssqc-field textarea:focus,
.ssqc-field select:focus {
    border-color: #111827 !important;
    box-shadow: 0 0 0 2px rgba(17, 24, 39, .07) !important;
}
.ssqc-field input[name="phone"] { direction: ltr; text-align: left; }

/* Right column sections. On desktop they read as one continuous order card. */
.ssqc-purchase-controls {
    grid-area: purchase;
    min-width: 0;
    margin: 0;
    padding: 15px 15px 13px;
    border: 1px solid #e5e9ee;
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--ssqc-soft);
}
.ssqc-checkout-panel {
    grid-area: summary;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 13px 15px 15px;
    border: 1px solid #e5e9ee;
    border-top-color: #e2e6eb;
    border-radius: 0 0 12px 12px;
    background: var(--ssqc-soft);
}

/* Row 1: dynamic square image + deal price. Row 2: WooCommerce-native
 * variations and quantity use the full width underneath. Keep the preview row
 * physically LTR so the image stays on the left in both French and Arabic. */
.ssqc-product-choice {
    display: block;
    width: 100%;
    min-width: 0;
}
.ssqc-product-top {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    width: 100%;
    min-width: 0;
    direction: ltr;
}
.ssqc-product-thumb {
    width: 82px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e2e6eb;
    border-radius: 10px;
    background: #fff;
}
.ssqc-product-thumb img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover;
    object-position: center;
    transition: opacity .16s ease, transform .2s ease;
}
.ssqc-product-thumb.is-changing img { opacity: .55; transform: scale(.985); }
.ssqc-card[dir="rtl"] .ssqc-deal-box,
html[dir="rtl"] .ssqc-card .ssqc-deal-box,
body.rtl .ssqc-card .ssqc-deal-box { direction: rtl; text-align: right; }
.ssqc-native-cart {
    width: 100%;
    min-width: 0;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e2e6eb;
}

/* Compact unit-price/deal presentation. WooCommerce remains the price source of truth. */
.ssqc-deal-box {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.ssqc-deal-label {
    margin-bottom: 4px;
    color: #4b5563;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.25;
}
.ssqc-price-line {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px 9px;
    min-height: 30px;
}
.ssqc-regular-price {
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    text-decoration-thickness: 1.5px;
}
.ssqc-unit-price {
    color: var(--ssqc-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.02em;
    white-space: nowrap;
}
.ssqc-deal-box.is-sale .ssqc-unit-price { color: var(--ssqc-accent); }
.ssqc-discount-badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 7px;
    border: 1px solid #fecdd3;
    border-radius: 999px;
    background: #fff1f2;
    color: #be123c;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.ssqc-savings {
    margin-top: 4px;
    color: #596273;
    font-size: 11.5px;
    line-height: 1.3;
}
.ssqc-savings strong {
    color: #166534;
    font-weight: 750;
    white-space: nowrap;
}
.ssqc-price-prompt {
    margin-top: 2px;
    color: var(--ssqc-muted);
    font-size: 11.5px;
    line-height: 1.35;
}
.ssqc-deal-box.is-awaiting-variation .ssqc-price-line { min-height: 24px; }
.ssqc-deal-box.is-awaiting-variation .ssqc-unit-price { color: #9ca3af; font-size: 20px; }
.ssqc-order-summary { margin: 0; }
.ssqc-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 27px;
    font-size: 12.75px;
}
.ssqc-summary-row strong {
    font-weight: 700;
    text-align: end;
    white-space: nowrap;
}
.ssqc-order-summary [hidden] { display: none !important; }
.ssqc-product-value-row .ssqc-product-value {
    color: #6b7280;
    font-weight: 650;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.ssqc-discount-row { color: #9f1239; }
.ssqc-discount-row .ssqc-order-discount {
    color: #be123c;
    font-weight: 800;
}
.ssqc-order-savings {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: #166534;
    font-size: 11.75px;
    font-weight: 650;
    line-height: 1.3;
}
.ssqc-order-savings-check {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-weight: 900;
}
.ssqc-order-savings strong {
    color: #166534;
    font-weight: 800;
    white-space: nowrap;
}
.ssqc-shipping-fee.is-pending,
.ssqc-shipping-fee.is-loading {
    max-width: 62%;
    color: var(--ssqc-muted);
    font-weight: 600;
    white-space: normal;
    line-height: 1.25;
}
.ssqc-shipping-fee.is-unavailable { color: #991b1b; }
.ssqc-total-row {
    margin-top: 8px;
    padding-top: 11px;
    border-top: 1px solid #dfe4ea;
    font-size: 14px;
}
.ssqc-total-row > span { font-weight: 700; }
.ssqc-total { font-size: 20px; }
.ssqc-shipping-details {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 3px 6px;
    margin: 3px 0 1px;
    color: var(--ssqc-muted);
    font-size: 11.25px;
    line-height: 1.3;
}
.ssqc-shipping-details[hidden] { display: none !important; }
.ssqc-shipping-location { color: #374151; font-weight: 600; }
.ssqc-shipping-meta-separator { color: #9ca3af; }
.ssqc-shipping-eta { margin: 0; white-space: nowrap; }
.ssqc-shipping-eta strong { color: #374151; font-weight: 600; }

.ssqc-notice {
    min-height: 0;
    margin: 10px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
}
.ssqc-notice:empty { display: none; }
.ssqc-notice.is-error {
    padding: 8px 9px;
    border-radius: 7px;
    background: #fef2f2;
    color: #991b1b;
}

.ssqc-submit {
    display: block !important;
    width: 100% !important;
    min-height: 49px !important;
    margin: 13px 0 0 !important;
    padding: 12px 15px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: var(--ssqc-accent) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    letter-spacing: .01em;
    text-align: center !important;
    cursor: pointer;
    box-shadow: none !important;
}
.ssqc-submit:hover { opacity: .92; }
.ssqc-submit:disabled { opacity: .55; cursor: not-allowed; }
.ssqc-under-button {
    margin-top: 7px;
    color: var(--ssqc-muted);
    font-size: 11.5px;
    text-align: center;
}

.ssqc-success { padding: 18px 4px; text-align: center; outline: none; }
.ssqc-success-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #ecfdf5;
    color: #047857;
    font-size: 28px;
    line-height: 52px;
    font-weight: 800;
}
.ssqc-success h3 { margin: 0 0 8px !important; font-size: 21px !important; }
.ssqc-success p { margin: 6px 0 !important; }
.ssqc-order-number { font-size: 15px; }
.ssqc-honeypot {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* WooCommerce's actual cart/variation engine is rendered inside Quick COD. */
.ssqc-native-cart form.cart {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
.ssqc-native-cart .single_add_to_cart_button { display: none !important; }

/* Compact variable-product controls. The reset link and duplicated variation price
 * are intentionally hidden: the customer can simply choose another option, while
 * Quick COD owns the visible subtotal/total display. */
.ssqc-native-cart table.variations {
    display: block;
    width: 100% !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.ssqc-native-cart table.variations tbody,
.ssqc-native-cart table.variations tr,
.ssqc-native-cart table.variations th,
.ssqc-native-cart table.variations td {
    display: block;
    width: 100% !important;
    border: 0 !important;
    background: transparent !important;
}
.ssqc-native-cart table.variations tr { margin: 0 0 10px; }
.ssqc-native-cart table.variations tr:last-child { margin-bottom: 8px; }
.ssqc-native-cart table.variations th,
.ssqc-native-cart table.variations td { padding: 0 !important; }
.ssqc-native-cart table.variations th.label {
    margin: 0 0 5px;
    color: var(--ssqc-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    text-align: start;
}
.ssqc-native-cart table.variations td.value { min-width: 0; }
.ssqc-native-cart table.variations select {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 8px 36px 8px 11px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 9px !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: right 11px center !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    box-shadow: none !important;
    font-size: 13px !important;
}
.ssqc-card[dir="rtl"] .ssqc-native-cart table.variations select,
html[dir="rtl"] .ssqc-card .ssqc-native-cart table.variations select,
body.rtl .ssqc-card .ssqc-native-cart table.variations select {
    padding: 8px 11px 8px 36px !important;
    background-position: left 11px center !important;
}
.ssqc-native-cart .reset_variations { display: none !important; }
.ssqc-native-cart .single_variation { display: none !important; }

/* Keep swatch rows tidy even when the swatches plugin adds wrappers/margins. */
.ssqc-native-cart table.variations td.value > * { max-width: 100%; }
.ssqc-native-cart table.variations td.value ul,
.ssqc-native-cart table.variations td.value ol {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ssqc-native-cart .cfvsw-swatches-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Same WooCommerce quantity input, enhanced only with smooth +/- buttons. */
.ssqc-native-cart form.cart:not(.variations_form),
.ssqc-native-cart .woocommerce-variation-add-to-cart {
    display: flex !important;
    align-items: flex-start !important;
    flex-wrap: wrap;
    gap: 5px 8px;
    margin: 0 !important;
}
.ssqc-native-cart .ssqc-native-qty-label {
    display: block;
    order: 0;
    flex: 0 0 100%;
    min-height: 0;
    margin: 0 0 1px;
    color: var(--ssqc-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}
.ssqc-card[dir="rtl"] .ssqc-native-cart .ssqc-native-qty-label,
html[dir="rtl"] .ssqc-card .ssqc-native-cart .ssqc-native-qty-label,
body.rtl .ssqc-card .ssqc-native-cart .ssqc-native-qty-label { margin: 0 0 1px; }
.ssqc-native-cart .quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    order: 1;
    width: auto !important;
    min-height: 42px;
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid #d1d5db;
    border-radius: 9px;
    background: #fff;
    direction: ltr;
}
.ssqc-native-cart .quantity .qty {
    width: 48px !important;
    min-width: 48px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 5px !important;
    border: 0 !important;
    border-inline: 1px solid #e5e7eb !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 42px !important;
    text-align: center !important;
    appearance: textfield;
    -moz-appearance: textfield;
}
.ssqc-native-cart .quantity .qty::-webkit-outer-spin-button,
.ssqc-native-cart .quantity .qty::-webkit-inner-spin-button {
    margin: 0;
    -webkit-appearance: none;
}
.ssqc-qty-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 38px !important;
    min-width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: none !important;
    font-family: inherit !important;
    font-size: 19px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    cursor: pointer;
    transition: background-color .15s ease, transform .08s ease, opacity .15s ease;
}
.ssqc-qty-button:hover:not(:disabled) { background: #f1f3f5 !important; }
.ssqc-qty-button:active:not(:disabled) { transform: scale(.94); }
.ssqc-qty-button:disabled { opacity: .28; cursor: not-allowed; }

/* Mobile order is static: product choice -> customer details -> totals. */

/* RTL/mobile resilience: keep long Arabic labels inside their columns, isolate
 * numeric controls, and use the same chevron asset as French. */
.ssqc-card[dir="rtl"] .ssqc-title,
.ssqc-card[dir="rtl"] .ssqc-field,
.ssqc-card[dir="rtl"] .ssqc-summary-row,
.ssqc-card[dir="rtl"] .ssqc-shipping-details,
html[dir="rtl"] .ssqc-card .ssqc-title,
html[dir="rtl"] .ssqc-card .ssqc-field,
html[dir="rtl"] .ssqc-card .ssqc-summary-row,
html[dir="rtl"] .ssqc-card .ssqc-shipping-details { min-width: 0; }
.ssqc-card[dir="rtl"] .ssqc-price-line,
html[dir="rtl"] .ssqc-card .ssqc-price-line { justify-content: flex-start; }
.ssqc-card[dir="rtl"] .ssqc-native-cart .quantity,
html[dir="rtl"] .ssqc-card .ssqc-native-cart .quantity { direction: ltr; }
.ssqc-card[dir="rtl"] .ssqc-qty-button,
.ssqc-card[dir="rtl"] .ssqc-native-cart .quantity .qty,
html[dir="rtl"] .ssqc-card .ssqc-qty-button,
html[dir="rtl"] .ssqc-card .ssqc-native-cart .quantity .qty { direction: ltr; }
.ssqc-card[dir="rtl"] .ssqc-shipping-fee.is-pending,
.ssqc-card[dir="rtl"] .ssqc-shipping-fee.is-loading,
html[dir="rtl"] .ssqc-card .ssqc-shipping-fee.is-pending,
html[dir="rtl"] .ssqc-card .ssqc-shipping-fee.is-loading { text-align: left; }

@media (max-width: 921px) {
    .ssqc-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .ssqc-purchase-controls {
        order: 0;
        width: 100%;
        max-width: none;
        align-self: stretch;
        padding: 12px;
        border: 1px solid #e5e9ee;
        border-radius: 11px;
        background: var(--ssqc-soft);
    }
    .ssqc-main-column {
        order: 1;
        width: 100%;
        max-width: none;
        align-self: stretch;
    }
    .ssqc-checkout-panel {
        order: 2;
        width: 100%;
        max-width: none;
        align-self: stretch;
        padding: 12px;
        border: 1px solid #e5e9ee;
        border-radius: 11px;
        background: var(--ssqc-soft);
    }
}

@media (max-width: 600px) {
    .ssqc-card {
        margin: 16px 0 14px;
        padding: 12px;
        border-radius: 12px;
    }
    .ssqc-head { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-bottom: 10px; }
    .ssqc-head-actions { gap: 6px; }
    .ssqc-title { font-size: 18.5px !important; line-height: 1.18 !important; }
    .ssqc-cod-pill { font-size: 9.75px; padding: 5px 7px; }
    .ssqc-modal-close { width: 34px; min-width: 34px; height: 34px; min-height: 34px; }
    .ssqc-modal-close svg { width: 17px; height: 17px; }
    .ssqc-field-grid,
    .ssqc-card.ssqc-has-districts .ssqc-field-grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "name"
            "phone"
            "city"
            "district"
            "address";
        gap: 9px;
    }
    .ssqc-field input,
    .ssqc-field textarea,
    .ssqc-field select { font-size: 16px !important; }
    .ssqc-field textarea { min-height: 64px; height: 64px; }
    .ssqc-product-top { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; }
    .ssqc-product-thumb { width: 76px; border-radius: 9px; }
    .ssqc-unit-price { font-size: 22px; }
    .ssqc-native-cart { margin-top: 10px; padding-top: 10px; }
    .ssqc-submit { min-height: 52px !important; font-size: 14.5px !important; }
    .ssqc-total { font-size: 19px; }
    .ssqc-native-cart table.variations th.label { font-size: 12.5px; }
    .ssqc-native-cart table.variations select { font-size: 16px !important; }
}

@media (max-width: 380px) {
    .ssqc-head { align-items: start; }
    .ssqc-head-actions { gap: 5px; }
    .ssqc-title { font-size: 17.5px !important; }
    .ssqc-cod-pill { font-size: 9px; padding: 4px 6px; }
    .ssqc-modal-close { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
    .ssqc-product-top { grid-template-columns: 68px minmax(0, 1fr); gap: 9px; }
    .ssqc-product-thumb { width: 68px; }
    .ssqc-summary-row { gap: 8px; }
    .ssqc-shipping-fee.is-pending,
    .ssqc-shipping-fee.is-loading { max-width: 58%; }
}

/* Sticky launcher and modal portal. */
.ssqc-launcher-wrap,
.ssqc-modal-root {
    --ssqc-modal-accent: var(--ast-global-color-0, #e91b3a);
}
.ssqc-modal-root {
    box-sizing: border-box;
    clear: both;
    width: 100%;
    max-width: 100%;
}
.ssqc-modal-root *,
.ssqc-modal-root *::before,
.ssqc-modal-root *::after { box-sizing: border-box; }

/* Inline launcher for integration inside a custom single-product layout. */
.ssqc-inline-order-wrap {
    display: block;
    width: 100%;
    margin: 0;
}
.ssqc-inline-order:not(.ssqc-parent-styled) {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 18px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: var(--ssqc-modal-accent, #e91b3a) !important;
    color: #fff !important;
    font: inherit !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.ssqc-inline-order:not(.ssqc-parent-styled):hover,
.ssqc-inline-order:not(.ssqc-parent-styled):focus { color: #fff !important; }

/* Sticky launcher: visible immediately on every eligible product page. */
.ssqc-sticky-order-wrap {
    position: fixed !important;
    z-index: 999990 !important;
    left: 50%;
    right: auto;
    bottom: max(20px, env(safe-area-inset-bottom));
    display: block !important;
    width: min(340px, calc(100vw - 32px));
    margin: 0 !important;
    padding: 0;
    pointer-events: none;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(-50%);
}
.ssqc-sticky-order {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 56px;
    margin: 0 !important;
    padding: 12px 20px !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: var(--ssqc-modal-accent, #e91b3a) !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(17, 24, 39, .22) !important;
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: auto;
    visibility: visible !important;
    opacity: 1 !important;
    -webkit-tap-highlight-color: transparent;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.ssqc-sticky-order:hover {
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(17, 24, 39, .27) !important;
}
.ssqc-sticky-order:active { transform: translateY(0) scale(.985); }
.ssqc-sticky-order:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .2) !important;
    outline-offset: 3px;
}
.ssqc-order-complete .ssqc-sticky-order-wrap,
body.ssqc-modal-open .ssqc-sticky-order-wrap {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Modal is hidden by default but remains mounted so WooCommerce variation
 * controls keep their native DOM and event bindings. */
.ssqc-modal {
    position: fixed !important;
    z-index: 999999 !important;
    inset: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    overscroll-behavior: contain;
    transition: opacity .18s ease, visibility 0s linear .18s;
}
.ssqc-modal.is-open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transition-delay: 0s;
}
.ssqc-modal-backdrop {
    position: absolute;
    inset: 0;
    display: block !important;
    width: 100%;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: rgba(10, 15, 25, .56);
    box-shadow: none !important;
    cursor: pointer;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    text-decoration: none !important;
}
.ssqc-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(1080px, 100%);
    max-width: 1080px;
    max-height: min(92vh, 920px);
    max-height: min(92dvh, 920px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(0, 0, 0, .26);
    outline: none;
    transform: translateY(12px) scale(.99);
    opacity: .98;
    transition: transform .2s ease, opacity .2s ease;
    -webkit-overflow-scrolling: touch;
}
.ssqc-modal.is-open .ssqc-modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}
.ssqc-modal-close {
    position: relative;
    z-index: 1;
    display: inline-flex !important;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #111827 !important;
    box-shadow: 0 2px 8px rgba(17, 24, 39, .07) !important;
    line-height: 1 !important;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.ssqc-modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}
.ssqc-modal-close:hover { color: #111827 !important; background: #f6f7f9 !important; }
.ssqc-modal-close:focus-visible {
    outline: 3px solid rgba(17, 24, 39, .14) !important;
    outline-offset: 2px;
}
.ssqc-modal-close.is-disabled,
.ssqc-modal.is-submitting .ssqc-modal-close {
    opacity: .45;
    cursor: wait;
    pointer-events: none;
}
.ssqc-modal .ssqc-card {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding-top: 24px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
.ssqc-modal .ssqc-head {
    position: sticky;
    top: 0;
    z-index: 15;
    padding: 2px 0 10px;
    background: rgba(255, 255, 255, .98);
}

html.ssqc-modal-open,
body.ssqc-modal-open {
    overflow: hidden !important;
    overscroll-behavior: none;
}

/* Reserve space for the bottom sticky CTA on mobile from first paint, not only
 * after JS initialization. */
@media (max-width: 921px) {
    body.ssqc-exclusive-product:not(.ssqc-modal-open):not(.ssqc-order-complete) {
        padding-bottom: calc(82px + env(safe-area-inset-bottom));
    }
    .ssqc-sticky-order-wrap {
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        transform: none;
        padding: 9px 12px max(9px, env(safe-area-inset-bottom));
        background: rgba(255, 255, 255, .96);
        border-top: 1px solid rgba(17, 24, 39, .08);
        box-shadow: 0 -8px 24px rgba(17, 24, 39, .08);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
    .ssqc-sticky-order {
        min-height: 54px;
        border-radius: 12px !important;
        box-shadow: 0 8px 20px rgba(17, 24, 39, .17) !important;
    }
    .ssqc-modal {
        align-items: flex-end;
        padding: 0;
    }
    .ssqc-modal-dialog {
        width: 100%;
        max-width: none;
        height: calc(100vh - 8px);
        height: calc(100dvh - 8px);
        max-height: calc(100vh - 8px);
        max-height: calc(100dvh - 8px);
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        overscroll-behavior-y: contain;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-gutter: stable;
        border-width: 1px 0 0;
        border-radius: 18px 18px 0 0;
        transform: translateY(28px);
    }
    .ssqc-modal.is-open .ssqc-modal-dialog { transform: translateY(0); }
    .ssqc-modal .ssqc-card {
        padding-top: 20px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        touch-action: pan-y;
    }
}

@media (max-width: 600px) {
    .ssqc-modal .ssqc-card {
        margin: 0 !important;
        padding-inline: 12px;
    }
    .ssqc-modal-dialog {
        height: calc(100vh - 4px);
        height: calc(100dvh - 4px);
        max-height: calc(100vh - 4px);
        max-height: calc(100dvh - 4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssqc-modal,
    .ssqc-modal-dialog,
    .ssqc-sticky-order { transition: none !important; }
}

.ssqc-modal.is-submitting .ssqc-submit { cursor: wait; }
.ssqc-modal.is-submitting .ssqc-modal-backdrop { cursor: wait; pointer-events: none; }


.ssqc-product-unavailable { border-color:#fecaca; background:#fff7f7; color:#991b1b; }
.ssqc-native-cart:empty { display:none; }