/**
 * DTC Smart Retract Custom Store - Scoped Styles
 * ALL rules are strictly scoped under .dtc-smartretract-store-wrapper
 * to prevent any style leaks or global theme conflicts.
 */

/* ============================================================
   CRITICAL MOBILE FIX — override .page-main overflow:hidden
   The theme sets .page-main { overflow: hidden } which clips
   any child content that is wider than the viewport.
   We must override this on the DTC store page so the wrapper
   can use overflow:visible and allow proper flex wrapping.
   ============================================================ */
.page-main {
    overflow: visible !important;
}

/* Also ensure the wrapper itself never clips its children */
.dtc-smartretract-store-wrapper {
    overflow: visible !important;
    max-width: 1200px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

/* Force all direct children to respect box model */
.dtc-smartretract-store-wrapper * {
    box-sizing: border-box;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
.dtc-smartretract-store-wrapper *,
.dtc-smartretract-store-wrapper *::before,
.dtc-smartretract-store-wrapper *::after {
    box-sizing: border-box;
}

.dtc-smartretract-store-wrapper {
    font-family: inherit;
    color: #222;
    line-height: 1.5;
}

/* ============================================================
   STEPPER BAR
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-stepper {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-bottom: 24px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 0;
}

.dtc-smartretract-store-wrapper .dtc-step {
    flex: 1;
    padding: 12px 16px 10px;
    font-size: 13px;
    color: #999;
    cursor: default;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-step .dtc-step-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #bbb;
    margin-bottom: 2px;
}

.dtc-smartretract-store-wrapper .dtc-step .dtc-step-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #999;
}

.dtc-smartretract-store-wrapper .dtc-step.dtc-step-active {
    border-bottom: 3px solid #FE5000;
}

.dtc-smartretract-store-wrapper .dtc-step.dtc-step-active .dtc-step-name {
    background: #FBFF00;
    color: #222;
    padding: 2px 8px;
    border-radius: 3px;
    display: inline-block;
}

.dtc-smartretract-store-wrapper .dtc-step.dtc-step-active .dtc-step-label {
    color: #555;
}

.dtc-smartretract-store-wrapper .dtc-step.dtc-step-done .dtc-step-name {
    color: #555;
}

/* ============================================================
   LAYOUT: TWO-COLUMN (main + sidebar)
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.dtc-smartretract-store-wrapper .dtc-main-col {
    flex: 1;
    min-width: 0;
}

.dtc-smartretract-store-wrapper .dtc-sidebar-col {
    width: 300px;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .dtc-smartretract-store-wrapper .dtc-layout {
        flex-direction: column;
    }
    .dtc-smartretract-store-wrapper .dtc-sidebar-col {
        width: 100%;
    }
}

/* ============================================================
   SAVE PROGRESS BAR
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-save-progress {
    background: #fff;
    border: 1px solid #d0e8f5;
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 20px;
}

.dtc-smartretract-store-wrapper .dtc-save-progress-heading {
    margin: 0 0 12px;
    font-size: 14px;
    color: #222;
    font-weight: 400;
}

.dtc-smartretract-store-wrapper .dtc-save-progress input[type="email"],
.dtc-smartretract-store-wrapper .dtc-save-email-input {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    border: 1px solid #006F99 !important;
    border-radius: 5px !important;
    padding: 0 12px !important;
    font-size: 16px !important;
    color: #222 !important;
    background: #E5F8FF !important;
    display: block !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.dtc-smartretract-store-wrapper .dtc-save-progress input[type="email"]:focus,
.dtc-smartretract-store-wrapper .dtc-save-email-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,111,153,0.2);
}

.dtc-smartretract-store-wrapper .dtc-save-progress .dtc-btn-save {
    width: 100%;
    height: 48px;
    padding: 0 24px;
    background: #006F99;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-save-progress .dtc-btn-save:hover {
    background: #005580;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.dtc-smartretract-store-wrapper .dtc-section-heading h2 {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #222;
}

.dtc-smartretract-store-wrapper .dtc-section-heading .dtc-options-badge {
    font-size: 12px;
    background: #e8f4fb;
    color: #006F99;
    border: 1px solid #b0d8ef;
    border-radius: 20px;
    padding: 3px 12px;
}

/* ============================================================
   PRODUCT GRID
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-product-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 32px;
}

.dtc-smartretract-store-wrapper .dtc-product-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    width: calc(33.333% - 12px);
    min-width: 0; /* IMPORTANT: was 220px which prevented mobile from shrinking */
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s;
    overflow: hidden; /* prevent content from overflowing card */
}

.dtc-smartretract-store-wrapper .dtc-product-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

@media (max-width: 900px) {
    .dtc-smartretract-store-wrapper .dtc-product-card {
        width: calc(50% - 8px) !important;
        min-width: 0 !important;
    }
}

@media (max-width: 560px) {
    .dtc-smartretract-store-wrapper .dtc-product-card {
        width: 100% !important;
        min-width: 0 !important;
    }
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #FE5000;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.dtc-smartretract-store-wrapper .dtc-product-card figure {
    margin: 0 0 12px;
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dtc-smartretract-store-wrapper .dtc-product-card figure img {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-product-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 4px;
    color: #222;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-product-price {
    font-size: 14px;
    color: #FE5000;
    font-weight: 600;
    margin-bottom: 6px;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-product-price a {
    color: #FE5000;
    text-decoration: underline;
    font-size: 13px;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-product-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin-bottom: 10px;
    min-height: 48px;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-read-more-btn {
    display: block;
    width: 100%;
    padding: 7px 0;
    background: #1a5276;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    cursor: pointer;
    text-align: center;
    margin-bottom: 12px;
    text-decoration: none;
    transition: background 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-product-card .dtc-read-more-btn:hover {
    background: #154360;
}

.dtc-smartretract-store-wrapper .dtc-product-card hr {
    border: none;
    border-top: 1px solid #eee;
    margin: 16px 0;
}

/* Color Swatches */
.dtc-smartretract-store-wrapper .dtc-color-swatches {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
}

.dtc-smartretract-store-wrapper .dtc-color-swatches .dtc-swatch {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, outline 0.15s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.dtc-smartretract-store-wrapper .dtc-color-swatches .dtc-swatch:hover {
    outline: 2px solid #888;
    outline-offset: 2px;
}

.dtc-smartretract-store-wrapper .dtc-color-swatches .dtc-swatch.selected {
    outline: 3px solid #222 !important;
    outline-offset: 2px !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18), 0 0 0 1px #fff !important;
}

/* Width Selectors */
.dtc-smartretract-store-wrapper .dtc-width-selectors {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    margin-top: 8px;
    align-items: center;
}

.dtc-smartretract-store-wrapper .dtc-width-selectors .dtc-width-btn {
    padding: 8px 16px;
    border: 1.5px solid #d3d3d3;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: all 0.15s;
    line-height: 1.2;
}

.dtc-smartretract-store-wrapper .dtc-width-selectors .dtc-width-btn.selected,
.dtc-smartretract-store-wrapper .dtc-width-selectors .dtc-width-btn:hover {
    background: #FE5000;
    color: #fff;
    border-color: #FE5000;
}

/* Out-of-stock variant: crossed out + blurred/dimmed */
.dtc-smartretract-store-wrapper .dtc-width-selectors .dtc-width-btn.dtc-oos {
    opacity: 0.38;
    cursor: not-allowed;
    text-decoration: line-through;
    background: #f5f5f5;
    color: #aaa;
    border-color: #ddd;
    pointer-events: none;
}

.dtc-smartretract-store-wrapper .dtc-color-swatches .dtc-swatch.dtc-oos {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

/* Diagonal strike-through line on OOS swatches */
.dtc-smartretract-store-wrapper .dtc-color-swatches .dtc-swatch.dtc-oos::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1px),
        rgba(180,0,0,0.55) calc(50% - 1px),
        rgba(180,0,0,0.55) calc(50% + 1px),
        transparent calc(50% + 1px)
    );
    border-radius: 3px;
}

/* Variation Dropdowns (accessories) */
.dtc-smartretract-store-wrapper .dtc-variation-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 10px;
    align-items: center;
    font-size: 13px;
}

.dtc-smartretract-store-wrapper .dtc-variation-row label {
    font-size: 12px;
    color: #555;
    margin-right: 4px;
}

.dtc-smartretract-store-wrapper .dtc-variation-row select {
    height: 28px;
    border: 1px solid #006F99;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 12px;
    color: #222;
    background: #fff;
    cursor: pointer;
}

/* Quantity + Add to Cart Row */
.dtc-smartretract-store-wrapper .dtc-qty-atc-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

/* Pill-shaped quantity stepper */
.dtc-smartretract-store-wrapper .dtc-sp-quantity {
    display: flex;
    align-items: center;
    background: #EDE1D1;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    height: 38px;
    overflow: hidden;
    flex-shrink: 0;
}

.dtc-smartretract-store-wrapper .dtc-sp-quantity .dtc-qty-btn {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    background: none;
    border: none;
    color: #222;
    user-select: none;
    line-height: 1;
}

.dtc-smartretract-store-wrapper .dtc-sp-quantity .dtc-qty-btn:hover {
    background: rgba(0,0,0,0.07);
}

.dtc-smartretract-store-wrapper .dtc-sp-quantity input.qty {
    width: 34px;
    height: 38px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    color: #222;
    padding: 0;
    -moz-appearance: textfield;
}

.dtc-smartretract-store-wrapper .dtc-sp-quantity input.qty::-webkit-outer-spin-button,
.dtc-smartretract-store-wrapper .dtc-sp-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.dtc-smartretract-store-wrapper .dtc-sp-quantity input.qty:focus {
    outline: none;
    border: none;
}

/* Pill-shaped yellow Add to Cart button */
.dtc-smartretract-store-wrapper .dtc-btn-atc {
    background: #FBFF00;
    color: #222;
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    padding: 0 20px;
    height: 38px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    transition: background 0.2s, transform 0.1s;
    white-space: nowrap;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1;
}

.dtc-smartretract-store-wrapper .dtc-btn-atc:hover {
    background: #e8ec00;
    transform: translateY(-1px);
}

.dtc-smartretract-store-wrapper .dtc-btn-atc:active {
    transform: translateY(0);
}

.dtc-smartretract-store-wrapper .dtc-btn-atc.loading {
    pointer-events: none;
    opacity: 0.7;
}

.dtc-smartretract-store-wrapper .dtc-btn-atc.added {
    background: #d4f7d4;
}

.dtc-smartretract-store-wrapper .dtc-btn-atc .dtc-check {
    display: none;
    margin-left: 4px;
}

.dtc-smartretract-store-wrapper .dtc-btn-atc.added .dtc-check {
    display: inline;
}

/* "Do I need This" button removed per client feedback (2026-09) — accessories
   now show image, title, price, description and the add-to-cart form only. */

/* ============================================================
   STEP 2 ACCESSORIES PREVIEW ROW (below Step 1 products)
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-accessories-preview {
    margin-top: 24px;
    margin-bottom: 8px;
}

.dtc-smartretract-store-wrapper .dtc-accessories-preview .dtc-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.dtc-smartretract-store-wrapper .dtc-accessories-preview .dtc-acc-header h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.dtc-smartretract-store-wrapper .dtc-accessories-preview .dtc-acc-header a {
    font-size: 13px;
    color: #006F99;
    text-decoration: none;
}

.dtc-smartretract-store-wrapper .dtc-accessories-preview .dtc-acc-header a:hover {
    text-decoration: underline;
}

.dtc-smartretract-store-wrapper .dtc-acc-scroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    min-width: 200px;
    flex-shrink: 0;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card .dtc-acc-mini-info {
    flex: 1;
    min-width: 0;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card .dtc-acc-mini-info .dtc-acc-mini-name {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card .dtc-acc-mini-info .dtc-acc-mini-price {
    font-size: 12px;
    color: #555;
    display: block;
    margin-top: 2px;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card .dtc-acc-mini-info .dtc-acc-mini-check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    color: #555;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card .dtc-acc-mini-info .dtc-acc-mini-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    cursor: pointer;
}

.dtc-smartretract-store-wrapper .dtc-acc-mini-card.dtc-acc-added {
    border-color: #006F99;
    background: #e8f4fb;
}

/* ============================================================
   STEP 2 BANNER
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-step2-banner {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 16px 20px;
    text-align: center;
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

/* ============================================================
   STEP 3 CHECKOUT FORM — Polished Modern Layout
   ============================================================ */

/* Checkout form wrapper */
.dtc-smartretract-store-wrapper .dtc-checkout-form {
    display: block;
    width: 100%;
}

/* ============ Same-Day shipping countdown note ============
   Compact replacement for the old full-width #F2F2F2 panel that used to sit
   above the stepper with three large paragraphs. It now sits directly under
   the "Secure checkout with SSL Encryption" line of the Order Summary: the
   sidebar card on desktop, the slide-up drawer on mobile (dtc-store.js moves
   the single element between the two, so the countdown IDs stay unique).
   The type copies an OPEN accordion tab (.dtc-accordion-content: 12px / #555
   / line-height 1.6, left aligned) so it reads as a quiet detail line rather
   than a banner. No box, no border - only the live timer is bold. */
.dtc-smartretract-store-wrapper .dtc-os-ship-note,
.dtc-mobile-drawer .dtc-os-ship-note {
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    text-align: left;
    font-family: inherit;
    color: #555;
}

.dtc-mobile-drawer .dtc-os-ship-note {
    margin-top: 6px;
}

.dtc-smartretract-store-wrapper .dtc-os-ship-note .dtc-os-ship-line,
.dtc-mobile-drawer .dtc-os-ship-note .dtc-os-ship-line {
    margin: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.6;
    color: #555;
}

/* Only the countdown is emphasised: "Order within <b>1 hr 58 mins</b> ->" */
.dtc-smartretract-store-wrapper .dtc-os-ship-note .dtc-os-ship-timer,
.dtc-mobile-drawer .dtc-os-ship-note .dtc-os-ship-timer {
    color: #333;
    font-weight: 700;
    white-space: nowrap;
}

/* The ship date is context, not the hook, so it stays regular weight */
.dtc-smartretract-store-wrapper .dtc-os-ship-note .dtc-os-ship-day,
.dtc-mobile-drawer .dtc-os-ship-note .dtc-os-ship-day {
    color: #555;
    font-weight: 400;
}

.dtc-smartretract-store-wrapper .dtc-os-ship-note .dtc-os-ship-sub,
.dtc-mobile-drawer .dtc-os-ship-note .dtc-os-ship-sub {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #999;
}

/* Placeholders shown until the countdown AJAX call swaps them in */
.dtc-smartretract-store-wrapper .dtc-os-ship-note #mini_countdown_timer .skeleton-box,
.dtc-mobile-drawer .dtc-os-ship-note #mini_countdown_timer .skeleton-box {
    width: 34px;
    height: 12px;
}

.dtc-smartretract-store-wrapper .dtc-os-ship-note #next-shipping-day .skeleton-box,
.dtc-mobile-drawer .dtc-os-ship-note #next-shipping-day .skeleton-box {
    width: 74px;
    height: 12px;
}

/* Each card section */
.dtc-smartretract-store-wrapper .dtc-checkout-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dtc-smartretract-store-wrapper .dtc-checkout-section h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.dtc-smartretract-store-wrapper .dtc-checkout-section h2 .dtc-section-icon {
    font-size: 20px;
}

/* Form rows */
.dtc-smartretract-store-wrapper .dtc-form-row {
    margin-bottom: 14px;
}

.dtc-smartretract-store-wrapper .dtc-form-row:last-child {
    margin-bottom: 0;
}

.dtc-smartretract-store-wrapper .dtc-form-row label {
    display: block;
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.dtc-smartretract-store-wrapper .dtc-form-row input[type="text"],
.dtc-smartretract-store-wrapper .dtc-form-row input[type="email"],
.dtc-smartretract-store-wrapper .dtc-form-row input[type="tel"],
.dtc-smartretract-store-wrapper .dtc-form-row select,
.dtc-smartretract-store-wrapper .dtc-form-row textarea {
    width: 100%;
    height: 44px;
    border: 1.5px solid #d8d8d8;
    border-radius: 8px;
    padding: 0 14px;
    font-size: 15px;
    color: #1a1a1a;
    background: #fafafa;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.dtc-smartretract-store-wrapper .dtc-form-row select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
    cursor: pointer;
}

.dtc-smartretract-store-wrapper .dtc-form-row input:focus,
.dtc-smartretract-store-wrapper .dtc-form-row select:focus,
.dtc-smartretract-store-wrapper .dtc-form-row textarea:focus {
    outline: none;
    border-color: #006F99;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,111,153,0.12);
}

.dtc-smartretract-store-wrapper .dtc-form-row input::placeholder {
    color: #bbb;
    font-size: 14px;
}

.dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-half {
    display: flex;
    gap: 14px;
}

.dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-half > div {
    flex: 1;
    min-width: 0;
}

.dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-third {
    display: flex;
    gap: 14px;
}

.dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-third > div {
    flex: 1;
    min-width: 0;
}

/* Field error state */
.dtc-smartretract-store-wrapper .dtc-field-error {
    color: #e53e3e;
    font-size: 11px;
    margin-top: 3px;
    display: block;
}

/* Field note (below checkbox) */
.dtc-smartretract-store-wrapper .dtc-field-note {
    font-size: 12px;
    color: #666;
    margin: 8px 0 0 0;
    font-style: italic;
}

/* Checkbox label styling */
.dtc-smartretract-store-wrapper .dtc-checkbox-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    user-select: none;
    margin-bottom: 0 !important;
}

.dtc-smartretract-store-wrapper .dtc-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #0066A1;
    flex-shrink: 0;
}

.dtc-smartretract-store-wrapper .dtc-checkbox-label span {
    font-weight: 500;
}

/* Billing address fields container */
.dtc-smartretract-store-wrapper #dtc-billing-address-fields {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #e8e8e8;
}

/* Grey out / disabled state when checkbox is checked */
.dtc-smartretract-store-wrapper #dtc-billing-address-fields.dtc-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Smooth anchor scroll target */
#checkout-section {
    scroll-margin-top: 100px;
    position: relative;
}

/* ============================================================
   COUPON CODE SECTION
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-coupon-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 18px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dtc-smartretract-store-wrapper .dtc-coupon-toggle {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: #006F99 !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    user-select: none !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    text-align: left !important;
    width: 100% !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-toggle:hover {
    color: #004f70 !important;
    background: none !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-toggle .dtc-coupon-arrow {
    font-size: 11px;
    transition: transform 0.2s;
    display: inline-block;
}

.dtc-smartretract-store-wrapper .dtc-coupon-section.dtc-coupon-open .dtc-coupon-arrow {
    transform: rotate(180deg);
}

.dtc-smartretract-store-wrapper .dtc-coupon-fields {
    display: none;
    margin-top: 14px;
}

.dtc-smartretract-store-wrapper .dtc-coupon-section.dtc-coupon-open .dtc-coupon-fields {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
}

/* Coupon text input — must grow to fill space, not full-width like form-row inputs */
.dtc-smartretract-store-wrapper .dtc-coupon-fields #dtc-coupon-code,
.dtc-smartretract-store-wrapper .dtc-coupon-fields input[type="text"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    height: 44px !important;
    border: 1.5px solid #d8d8d8 !important;
    border-radius: 8px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    background: #fafafa !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: none !important;
    display: block !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-fields #dtc-coupon-code:focus,
.dtc-smartretract-store-wrapper .dtc-coupon-fields input[type="text"]:focus {
    outline: none !important;
    border-color: #006F99 !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(0,111,153,0.12) !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-fields #dtc-coupon-code::placeholder,
.dtc-smartretract-store-wrapper .dtc-coupon-fields input[type="text"]::placeholder {
    color: #bbb !important;
    font-size: 14px !important;
}

/* Apply button — fixed size, never stretches */
.dtc-smartretract-store-wrapper .dtc-coupon-fields .dtc-coupon-apply-btn,
.dtc-smartretract-store-wrapper .dtc-coupon-fields #dtc-coupon-apply {
    flex: 0 0 auto !important;
    width: auto !important;
    height: 44px !important;
    padding: 0 20px !important;
    background: #1a1a1a !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.2s !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    box-shadow: none !important;
    line-height: 1 !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-fields .dtc-coupon-apply-btn:hover,
.dtc-smartretract-store-wrapper .dtc-coupon-fields #dtc-coupon-apply:hover {
    background: #333 !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-apply-btn.loading,
.dtc-smartretract-store-wrapper #dtc-coupon-apply.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

.dtc-smartretract-store-wrapper .dtc-coupon-message {
    margin-top: 8px;
    font-size: 13px;
    display: none;
}

.dtc-smartretract-store-wrapper .dtc-coupon-message.dtc-coupon-success {
    display: block;
    color: #27ae60;
}

.dtc-smartretract-store-wrapper .dtc-coupon-message.dtc-coupon-error {
    display: block;
    color: #e53e3e;
}

/* ============================================================
   ORDER REVIEW SECTION (before final submit)
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-order-review-section {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dtc-smartretract-store-wrapper .dtc-order-review-section h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

/* Review table */
.dtc-smartretract-store-wrapper .dtc-review-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
    font-size: 14px;
}

.dtc-smartretract-store-wrapper .dtc-review-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    padding: 0 0 10px;
    border-bottom: 1px solid #f0f0f0;
}

.dtc-smartretract-store-wrapper .dtc-review-table th:last-child {
    text-align: right;
}

.dtc-smartretract-store-wrapper .dtc-review-table td {
    padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
    color: #333;
    vertical-align: top;
}

.dtc-smartretract-store-wrapper .dtc-review-table td:last-child {
    text-align: right;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}

.dtc-smartretract-store-wrapper .dtc-review-table .dtc-review-item-name {
    font-weight: 600;
    color: #1a1a1a;
    display: block;
}

.dtc-smartretract-store-wrapper .dtc-review-table .dtc-review-item-meta {
    font-size: 12px;
    color: #888;
    display: block;
    margin-top: 2px;
}

/* Review totals */
.dtc-smartretract-store-wrapper .dtc-review-totals {
    border-top: 2px solid #f0f0f0;
    padding-top: 14px;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #555;
    margin-bottom: 8px;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row.dtc-review-grand-total {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e0e0e0;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row.dtc-review-grand-total span:last-child {
    color: #006F99;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row .dtc-review-discount {
    color: #27ae60;
    font-weight: 600;
}

/* Review address columns */
.dtc-smartretract-store-wrapper .dtc-review-addresses {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #f0f0f0;
}

.dtc-smartretract-store-wrapper .dtc-review-address-col {
    flex: 1;
    min-width: 0;
}

.dtc-smartretract-store-wrapper .dtc-review-address-col h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
    margin: 0 0 8px;
}

.dtc-smartretract-store-wrapper .dtc-review-address-col p {
    font-size: 14px;
    color: #333;
    margin: 0;
    line-height: 1.6;
}

/* ============================================================
   REVIEW & FINALIZE SECTION
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-review-finalize-section {
    background: #D6EDF7;
    border: 1px solid #9DC9E0;
    border-radius: 6px;
    padding: 24px;
    margin: 32px 0 24px;
}

.dtc-smartretract-store-wrapper .dtc-review-header {
    margin-bottom: 12px;
}

.dtc-smartretract-store-wrapper .dtc-review-step {
    display: block;
    font-size: 11px;
    color: #006F99;
    font-weight: 600;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dtc-smartretract-store-wrapper .dtc-review-header h2 {
    font-size: 22px;
    color: #222;
    font-weight: 700;
    margin: 0;
}

.dtc-smartretract-store-wrapper .dtc-privacy-notice {
    color: #555;
    font-size: 13px;
    margin: 0 0 24px 0;
}

.dtc-smartretract-store-wrapper .dtc-privacy-notice em {
    font-style: italic;
}

.dtc-smartretract-store-wrapper .dtc-review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.dtc-smartretract-store-wrapper .dtc-review-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.dtc-smartretract-store-wrapper .dtc-review-label {
    font-size: 13px;
    color: #333;
    font-weight: 600;
    margin-bottom: 8px;
}

.dtc-smartretract-store-wrapper .dtc-review-value {
    font-size: 14px;
    color: #0066A1;
    line-height: 1.5;
}

.dtc-smartretract-store-wrapper .dtc-review-total-box {
    background: white;
    border: 1px solid #9DC9E0;
    border-radius: 4px;
    padding: 12px 16px;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #333;
}

.dtc-smartretract-store-wrapper .dtc-review-total-row span:first-child {
    font-weight: 400;
}

.dtc-smartretract-store-wrapper .dtc-review-total-amount {
    color: #FE5000 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.dtc-smartretract-store-wrapper .dtc-terms-wrap {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #9DC9E0;
}

.dtc-smartretract-store-wrapper .dtc-terms-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 13px;
    color: #222;
}

.dtc-smartretract-store-wrapper .dtc-terms-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: #0066A1;
}

.dtc-smartretract-store-wrapper .dtc-terms-label a {
    color: #0066A1;
    text-decoration: underline;
    font-weight: 500;
}

.dtc-smartretract-store-wrapper .dtc-terms-label a:hover {
    color: #FE5000;
}

@media (max-width: 900px) {
    .dtc-smartretract-store-wrapper .dtc-review-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .dtc-smartretract-store-wrapper .dtc-review-bottom-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .dtc-smartretract-store-wrapper .dtc-review-finalize-section {
        padding: 20px 16px;
    }
}

/* ============================================================
   PAYMENT SECTION — Polished
   ============================================================ */

/* Complete Purchase button */
.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap {
    margin-top: 0;
    margin-bottom: 32px;
}

.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap #place_order,
.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap .dtc-btn-complete-purchase {
    display: block !important;
    width: 100% !important;
    padding: 16px 0 !important;
    background: #FF5C00 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: background 0.2s !important;
    box-shadow: none !important;
    letter-spacing: 0.3px !important;
    text-transform: none !important;
}

.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap #place_order:hover,
.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap .dtc-btn-complete-purchase:hover {
    background: #E04F00 !important;
    transform: none !important;
}

.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap #place_order.loading,
.dtc-smartretract-store-wrapper .dtc-complete-purchase-wrap .dtc-btn-complete-purchase.loading {
    opacity: 0.7 !important;
    pointer-events: none !important;
}

/* Hide the WC native "Place order" button inside #payment — we use our own */
.dtc-smartretract-store-wrapper #payment .place-order,
.dtc-smartretract-store-wrapper #payment .woocommerce-checkout-payment .place-order {
    display: none !important;
}

/* Payment Method Section card */
.dtc-smartretract-store-wrapper .dtc-payment-section {
    background: #fff;
    border: 2px solid #006F99;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 16px;
    position: relative;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.dtc-smartretract-store-wrapper .dtc-payment-section .dtc-encrypted-badge {
    position: absolute;
    top: 14px;
    right: 18px;
    background: #006F99;
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.dtc-smartretract-store-wrapper .dtc-payment-section h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 20px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f0f0f0;
}

.dtc-smartretract-store-wrapper .dtc-payment-section h2 .dtc-section-icon {
    font-size: 20px;
}

/* Payment subtitle "Select a Payment Method" */
.dtc-smartretract-store-wrapper .dtc-payment-section .dtc-payment-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #555;
    margin: -12px 0 16px 0;
}

/* =================================================================
   PAYMENT SECTION — WooCommerce + Stripe gateway normalisation
   Goal: hide the plugin's own billing block / confirm button,
   keep only the card fields, styled to match the DTC design system.
   ================================================================= */

/* 1. Strip all chrome off the WC #payment wrapper */
.dtc-smartretract-store-wrapper #payment {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2. Gateway radio list — style it to show payment method selection */
.dtc-smartretract-store-wrapper #payment ul.payment_methods {
    list-style: none !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
    border: none !important;
}
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
}
/* Show the radio button + gateway label - styled nicely */
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li .radio01 {
    display: block !important;
    margin-bottom: 12px !important;
}
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li > input[type="radio"],
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li .radio01 input[type="radio"] {
    display: inline-block !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    width: auto !important;
    height: auto !important;
}
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li > label,
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li .radio01 label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #222 !important;
    cursor: pointer !important;
}
/* Card brand icons inside payment method label */
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li > label img {
    display: inline-block !important;
    height: 24px !important;
    width: auto !important;
    margin: 0 2px !important;
    vertical-align: middle !important;
}

/* 3. The payment_box is the actual card-fields area — style it cleanly */
.dtc-smartretract-store-wrapper #payment .payment_box {
    display: block !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. SURGICAL HIDING — hide only Stripe plugin billing/duplicate
      elements, but NEVER hide card field containers.
      ─────────────────────────────────────────────────────────── */

/* Privacy / info header */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-privacy-link,
.dtc-smartretract-store-wrapper .payment_box a[href*="privacy"],
.dtc-smartretract-store-wrapper .payment_box .stripe-privacy-link { display: none !important; }

/* Billing address containers — specific classes only (NOT [class*="billing"]) */
.dtc-smartretract-store-wrapper .payment_box .stripe-billing-address-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-billing-address,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-billing-fields,
.dtc-smartretract-store-wrapper .payment_box .stripe-checkout-billing,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_cc-billing-fields,
.dtc-smartretract-store-wrapper .payment_box > .wc-stripe-notice { display: none !important; }

/* Billing headings + description paragraphs — but NOT inside card form */
.dtc-smartretract-store-wrapper .payment_box > h2,
.dtc-smartretract-store-wrapper .payment_box > h3,
.dtc-smartretract-store-wrapper .payment_box > p { display: none !important; }

/* Two-column layout: make it visible but strip layout chrome,
   because the card form lives INSIDE this container. */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-checkout-container,
.dtc-smartretract-store-wrapper .payment_box .stripe-checkout-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-two-column-layout {
    display: block !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Inside the two-column layout, hide the billing COLUMN but keep the payment column */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-checkout-container > .wc-stripe-col-1,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-checkout-container > [class*="billing"],
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-two-column-layout > .wc-stripe-col-1,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-two-column-layout > [class*="billing"] { display: none !important; }

/* The payment column (col-2) should be full width */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-checkout-container > .wc-stripe-col-2,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-two-column-layout > .wc-stripe-col-2 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* "Confirm Payment Details" submit button inside payment_box */
.dtc-smartretract-store-wrapper .payment_box button[type="submit"],
.dtc-smartretract-store-wrapper .payment_box input[type="submit"],
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-confirm-btn,
.dtc-smartretract-store-wrapper .payment_box .stripe-confirm-btn { display: none !important; }

/* WC native place-order inside #payment */
.dtc-smartretract-store-wrapper #payment .place-order { display: none !important; }

/* ── Hide Stripe's payment-request container INSIDE the credit card box ──
   It shows a grey "Express Checkout" placeholder even when nothing is enabled.
   We surface express methods via our own #dtc-express-checkout-wrapper instead. */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-request-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-wallet-notice,
.dtc-smartretract-store-wrapper .payment_box .wallet-notice,
.dtc-smartretract-store-wrapper .payment_box #wc-stripe-payment-request-button-container,
.dtc-smartretract-store-wrapper .payment_box [id*="payment-request"],
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-request-button-container {
    display: none !important;
}

/* When Apple Pay / Google Pay containers have actual stripe buttons (iframes), show them */
.dtc-smartretract-store-wrapper #dtc-applepay-express-container:not(:empty),
.dtc-smartretract-store-wrapper #dtc-googlepay-express-container:not(:empty) {
    display: block !important;
}

/* Wallet button divider ("or pay with card") */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-divider,
.dtc-smartretract-store-wrapper .payment_box .payment-divider {
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    margin: 20px 0 !important;
    color: #999 !important;
    font-size: 13px !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-divider::before,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-divider::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid #e0e0e0 !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-divider::before {
    margin-right: 12px !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-divider::after {
    margin-left: 12px !important;
}

/* Show payment boxes when their radio is checked */
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li input[type="radio"]:checked ~ .payment_box {
    display: block !important;
}

/* HIDE "New Card" and "Saved Cards" radio options - we only want New Card fields visible */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-payment-type,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-label-payment-type,
.dtc-smartretract-store-wrapper .payment_box #stripe_cc_use_new,
.dtc-smartretract-store-wrapper .payment_box #stripe_cc_use_saved,
.dtc-smartretract-store-wrapper .payment_box label[for="stripe_cc_use_new"],
.dtc-smartretract-store-wrapper .payment_box label[for="stripe_cc_use_saved"] {
    display: none !important;
}

/* HIDE the saved cards container completely */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-saved-methods-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_cc-saved-methods-container {
    display: none !important;
}

/* SHOW only the new card method container */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_cc-new-method-container {
    display: block !important;
}

/* HIDE the "Save Card" checkbox for privacy */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-save-source {
    display: none !important;
}

/* Google Pay and Apple Pay container wrappers */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_applepay-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_googlepay-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-gateway-container {
    display: block !important;
}

.dtc-smartretract-store-wrapper .payment_box .wc-stripe_applepay-new-method-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe_googlepay-new-method-container {
    display: block !important;
}

/* ============================================================
   EXPRESS CHECKOUT - Apple Pay & Google Pay (Shopify style)
   ============================================================ */

/* Hide Apple Pay and Google Pay radio buttons - show them as express buttons instead */
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li.payment_method_stripe_applepay,
.dtc-smartretract-store-wrapper #payment ul.payment_methods > li.payment_method_stripe_googlepay {
    display: none !important;
}

/* Express Checkout Buttons Container — modern Shopify-like style */
/* Hidden by default — JS shows only when real Apple/Google Pay iframes are detected */
.dtc-smartretract-store-wrapper .dtc-express-checkout-wrapper {
    display: none;
    margin-top: 20px;
    padding: 16px;
    background: #fafafa;
    border: 1px solid #efefef;
    border-radius: 10px;
}

.dtc-smartretract-store-wrapper .dtc-express-checkout-title {
    font-size: 11px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 12px;
    text-align: center;
    position: relative;
}
.dtc-smartretract-store-wrapper .dtc-express-checkout-title::before,
.dtc-smartretract-store-wrapper .dtc-express-checkout-title::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 28%;
    height: 1px;
    background: #e0e0e0;
}
.dtc-smartretract-store-wrapper .dtc-express-checkout-title::before { left: 0; }
.dtc-smartretract-store-wrapper .dtc-express-checkout-title::after  { right: 0; }

.dtc-smartretract-store-wrapper .dtc-express-checkout-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Make any Stripe-rendered payment request button look polished */
.dtc-smartretract-store-wrapper #dtc-applepay-express-container > *,
.dtc-smartretract-store-wrapper #dtc-googlepay-express-container > * {
    border-radius: 8px !important;
    overflow: hidden !important;
    min-height: 48px !important;
}

/* Apple Pay Button Styling */
.dtc-smartretract-store-wrapper .dtc-applepay-express-btn {
    height: 48px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
    color: #fff;
    font-weight: 500;
    transition: opacity 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-applepay-express-btn:hover {
    opacity: 0.9;
}

/* Google Pay Button Styling */
.dtc-smartretract-store-wrapper .dtc-googlepay-express-btn {
    height: 48px;
    border-radius: 6px;
    border: 1px solid #dadce0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    transition: box-shadow 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-googlepay-express-btn:hover {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Divider between express checkout and regular payment */
/* Hidden by default — JS shows only when real express payment is available */
.dtc-smartretract-store-wrapper .dtc-express-divider {
    display: none;
    align-items: center;
    text-align: center;
    margin: 24px 0;
    color: #666;
    font-size: 13px;
}

.dtc-smartretract-store-wrapper .dtc-express-divider::before,
.dtc-smartretract-store-wrapper .dtc-express-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.dtc-smartretract-store-wrapper .dtc-express-divider::before {
    margin-right: 12px;
}

.dtc-smartretract-store-wrapper .dtc-express-divider::after {
    margin-left: 12px;
}

/* Apple Pay / Google Pay checkbox icons (small icons next to the radio button) */
.dtc-smartretract-store-wrapper #payment ul.payment_methods li.payment_method_stripe_applepay input[type="radio"],
.dtc-smartretract-store-wrapper #payment ul.payment_methods li.payment_method_stripe_googlepay input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 50% !important;
    position: relative !important;
    cursor: pointer !important;
}
.dtc-smartretract-store-wrapper #payment ul.payment_methods li input[type="radio"]:checked {
    border-color: #006F99 !important;
    background: #006F99 !important;
}
.dtc-smartretract-store-wrapper #payment ul.payment_methods li input[type="radio"]:checked::after {
    content: '' !important;
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    background: white !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* FORCE card form containers visible — override any inherited display:none */
.dtc-smartretract-store-wrapper .payment_box #wc-stripe-cc-custom-form,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-minimalist-form,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-inline-form,
.dtc-smartretract-store-wrapper .payment_box #wc-stripe-card-element {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* FORCE card icons container visible */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-card-icons-container {
    display: flex !important;
    visibility: visible !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
    align-items: center !important;
}

/* FORCE save-source checkbox visible */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-save-source {
    display: flex !important;
    visibility: visible !important;
}

/* 5. Card-icons row (Visa / MC / Amex / Discover) — keep visible, style cleanly */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-card-icons-container,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-card-icons,
.dtc-smartretract-store-wrapper .payment_box .stripe-card-icons,
.dtc-smartretract-store-wrapper .payment_box .card-icons {
    display: flex !important;
    visibility: visible !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    margin-bottom: 16px !important;
    align-items: center !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-card-icons-container img,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-card-icons img,
.dtc-smartretract-store-wrapper .payment_box .stripe-card-icons img,
.dtc-smartretract-store-wrapper .payment_box .card-icons img {
    height: 28px !important;
    width: auto !important;
    border-radius: 4px !important;
    opacity: 0.9 !important;
    display: inline-block !important;
}

/* 6. The Stripe card element (single iframe mount) */
#wc-stripe-card-element {
    background: #fff !important;
    border: 1.5px solid #d8d8d8 !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    min-height: 48px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}
#wc-stripe-card-element.StripeElement--focus {
    border-color: #006F99 !important;
    box-shadow: 0 0 0 3px rgba(0,111,153,0.12) !important;
    outline: none !important;
}
#wc-stripe-card-element.StripeElement--invalid {
    border-color: #e53e3e !important;
}

/* 7. Simple / minimalist form styles (separate card number + expiry + CVC elements) */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-minimalist-form,
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-inline-form,
.dtc-smartretract-store-wrapper .payment_box #wc-stripe-cc-custom-form {
    display: block !important;
    visibility: visible !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Rows inside the custom form */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .row {
    display: flex !important;
    visibility: visible !important;
    gap: 12px !important;
    margin: 0 0 12px !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .row:last-child {
    margin-bottom: 0 !important;
}

/* Individual field wrappers — flex column so label sits ABOVE the Stripe iframe */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .field {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    visibility: visible !important;
    position: relative !important;
    flex: 1 !important;
    min-height: 58px !important;
    margin: 0 !important;
    background: #fff !important;
    border: 1.5px solid #d8d8d8 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    overflow: visible !important;
    gap: 2px !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .field:focus-within {
    border-color: #006F99 !important;
    box-shadow: 0 0 0 3px rgba(0,111,153,0.12) !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .field.half-width {
    flex: 1 !important;
    width: auto !important;
}

/* Label: order -1 forces it BEFORE the Stripe iframe in visual order */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form label {
    order: -1 !important;
    position: static !important;
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    transform: none !important;
    transition: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: default !important;
    width: 100% !important;
    bottom: auto !important;
    left: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Stripe iframe mount — fills remaining space below the label */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .input {
    order: 0 !important;
    position: static !important;
    width: 100% !important;
    bottom: auto !important;
    left: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
    background: transparent !important;
    flex: 1 !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .input.StripeElement {
    opacity: 1 !important;
    padding: 4px 0 0 !important;
}

/* Hide the animated baseline bar */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form .baseline {
    display: none !important;
}

/* ZIP field (if shown) */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-simple-form #stripe-postal-code {
    width: 100% !important;
    height: 32px !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #1a1a1a !important;
    padding: 0 !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

/* 8. "Save payment method" checkbox row */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-save-source {
    margin-top: 14px !important;
    font-size: 13px !important;
    color: #555 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-save-source input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    accent-color: #006F99 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-save-source label {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #555 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    margin: 0 !important;
    cursor: pointer !important;
    position: static !important;
    transform: none !important;
    display: inline !important;
}

/* 9. Any stray error messages from Stripe */
.dtc-smartretract-store-wrapper .payment_box .wc-stripe-error,
.dtc-smartretract-store-wrapper .payment_box .stripe-error {
    color: #e53e3e !important;
    font-size: 12px !important;
    margin-top: 6px !important;
}

/* 10. WooCommerce checkout embed: suppress duplicate sections */
.dtc-smartretract-store-wrapper .dtc-wc-checkout-embed .woocommerce-checkout {
    background: none !important;
    padding: 0 !important;
}
.dtc-smartretract-store-wrapper .dtc-wc-checkout-embed #customer_details {
    display: none !important;
}
.dtc-smartretract-store-wrapper .dtc-wc-checkout-embed .woocommerce-checkout-review-order-table {
    display: none !important;
}
.dtc-smartretract-store-wrapper .dtc-wc-checkout-embed .woocommerce-form-coupon-toggle,
.dtc-smartretract-store-wrapper .dtc-wc-checkout-embed #order_review_heading {
    display: none !important;
}

/* ============================================================
   ORDER SUMMARY SIDEBAR — STICKY ON DESKTOP
   The sidebar column is position:relative (set inline by PHP).
   On desktop (≥901px) the order summary card uses position:sticky
   so it follows the user as they scroll through the product grid.
   JS also applies position:fixed as a fallback for older browsers.
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-order-summary {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

@media (min-width: 901px) {
    .dtc-smartretract-store-wrapper .dtc-sidebar-col {
        position: sticky;
        top: 20px; /* gap from viewport top; JS adjusts for admin bar */
        align-self: flex-start;
    }
    /* When WP admin bar is present, push down by its height */
    .admin-bar .dtc-smartretract-store-wrapper .dtc-sidebar-col {
        top: 52px; /* 32px admin bar + 20px gap */
    }
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-header {
    padding: 14px 16px;
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    font-size: 15px;
    font-weight: 700;
    color: #222;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-items {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 13px;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item:last-child {
    margin-bottom: 0;
}

/* Product name — flex: 1 so it fills available space */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-item-name {
    flex: 1;
    color: #333;
    min-width: 0;
    line-height: 1.4;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-item-meta {
    font-size: 11px;
    color: #777;
    display: block;
    margin-top: 2px;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: normal !important;
}

/* Right side: qty + price + remove */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Qty +/- widget */
.dtc-smartretract-store-wrapper .dtc-os-qty-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 26px !important;
}
.dtc-smartretract-store-wrapper .dtc-os-qty-btn {
    background: none !important;
    border: none !important;
    color: #555 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    width: 24px !important;
    height: 26px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    transition: background 0.15s, color 0.15s !important;
}
.dtc-smartretract-store-wrapper .dtc-os-qty-btn:hover {
    background: #FE5000 !important;
    color: #fff !important;
}
.dtc-smartretract-store-wrapper .dtc-os-qty-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}
.dtc-smartretract-store-wrapper .dtc-os-qty-val {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 24px !important;
    height: 26px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #222 !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    padding: 0 4px !important;
    writing-mode: horizontal-tb !important;
}

/* Price */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-item-price {
    font-weight: 600;
    color: #222;
    white-space: nowrap;
    font-size: 13px;
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    letter-spacing: normal !important;
}

/* Remove (X) button on each cart item in Order Summary */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-remove-item,
.dtc-mobile-drawer .dtc-os-item .dtc-os-remove-item {
    background: none !important;
    border: none !important;
    color: #bbb !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 2px 0 0 4px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
    align-self: flex-start !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: normal !important;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-item .dtc-os-remove-item:hover,
.dtc-mobile-drawer .dtc-os-item .dtc-os-remove-item:hover {
    color: #c0392b !important;
    background: none !important;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
    color: #444;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row:last-child {
    margin-bottom: 0;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row .dtc-os-free {
    color: #006F99;
    font-weight: 600;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row .dtc-os-shipping-note {
    color: #888;
    font-size: 12px;
    font-style: italic;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row.dtc-os-total-row {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e0e0e0;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-totals .dtc-os-row.dtc-os-total-row .dtc-os-total-amount {
    color: #006F99;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta {
    padding: 14px 16px;
}

/* Primary CTA ("Next: Add Optional Accessories" / "Next: Review Order" /
   "Complete Purchase"). The theme's global rule in preload-style.css --
   `button { height: 40px; }` -- outranked `padding: 14px 0` and squeezed the
   label into a 12px content box (40 - 14 - 14), which is what made the text
   sit off-centre inside the orange bar. height:auto hands the box back to the
   padding, and the flex centring pins the label to the middle on BOTH axes
   instead of relying on the browser's default button content alignment.
   The symmetric 14px side padding keeps the (long) label clear of the rounded
   corners while still fitting on one line at this 300px sidebar width.
   Specificity (0,5,1) beats `button` (0,0,1), so no !important is needed. */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta .dtc-btn-next {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    min-height: 44px;
    padding: 12px 14px;
    box-sizing: border-box;
    background: #FE5000;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.3;
    letter-spacing: normal;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s;
    text-decoration: none;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta .dtc-btn-next:hover {
    background: #d44000;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta .dtc-ssl-note {
    text-align: center;
    font-size: 11px;
    color: #888;
    margin-top: 6px;
    margin-bottom: 8px;
}

/* "Checkout Now" skip button */
.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta .dtc-btn-checkout-now {
    display: block;
    width: 100%;
    padding: 9px 0;
    background: transparent;
    color: #006F99;
    border: 1px solid #006F99;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    margin-top: 6px;
}

.dtc-smartretract-store-wrapper .dtc-order-summary .dtc-os-cta .dtc-btn-checkout-now:hover {
    background: #006F99;
    color: #fff;
}

/* ============================================================
   ACCORDION TRUST BADGES (sidebar)
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-accordion-list {
    border-top: 1px solid #eee;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item {
    border-bottom: 1px solid #eee;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item .dtc-accordion-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item .dtc-accordion-trigger:hover {
    background: #f8f8f8;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item .dtc-accordion-trigger .dtc-acc-icon {
    font-size: 16px;
    color: #006F99;
    margin-right: 8px;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item .dtc-accordion-trigger .dtc-acc-arrow {
    font-size: 12px;
    color: #999;
    transition: transform 0.2s;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item.dtc-acc-open .dtc-accordion-trigger .dtc-acc-arrow {
    transform: rotate(180deg);
}

.dtc-smartretract-store-wrapper .dtc-accordion-item .dtc-accordion-content {
    display: none;
    padding: 0 16px 12px;
    font-size: 12px;
    color: #555;
    line-height: 1.6;
}

.dtc-smartretract-store-wrapper .dtc-accordion-item.dtc-acc-open .dtc-accordion-content {
    display: block;
}

/* ============================================================
   TRUST BADGES (bottom row)
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-trust-badges {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.dtc-smartretract-store-wrapper .dtc-trust-badge {
    flex: 1;
    min-width: 200px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px 20px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-icon {
    font-size: 28px;
    flex-shrink: 0;
    color: #006F99;
}

.dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-text h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px;
    color: #222;
}

.dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-text p {
    font-size: 12px;
    color: #555;
    margin: 0;
    line-height: 1.5;
}

/* ============================================================
   LOADING STATES
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-loading-overlay {
    position: relative;
}

.dtc-smartretract-store-wrapper .dtc-loading-overlay::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.7);
    z-index: 10;
    border-radius: 8px;
}

.dtc-smartretract-store-wrapper .dtc-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top-color: #FE5000;
    border-radius: 50%;
    animation: dtc-spin 0.7s linear infinite;
    vertical-align: middle;
    margin-left: 6px;
}

@keyframes dtc-spin {
    to { transform: rotate(360deg); }
}

/* ============================================================
   SHIMMER SKELETON
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-skeleton {
    background: #f0f0f0;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.dtc-smartretract-store-wrapper .dtc-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0, rgba(255,255,255,0.4) 50%, transparent 100%);
    animation: dtc-shimmer 1.5s infinite;
}

@keyframes dtc-shimmer {
    to { transform: translateX(100%); }
}

/* ============================================================
   NOTICES
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-notice {
    padding: 10px 14px;
    border-radius: 5px;
    font-size: 13px;
    margin-bottom: 12px;
}

.dtc-smartretract-store-wrapper .dtc-notice.dtc-notice-error {
    background: #fff0ee;
    border: 1px solid #FE5000;
    color: #c0392b;
}

.dtc-smartretract-store-wrapper .dtc-notice.dtc-notice-success {
    background: #eafaf1;
    border: 1px solid #27ae60;
    color: #1e8449;
}

/* ============================================================
   STEP VISIBILITY
   ============================================================ */
.dtc-smartretract-store-wrapper .dtc-step-panel {
    display: none;
}

.dtc-smartretract-store-wrapper .dtc-step-panel.dtc-step-panel-active {
    display: block;
}

/* ============================================================
   WOOCOMMERCE OVERRIDES (scoped)
   ============================================================ */
.dtc-smartretract-store-wrapper .woocommerce-product-gallery {
    opacity: 1 !important;
}

.dtc-smartretract-store-wrapper .woocommerce-notices-wrapper {
    display: none;
}

/* Variation swatches inside DTC cards */
.dtc-smartretract-store-wrapper .product-box table.variations {
    width: 100%;
    margin-bottom: 10px;
}

.dtc-smartretract-store-wrapper .product-box .variable-items-wrapper .variable-item:not(.radio-variable-item) {
    width: 28px;
    height: 28px;
    min-height: 28px;
    margin-right: 8px;
    box-shadow: none;
}

.dtc-smartretract-store-wrapper .product-box .variable-items-wrapper .variable-item:not(.radio-variable-item).selected {
    box-shadow: 0 0 0 2px #222;
}

.dtc-smartretract-store-wrapper .product-box .wvs-style-squared.button-variable-items-wrapper .variable-item {
    width: 52px;
}

.dtc-smartretract-store-wrapper .product-box table.variations td label {
    font-size: 13px;
    width: 80px;
}

.dtc-smartretract-store-wrapper .product-box .qty-addtocart .added_to_cart.wc-forward {
    display: none !important;
}

/* ============================================================
   MOBILE: Show trust badges + accordion on mobile
   (they are inside the sidebar which is hidden on mobile,
   so we show a standalone version below the main content)
   ============================================================ */
@media (max-width: 900px) {
    /* Show trust badges on mobile — 2x2 grid */
    .dtc-smartretract-store-wrapper .dtc-trust-badges {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
        flex-wrap: unset !important;
    }
    .dtc-smartretract-store-wrapper .dtc-trust-badge {
        min-width: 0 !important;
        flex: none !important;
        width: 100% !important;
        padding: 12px !important;
        align-items: flex-start !important;
    }
    .dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-icon {
        font-size: 22px !important;
    }
    .dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-text h4 {
        font-size: 13px !important;
        margin-bottom: 3px !important;
    }
    .dtc-smartretract-store-wrapper .dtc-trust-badge .dtc-badge-text p {
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    /* Show a mobile accordion block below the mobile CTA bar area */
    .dtc-mobile-accordion-block {
        display: block !important;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        margin-top: 16px;
        overflow: hidden;
    }
}

@media (min-width: 901px) {
    .dtc-mobile-accordion-block {
        display: none !important;
    }
}

/* ============================================================
   MOBILE ORDER SUMMARY DRAWER
   Uses brand-new dtc-drawer-* classes — zero overlap with
   theme button/accordion styles.
   ============================================================ */

/* Overlay backdrop */
.dtc-mobile-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9997;
}
.dtc-mobile-drawer-overlay.dtc-drawer-open {
    display: block;
}

/* Drawer panel */
.dtc-mobile-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 32px rgba(0,0,0,0.2);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
}
.dtc-mobile-drawer.dtc-drawer-open {
    transform: translateY(0);
}

/* Drawer header */
.dtc-mobile-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px 14px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.dtc-mobile-drawer-title {
    font-size: 17px;
    font-weight: 700;
    color: #222;
    font-family: inherit;
}
.dtc-mobile-drawer-close {
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    user-select: none;
    transition: color 0.15s;
    font-family: inherit;
}
.dtc-mobile-drawer-close:hover {
    color: #c0392b;
}

/* Drawer body — scrollable */
.dtc-mobile-drawer-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    padding: 0;
}

/* ---- Drawer Items ---- */
.dtc-drawer-items {
    padding: 14px 20px 0;
}
.dtc-drawer-empty {
    font-size: 13px;
    color: #888;
    margin: 0;
    padding: 8px 0;
}
.dtc-drawer-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.dtc-drawer-item:last-child {
    border-bottom: none;
}
.dtc-drawer-item-info {
    flex: 1;
    min-width: 0;
}
.dtc-drawer-item-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dtc-drawer-item-meta {
    display: block;
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dtc-drawer-item-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.dtc-drawer-item-price {
    font-size: 13px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
}
.dtc-drawer-item-remove {
    font-size: 16px;
    color: #ccc;
    cursor: pointer;
    line-height: 1;
    padding: 0 2px;
    user-select: none;
    transition: color 0.15s;
    font-family: inherit;
}
.dtc-drawer-item-remove:hover {
    color: #c0392b;
}

/* ---- Drawer Totals ---- */
.dtc-drawer-totals {
    padding: 12px 20px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 4px;
}
.dtc-drawer-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}
.dtc-drawer-row:last-child {
    margin-bottom: 0;
}
.dtc-drawer-total-row {
    font-size: 15px;
    font-weight: 700;
    color: #222;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #e8e8e8;
}
.dtc-drawer-total-amount {
    color: #006F99;
    font-size: 16px;
}

/* ---- Drawer CTA ---- */
.dtc-drawer-cta {
    padding: 14px 20px 16px;
}
.dtc-drawer-next-btn {
    display: block;
    width: 100%;
    padding: 15px 0;
    background: #FE5000;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
    user-select: none;
    font-family: inherit;
}
.dtc-drawer-next-btn:hover {
    background: #d44000;
}
.dtc-drawer-ssl {
    text-align: center;
    font-size: 11px;
    color: #aaa;
    margin: 8px 0 0;
}

/* ---- Drawer Footer Accordion ---- */
.dtc-mobile-drawer-footer {
    flex-shrink: 0;
    border-top: 1px solid #eee;
}
.dtc-drawer-accordion {
    /* no extra styles needed */
}
.dtc-drawer-acc-item {
    border-bottom: 1px solid #f0f0f0;
}
.dtc-drawer-acc-item:last-child {
    border-bottom: none;
}
.dtc-drawer-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    user-select: none;
    background: #fff;
    transition: background 0.15s;
}
.dtc-drawer-acc-trigger:hover {
    background: #fafafa;
}
.dtc-drawer-acc-arrow {
    font-size: 11px;
    color: #aaa;
    transition: transform 0.2s;
}
.dtc-drawer-acc-item.dtc-drawer-acc-open .dtc-drawer-acc-arrow {
    transform: rotate(180deg);
}
.dtc-drawer-acc-content {
    display: none;
    padding: 0 20px 12px;
    font-size: 12px;
    color: #666;
    line-height: 1.6;
}
.dtc-drawer-acc-item.dtc-drawer-acc-open .dtc-drawer-acc-content {
    display: block;
}

/* ============================================================
   MOBILE BOTTOM CTA BAR
   Uses div elements (not buttons) to avoid theme button styles.
   ============================================================ */
@media (max-width: 900px) {
    /* Hide the sidebar order summary card on mobile */
    .dtc-smartretract-store-wrapper .dtc-sidebar-col {
        display: none;
    }

    /* Fixed bottom CTA bar */
    .dtc-mobile-cta-bar {
        display: flex;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #fff;
        border-top: 2px solid #eee;
        padding: 10px 14px;
        box-shadow: 0 -3px 16px rgba(0,0,0,0.1);
        gap: 12px;
    }

    /* Summary toggle (left side) — div, not button */
    .dtc-mobile-cta-bar .dtc-mobile-summary-toggle {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        background: #f7f7f7;
        border: 1px solid #e0e0e0;
        border-radius: 8px;
        padding: 7px 12px;
        cursor: pointer;
        flex-shrink: 0;
        min-width: 110px;
        transition: background 0.15s;
        user-select: none;
    }
    .dtc-mobile-cta-bar .dtc-mobile-summary-toggle:hover {
        background: #efefef;
    }
    .dtc-mobile-cta-bar .dtc-mobile-total-label {
        font-size: 10px;
        color: #999;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        display: block;
        font-family: inherit;
    }
    .dtc-mobile-cta-bar .dtc-mobile-total-amount {
        font-size: 16px;
        color: #006F99;
        font-weight: 700;
        display: block;
        line-height: 1.2;
        font-family: inherit;
    }

    /* Next step button (right side) — div, not button */
    .dtc-mobile-cta-bar .dtc-mobile-next-btn {
        flex: 1;
        padding: 14px 12px;
        background: #FE5000;
        color: #fff;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        white-space: nowrap;
        transition: background 0.2s;
        user-select: none;
        font-family: inherit;
    }
    .dtc-mobile-cta-bar .dtc-mobile-next-btn:hover {
        background: #d44000;
    }

    /* Add bottom padding so content isn't hidden behind the bar */
    .dtc-smartretract-store-wrapper {
        padding-bottom: 80px;
    }
}

/* Hide mobile bar + drawer on desktop */
@media (min-width: 901px) {
    .dtc-mobile-cta-bar {
        display: none !important;
    }
    .dtc-mobile-drawer,
    .dtc-mobile-drawer-overlay {
        display: none !important;
    }
}

/* ============================================================
   RESPONSIVE UTILITIES — TABLET (≤900px)
   ============================================================ */
@media (max-width: 900px) {
    /* Wrapper: add horizontal padding so content doesn't touch edges */
    .dtc-smartretract-store-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }

    /* Product grid: 2 columns on tablet */
    .dtc-smartretract-store-wrapper .dtc-product-card {
        width: calc(50% - 8px);
        min-width: 0;
    }

    /* Qty + ATC row: keep pill stepper compact, ATC fills rest */
    .dtc-smartretract-store-wrapper .dtc-qty-atc-row {
        gap: 6px;
    }
    .dtc-smartretract-store-wrapper .dtc-sp-quantity {
        flex-shrink: 0;
    }
    .dtc-smartretract-store-wrapper .dtc-btn-atc {
        min-width: 0;
        padding: 0 12px;
        font-size: 13px;
    }
}

/* ============================================================
   RESPONSIVE UTILITIES — MOBILE (≤560px)
   ============================================================ */
@media (max-width: 560px) {
    /* Wrapper padding */
    .dtc-smartretract-store-wrapper {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Stepper: compact */
    .dtc-smartretract-store-wrapper .dtc-stepper {
        gap: 0;
    }
    .dtc-smartretract-store-wrapper .dtc-step {
        padding: 8px 6px 6px;
    }
    .dtc-smartretract-store-wrapper .dtc-step .dtc-step-label {
        display: none; /* hide "STEP 1" label, keep step name */
    }
    .dtc-smartretract-store-wrapper .dtc-step .dtc-step-name {
        font-size: 11px;
    }

    /* Save progress: stack vertically */
    .dtc-smartretract-store-wrapper .dtc-save-progress {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .dtc-smartretract-store-wrapper .dtc-save-progress p {
        flex: 1 1 auto;
    }
    .dtc-smartretract-store-wrapper .dtc-save-progress input[type="email"],
    .dtc-smartretract-store-wrapper .dtc-save-email-input {
        width: 100% !important;
        flex: none !important;
    }
    .dtc-smartretract-store-wrapper .dtc-save-progress .dtc-btn-save {
        width: 100% !important;
    }

    /* Product grid: single column */
    .dtc-smartretract-store-wrapper .dtc-product-grid {
        gap: 12px;
    }
    .dtc-smartretract-store-wrapper .dtc-product-card {
        width: 100%;
        min-width: 0;
    }

    /* Qty + ATC row: pill stepper stays compact, ATC fills rest */
    .dtc-smartretract-store-wrapper .dtc-qty-atc-row {
        gap: 6px;
    }
    .dtc-smartretract-store-wrapper .dtc-sp-quantity {
        height: 42px;
        flex-shrink: 0;
    }
    .dtc-smartretract-store-wrapper .dtc-sp-quantity .dtc-qty-btn {
        width: 42px;
        height: 42px;
    }
    .dtc-smartretract-store-wrapper .dtc-sp-quantity input.qty {
        width: 36px;
        height: 42px;
        font-size: 15px;
    }
    .dtc-smartretract-store-wrapper .dtc-btn-atc {
        height: 42px;
        font-size: 14px;
        padding: 0 14px;
        flex: 1;
        min-width: 0;
    }

    /* Checkout form: stack half/third rows */
    .dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-half,
    .dtc-smartretract-store-wrapper .dtc-form-row.dtc-form-row-third {
        flex-direction: column;
        gap: 8px;
    }

    /* Trust badges: stack */
    .dtc-smartretract-store-wrapper .dtc-trust-badges {
        flex-direction: column;
        gap: 10px;
    }
    .dtc-smartretract-store-wrapper .dtc-trust-badge {
        min-width: 0;
        width: 100%;
    }

    /* Accessories preview: smaller cards */
    .dtc-smartretract-store-wrapper .dtc-acc-mini-card {
        min-width: 160px;
    }

    /* Checkout sections: tighter padding */
    .dtc-smartretract-store-wrapper .dtc-checkout-section {
        padding: 14px;
    }
    .dtc-smartretract-store-wrapper .dtc-payment-section {
        padding: 14px;
    }

    /* Step 2 banner */
    .dtc-smartretract-store-wrapper .dtc-step2-banner {
        font-size: 14px;
        padding: 12px 14px;
    }

    /* Section heading: wrap on small screens */
    .dtc-smartretract-store-wrapper .dtc-section-heading {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* Body scroll-lock when modal is open */
body.dtc-noscroll {
    overflow: hidden;
}

/* ============================================================
   DTC PRODUCT READ MORE OVERLAY / MODAL
   Scoped to .dtc-product-modal-overlay (appended to body but
   controlled by DTC JS — no global conflicts)
   ============================================================ */

/* Overlay backdrop */
.dtc-product-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 99998;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.dtc-product-modal-overlay.dtc-modal-open {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 16px;
}

/* Modal box */
.dtc-product-modal-overlay .dtc-modal-box {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 100%;
    max-width: 960px;
    min-height: 200px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
    display: flex;
    flex-direction: row;
    overflow: hidden;
    animation: dtcModalIn 0.25s ease;
}

@keyframes dtcModalIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Close button */
.dtc-product-modal-overlay .dtc-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    z-index: 10;
    transition: background 0.15s, color 0.15s;
}
.dtc-product-modal-overlay .dtc-modal-close:hover {
    background: #FE5000;
    color: #fff;
    border-color: #FE5000;
}

/* Loading spinner */
.dtc-product-modal-overlay .dtc-modal-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    font-size: 14px;
    color: #888;
}
.dtc-product-modal-overlay .dtc-modal-loading::after {
    content: '';
    display: inline-block;
    width: 32px;
    height: 32px;
    border: 3px solid #e0e0e0;
    border-top-color: #FE5000;
    border-radius: 50%;
    animation: dtcSpin 0.7s linear infinite;
    margin-left: 12px;
}
@keyframes dtcSpin {
    to { transform: rotate(360deg); }
}

/* Left column: image gallery */
.dtc-product-modal-overlay .dtc-modal-gallery {
    flex: 0 0 50%;
    max-width: 50%;
    background: #f8f8f8;
    position: relative;
    overflow: hidden;
}

/* Flexslider inside modal */
.dtc-product-modal-overlay .dtc-modal-gallery .flexslider {
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.dtc-product-modal-overlay .dtc-modal-gallery .flexslider .slides img {
    width: 100%;
    height: 340px;
    object-fit: contain;
    display: block;
}
.dtc-product-modal-overlay .dtc-modal-gallery .flex-direction-nav a {
    opacity: 0.7;
}
.dtc-product-modal-overlay .dtc-modal-gallery .flex-direction-nav a:hover {
    opacity: 1;
}

/* Custom nav arrows */
.dtc-product-modal-overlay .dtc-modal-nav {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 10px 0 6px;
}
.dtc-product-modal-overlay .dtc-modal-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid #ddd;
    color: #555;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.15s;
}
.dtc-product-modal-overlay .dtc-modal-nav a:hover {
    border-color: #FE5000;
    color: #FE5000;
}

/* Dot nav */
.dtc-product-modal-overlay .dtc-modal-gallery .flex-control-nav {
    bottom: 6px;
}

/* Modal attribute rows (Color / Size labels + controls) */
.dtc-product-modal-overlay .dtc-modal-attr-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.dtc-product-modal-overlay .dtc-modal-attr-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    min-width: 44px;
}
/* Reuse the same swatch + width-btn styles inside the modal */
.dtc-product-modal-overlay .dtc-color-swatches .dtc-swatch {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
    display: inline-block;
}
.dtc-product-modal-overlay .dtc-color-swatches .dtc-swatch.selected,
.dtc-product-modal-overlay .dtc-color-swatches .dtc-swatch:hover {
    border-color: #222;
}
.dtc-product-modal-overlay .dtc-width-selectors .dtc-width-btn {
    padding: 4px 10px;
    border: 1px solid #d3d3d3;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    background: #fff;
    color: #333;
    transition: all 0.15s;
}
.dtc-product-modal-overlay .dtc-width-selectors .dtc-width-btn.selected,
.dtc-product-modal-overlay .dtc-width-selectors .dtc-width-btn:hover {
    background: #FE5000;
    color: #fff;
    border-color: #FE5000;
}
.dtc-product-modal-overlay .dtc-attr-select {
    height: 32px;
    border: 1px solid #006F99;
    border-radius: 4px;
    padding: 0 8px;
    font-size: 13px;
    color: #222;
    background: #fff;
    cursor: pointer;
}
/* Qty + ATC row inside modal */
.dtc-product-modal-overlay .dtc-qty-atc-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.dtc-product-modal-overlay .dtc-sp-quantity {
    display: flex;
    align-items: center;
    background: #EDE1D1;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    height: 36px;
    overflow: hidden;
}
.dtc-product-modal-overlay .dtc-sp-quantity .dtc-qty-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    cursor: pointer;
    background: none;
    border: none;
    color: #222;
    user-select: none;
}
.dtc-product-modal-overlay .dtc-sp-quantity .dtc-qty-btn:hover {
    background: rgba(0,0,0,0.06);
}
.dtc-product-modal-overlay .dtc-sp-quantity input.qty {
    width: 36px;
    height: 36px;
    text-align: center;
    border: none;
    background: transparent;
    font-size: 16px;
    color: #222;
    padding: 0;
    -moz-appearance: textfield;
}
.dtc-product-modal-overlay .dtc-sp-quantity input.qty::-webkit-outer-spin-button,
.dtc-product-modal-overlay .dtc-sp-quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
.dtc-product-modal-overlay .dtc-btn-atc {
    background: #FBFF00;
    color: #222;
    border: none;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    transition: background 0.2s;
    white-space: nowrap;
}
.dtc-product-modal-overlay .dtc-btn-atc:hover { background: #e8ec00; }
.dtc-product-modal-overlay .dtc-btn-atc.loading { opacity: 0.7; pointer-events: none; }
.dtc-product-modal-overlay .dtc-btn-atc.added { background: #d4f7d4; }
.dtc-product-modal-overlay .dtc-btn-atc .dtc-check { display: none; margin-left: 4px; }
.dtc-product-modal-overlay .dtc-btn-atc.added .dtc-check { display: inline; }
.dtc-product-modal-overlay .dtc-modal-atc-wrap {
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-top: 4px;
    margin-bottom: 16px;
}

/* Inner wrapper: fills the modal box, flex row */
.dtc-product-modal-overlay .dtc-modal-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    min-height: 200px;
}

/* Right column: product info */
.dtc-product-modal-overlay .dtc-modal-info {
    flex: 1;
    padding: 32px 28px 24px;
    overflow-y: auto;
    max-height: 80vh;
}

.dtc-product-modal-overlay .dtc-modal-info h2 {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #222;
    line-height: 1.3;
}

.dtc-product-modal-overlay .dtc-modal-price-list {
    font-size: 15px;
    font-weight: 600;
    color: #FE5000;
    margin-bottom: 12px;
    line-height: 1.7;
}

.dtc-product-modal-overlay .dtc-modal-short-desc {
    font-size: 14px;
    color: #444;
    margin-bottom: 16px;
    line-height: 1.6;
}
.dtc-product-modal-overlay .dtc-modal-short-desc p { margin: 0 0 8px; }

.dtc-product-modal-overlay .dtc-modal-full-desc {
    font-size: 13px;
    color: #555;
    line-height: 1.65;
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-top: 4px;
}
.dtc-product-modal-overlay .dtc-modal-full-desc h2,
.dtc-product-modal-overlay .dtc-modal-full-desc h3,
.dtc-product-modal-overlay .dtc-modal-full-desc h4 {
    font-size: 15px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: #222;
}
.dtc-product-modal-overlay .dtc-modal-full-desc ul,
.dtc-product-modal-overlay .dtc-modal-full-desc ol {
    padding-left: 20px;
    margin: 6px 0;
}
.dtc-product-modal-overlay .dtc-modal-full-desc li {
    margin-bottom: 4px;
}
.dtc-product-modal-overlay .dtc-modal-full-desc a {
    color: #FE5000;
}

/* Responsive: stack on mobile */
@media (max-width: 640px) {
    .dtc-product-modal-overlay .dtc-modal-box {
        flex-direction: column;
        max-width: 100%;
    }
    .dtc-product-modal-overlay .dtc-modal-gallery {
        flex: none;
        max-width: 100%;
    }
    .dtc-product-modal-overlay .dtc-modal-gallery .flexslider .slides img {
        height: 220px;
    }
    .dtc-product-modal-overlay .dtc-modal-info {
        padding: 20px 16px 16px;
        max-height: none;
    }
    .dtc-product-modal-overlay.dtc-modal-open {
        padding: 16px 8px;
    }
}

/* ============================================================
   PAYMENT CONFIGURATION WARNING MESSAGES
   ============================================================ */

/* Warning box for missing payment configuration */
.dtc-smartretract-store-wrapper .dtc-payment-warning {
    padding: 24px;
    background: #fff3cd;
    border: 2px solid #ffc107;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(255, 193, 7, 0.15);
}

.dtc-smartretract-store-wrapper .dtc-payment-warning h3 {
    color: #856404;
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtc-smartretract-store-wrapper .dtc-payment-warning p {
    color: #856404;
    margin: 0 0 12px 0;
    line-height: 1.6;
}

.dtc-smartretract-store-wrapper .dtc-payment-warning ul {
    color: #856404;
    margin: 10px 0 0 20px;
    line-height: 1.8;
}

.dtc-smartretract-store-wrapper .dtc-payment-warning li {
    margin-bottom: 6px;
}

.dtc-smartretract-store-wrapper .dtc-payment-warning strong {
    font-weight: 600;
    color: #664d03;
}

.dtc-smartretract-store-wrapper .dtc-payment-warning code {
    background: rgba(0, 0, 0, 0.08);
    padding: 2px 6px;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

/* Error box for critical issues (WooCommerce not active) */
.dtc-smartretract-store-wrapper .dtc-payment-error {
    padding: 24px;
    background: #f8d7da;
    border: 2px solid #f5c6cb;
    border-radius: 12px;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.15);
}

.dtc-smartretract-store-wrapper .dtc-payment-error h3 {
    color: #721c24;
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dtc-smartretract-store-wrapper .dtc-payment-error p {
    color: #721c24;
    margin: 0;
    line-height: 1.6;
}

/* Success state - payment methods loaded */
.dtc-smartretract-store-wrapper .dtc-payment-success {
    padding: 16px;
    background: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    margin: 0 0 16px 0;
}

.dtc-smartretract-store-wrapper .dtc-payment-success p {
    color: #155724;
    margin: 0;
    font-size: 14px;
}

/* ============================================================
   RESPONSIVE — Desktop / Tablet / Mobile
   Single authoritative block. Uses body class specificity
   to guarantee these rules win over everything else.
   ============================================================ */

/* ── DESKTOP (≥1025px): 3-column product grid + sidebar layout ── */
body .dtc-smartretract-store-wrapper .dtc-layout {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: flex-start !important;
}
body .dtc-smartretract-store-wrapper .dtc-main-col {
    flex: 1 !important;
    min-width: 0 !important;
    width: auto !important;
}
body .dtc-smartretract-store-wrapper .dtc-sidebar-col {
    width: 300px !important;
    flex-shrink: 0 !important;
    flex: none !important;
}
body .dtc-smartretract-store-wrapper .dtc-product-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    gap: 16px !important;
}
body .dtc-smartretract-store-wrapper .dtc-product-card {
    width: calc(33.333% - 11px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* ── TABLET (≤1024px): 2-column products, sidebar stacks ── */
@media (max-width: 1024px) {
    body .dtc-smartretract-store-wrapper .dtc-layout {
        flex-direction: column !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-main-col {
        width: 100% !important;
        flex: none !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-sidebar-col {
        width: 100% !important;
        flex: none !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-product-card {
        width: calc(50% - 8px) !important;
    }
    body .dtc-smartretract-store-wrapper {
        padding: 0 16px !important;
    }
}

/* ── MOBILE (≤600px): single column, full width ── */
@media (max-width: 600px) {
    html, body { overflow-x: hidden !important; }
    body .dtc-smartretract-store-wrapper {
        padding: 0 12px !important;
        overflow-x: hidden !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-product-grid {
        flex-direction: column !important;
        gap: 12px !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-product-card {
        width: 100% !important;
    }
    /* Email input — full width, no zoom on iOS */
    body .dtc-smartretract-store-wrapper input[type="email"],
    body .dtc-smartretract-store-wrapper input[type="text"],
    body .dtc-smartretract-store-wrapper input[type="tel"],
    body .dtc-smartretract-store-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important;
        box-sizing: border-box !important;
    }
    body .dtc-smartretract-store-wrapper .dtc-save-progress {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* Qty stepper */
    body .dtc-smartretract-store-wrapper .sp-quantity,
    body .dtc-smartretract-store-wrapper .dtc-sp-quantity {
        height: 42px !important;
    }
}

/* ── Width selector spacing — force gap between size buttons and Add to Cart ── */
body .dtc-smartretract-store-wrapper .dtc-width-selectors {
    margin-bottom: 24px !important;
    margin-top: 10px !important;
    padding-bottom: 4px !important;
}
body .dtc-smartretract-store-wrapper .dtc-qty-atc-row {
    margin-top: 16px !important;
    padding-top: 14px !important;
    border-top: 1px solid #efefef !important;
}
/* Larger tap target for size buttons */
body .dtc-smartretract-store-wrapper .dtc-width-selectors .dtc-width-btn {
    padding: 9px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}