/**
 * BannerCalc Frontend Styles — v2
 *
 * Pixel-perfect match of bannercalc-configurator-v2 prototype.
 * Branded per Banner Printing Ltd Brand Guide v1.0
 *
 * @package BannerCalc
 */

/* ================================================================
   BRAND TOKENS
================================================================ */
:root {
    /* CMYK Primary */
    --bp-cyan: #3da6f9;
    --bp-magenta: #f96eb4;
    --bp-yellow: #f9f555;
    --bp-key: #1A1A1A;

    /* Extended */
    --bp-cyan-dark: #2889d4;
    --bp-cyan-light: #7ec5fb;
    --bp-cyan-ghost: rgba(61, 166, 249, 0.06);
    --bp-cyan-wash: rgba(61, 166, 249, 0.10);
    --bp-magenta-dark: #d64d95;
    --bp-magenta-light: #fb9cce;
    --bp-magenta-ghost: rgba(249, 110, 180, 0.05);
    --bp-magenta-wash: rgba(249, 110, 180, 0.10);
    --bp-orange: #F26522;
    --bp-green: #39B54A;
    --bp-green-ghost: rgba(57, 181, 74, 0.06);

    /* Neutrals */
    --bp-white: #FFFFFF;
    --bp-off-white: #F8F8F9;
    --bp-warm-white: #FEFCF8;
    --bp-light-gray: #EDEFF2;
    --bp-mid-gray: #BFC4CE;
    --bp-muted: #8892A0;
    --bp-dark-gray: #555E6E;
    --bp-ink: #2D2D2D;
    --bp-black: #1A1A1A;

    /* Functional */
    --bp-success: #39B54A;
    --bp-warning: #F7941D;
    --bp-error: #ED1C24;
    --bp-info: #3da6f9;

    /* Text */
    --bp-text-primary: #1A1A1A;
    --bp-text-secondary: #555E6E;
    --bp-text-muted: #8892A0;
    --bp-text-inverse: #FFFFFF;

    /* Typography */
    --bp-font-display: 'Outfit', -apple-system, sans-serif;
    --bp-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bp-font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

    /* Spacing */
    --bp-space-xs: 4px;
    --bp-space-sm: 8px;
    --bp-space-md: 16px;
    --bp-space-lg: 32px;
    --bp-space-xl: 64px;

    /* Radius */
    --bp-radius-sm: 8px;
    --bp-radius-md: 14px;
    --bp-radius-lg: 24px;

    /* Shadows — layered for depth */
    --bp-shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
    --bp-shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --bp-shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --bp-shadow-lg: 0 8px 30px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.04);
    --bp-shadow-xl: 0 12px 40px rgba(0,0,0,0.09), 0 4px 12px rgba(0,0,0,0.04);
    --bp-shadow-cyan: 0 4px 16px rgba(61, 166, 249, 0.12), 0 1px 4px rgba(61, 166, 249, 0.08);
    --bp-shadow-magenta: 0 4px 14px rgba(249, 110, 180, 0.10);
    --bp-shadow-inner: inset 0 1px 3px rgba(0,0,0,0.06);
}

/* ================================================================
   THEME RESET — override WooCommerce / theme button defaults
   Uses doubled ID (#id#id) for maximum specificity without !important.
   Plugin re-applied rules use !important to always win over this reset.
================================================================ */
#bannercalc-configurator#bannercalc-configurator button,
#bannercalc-configurator#bannercalc-configurator button[type="button"],
#bannercalc-configurator#bannercalc-configurator button[type="submit"],
#bannercalc-configurator#bannercalc-configurator .button,
#bannercalc-configurator#bannercalc-configurator select,
#bannercalc-configurator#bannercalc-configurator input[type="number"],
.bannercalc-card--extras .bannercalc-pill,
.bannercalc-card--delivery .bannercalc-pill,
.bannercalc-preview-tabs .bannercalc-preview-tab,
.bannercalc-quantity-row button,
.bannercalc-quantity-row button[type="button"],
.bannercalc-quantity-row button[type="submit"],
.bannercalc-quantity-row .button,
.bannercalc-quantity-row input[type="number"] {
    background: none;
    background-color: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    transition: none;
    min-height: 0;
    height: auto;
    width: auto;
    vertical-align: baseline;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
}

/* Re-apply pointer cursor on all interactive elements */
#bannercalc-configurator button,
.bannercalc-quantity-row button {
    cursor: pointer;
}

/* ================================================================
   CONFIGURATOR SHELL — outer wrapper (no visual chrome)
================================================================ */
#bannercalc-configurator.bannercalc-configurator {
    font-family: var(--bp-font-body);
    color: var(--bp-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ================================================================
   CARDS — two elevated containers
================================================================ */
.bannercalc-card {
    background: var(--bp-white);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--bp-shadow-lg);
    position: relative;
}

/* ================================================================
   CMYK BRAND BAR
================================================================ */
.bannercalc-cmyk-bar {
    display: flex;
    height: 4px;
    width: 100%;
}
.bannercalc-cmyk-bar span:nth-child(1) { flex: 1; background: var(--bp-cyan); }
.bannercalc-cmyk-bar span:nth-child(2) { flex: 1; background: var(--bp-magenta); }
.bannercalc-cmyk-bar span:nth-child(3) { flex: 1; background: var(--bp-yellow); }
.bannercalc-cmyk-bar span:nth-child(4) { flex: 1; background: var(--bp-key); }

/* Price-area variant: taller bar above product title */
.bannercalc-cmyk-bar--price {
    height: 8px;
    margin-bottom: 15px;
    border-radius: 4px;
    overflow: hidden;
}

/* Hide WC-rendered default price in single product summary */
.woocommerce div.product .entry-summary > .price,
.woocommerce div.product .summary > .price {
    display: none !important;
}

/* ================================================================
   PRICE + RATING ROW (below product title)
================================================================ */
.bannercalc-price-rating-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 4px;
}

.bannercalc-product-price {
    font-family: var(--bp-font-display, 'Outfit', sans-serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--bp-dark, #2D3748);
}

.bannercalc-price-hint {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--bp-text-secondary, #8892A0);
    margin-left: 4px;
}

.bannercalc-product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.bannercalc-product-rating .star-rating {
    font-size: 1.25rem;
    margin: 0;
}
.star-rating span:before{
    color: #f96eb4 !important; /* Magenta stars */
}
.bannercalc-review-link {
    font-family: var(--bp-font-body, 'Plus Jakarta Sans', sans-serif);
    font-size: 0.82rem;
    color: var(--bp-medium-gray, #8892A0);
    text-decoration: none;
}

.bannercalc-review-link:hover {
    color: var(--bp-cyan, #00AEEF);
}

/* ================================================================
   SECTION FRAMEWORK
================================================================ */
.bannercalc-section {
    padding: 24px 15px;
}
.bannercalc-section + .bannercalc-section {
    border-top: 1px solid var(--bp-light-gray);
}

.bannercalc-section-overline {
    font-family: var(--bp-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--bp-text-muted);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.bannercalc-section-overline::before {
    content: '';
    width: 14px;
    height: 2px;
    background: linear-gradient(90deg, var(--bp-cyan), var(--bp-magenta));
    border-radius: 2px;
}

.bannercalc-section-title {
    font-family: var(--bp-font-display);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.3px;
    color: var(--bp-text-primary);
    margin-bottom: 16px;
}

/* ================================================================
   SIZE TOGGLE (Popular / Custom)
================================================================ */
.bannercalc-size-toggle {
    display: flex;
    gap: 3px;
    background: var(--bp-off-white);
    border: 1px solid var(--bp-light-gray);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 16px;
    box-shadow: var(--bp-shadow-inner);
}

#bannercalc-configurator .bannercalc-toggle-btn {
    flex: 1 !important;
    padding: 9px 16px !important;
    border: none !important;
    background: transparent !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-family: var(--bp-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bp-text-muted) !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
#bannercalc-configurator .bannercalc-toggle-btn:hover {
    color: var(--bp-text-secondary) !important;
}
#bannercalc-configurator .bannercalc-toggle-btn.active {
    background: var(--bp-white) !important;
    color: var(--bp-text-primary) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03) !important;
}

/* ================================================================
   PRESET SIZE GRID
================================================================ */
.bannercalc-preset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

#bannercalc-configurator .bannercalc-preset-card {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 11px 14px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    border-radius: 10px !important;
    background: var(--bp-white) !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    position: relative !important;
    font-family: var(--bp-font-body) !important;
    text-align: left !important;
    overflow: hidden !important;
    box-shadow: var(--bp-shadow-xs) !important;
    color: var(--bp-text-primary) !important;
    line-height: 1.4 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
}

#bannercalc-configurator .bannercalc-preset-card:hover {
    border-color: rgba(61, 166, 249, 0.4) !important;
    background: linear-gradient(135deg, rgba(61,166,249,0.03) 0%, rgba(249,110,180,0.02) 100%) !important;
    box-shadow: var(--bp-shadow-sm), 0 0 0 1px rgba(61,166,249,0.08) !important;
    transform: translateY(-1px) !important;
}

#bannercalc-configurator .bannercalc-preset-card.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, rgba(61,166,249,0.06) 0%, rgba(61,166,249,0.02) 100%) !important;
    box-shadow: var(--bp-shadow-cyan) !important;
}

/* Subtle left accent bar on active */
.bannercalc-preset-card.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 3px;
    background: linear-gradient(180deg, var(--bp-cyan), var(--bp-cyan-light));
    border-radius: 0 3px 3px 0;
}

#bannercalc-configurator .bannercalc-preset-label {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--bp-text-primary) !important;
    letter-spacing: -0.1px !important;
}

#bannercalc-configurator .bannercalc-preset-price {
    font-family: var(--bp-font-mono) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--bp-cyan-dark) !important;
    letter-spacing: -0.2px !important;
    background: var(--bp-cyan-ghost) !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
}

/* Popular badge — magenta accent */
#bannercalc-configurator .bannercalc-preset-badge {
    position: absolute !important;
    top: -1px !important;
    right: 8px !important;
    font-family: var(--bp-font-mono) !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: var(--bp-white) !important;
    background: linear-gradient(135deg, var(--bp-magenta), var(--bp-magenta-dark)) !important;
    padding: 2.5px 6px 3px !important;
    border-radius: 0 0 5px 5px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(249, 110, 180, 0.25) !important;
    display: block !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
}

/* Description callout — warm tint */
.bannercalc-preset-description {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    background: var(--bp-warm-white);
    border-radius: 8px;
    border: 1px solid rgba(255, 242, 0, 0.25);
    box-shadow: inset 0 0 0 1px rgba(255, 242, 0, 0.08);
}
.bannercalc-desc-icon {
    color: var(--bp-orange);
    font-size: 14px;
    flex-shrink: 0;
}
.bannercalc-desc-text {
    font-size: 12.5px;
    color: var(--bp-text-secondary);
    line-height: 1.4;
}

/* ================================================================
   CUSTOM SIZE — UNIT SELECTOR
================================================================ */
.bannercalc-unit-selector {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

#bannercalc-configurator .bannercalc-unit-btn {
    padding: 7px 16px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    background: var(--bp-white) !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    font-family: var(--bp-font-body) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--bp-text-muted) !important;
    transition: all 0.15s ease !important;
    line-height: 1 !important;
    box-shadow: var(--bp-shadow-xs) !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    min-height: 0 !important;
}
#bannercalc-configurator .bannercalc-unit-btn:hover {
    border-color: var(--bp-cyan) !important;
    color: var(--bp-cyan-dark) !important;
    box-shadow: var(--bp-shadow-sm) !important;
}
#bannercalc-configurator .bannercalc-unit-btn.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    box-shadow: 0 2px 8px rgba(61, 166, 249, 0.3) !important;
}

/* ================================================================
   DIMENSION INPUTS
================================================================ */
.bannercalc-dimension-inputs {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 12px;
    align-items: end;
    margin-bottom: 12px;
}

.bannercalc-dimension-field {
    min-width: 0;
}

.bannercalc-dimension-field label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--bp-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 5px;
}

.bannercalc-input-group {
    position: relative;
    display: flex;
    align-items: center;
}

.bannercalc-input-group.error .bannercalc-dim-input {
    border-color: var(--bp-error);
    box-shadow: var(--bp-shadow-inner), 0 0 0 3px rgba(237, 28, 36, 0.08);
}

.bannercalc-dim-input {
    width: 100% !important;
    padding: 11px 44px 11px 14px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    border-radius: 10px !important;
    font-family: var(--bp-font-mono) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--bp-text-primary) !important;
    background: var(--bp-white) !important;
    outline: none !important;
    transition: all 0.2s !important;
    -moz-appearance: textfield !important;
    box-shadow: var(--bp-shadow-inner) !important;
}
.bannercalc-dim-input::-webkit-inner-spin-button,
.bannercalc-dim-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.bannercalc-dim-input:focus {
    border-color: var(--bp-cyan) !important;
    box-shadow: var(--bp-shadow-inner), 0 0 0 3px rgba(61, 166, 249, 0.1) !important;
}
.bannercalc-dim-input::placeholder {
    color: var(--bp-mid-gray);
    font-weight: 400;
}

.bannercalc-unit-label {
    position: absolute;
    right: 14px;
    font-family: var(--bp-font-mono);
    font-size: 12px;
    font-weight: 500;
    color: var(--bp-text-muted);
    pointer-events: none;
}

.bannercalc-dimension-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--bp-mid-gray);
    padding-bottom: 2px;
}

/* ─── Constraints & Area ─── */
.bannercalc-constraints {
    font-family: var(--bp-font-mono);
    font-size: 11px;
    color: var(--bp-text-muted);
    margin-bottom: 12px;
}

.bannercalc-constraints.error {
    color: var(--bp-error);
    font-weight: 500;
}

.bannercalc-area-display {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bp-off-white);
    border: 1px solid var(--bp-light-gray);
    border-radius: 8px;
    font-family: var(--bp-font-mono);
    font-size: 12.5px;
    color: var(--bp-text-secondary);
    box-shadow: var(--bp-shadow-inner);
}

/* ================================================================
   ATTRIBUTES SECTION
================================================================ */
.bannercalc-attributes-section .bannercalc-section-overline {
    margin-bottom: 18px;
}

/* Attribute row layouts */
.bannercalc-attr-row {
    margin-bottom: 18px;
}
.bannercalc-attr-row:last-child {
    margin-bottom: 0;
}

.bannercalc-attr-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bannercalc-attr-row--3col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.bannercalc-attr-row--bottom-align {
    align-items: end;
}

.bannercalc-attr-row--compact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bannercalc-attr-row--inline {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: end;
}

.bannercalc-attr-row .bannercalc-attribute {
    margin-bottom: 0;
    min-width: 0;
}

/* Attribute header */
.bannercalc-attribute {
    margin-bottom: 18px;
}

.bannercalc-attr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.bannercalc-attr-label {
    font-family: var(--bp-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bp-text-primary);
    letter-spacing: 0.1px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* ================================================================
   ATTRIBUTE ICONS — dashicons next to labels
================================================================ */
.bannercalc-attr-icon {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
    line-height: 1 !important;
    flex-shrink: 0;
    opacity: 0.85;
}

.bannercalc-attr-selected {
    font-family: var(--bp-font-mono);
    font-size: 11px;
    color: var(--bp-cyan-dark);
    font-weight: 500;
}

.bannercalc-required {
    color: var(--bp-error);
    font-weight: 700;
}

/* ================================================================
   DROPDOWN SELECTS — with colored left accent
================================================================ */
.bannercalc-attr-dropdown-wrap {
    position: relative;
}

#bannercalc-configurator .bannercalc-attr-dropdown {
    width: 100% !important;
    padding: 10px 36px 10px 12px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    border-radius: 9px !important;
    background: var(--bp-white) !important;
    font-family: var(--bp-font-body) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--bp-text-primary) !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.2s !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    box-shadow: var(--bp-shadow-xs) !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 1.4 !important;
}
#bannercalc-configurator .bannercalc-attr-dropdown:focus {
    border-color: var(--bp-cyan) !important;
    box-shadow: var(--bp-shadow-sm), 0 0 0 3px rgba(61, 166, 249, 0.08) !important;
}
#bannercalc-configurator .bannercalc-attr-dropdown:hover {
    border-color: var(--bp-mid-gray) !important;
    box-shadow: var(--bp-shadow-sm) !important;
}

/* Eyelets — green accent (icon replaces old dot) */
#bannercalc-configurator .bannercalc-attr--pa_eyelets .bannercalc-attr-dropdown {
    border-left: 3px solid var(--bp-green) !important;
    padding-left: 11px !important;
    background-color: rgba(57, 181, 74, 0.015) !important;
}
#bannercalc-configurator .bannercalc-attr--pa_eyelets .bannercalc-attr-dropdown:focus {
    border-color: var(--bp-green) !important;
    border-left: 3px solid var(--bp-green) !important;
    box-shadow: var(--bp-shadow-sm), 0 0 0 3px rgba(57, 181, 74, 0.08) !important;
}

/* Pole Pockets — magenta accent (icon replaces old square) */
#bannercalc-configurator .bannercalc-attr--pa_pole-pockets .bannercalc-attr-dropdown {
    border-left: 3px solid var(--bp-magenta) !important;
    padding-left: 11px !important;
    background-color: rgba(249, 110, 180, 0.01) !important;
}
#bannercalc-configurator .bannercalc-attr--pa_pole-pockets .bannercalc-attr-dropdown:focus {
    border-color: var(--bp-magenta) !important;
    border-left: 3px solid var(--bp-magenta) !important;
    box-shadow: var(--bp-shadow-sm), 0 0 0 3px rgba(249, 110, 180, 0.08) !important;
}

/* ================================================================
   PILL BUTTONS — neutral with colored active states
   Scoped to both #bannercalc-configurator AND .bannercalc-card--extras
   so pills work everywhere (options card + design/delivery card).
================================================================ */
.bannercalc-attr-pills {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#bannercalc-configurator .bannercalc-pill,
.bannercalc-card--extras .bannercalc-pill,
.bannercalc-card--delivery .bannercalc-pill {
    padding: 10px 11px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    border-radius: 10px !important;
    background: var(--bp-white) !important;
    cursor: pointer !important;
    font-family: var(--bp-font-body) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bp-text-secondary) !important;
    transition: all 0.18s ease !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    box-shadow: var(--bp-shadow-xs) !important;
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    flex-direction: column !important;
    gap: 2px !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
    text-align: center !important;
}

#bannercalc-configurator .bannercalc-pill:hover,
.bannercalc-card--extras .bannercalc-pill:hover,
.bannercalc-card--delivery .bannercalc-pill:hover {
    border-color: var(--bp-mid-gray) !important;
    color: var(--bp-text-primary) !important;
    box-shadow: var(--bp-shadow-sm) !important;
    transform: translateY(-0.5px) !important;
}

.bannercalc-pill.error {
    border-color: var(--bp-error);
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.bannercalc-pill-price {
    font-family: var(--bp-font-mono);
    font-size: 10px;
    font-weight: 500;
    opacity: 0.7;
    display: block;
    margin-top: 2px;
    line-height: 1;
}

/* Hemming pills — cyan active */
#bannercalc-configurator .bannercalc-attr--pa_hemming .bannercalc-pill.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(61, 166, 249, 0.25) !important;
}

/* Packaging pills — orange/warm active */
#bannercalc-configurator .bannercalc-attr--pa_packaging .bannercalc-pill.active {
    border-color: var(--bp-orange) !important;
    background: linear-gradient(135deg, var(--bp-orange), #D05518) !important;
    color: var(--bp-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(242, 101, 34, 0.25) !important;
}

/* Finish pills — each with unique personality */
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-attr-pills {
    gap: 6px;
}
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-pill {
    padding: 8px 16px !important;
}

/* Gloss — bright shimmery */
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-pill[data-slug="gloss"].active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, rgba(61,166,249,0.12), rgba(126,197,251,0.06)) !important;
    color: var(--bp-cyan-dark) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(61, 166, 249, 0.18) !important;
}

/* Matte — warm earthy */
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-pill[data-slug="matte"].active {
    border-color: #A0927B !important;
    background: linear-gradient(135deg, rgba(160,146,123,0.14), rgba(160,146,123,0.06)) !important;
    color: #7A6E5A !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(160,146,123,0.18) !important;
}

/* Satin — soft magenta */
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-pill[data-slug="satin"].active {
    border-color: var(--bp-magenta-light) !important;
    background: linear-gradient(135deg, rgba(249,110,180,0.08), rgba(251,156,206,0.04)) !important;
    color: var(--bp-magenta-dark) !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(249, 110, 180, 0.14) !important;
}

/* Textured — deep green */
#bannercalc-configurator .bannercalc-attr--pa_finish .bannercalc-pill[data-slug="textured"].active {
    border-color: var(--bp-green) !important;
    background: linear-gradient(135deg, rgba(57,181,74,0.10), rgba(57,181,74,0.03)) !important;
    color: #2A8A38 !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 10px rgba(57, 181, 74, 0.18) !important;
}

/* Fallback: generic pill active (any attribute not specifically styled above) */
#bannercalc-configurator .bannercalc-pill.active,
.bannercalc-card--extras .bannercalc-pill.active,
.bannercalc-card--delivery .bannercalc-pill.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(61, 166, 249, 0.25) !important;
}

/* ================================================================
   TOGGLE SWITCH (Cable Ties)
================================================================ */
.bannercalc-toggle-switch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: var(--bp-off-white);
    border-radius: 10px;
    border: 1px solid var(--bp-light-gray);
    flex-wrap: wrap;
    min-width: 0;
}

.bannercalc-switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 22px;
    flex-shrink: 0;
}
.bannercalc-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.bannercalc-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bp-light-gray);
    border-radius: 22px;
    transition: all 0.25s ease;
    border: 1.5px solid var(--bp-mid-gray);
}
.bannercalc-switch-slider::before {
    content: '';
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background: var(--bp-white);
    border-radius: 50%;
    transition: all 0.25s ease;
    box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}

.bannercalc-toggle-input:checked + .bannercalc-switch-slider {
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark));
    border-color: var(--bp-cyan-dark);
    box-shadow: 0 0 8px rgba(61, 166, 249, 0.3);
}
.bannercalc-toggle-input:checked + .bannercalc-switch-slider::before {
    transform: translateX(18px);
}

.bannercalc-switch-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--bp-text-muted);
    transition: color 0.2s;
}
.bannercalc-switch-label.is-on {
    color: var(--bp-cyan-dark);
    font-weight: 600;
}

.bannercalc-switch-price {
    font-family: var(--bp-font-mono);
    font-size: 10px;
    color: var(--bp-text-muted);
}

/* ================================================================
   FULFILMENT TOGGLE (Collection / Delivery)
================================================================ */
.bannercalc-fulfilment-section {
    margin-bottom: 16px;
}

/* Combined fulfilment + delivery speed: single row, compact */
.bannercalc-delivery-combined {
    padding: 14px 9px !important;
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 16px;
}
.bannercalc-delivery-combined .bannercalc-attribute + .bannercalc-attribute {
    margin-top: 0;
}
.bannercalc-delivery-combined .bannercalc-attr-header {
    margin-bottom: 4px;
}

.bannercalc-fulfilment-toggle {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Higher specificity to override .bannercalc-card--delivery .bannercalc-pill column direction */
.bannercalc-card--delivery .bannercalc-pill.bannercalc-fulfilment-pill {
    flex-direction: row !important;
    gap: 6px !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    justify-content: center !important;
}
.bannercalc-card--delivery .bannercalc-pill.bannercalc-service-pill {
    flex-direction: row !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
.bannercalc-card--delivery .bannercalc-service-pill .bannercalc-pill-price {
    display: inline !important;
    margin-top: 0 !important;
}

.bannercalc-card--delivery .bannercalc-fulfilment-pill .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
}

.bannercalc-fulfilment-pill .bannercalc-fulfilment-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bp-green);
    color: var(--bp-white);
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 2px;
    line-height: 1.5;
}

/* Active collection pill — green tint */
.bannercalc-fulfilment-pill[data-fulfilment="collection"].active {
    border-color: var(--bp-green) !important;
    background: linear-gradient(135deg, var(--bp-green), #2A8A38) !important;
    color: var(--bp-white) !important;
    box-shadow: 0 4px 14px rgba(57, 181, 74, 0.25) !important;
}

.bannercalc-fulfilment-pill[data-fulfilment="collection"].active .bannercalc-fulfilment-badge {
    background: rgba(255,255,255,0.25);
}

/* ================================================================
   PRICING SECTION
================================================================ */
.bannercalc-price-section {
    padding: 0 !important;
    border-top: none !important;
    background: linear-gradient(180deg, var(--bp-white) 0%, var(--bp-off-white) 100%);
}

.bannercalc-price-section .bannercalc-section-overline {
    padding: 0px 15px 0;
}

.bannercalc-price-block {
    margin: 12px 15px 20px;
    background: var(--bp-black);
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    box-shadow: var(--bp-shadow-xl), 0 0 0 1px rgba(255,255,255,0.05) inset;
}

/* CMYK stripe removed — clean top edge */
.bannercalc-price-block::before {
    display: none;
}

/* Subtle gradient glow inside price block */
.bannercalc-price-block::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: linear-gradient(180deg, rgba(61,166,249,0.06) 0%, transparent 100%);
    pointer-events: none;
}

.bannercalc-price-placeholder {
    padding: 28px 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255,255,255,0.5);
}

.bannercalc-price-details {
    padding: 20px 24px;
    position: relative;
    z-index: 1;
}

.bannercalc-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bannercalc-price-base {
    margin-bottom: 6px;
}
.bannercalc-price-base .bannercalc-price-label {
    font-family: var(--bp-font-mono);
    font-size: 12px;
    font-weight: 400;
    color: var(--bp-muted);
}
.bannercalc-price-base .bannercalc-price-value {
    font-family: var(--bp-font-mono);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
}

.bannercalc-price-addons {
    margin-bottom: 6px;
}
.bannercalc-price-addons .bannercalc-price-label {
    font-size: 12px;
    color: var(--bp-muted);
}
.bannercalc-price-addons .bannercalc-price-value {
    font-family: var(--bp-font-mono);
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.bannercalc-price-total {
    padding-top: 14px;
    margin-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.bannercalc-price-total .bannercalc-price-label {
    font-family: var(--bp-font-display);
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
}
.bannercalc-price-total .bannercalc-price-value {
    font-family: var(--bp-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--bp-white);
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(61, 166, 249, 0.3);
}

/* ================================================================
   CARD 3 — DESIGN ACCORDION + PRICING
================================================================ */
.bannercalc-card--extras {
    overflow: visible;
}
.bannercalc-card--extras .bannercalc-price-section,
.bannercalc-card--delivery .bannercalc-price-section {
    border-top: none !important;
}

/* ================================================================
   DESIGN ACCORDION (Upload / Online Designer)
================================================================ */
.bannercalc-design-accordion {
    border-bottom: 1px solid var(--bp-light-gray);
}

.bannercalc-accordion-trigger {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 15px !important;
    cursor: pointer !important;
    background: linear-gradient(135deg, var(--bp-off-white) 0%, rgba(61,166,249,0.02) 100%) !important;
    list-style: none !important;          /* hide default <details> marker */
    -webkit-appearance: none !important;
    font-family: var(--bp-font-display) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--bp-text-primary) !important;
    letter-spacing: 0.2px !important;
    transition: background 0.2s !important;
    user-select: none !important;
}
.bannercalc-accordion-trigger::-webkit-details-marker {
    display: none !important;
}
.bannercalc-accordion-trigger::marker {
    display: none !important;
    content: '' !important;
}
.bannercalc-accordion-trigger:hover {
    background: linear-gradient(135deg, var(--bp-light-gray) 0%, rgba(61,166,249,0.04) 100%) !important;
}

.bannercalc-accordion-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bp-cyan-ghost);
    color: var(--bp-cyan);
    flex-shrink: 0;
}
.bannercalc-accordion-icon .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.bannercalc-accordion-label {
    flex: 1;
}

.bannercalc-accordion-arrow {
    color: var(--bp-muted);
    font-size: 18px !important;
    transition: transform 0.25s ease;
}
.bannercalc-design-accordion[open] .bannercalc-accordion-arrow {
    transform: rotate(180deg);
}

.bannercalc-accordion-content {
    padding: 4px 15px 15px;
}

/* Personalize button when inside accordion */
.bannercalc-accordion-content a.product_type_customizable {
    display: block !important;
    text-align: center !important;
    padding: 11px 24px !important;
    margin: 15px auto !important;
    background: transparent !important;
    color: var(--bp-cyan-dark) !important;
    border: 1.5px solid var(--bp-cyan) !important;
    border-radius: 10px !important;
    font-family: var(--bp-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(61, 166, 249, 0.08) !important;
    line-height: 1.4 !important;
}
.bannercalc-accordion-content a.product_type_customizable:hover {
    background: var(--bp-cyan-ghost) !important;
    border-color: var(--bp-cyan-dark) !important;
    box-shadow: 0 4px 14px rgba(61, 166, 249, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* File upload when inside accordion */
.bannercalc-accordion-content .wc-dnd-file-upload {
    padding: 0 !important;
}

/* ================================================================
   PERSONALIZE BUTTON fallback (before JS relocation)
================================================================ */
form.cart a.product_type_customizable {
    display: block !important;
    text-align: center !important;
    padding: 11px 24px !important;
    margin: 15px auto !important;
    background: transparent !important;
    color: var(--bp-cyan-dark) !important;
    border: 1.5px solid var(--bp-cyan) !important;
    border-radius: 10px !important;
    font-family: var(--bp-font-display) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(61, 166, 249, 0.08) !important;
    line-height: 1.4 !important;
}
form.cart a.product_type_customizable:hover {
    background: var(--bp-cyan-ghost) !important;
    border-color: var(--bp-cyan-dark) !important;
    box-shadow: 0 4px 14px rgba(61, 166, 249, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* ================================================================
   QUANTITY + ADD TO BASKET (WooCommerce override)
================================================================ */
form.cart .quantity {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--bp-light-gray);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bp-white);
    box-shadow: var(--bp-shadow-xs);
    max-width: 150px !important;
    height: 58px !important;
}

form.cart .single_add_to_cart_button {
    flex: 1 !important;
    padding: 16px 24px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--bp-font-display) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    box-shadow: var(--bp-shadow-cyan) !important;
    line-height: 1 !important;
    min-height: 0 !important;
}
form.cart .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--bp-cyan-dark), #0077a8) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(61, 166, 249, 0.25) !important;
}
form.cart .single_add_to_cart_button:active {
    transform: translateY(0) !important;
    box-shadow: var(--bp-shadow-sm) !important;
}

/* ================================================================
   FILE UPLOAD (WooCommerce Drag & Drop / codedropz compatibility)
================================================================ */
.wc-dnd-file-upload {
    padding: 0 5px 0px !important;
}
.wc-dnd-file-upload label {
    display: block;
    font-family: var(--bp-font-body);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bp-text-primary);
    margin-bottom: 8px;
}

.codedropz-upload-handler {
    border: 2px dashed var(--bp-mid-gray);
    border-radius: 12px;    
    text-align: center;
    background: linear-gradient(135deg, var(--bp-off-white) 0%, rgba(61,166,249,0.02) 100%);
    transition: all 0.25s;
    cursor: pointer;
}
.codedropz-upload-handler:hover {
    border-color: var(--bp-cyan);
    background: linear-gradient(135deg, var(--bp-cyan-ghost) 0%, var(--bp-magenta-ghost) 100%);
    box-shadow: var(--bp-shadow-sm);
}

.codedropz-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.codedropz-label .cd-icon {
    font-size: 28px;
    color: var(--bp-mid-gray);
    margin-bottom: 2px;
}
.codedropz-label .text {
    font-size: 13px;
    font-weight: 500;
    color: var(--bp-text-muted);
}
.codedropz-label .cd-separator { display: none; }
.codedropz-label .cd-upload-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-cyan-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.codedropz-label .cd-upload-btn:hover { color: var(--bp-cyan); }

.dnd-upload-counter {
    display: block;
    margin-top: 8px;
    font-family: var(--bp-font-mono);
    font-size: 11px;
    color: var(--bp-text-muted);
}

/* ================================================================
   QUANTITY + ADD TO BASKET ROW
================================================================ */
.bannercalc-quantity-row {
    display: flex !important;
    align-items: flex-end;
    gap: 12px !important;
    padding: 0 15px 20px !important;
    border-top: none !important;
}

.bannercalc-quantity-row .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    background: var(--bp-white) !important;
    box-shadow: var(--bp-shadow-xs) !important;
}
.bannercalc-quantity-row .quantity .input-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 60px !important;
    cursor: pointer !important;
    font-size: 22px !important;
    color: var(--bp-text-muted) !important;
    transition: all 0.15s !important;
    user-select: none !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.bannercalc-quantity-row .quantity .input-button:hover {
    background: var(--bp-off-white) !important;
    color: var(--bp-text-primary) !important;
}
.bannercalc-quantity-row .quantity .input-text.qty {
    width: 56px !important;
    text-align: center !important;
    border: none !important;
    border-left: 1px solid var(--bp-light-gray) !important;
    border-right: 1px solid var(--bp-light-gray) !important;
    font-family: var(--bp-font-mono) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--bp-text-primary) !important;
    height: 60px !important;
    outline: none !important;
    background: transparent !important;
    -moz-appearance: textfield !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    min-height: 0 !important;
}
.bannercalc-quantity-row .quantity .input-text.qty::-webkit-inner-spin-button,
.bannercalc-quantity-row .quantity .input-text.qty::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.bannercalc-quantity-row .single_add_to_cart_button {
    flex: 1 !important;
    padding: 16px 24px !important;
    height: 60px !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    border: none !important;
    border-radius: 10px !important;
    font-family: var(--bp-font-display) !important;
    font-size: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    box-shadow: var(--bp-shadow-cyan) !important;
    line-height: 1 !important;
    min-height: 0 !important;
}
.bannercalc-quantity-row .single_add_to_cart_button:hover {
    background: linear-gradient(135deg, var(--bp-cyan-dark), #0077a8) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(61, 166, 249, 0.25) !important;
}
.bannercalc-quantity-row .single_add_to_cart_button:active {
    transform: translateY(0) !important;
    box-shadow: var(--bp-shadow-sm) !important;
}

/* ================================================================
   STAGGERED ENTRANCE ANIMATION
================================================================ */
@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

#bannercalc-configurator .bannercalc-preset-card {
    animation: fadeSlideIn 0.25s ease both !important;
}
.bannercalc-preset-card:nth-child(1) { animation-delay: 0s; }
.bannercalc-preset-card:nth-child(2) { animation-delay: 0.03s; }
.bannercalc-preset-card:nth-child(3) { animation-delay: 0.06s; }
.bannercalc-preset-card:nth-child(4) { animation-delay: 0.09s; }
.bannercalc-preset-card:nth-child(5) { animation-delay: 0.12s; }
.bannercalc-preset-card:nth-child(6) { animation-delay: 0.15s; }
.bannercalc-preset-card:nth-child(7) { animation-delay: 0.18s; }
.bannercalc-preset-card:nth-child(8) { animation-delay: 0.21s; }
.bannercalc-preset-card:nth-child(9) { animation-delay: 0.24s; }
.bannercalc-preset-card:nth-child(10) { animation-delay: 0.27s; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 540px) {
    .bannercalc-section { padding: 20px 18px; }
    .bannercalc-preset-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .bannercalc-attr-row--2col,
    .bannercalc-attr-row--3col,
    .bannercalc-attr-row--compact,
    .bannercalc-attr-row--inline {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px !important;
    }
    .bannercalc-price-block { margin: 12px 14px 14px; }
    .bannercalc-price-section .bannercalc-section-overline { padding: 16px 18px 0; }
    .bannercalc-quantity-row { padding: 0 18px 16px !important; }
    .bannercalc-quantity-row .quantity .input-button {
        width: 40px !important;
        height: 46px !important;
        font-size: 18px !important;
    }
    .bannercalc-quantity-row .quantity .input-text.qty {
        width: 44px !important;
        height: 46px !important;
        font-size: 16px !important;
    }
    .bannercalc-quantity-row .single_add_to_cart_button {
        height: 46px !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        letter-spacing: 0.5px !important;
    }
    /* Bundled qty: stack pills above button on narrow screens */
    .bannercalc-quantity-row.has-bundles {
        flex-wrap: wrap !important;
    }
    .bannercalc-quantity-row.has-bundles .quantity {
        flex: 1 1 100% !important;
    }
    .bannercalc-bundle-pills {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .bannercalc-bundle-pill {
        font-size: 10px !important;
        padding: 0 6px !important;
    }
    .bannercalc-quantity-row.has-bundles .single_add_to_cart_button {
        flex: 1 1 100% !important;
        height: 40px !important;
        font-size: 13px !important;
    }
    form.cart a.product_type_customizable { margin: 0 18px 4px !important; }
    .wc-dnd-file-upload { padding: 0 18px 8px; }
    .bannercalc-accordion-trigger { padding: 12px 14px !important; font-size: 12px !important; }
    .bannercalc-accordion-content { padding: 4px 14px 14px; }
    .bannercalc-dimension-inputs {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .bannercalc-dimension-separator {
        display: none;
    }
    /* Sticky preview on mobile */
    .bannercalc-preview-tabs {
        position: sticky;
        top: 0;
        z-index: 101;
        margin: 10px 10px 0 !important;
        background: var(--bp-off-white);
    }
    .bannercalc-preview-panel {
        position: sticky;
        top: 46px;
        z-index: 100;
        margin: 0 10px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    }
    /* Fullscreen overlay — mobile adjustments */
    .bannercalc-fullscreen-topbar {
        padding: 10px 14px;
    }
    .bannercalc-fullscreen-title {
        font-size: 12px;
    }
    .bannercalc-fullscreen-size {
        font-size: 11px;
        padding: 3px 8px;
    }
    .bannercalc-fullscreen-canvas {
        padding: 50px 12px 12px;
    }
}
.bannercalc-card.bannercalc-card--extras {
    margin-top: 16px !important;
}
.bannercalc-card.bannercalc-card--delivery {
    margin-top: 16px !important;
    padding: 10px;
}

/* ================================================================
   DESIGN MODE 3-WAY SELECTOR
================================================================ */
.bannercalc-design-mode-section {
    padding: 20px 24px 16px;
}
.bannercalc-design-mode-pills {
    gap: 8px !important;
}
.bannercalc-design-mode-pills .bannercalc-pill {
    flex-direction: row !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
.bannercalc-design-mode-pills .bannercalc-pill-price {
    display: inline !important;
    margin-top: 0 !important;
}
.bannercalc-design-pill.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(61,166,249,0.25) !important;
}
/* Pro Design pill active: same gradient as other design pills */
.bannercalc-design-panel {
    padding: 0 24px 0px;
}
.bannercalc-pro-design-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.bannercalc-pro-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-secondary);
}
.bannercalc-pro-field .bannercalc-textarea,
.bannercalc-pro-field .bannercalc-input {
    font-family: var(--bp-font-body);
    font-size: 13px;
    padding: 8px 12px;
    border: 1.5px solid var(--bp-light-gray);
    border-radius: var(--bp-radius-sm);
    background: var(--bp-white);
    color: var(--bp-text-primary);
    transition: border-color 0.15s;
}
.bannercalc-pro-field .bannercalc-textarea:focus,
.bannercalc-pro-field .bannercalc-input:focus {
    outline: none;
    border-color: var(--bp-cyan);
    box-shadow: 0 0 0 3px rgba(61,166,249,0.08);
}
.bannercalc-design-service-desc {
    font-size: 13px;
    color: var(--bp-text-secondary);
    line-height: 1.5;
    margin-bottom: 4px;
}
.bannercalc-pro-design-qty {
    text-align: center;
}

/* ================================================================
   SERVICE TYPE PILLS
================================================================ */
.bannercalc-service-section {
    padding: 16px 24px 16px;
}
.bannercalc-service-section .bannercalc-pill {
    flex-direction: row !important;
    gap: 5px !important;
    white-space: nowrap !important;
}
.bannercalc-service-section .bannercalc-pill-price {
    display: inline !important;
    margin-top: 0 !important;
}
.bannercalc-service-pill.active {
    border-color: var(--bp-cyan) !important;
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark)) !important;
    color: var(--bp-white) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(61,166,249,0.25) !important;
}
/* Urgent pills get orange gradient when active */
.bannercalc-service-pill.active[data-service="urgent-48"],
.bannercalc-service-pill.active[data-service="urgent-24"] {
    border-color: var(--bp-orange) !important;
    background: linear-gradient(135deg, var(--bp-orange), #D05518) !important;
    color: var(--bp-white) !important;
    box-shadow: 0 4px 14px rgba(242,101,34,0.25) !important;
}

/* ================================================================
   PRICE DISPLAY — SERVICE & DESIGN ROWS
================================================================ */
.bannercalc-price-service,
.bannercalc-price-design {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

/* ================================================================
   BANNER PREVIEW TABS + PANEL
================================================================ */
.bannercalc-preview-tabs {
    display: flex;
    gap: 0;
   
    margin-bottom: 0;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
}
.bannercalc-preview-tab {
    flex: 1;
    padding: 12px 16px;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: var(--bp-off-white);
    font-family: var(--bp-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--bp-text-muted);
    cursor: pointer;
    transition: all 0.18s ease;
    text-align: center;
}
.bannercalc-preview-tab:hover {
    color: var(--bp-white);
    background: var(--bp-mid-gray);
}
.bannercalc-preview-tab.active {
    background: linear-gradient(135deg, var(--bp-cyan), var(--bp-cyan-dark));
    color: var(--bp-white);
    border-bottom-color: var(--bp-cyan-dark);
    box-shadow: 0 2px 8px rgba(61, 166, 249, 0.2);
}
.bannercalc-preview-panel {
    background: var(--bp-white);
    border: 1.5px solid var(--bp-light-gray);
    border-radius: 0 0 14px 14px;
    overflow: hidden;
    
}
.bannercalc-preview-canvas {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 10px;
    background:
        radial-gradient(circle at 20% 30%, rgba(61,166,249,0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(249,110,180,0.02) 0%, transparent 50%),
        var(--bp-off-white);
}
.bannercalc-preview-canvas svg {
    filter: drop-shadow(0 4px 16px rgba(0,0,0,0.10)) drop-shadow(0 1px 4px rgba(0,0,0,0.06));
    transition: all 0.4s ease;
    max-width: 100%;
    height: auto;
    display: block;
}
.bannercalc-preview-legend {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--bp-light-gray);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.bannercalc-legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    color: var(--bp-text-muted);
    transition: color 0.2s;
}
.bannercalc-legend-item.active {
    color: var(--bp-text-primary);
}
.bannercalc-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
    opacity: 0.35;
}
.bannercalc-legend-item.active .bannercalc-legend-dot {
    opacity: 1;
}
.bannercalc-legend-dot--eyelets     { background: var(--bp-cyan); }
.bannercalc-legend-dot--pole-pockets { background: var(--bp-magenta); }
.bannercalc-legend-dot--hemming     { background: var(--bp-orange); }
.bannercalc-legend-dot--cable-ties  { background: var(--bp-green); }
.bannercalc-preview-size-label {
    font-family: var(--bp-font-mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--bp-text-primary);
    background: var(--bp-off-white);
    padding: 3px 10px;
    border-radius: 6px;
}
.bannercalc-preview-header {
    padding: 14px 20px 10px;
    border-bottom: 1px solid var(--bp-light-gray);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.bannercalc-preview-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bannercalc-fullscreen-btn {
    background: none;
    border: 1.5px solid var(--bp-light-gray);
    border-radius: 6px;
    padding: 5px 6px;
    cursor: pointer;
    color: var(--bp-text-muted);
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bannercalc-fullscreen-btn:hover {
    color: var(--bp-cyan);
    border-color: var(--bp-cyan);
    background: rgba(61, 166, 249, 0.06);
}
/* Fullscreen overlay */
.bannercalc-fullscreen-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(15, 20, 30, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation: bannercalc-fadeIn 0.25s ease;
}
@keyframes bannercalc-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.bannercalc-fullscreen-topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 2;
}
.bannercalc-fullscreen-title {
    font-family: var(--bp-font-body);
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
}
.bannercalc-fullscreen-size {
    font-family: var(--bp-font-mono);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 12px;
    border-radius: 6px;
}
.bannercalc-fullscreen-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 6px 8px;
    cursor: pointer;
    color: #ffffff;
    transition: all 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.bannercalc-fullscreen-close:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}
.bannercalc-fullscreen-canvas {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 24px 24px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-height: 0;
}
.bannercalc-fullscreen-canvas svg {
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 84px);
    width: auto;
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.3)) drop-shadow(0 2px 8px rgba(0,0,0,0.15));
}
.bannercalc-preview-title {
    font-family: var(--bp-font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--bp-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.bannercalc-preview-title::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bp-green);
    animation: bannercalc-pulse 2s ease infinite;
}
@keyframes bannercalc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ================================================================
   BUNDLE SELECTOR — compact 3×2 grid beside add-to-cart
================================================================ */

/* When bundles are active, the quantity-row becomes a tight flex row */
.bannercalc-quantity-row.has-bundles {
    align-items: stretch !important;
    gap: 8px !important;
}

/* Remove .quantity chrome — it's just a shell for the hidden input + pills */
.bannercalc-quantity-row.has-bundles .quantity {
    max-width: none !important;
    border: none !important;
    box-shadow: none !important;
    overflow: visible !important;
    height: auto !important;
    background: transparent !important;
    flex-shrink: 0 !important;
}

.bannercalc-bundle-selector {
    margin: 0;
}

.bannercalc-bundle-label {
    display: none; /* hidden — space is tight */
}

/* 3-col × 2-row grid */
.bannercalc-bundle-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    grid-template-rows: 1fr 1fr !important;
    gap: 4px !important;
    height: 100%;
}

/* Compact pills */
.bannercalc-bundle-pill {
    font-family: var(--bp-font-mono) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 0 8px !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--bp-light-gray) !important;
    background: var(--bp-white) !important;
    color: var(--bp-text-secondary) !important;
    cursor: pointer;
    transition: all 0.18s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: row !important;
    gap: 0 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
    text-align: center !important;
    letter-spacing: 0.3px !important;
}
.bannercalc-bundle-pill:hover {
    border-color: var(--bp-cyan-light) !important;
    color: var(--bp-cyan-dark) !important;
    background: var(--bp-cyan-ghost) !important;
}
.bannercalc-bundle-pill.active {
    border-color: var(--bp-cyan) !important;
    background: var(--bp-cyan-ghost) !important;
    color: var(--bp-cyan-dark) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 0 1px var(--bp-cyan) !important;
}

/* Shrink add-to-cart when bundles are present */
.bannercalc-quantity-row.has-bundles .single_add_to_cart_button {
    flex: 1 1 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    letter-spacing: 0.5px !important;
    border-radius: 10px !important;
    align-self: stretch !important;
}

/* ================================================================
   PRICE QUANTITY ROW
================================================================ */
.bannercalc-price-qty {
    border-top: 1px dashed var(--bp-light-gray);
    padding-top: 6px;
    margin-top: 4px;
}
.bannercalc-price-value--muted {
    color: var(--bp-text-muted) !important;
    font-size: 12px !important;
}

/* ================================================================
   PRICE RANGE (single product + archive)
================================================================ */
.bannercalc-price-range {
    font-family: var(--bp-font-body);
    font-weight: 700;
    font-size: 1.25em;
    color: var(--bp-ink);
}
.bannercalc-popular-price {
    display: block;
    font-family: var(--bp-font-body);
    font-size: 0.78em;
    font-weight: 400;
    color: var(--bp-text-muted);
    margin-top: 2px;
}
.bannercalc-archive-popular {
    display: block;
    font-size: 0.8em;
    color: var(--bp-text-muted);
    font-weight: 400;
}