/**
 * Limitless Order Builder — Quick Estimator styles
 *
 * ARCHITECTURE
 * The estimator renders on TWO surfaces sharing one markup:
 *   1. Standalone shortcode page — wrapper carries id="lgsb-estimator" and
 *      the .lgsb-est--page modifier, which declares the design-token subset
 *      below (gang-sheet.css is not loaded there).
 *   2. Product-page modal — wrapper is .lgsb-est inside #lgsb-uploader and
 *      INHERITS the full token block (including admin color overrides
 *      injected by injectCssVars()) plus the lgsb-modal chrome from
 *      gang-sheet.css.
 *
 * SPECIFICITY FLOOR (see docs/THEME-CSS-OVERRIDE-PLAYBOOK.md, Level 1):
 * every component selector is anchored on an ID via
 * `:is(#lgsb-estimator, #lgsb-uploader)` — one rule set, ID-anchored in both
 * contexts, outranking Divi/WooCommerce class chains without !important.
 *
 * TOKEN SYNC: values in the token block are copied from gang-sheet.css §1
 * (the single source of truth). If a token is retuned there, update it here.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* =========================================================================
 * 1. TOKENS — standalone page only (.lgsb-est--page). The modal instance
 *    inherits these from #lgsb-uploader and this block must NOT re-declare
 *    them there (it would shadow admin color overrides).
 * ========================================================================= */
.lgsb-est--page {
    --lgsb-primary:   #007D91;
    --lgsb-card-bg:   #ffffff;
    --lgsb-light-bg:  #F5F7F8;
    --lgsb-divider:   #E3E8EB;
    --lgsb-muted:     #6B7680;
    --lgsb-error:     #B42318;

    --lgsb-teal:         var(--lgsb-primary);
    --lgsb-teal-soft:    #EBF6F8;
    --lgsb-teal-dark:    #055866;
    --lgsb-error-text:   var(--lgsb-error);
    --lgsb-error-bg:     #FBEAE8;
    --lgsb-error-border: #EEB4AE;
    --lgsb-ink:          #111111;

    --lgsb-text:        #1F2933;
    --lgsb-text-muted:  var(--lgsb-muted);
    --lgsb-border:      var(--lgsb-divider);
    --lgsb-surface:     var(--lgsb-card-bg);
    --lgsb-surface-dim: var(--lgsb-light-bg);

    --lgsb-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --lgsb-font-display: 56px;
    --lgsb-font-title-2: 15px;
    --lgsb-font-body:    13px;
    --lgsb-font-body-sm: 12px;
    --lgsb-font-label:   10px;
    --lgsb-font-stat:    23px;
    --lgsb-font-button:  13px;
    --lgsb-font-pill:    11px;
    --lgsb-weight-regular:  400;
    --lgsb-weight-medium:   500;
    --lgsb-weight-semibold: 500;
    --lgsb-weight-bold:     600;
    --lgsb-leading-tight: 1.2;
    --lgsb-leading-body:  1.5;
    --lgsb-tracking-label:  .06em;
    --lgsb-tracking-button: .06em;

    --lgsb-space-1: 4px;
    --lgsb-space-2: 4px;
    --lgsb-space-3: 9px;
    --lgsb-space-4: 12px;
    --lgsb-space-5: 20px;
    --lgsb-space-6: 13px;
    --lgsb-space-7: 26px;
    --lgsb-card-padding: 20px;

    --lgsb-radius-sm:     7px;
    --lgsb-radius-input:  8px;
    --lgsb-radius-button: 12px;
    --lgsb-radius-card:   12px;
    --lgsb-radius-pill:   999px;
    --lgsb-card-border-width:   3px;
    --lgsb-divider-width:       2px;
    --lgsb-input-border-width:  2px;
    --lgsb-button-border-width: 1.5px;
    --lgsb-dropzone-border-width: 2.5px;
    --lgsb-focus-ring-width:    3px;
    --lgsb-shadow-card:   0 3px 12px rgba(0, 0, 0, .06);

    --lgsb-dur-fast: 120ms;
    --lgsb-dur-base: 180ms;
    --lgsb-ease:     cubic-bezier(.4, 0, .2, 1);

    --lgsb-focus-ring: 0 0 0 var(--lgsb-focus-ring-width) rgba(0, 125, 145, .35);
}

/* =========================================================================
 * 2. BASE — both wrappers
 * ========================================================================= */
#lgsb-estimator,
#lgsb-uploader .lgsb-est {
    box-sizing: border-box;
    color: var(--lgsb-text);
    font-family: var(--lgsb-font-family);
    font-size: var(--lgsb-font-body);
    line-height: var(--lgsb-leading-body);
    text-align: left;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est *,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est *::before,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est *::after {
    box-sizing: border-box;
}

/* #lgsb-estimator IS the .lgsb-est element on the standalone page — the
   descendant rule above only reaches the modal instance's children. */
#lgsb-estimator *,
#lgsb-estimator *::before,
#lgsb-estimator *::after {
    box-sizing: border-box;
}

/* The standalone wrapper IS #lgsb-estimator itself, so wrapper-relative
   rules use this alias: it matches the wrapper in BOTH contexts. */
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) h2,
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) h3,
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) p,
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) ul,
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) table {
    margin: 0;
    padding: 0;
}

/* =========================================================================
 * 3. LAYOUT
 * ========================================================================= */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-grid {
    align-items: start;
    display: grid;
    gap: var(--lgsb-space-4);
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-bottom {
    display: grid;
    gap: var(--lgsb-space-4);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    margin-top: var(--lgsb-space-4);
}

@media (max-width: 880px) {
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-grid,
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-bottom {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
 * 4. CARDS
 * ========================================================================= */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-card {
    background: var(--lgsb-surface);
    border: var(--lgsb-card-border-width) solid var(--lgsb-border);
    border-radius: var(--lgsb-radius-card);
    box-shadow: var(--lgsb-shadow-card);
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-3);
    padding: var(--lgsb-card-padding);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-card-title {
    color: var(--lgsb-teal);
    font-size: var(--lgsb-font-title-2);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: .03em;
    line-height: var(--lgsb-leading-tight);
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-card-sub {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
    margin-top: calc(-1 * var(--lgsb-space-2));
}

/* =========================================================================
 * 5. DESIGNS TABLE
 * ========================================================================= */
:is(#lgsb-estimator.lgsb-est, #lgsb-uploader .lgsb-est) {
    --lgsb-est-cols: 26px minmax(84px, 1fr) minmax(84px, 1fr) 126px 70px 96px 34px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-head {
    align-items: end;
    display: grid;
    gap: var(--lgsb-space-2);
    grid-template-columns: var(--lgsb-est-cols);
    padding: 0 2px 6px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-head span {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-label);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-label);
    line-height: var(--lgsb-leading-tight);
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row {
    align-items: center;
    border-top: var(--lgsb-divider-width) solid var(--lgsb-border);
    display: grid;
    gap: var(--lgsb-space-2);
    grid-template-columns: var(--lgsb-est-cols);
    padding: var(--lgsb-space-3) 2px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-rownum {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
    font-weight: var(--lgsb-weight-bold);
}

/* Field caption shown only in the stacked mobile layout. */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row [data-label]::before {
    color: var(--lgsb-text-muted);
    content: attr(data-label);
    display: none;
    font-size: var(--lgsb-font-label);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-label);
    text-transform: uppercase;
}

/* --- Inputs (builder input recipe) --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-field {
    align-items: center;
    display: flex;
    position: relative;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-input {
    background: var(--lgsb-surface);
    border: var(--lgsb-input-border-width) solid var(--lgsb-border);
    border-radius: var(--lgsb-radius-input);
    color: var(--lgsb-text);
    font-family: var(--lgsb-font-family);
    font-size: var(--lgsb-font-body);
    height: 36px;
    min-width: 0;
    padding: 0 26px 0 10px;
    transition: border-color var(--lgsb-dur-fast) var(--lgsb-ease),
                box-shadow var(--lgsb-dur-fast) var(--lgsb-ease);
    width: 100%;
    -moz-appearance: textfield;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-input::-webkit-outer-spin-button,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-input:focus,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-input:focus-visible {
    border-color: var(--lgsb-teal);
    box-shadow: var(--lgsb-focus-ring);
    outline: none;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-unit {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
    pointer-events: none;
    position: absolute;
    right: 9px;
}

/* --- Quantity stepper (builder copies-stepper recipe) --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty {
    align-items: center;
    display: flex;
    gap: var(--lgsb-space-1);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty .lgsb-est-input {
    padding: 0 6px;
    text-align: center;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty-step {
    align-items: center;
    background: var(--lgsb-surface);
    border: var(--lgsb-input-border-width) solid var(--lgsb-border);
    border-radius: var(--lgsb-radius-sm);
    color: var(--lgsb-text);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 auto;
    font-family: var(--lgsb-font-family);
    font-size: var(--lgsb-font-body);
    font-weight: var(--lgsb-weight-bold);
    height: 28px;
    justify-content: center;
    line-height: 1;
    padding: 0;
    transition: background var(--lgsb-dur-fast) var(--lgsb-ease),
                border-color var(--lgsb-dur-fast) var(--lgsb-ease);
    width: 28px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty-step:hover {
    background: var(--lgsb-teal-soft);
    border-color: var(--lgsb-teal);
    color: var(--lgsb-teal);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty-step:focus-visible {
    box-shadow: var(--lgsb-focus-ring);
    outline: none;
}

/* --- Per-row outputs --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-li {
    font-size: var(--lgsb-font-body);
    font-weight: var(--lgsb-weight-semibold);
    white-space: nowrap;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-cost {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body);
    white-space: nowrap;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-cost.is-active {
    color: var(--lgsb-teal-dark);
    font-weight: var(--lgsb-weight-bold);
}

/* --- Remove button --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-remove {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--lgsb-radius-sm);
    color: var(--lgsb-text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background var(--lgsb-dur-fast) var(--lgsb-ease),
                color var(--lgsb-dur-fast) var(--lgsb-ease);
    width: 32px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-remove:hover:not(:disabled) {
    background: var(--lgsb-error-bg);
    color: var(--lgsb-error-text);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-remove:disabled {
    cursor: default;
    opacity: .35;
}

/* --- Row error (design too large) --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row--error .lgsb-est-input {
    border-color: var(--lgsb-error-border);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row-error {
    color: var(--lgsb-error-text);
    font-size: var(--lgsb-font-body-sm);
    grid-column: 1 / -1;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row-error[hidden] {
    display: none;
}

/* --- Row note (finished gang sheet — priced as-is, not nested) --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row-note {
    color: var(--lgsb-teal-dark);
    font-size: var(--lgsb-font-body-sm);
    grid-column: 1 / -1;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row-note[hidden] {
    display: none;
}

/* --- Add another design (compact dashed dropzone recipe) --- */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add {
    align-items: center;
    background: transparent;
    border: var(--lgsb-dropzone-border-width) dashed var(--lgsb-teal);
    border-radius: var(--lgsb-radius-card);
    color: var(--lgsb-teal);
    cursor: pointer;
    display: flex;
    font-family: var(--lgsb-font-family);
    gap: var(--lgsb-space-3);
    justify-content: center;
    margin-top: var(--lgsb-space-2);
    padding: var(--lgsb-space-3) var(--lgsb-space-4);
    text-align: left;
    transition: background var(--lgsb-dur-base) var(--lgsb-ease);
    width: 100%;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add:hover {
    background: var(--lgsb-teal-soft);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add:focus-visible {
    box-shadow: var(--lgsb-focus-ring);
    outline: none;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add-text {
    display: flex;
    flex-direction: column;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add-label {
    font-size: var(--lgsb-font-button);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-button);
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-add-sub {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
}

/* =========================================================================
 * 6. SUMMARY CARD (Order Summary recipe: teal band + stats + ink pill)
 * ========================================================================= */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-summary {
    gap: 0;
    overflow: hidden;
    padding: 0;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-summary-band {
    background: var(--lgsb-teal);
    color: #fff;
    font-size: var(--lgsb-font-title-2);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: .04em;
    padding: var(--lgsb-space-4) var(--lgsb-card-padding);
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-summary-body {
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-3);
    padding: var(--lgsb-card-padding);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-stat-label {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-label);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: var(--lgsb-tracking-label);
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-stat-value {
    font-size: var(--lgsb-font-stat);
    font-weight: var(--lgsb-weight-bold);
    line-height: var(--lgsb-leading-tight);
    margin-top: var(--lgsb-space-1);
    transition: opacity var(--lgsb-dur-base) var(--lgsb-ease);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-ppi-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--lgsb-space-2);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tier-badge {
    background: var(--lgsb-teal);
    border-radius: var(--lgsb-radius-pill);
    color: #fff;
    display: inline-block;
    font-size: var(--lgsb-font-pill);
    font-weight: var(--lgsb-weight-semibold);
    letter-spacing: .03em;
    line-height: var(--lgsb-leading-tight);
    padding: 4px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tier-badge[hidden] {
    display: none;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-min-note {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-divider {
    background: var(--lgsb-border);
    height: var(--lgsb-divider-width);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-total {
    color: var(--lgsb-teal);
    font-size: var(--lgsb-font-display);
    font-weight: var(--lgsb-weight-bold);
    line-height: var(--lgsb-leading-tight);
    transition: opacity var(--lgsb-dur-base) var(--lgsb-ease);
}

@media (max-width: 640px) {
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-total {
        font-size: 34px; /* pre-retune display size — 56px overwhelms phones */
    }
}

/* Ink pill — same recipe as the builder's free-shipping pill. */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-free-pill {
    background: var(--lgsb-ink);
    border-radius: var(--lgsb-radius-pill);
    color: #fff;
    display: block;
    font-size: var(--lgsb-font-button);
    font-weight: var(--lgsb-weight-bold);
    letter-spacing: .04em;
    line-height: var(--lgsb-leading-tight);
    padding: 10px 16px;
    text-align: center;
    text-transform: uppercase;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-free-pill[hidden],
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-shipping[hidden],
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-shipping-note[hidden],
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-min-note[hidden],
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-status[hidden] {
    display: none;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-shipping-note {
    color: var(--lgsb-text-muted);
    font-size: var(--lgsb-font-body-sm);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-status {
    background: var(--lgsb-error-bg);
    border: 1px solid var(--lgsb-error-border);
    border-radius: var(--lgsb-radius-sm);
    color: var(--lgsb-error-text);
    display: block;
    font-size: var(--lgsb-font-body-sm);
    padding: var(--lgsb-space-2) var(--lgsb-space-3);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-realtime {
    align-items: center;
    color: var(--lgsb-text-muted);
    display: flex;
    font-size: var(--lgsb-font-body-sm);
    gap: var(--lgsb-space-2);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-realtime svg {
    flex: 0 0 auto;
}

/* Busy: dim stale numbers while the request is in flight (builder's
   dirty-dimming pattern). The busy class sits ON the wrapper. */
:is(#lgsb-estimator.lgsb-est--busy, #lgsb-uploader .lgsb-est--busy) .lgsb-est-stat-value,
:is(#lgsb-estimator.lgsb-est--busy, #lgsb-uploader .lgsb-est--busy) .lgsb-est-total,
:is(#lgsb-estimator.lgsb-est--busy, #lgsb-uploader .lgsb-est--busy) .lgsb-est-li,
:is(#lgsb-estimator.lgsb-est--busy, #lgsb-uploader .lgsb-est--busy) .lgsb-est-cost {
    opacity: .45;
}

/* =========================================================================
 * 7. PRICING TIERS + NOTES (builder pricing-section recipes)
 * ========================================================================= */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table tr {
    align-items: center;
    border-radius: var(--lgsb-radius-sm);
    display: flex;
    font-size: var(--lgsb-font-body-sm);
    justify-content: space-between;
    padding: 8px 10px;
    transition: background var(--lgsb-dur-base) var(--lgsb-ease);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table tr:nth-child(odd) {
    background: var(--lgsb-surface-dim);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table tr.lgsb-est-tier-active {
    background: var(--lgsb-teal);
    font-weight: var(--lgsb-weight-semibold);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table tr.lgsb-est-tier-active td,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-table tr.lgsb-est-tier-active td * {
    color: #fff;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tier-price {
    font-weight: var(--lgsb-weight-bold);
    white-space: nowrap;
}

/* --- Price unit display (sq-in vs linear-in rates) ---
   Every rate renders twice (.lgsb-est-rate-sqin / .lgsb-est-rate-linear);
   the lgsb-est-unit-* class on the estimator root picks which shows. The
   sq-in figure is display-only — orders are billed at the linear rate. */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est.lgsb-est-unit-sqin .lgsb-est-rate-linear,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est.lgsb-est-unit-linear .lgsb-est-rate-sqin,
#lgsb-estimator.lgsb-est-unit-sqin .lgsb-est-rate-linear,
#lgsb-estimator.lgsb-est-unit-linear .lgsb-est-rate-sqin {
    display: none;
}

/* SQ IN / LINEAR IN customer toggle — rendered only in "both" mode */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-tiers-head {
    align-items: center;
    display: flex;
    gap: var(--lgsb-space-2);
    justify-content: space-between;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-unit-toggle {
    background: var(--lgsb-surface-dim);
    border-radius: var(--lgsb-radius-sm);
    display: inline-flex;
    gap: 2px;
    padding: 2px;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-unit-btn {
    background: transparent;
    border: none;
    border-radius: var(--lgsb-radius-sm);
    color: var(--lgsb-text-muted);
    cursor: pointer;
    font-size: var(--lgsb-font-body-sm);
    font-weight: var(--lgsb-weight-semibold);
    letter-spacing: .03em;
    line-height: 1;
    padding: 6px 10px;
    transition: background var(--lgsb-dur-base) var(--lgsb-ease), color var(--lgsb-dur-base) var(--lgsb-ease);
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-unit-btn.is-active {
    background: var(--lgsb-teal);
    color: #fff;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-notes-list {
    display: flex;
    flex-direction: column;
    gap: var(--lgsb-space-2);
    list-style: none;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-notes-list li {
    font-size: var(--lgsb-font-body-sm);
    padding-left: var(--lgsb-space-4);
    position: relative;
}

:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-notes-list li::before {
    color: var(--lgsb-teal);
    content: '\2022';
    left: 2px;
    position: absolute;
}

/* =========================================================================
 * 8. PRODUCT-PAGE MODAL SHELL
 *    Overlay/dialog chrome comes from gang-sheet.css (.lgsb-modal-*); these
 *    rules size the estimator variant and add the persistent-DOM behavior.
 * ========================================================================= */
#lgsb-uploader .lgsb-modal--estimator {
    max-height: 88vh;
    max-width: 1080px;
    overflow-y: auto;
}

/* The estimator overlay is kept in the DOM (state survives re-opening) and
   toggled via [hidden] — restate display so `display:flex` can't leak
   through the hidden attribute (Polish Log rule, v2.77.1). */
#lgsb-uploader .lgsb-est-overlay[hidden] {
    display: none;
}

#lgsb-uploader .lgsb-est-modal-head {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--lgsb-space-3);
}

#lgsb-uploader .lgsb-est-modal-head .lgsb-modal-title {
    margin-bottom: 0;
}

#lgsb-uploader .lgsb-est-modal-close {
    align-items: center;
    background: transparent;
    border: none;
    border-radius: var(--lgsb-radius-sm);
    color: var(--lgsb-text-muted);
    cursor: pointer;
    display: inline-flex;
    height: 32px;
    justify-content: center;
    padding: 0;
    transition: background var(--lgsb-dur-fast) var(--lgsb-ease),
                color var(--lgsb-dur-fast) var(--lgsb-ease);
    width: 32px;
}

#lgsb-uploader .lgsb-est-modal-close:hover {
    background: var(--lgsb-surface-dim);
    color: var(--lgsb-text);
}

#lgsb-uploader .lgsb-est-modal-close:focus-visible {
    box-shadow: var(--lgsb-focus-ring);
    outline: none;
}

/* Inside the modal the estimator cards are nested chrome — lighter borders. */
#lgsb-uploader .lgsb-est--modal .lgsb-est-card {
    border-width: var(--lgsb-nested-card-border-width, 2px);
    box-shadow: var(--lgsb-shadow-nested, 0 1px 6px rgba(0, 0, 0, .05));
}

/* =========================================================================
 * 9. RESPONSIVE — stacked row cards on small screens
 * ========================================================================= */
@media (max-width: 760px) {
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-head {
        display: none;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row {
        border: var(--lgsb-input-border-width) solid var(--lgsb-border);
        border-radius: var(--lgsb-radius-card);
        gap: var(--lgsb-space-3);
        grid-template-columns: 1fr 1fr;
        margin-top: var(--lgsb-space-3);
        padding: var(--lgsb-space-4);
        position: relative;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-row [data-label]::before {
        display: block;
        margin-bottom: 3px;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-field,
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty {
        display: block;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-field {
        position: relative;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-unit {
        bottom: 9px;
        top: auto;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: var(--lgsb-space-1);
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty::before {
        flex: 1 1 100%;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-qty .lgsb-est-input {
        flex: 1 1 auto;
        width: auto;
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-rownum {
        left: var(--lgsb-space-4);
        position: absolute;
        top: var(--lgsb-space-4);
    }

    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est-remove {
        position: absolute;
        right: var(--lgsb-space-3);
        top: var(--lgsb-space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(#lgsb-estimator, #lgsb-uploader) .lgsb-est *,
    #lgsb-estimator * {
        transition-duration: 0s !important;
    }
}

/* =========================================================================
 * 10. THEME-COMBAT — the only !important rules in this file. Each defeats a
 *     specific Divi/WooCommerce habit (see THEME-CSS-OVERRIDE-PLAYBOOK.md).
 * ========================================================================= */

/* Form controls don't inherit fonts; Divi pins its own on input/button. */
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est input,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est button,
:is(#lgsb-estimator, #lgsb-uploader) .lgsb-est label,
#lgsb-estimator input,
#lgsb-estimator button,
#lgsb-estimator label {
    font-family: var(--lgsb-font-family) !important;
}

/* Divi forces placeholder colors. */
#lgsb-estimator .lgsb-est-input::placeholder,
#lgsb-uploader .lgsb-est-input::placeholder {
    color: var(--lgsb-text-muted) !important;
    opacity: 1 !important;
}

/* Divi injects arrows into buttons via pseudo-elements. */
#lgsb-estimator#lgsb-estimator .lgsb-est-add::before,
#lgsb-estimator#lgsb-estimator .lgsb-est-add::after,
#lgsb-uploader#lgsb-uploader .lgsb-est-add::before,
#lgsb-uploader#lgsb-uploader .lgsb-est-add::after {
    content: none !important;
    display: none !important;
}