/* ═══════════════════════════════════════════════════════════
   StickitONE Wraps — sow-styles.css  v2.1.6
   Matches RC Name Decal Builder / RC Decal Sheet Builder UI
   ═══════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────── */
.sow-wrap, .sow-hub {
    --sow-bg:         #0f1117;
    --sow-surface:    #181c27;
    --sow-surface-2:  #1f2436;
    --sow-border:     #2a3048;
    --sow-accent:     #e8ff00;
    --sow-accent-dim: #b8cc00;
    --sow-text:       #e8eaf0;
    --sow-text-dim:   #7a8299;
    --sow-success:    #00e07a;
    --sow-error:      #ff4c60;
    --sow-radius:     4px;
    --sow-transition: 180ms ease;
    --sow-font-head:  'Barlow Condensed', sans-serif;
    --sow-font-body:  'DM Mono', monospace;
}

.sow-wrap {
    font-family:   var(--sow-font-body);
    background:    var(--sow-bg);
    color:         var(--sow-text);
    border-radius: 8px;
    border:        1px solid var(--sow-border);
    box-shadow:    0 20px 60px rgba(0,0,0,.55);
    overflow:      visible;
    max-width:     960px;
    margin:        0 auto;
    padding:       0;
    box-sizing:    border-box;
}

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

/* ── Hub Grid ──────────────────────────────────────────── */
.sow-hub {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap:                   16px;
    max-width:             960px;
    margin:                0 auto;
    padding:               24px 16px;
    font-family:           var(--sow-font-body);
}

.sow-hub-card {
    display:         block;
    background:      var(--sow-surface);
    border:          2px solid var(--sow-border);
    border-radius:   var(--sow-radius);
    overflow:        hidden;
    text-decoration: none;
    transition:      border-color var(--sow-transition), transform var(--sow-transition), box-shadow var(--sow-transition);
}

.sow-hub-card:hover {
    border-color: var(--sow-accent);
    transform:    translateY(-2px);
    box-shadow:   0 8px 24px rgba(0,0,0,.35);
}

.sow-hub-card__img {
    width:           100%;
    aspect-ratio:    4/3;
    background:      var(--sow-surface-2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    overflow:        hidden;
}

.sow-hub-card__img img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
}

.sow-hub-card__placeholder {
    font-family: var(--sow-font-head);
    font-size:   48px;
    font-weight: 700;
    color:       var(--sow-text-dim);
}

.sow-hub-card__name {
    padding:        12px 14px;
    font-family:    var(--sow-font-head);
    font-size:      16px;
    font-weight:    600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:          var(--sow-text);
    text-align:     center;
}

.sow-hub-card:hover .sow-hub-card__name { color: var(--sow-accent); }

/* ── Steps ─────────────────────────────────────────────── */
.sow-step {
    background:    var(--sow-surface);
    border-bottom: 1px solid var(--sow-border);
    overflow:      visible;
    transition:    opacity var(--sow-transition);
}

.sow-step:last-of-type { border-bottom: none; }

.sow-step--locked {
    opacity:        0.35;
    pointer-events: none;
    user-select:    none;
}

.sow-step__header {
    display:        flex;
    align-items:    center;
    gap:            12px;
    padding:        16px 24px;
    border-bottom:  1px solid var(--sow-border);
    font-family:    var(--sow-font-head);
    font-size:      18px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:     var(--sow-surface-2);
}

.sow-step__header-text {
    display:        flex;
    flex-direction: column;
    gap:            3px;
}

.sow-step__subtitle {
    font-size:      12px;
    font-weight:    400;
    letter-spacing: 0.02em;
    text-transform: none;
    color:          var(--sow-text-dim);
    font-family:    var(--sow-font-body);
}

.sow-step__num {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--sow-accent);
    color:           #000;
    font-size:       13px;
    font-weight:     700;
    flex-shrink:     0;
}

.sow-step__title { color: var(--sow-text); }

.sow-step__body { padding: 24px; }

/* ── Step 2 — Design Grid ──────────────────────────────── */
/* ── Design Carousel ───────────────────────────────────── */
.sow-step__body--carousel {
    padding-bottom: 8px;
}

.sow-carousel-wrap {
    display:     flex;
    align-items: stretch;
    gap:         0;
    position:    relative;
}

.sow-carousel-viewport {
    flex:     1;
    overflow: hidden;
    position: relative;
}

.sow-design-grid {
    display:    flex;
    gap:        12px;
    transition: transform 320ms ease;
    will-change: transform;
}

.sow-carousel-arrow {
    flex-shrink:     0;
    width:           48px;
    background:      var(--sow-surface-2);
    border:          1px solid var(--sow-border);
    color:           var(--sow-text);
    font-size:       32px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--sow-transition), color var(--sow-transition), opacity var(--sow-transition);
    padding:         0;
    user-select:     none;
}

.sow-carousel-arrow:hover {
    background: var(--sow-accent);
    color:      #000;
    border-color: var(--sow-accent);
}

.sow-carousel-arrow--prev { border-radius: var(--sow-radius) 0 0 var(--sow-radius); border-right: none; }
.sow-carousel-arrow--next { border-radius: 0 var(--sow-radius) var(--sow-radius) 0; border-left:  none; }

/* Dots navigation */
.sow-carousel-dots {
    display:         flex;
    justify-content: center;
    gap:             8px;
    padding:         12px 0 4px;
}

.sow-carousel-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--sow-border);
    cursor:        pointer;
    transition:    background var(--sow-transition), transform var(--sow-transition);
    flex-shrink:   0;
}

.sow-carousel-dot:hover { background: var(--sow-text-dim); }

.sow-carousel-dot--active {
    background: var(--sow-accent);
    transform:  scale(1.25);
}

.sow-design-thumb {
    background:    var(--sow-surface-2);
    border:        2px solid var(--sow-border);
    border-radius: var(--sow-radius);
    cursor:        pointer;
    transition:    border-color var(--sow-transition), opacity var(--sow-transition), box-shadow var(--sow-transition);
    overflow:      hidden;
    user-select:   none;
    /* Carousel: calc width so exactly 4 show on desktop with 12px gaps */
    flex:          0 0 calc(25% - 9px);
    min-width:     0;
}

.sow-design-thumb:hover {
    border-color: rgba(232,255,0,.5);
    box-shadow:   0 0 0 2px rgba(232,255,0,.10);
}

.sow-design-thumb--selected {
    border-color: var(--sow-accent) !important;
    box-shadow:   0 0 0 2px rgba(232,255,0,.20) !important;
}

.sow-design-thumb--dimmed { opacity: 0.45; }

.sow-design-thumb__img {
    width:           100%;
    aspect-ratio:    4/3;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         8px;
    background:      transparent;
}

.sow-design-thumb__img img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
    display:    block;
}

.sow-design-thumb__name {
    padding:        6px 8px;
    font-size:      11px;
    font-family:    var(--sow-font-head);
    text-align:     center;
    color:          var(--sow-text-dim);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
}

.sow-design-thumb--selected .sow-design-thumb__name { color: var(--sow-accent); }

/* ── Step 3 — Two-column layout ────────────────────────── */
.sow-step2-layout {
    display:     flex;
    gap:         28px;
    align-items: flex-start;
}

.sow-preview-col { flex: 1 1 320px; min-width: 0; }
.sow-color-col   { flex: 0 0 280px; min-width: 0; }

.sow-design-preview {
    background:    transparent;
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    min-height:    280px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    overflow:      hidden;
    position:      relative;
}

.sow-design-preview__placeholder {
    color:      var(--sow-text-dim);
    font-size:  13px;
    text-align: center;
    padding:    40px 20px;
    font-style: italic;
}

.sow-design-preview__svg { width: 100%; }
.sow-design-preview__svg svg { width: 100%; height: auto; display: block; }

/* ── Field Labels ──────────────────────────────────────── */
.sow-field-label {
    display:        block;
    font-family:    var(--sow-font-head);
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sow-text-dim);
    margin-bottom:  6px;
}

/* ── Color Set Picker ──────────────────────────────────── */
.sow-color-set-row { margin-bottom: 20px; }
.sow-set-picker    { position: relative; }

.sow-set-display {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         11px 12px;
    min-height:      44px;
    background:      var(--sow-surface-2);
    border:          1px solid var(--sow-border);
    border-radius:   var(--sow-radius);
    cursor:          pointer;
    font-size:       13px;
    transition:      border-color var(--sow-transition), box-shadow var(--sow-transition);
    user-select:     none;
}

.sow-set-display:hover,
.sow-set-display--open {
    border-color: var(--sow-accent);
    box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

.sow-set-arrow {
    color:      var(--sow-text-dim);
    font-size:  .85rem;
    transition: transform var(--sow-transition), color var(--sow-transition);
}

.sow-set-display--open .sow-set-arrow {
    transform: rotate(180deg);
    color:     var(--sow-accent);
}

.sow-set-panel {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    var(--sow-surface-2);
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    box-shadow:    0 8px 24px rgba(0,0,0,.35);
    z-index:       100;
    display:       none;
    overflow:      hidden;
}

.sow-set-panel--open { display: block; }

.sow-set-option {
    padding:       10px 14px;
    font-size:     13px;
    cursor:        pointer;
    border-bottom: 1px solid var(--sow-border);
    transition:    background var(--sow-transition);
    color:         var(--sow-text);
}

.sow-set-option:last-child { border-bottom: none; }
.sow-set-option:hover      { background: rgba(232,255,0,.08); }
.sow-set-option--selected  { background: rgba(232,255,0,.14); color: var(--sow-accent); }

/* ── Zone Color Pickers ────────────────────────────────── */
.sow-zone-row         { margin-bottom: 10px; }
.sow-zone-row--hidden { display: none; }

.sow-zone-label-row {
    display:         flex;
    justify-content: space-between;
    align-items:     baseline;
    margin-bottom:   6px;
}

.sow-zone-required {
    font-size:      10px;
    font-family:    var(--sow-font-head);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--sow-error);
    opacity:        0.7;
}
.sow-color-picker-wrap { position: relative; }

.sow-cp-display {
    display:       flex;
    align-items:   center;
    gap:           10px;
    padding:       10px 12px;
    min-height:    44px;
    background:    var(--sow-surface-2);
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    cursor:        pointer;
    font-size:     13px;
    transition:    border-color var(--sow-transition), box-shadow var(--sow-transition);
    user-select:   none;
}

.sow-cp-display:hover,
.sow-cp-display--open {
    border-color: var(--sow-accent);
    box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

.sow-cp-swatch {
    width:         18px;
    height:        18px;
    border-radius: 2px;
    border:        1px solid rgba(255,255,255,.15);
    flex-shrink:   0;
    background:    var(--sow-surface);
}

.sow-cp-name {
    flex:          1;
    color:         var(--sow-text-dim);
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-style:    italic;
}

.sow-cp-name--selected { color: var(--sow-text); font-style: normal; }

.sow-cp-arrow {
    color:       var(--sow-text-dim);
    font-size:   .85rem;
    transition:  transform var(--sow-transition), color var(--sow-transition);
    flex-shrink: 0;
}

.sow-cp-display--open .sow-cp-arrow {
    transform: rotate(180deg);
    color:     var(--sow-accent);
}

.sow-cp-panel {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    var(--sow-surface-2);
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    box-shadow:    0 8px 24px rgba(0,0,0,.35);
    z-index:       200;
    display:       none;
    max-height:    220px;
    overflow-y:    auto;
}

.sow-cp-panel--open { display: block; }

.sow-cp-option {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    gap:        10px;
    padding:    9px 14px;
    cursor:     pointer;
    font-size:  13px;
    border-bottom: 1px solid var(--sow-border);
    transition: background var(--sow-transition);
    color:      var(--sow-text);
}

.sow-cp-option:last-child { border-bottom: none; }
.sow-cp-option:hover      { background: rgba(232,255,0,.08); }
.sow-cp-option--selected  { background: rgba(232,255,0,.14); color: var(--sow-accent); }

.sow-cp-option--disabled {
    opacity:        0.45;
    cursor:         not-allowed;
    pointer-events: none;
}

.sow-cp-conflict-note {
    display:    block;
    width:      100%;
    margin-top: 3px;
    font-size:  10px;
    font-style: italic;
    color:      var(--sow-text-dim);
    white-space: normal;
    line-height: 1.3;
}

.sow-cp-option__swatch {
    width:         16px;
    height:        16px;
    border-radius: 2px;
    border:        1px solid rgba(255,255,255,.12);
    flex-shrink:   0;
}

/* ── Step 1 — Item Select ──────────────────────────────── */
.sow-item-select-row { margin-bottom: 16px; max-width: 420px; }

.sow-cat-select {
    width:              100%;
    height:             44px;
    padding:            0 32px 0 12px;
    background:         var(--sow-surface-2);
    border:             1px solid var(--sow-border);
    border-radius:      var(--sow-radius);
    color:              var(--sow-text);
    font-family:        var(--sow-font-body);
    font-size:          13px;
    cursor:             pointer;
    appearance:         none;
    -webkit-appearance: none;
    background-image:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237a8299'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    transition:          border-color var(--sow-transition), box-shadow var(--sow-transition);
    box-sizing:          border-box;
}

.sow-cat-select:focus {
    outline:      none;
    border-color: var(--sow-accent);
    box-shadow:   0 0 0 2px rgba(232,255,0,.15);
}

/* ── Selected Items List ───────────────────────────────── */
.sow-selected-items {
    border-top:  1px solid var(--sow-border);
    padding-top: 16px;
}

.sow-selected-items__empty {
    color:      var(--sow-text-dim);
    font-size:  13px;
    font-style: italic;
}

.sow-selected-items__list {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

.sow-item-row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       10px 14px;
    background:    var(--sow-surface-2);
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    font-size:     13px;
    transition:    border-color var(--sow-transition);
}

.sow-item-row:hover { border-color: rgba(42,48,72,.8); }

.sow-item-row__name {
    flex:          1;
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
}

.sow-item-row__cat {
    font-size:      11px;
    color:          var(--sow-text-dim);
    font-family:    var(--sow-font-head);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-top:     2px;
}

.sow-item-row__price {
    color:       var(--sow-accent);
    font-family: var(--sow-font-head);
    font-size:   15px;
    font-weight: 600;
    white-space: nowrap;
}

.sow-qty-ctrl {
    display:     flex;
    align-items: center;
    border:      1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    overflow:    hidden;
    background:  var(--sow-surface);
}

.sow-qty-btn {
    width:           30px;
    height:          30px;
    background:      transparent;
    border:          none;
    color:           var(--sow-text);
    font-size:       18px;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    line-height:     1;
    transition:      background var(--sow-transition), color var(--sow-transition);
    padding:         0;
    flex-shrink:     0;
}

.sow-qty-btn:hover {
    background: rgba(255,255,255,.08);
    color:      var(--sow-accent);
}

.sow-qty-val {
    width:          32px;
    text-align:     center;
    font-size:      13px;
    border-left:    1px solid var(--sow-border);
    border-right:   1px solid var(--sow-border);
    padding:        0;
    line-height:    30px;
    color:          var(--sow-text);
}

.sow-item-remove {
    background:  transparent;
    border:      none;
    color:       var(--sow-text-dim);
    cursor:      pointer;
    font-size:   18px;
    line-height: 1;
    padding:     0 2px;
    transition:  color var(--sow-transition);
}

.sow-item-remove:hover { color: var(--sow-error); }

/* ── Step 4 — Add to Cart ──────────────────────────────── */
.sow-atc-row {
    display:       flex;
    align-items:   center;
    gap:           16px;
    flex-wrap:     wrap;
    margin-bottom: 12px;
}

.sow-atc-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            8px;
    padding:        14px 32px;
    font-family:    var(--sow-font-head);
    font-size:      1.05rem;
    font-weight:    700;
    letter-spacing: .1em;
    text-transform: uppercase;
    border:         2px solid var(--sow-border);
    border-radius:  var(--sow-radius);
    background:     transparent;
    color:          var(--sow-text-dim);
    cursor:         not-allowed;
    transition:     all var(--sow-transition);
}

.sow-atc-btn.sow-atc-btn--ready {
    background:   var(--sow-accent);
    border-color: var(--sow-accent);
    color:        #000;
    cursor:       pointer;
    box-shadow:   0 4px 24px rgba(232,255,0,.3);
}

.sow-atc-btn.sow-atc-btn--ready:hover {
    background:   var(--sow-accent-dim);
    border-color: var(--sow-accent-dim);
    box-shadow:   0 6px 32px rgba(232,255,0,.45);
    transform:    translateY(-1px);
}

.sow-atc-btn.sow-atc-btn--ready:active { transform: translateY(0); }

.sow-atc-msg {
    font-size:   13px;
    color:       var(--sow-error);
    margin-top:  10px;
    line-height: 1.5;
    max-width:   340px;
}

.sow-atc-msg ul {
    margin:     4px 0 0 16px;
    padding:    0;
    list-style: disc;
}

.sow-atc-msg li { margin-bottom: 2px; }

.sow-atc-reqs { display: flex; gap: 8px; flex-wrap: wrap; }

.sow-req {
    padding:        3px 10px;
    border-radius:  20px;
    font-size:      11px;
    font-family:    var(--sow-font-head);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border:         1px solid transparent;
    transition:     all var(--sow-transition);
}

.sow-req--unmet { border-color: var(--sow-border); color: var(--sow-text-dim); }
.sow-req--met   { border-color: var(--sow-accent); color: var(--sow-accent); }

/* ── Order Summary — matches DBB style ─────────────────── */
.sow-summary {
    background:    var(--sow-surface);
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    margin-top:    20px;
    overflow:      hidden;
}

.sow-summary__header {
    display:        flex;
    align-items:    center;
    gap:            10px;
    padding:        12px 20px;
    background:     var(--sow-surface-2);
    border-bottom:  1px solid var(--sow-border);
    font-family:    var(--sow-font-head);
    font-size:      13px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sow-text-dim);
}

.sow-summary__header::before {
    content:         '✦';
    color:           var(--sow-accent);
    font-size:       10px;
}

.sow-summary__body { padding: 0; }

.sow-summary__empty {
    color:      var(--sow-text-dim);
    font-size:  13px;
    font-style: italic;
    margin:     0;
    padding:    16px 20px;
}

.sow-summary__row {
    display:       flex;
    align-items:   center;
    gap:           12px;
    padding:       9px 20px;
    border-bottom: 1px solid var(--sow-border);
    font-size:     13px;
    transition:    background var(--sow-transition);
}

.sow-summary__row:last-of-type { border-bottom: none; }
.sow-summary__row:hover        { background: rgba(255,255,255,.02); }

.sow-summary__label {
    color:          var(--sow-text-dim);
    min-width:      90px;
    flex-shrink:    0;
    font-family:    var(--sow-font-head);
    font-size:      11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sow-summary__value {
    flex:  1;
    color: var(--sow-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sow-summary__swatch {
    width:          20px;
    height:         20px;
    border-radius:  3px;
    border:         1px solid rgba(255,255,255,.15);
    display:        inline-block;
    flex-shrink:    0;
}

.sow-summary__upcharge {
    color:       var(--sow-accent);
    font-size:   11px;
    font-family: var(--sow-font-head);
    margin-left: 4px;
}

.sow-summary__item-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         8px 20px;
    font-size:       13px;
    border-bottom:   1px solid var(--sow-border);
    transition:      background var(--sow-transition);
}

.sow-summary__item-row:hover { background: rgba(255,255,255,.02); }

.sow-summary__item-row--sub {
    padding-top:    4px;
    padding-bottom: 4px;
    background:     var(--sow-surface-2);
}

.sow-summary__item-row--sub:hover { background: var(--sow-surface-2); }

.sow-summary__item-name  { color: var(--sow-text); flex: 1; }

.sow-summary__item-qty {
    color:      var(--sow-text-dim);
    font-size:  12px;
    margin-left: 4px;
}

.sow-summary__item-price {
    color:       var(--sow-accent);
    font-family: var(--sow-font-head);
    font-size:   14px;
    font-weight: 700;
    white-space: nowrap;
    padding-left: 16px;
}

.sow-summary__total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 20px;
    background:      var(--sow-surface-2);
    border-top:      1px solid var(--sow-border);
}

.sow-summary__total-label {
    font-family:    var(--sow-font-head);
    font-size:      12px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sow-text-dim);
}

.sow-summary__total-price {
    color:       var(--sow-accent);
    font-family: var(--sow-font-head);
    font-size:   22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* ── Upsell Popup ──────────────────────────────────────── */
.sow-upsell-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.72);
    z-index:         99999;
    display:         none;
    align-items:     center;
    justify-content: center;
    padding:         20px;
}

.sow-upsell-overlay--open { display: flex; }

.sow-upsell {
    background:    var(--sow-surface);
    border:        1px solid var(--sow-border);
    border-radius: 8px;
    box-shadow:    0 20px 60px rgba(0,0,0,.55);
    width:         100%;
    max-width:     540px;
    max-height:    85vh;
    overflow-y:    auto;
    color:         var(--sow-text);
    font-family:   var(--sow-font-body);
    position:      relative;
}

.sow-upsell__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    padding:         16px 24px;
    border-bottom:   1px solid var(--sow-border);
    font-family:     var(--sow-font-head);
    font-size:       18px;
    font-weight:     700;
    letter-spacing:  0.06em;
    text-transform:  uppercase;
    background:      var(--sow-surface-2);
}

.sow-upsell__close {
    background:  transparent;
    border:      none;
    color:       var(--sow-text-dim);
    font-size:   20px;
    cursor:      pointer;
    line-height: 1;
    padding:     0 4px;
    transition:  color var(--sow-transition);
}

.sow-upsell__close:hover { color: var(--sow-error); }

.sow-upsell__body { padding: 24px; }

.sow-upsell__intro {
    font-size:   14px;
    margin:      0 0 20px;
    line-height: 1.5;
    color:       var(--sow-text-dim);
}

.sow-upsell__choice { display: flex; gap: 12px; }

.sow-upsell__btn {
    flex:           1;
    padding:        13px;
    border-radius:  var(--sow-radius);
    font-family:    var(--sow-font-head);
    font-size:      15px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor:         pointer;
    border:         2px solid var(--sow-border);
    transition:     all var(--sow-transition);
}

.sow-upsell__btn--yes {
    background:   var(--sow-accent);
    color:        #000;
    border-color: var(--sow-accent);
    box-shadow:   0 4px 24px rgba(232,255,0,.3);
}

.sow-upsell__btn--yes:hover {
    background:   var(--sow-accent-dim);
    border-color: var(--sow-accent-dim);
    box-shadow:   0 6px 32px rgba(232,255,0,.45);
}

.sow-upsell__btn--no {
    background: var(--sow-surface-2);
    color:      var(--sow-text-dim);
}

.sow-upsell__btn--no:hover {
    border-color: var(--sow-text-dim);
    color:        var(--sow-text);
}

.sow-upsell-cat-row { margin-bottom: 14px; }

.sow-upsell__selected { margin-top: 20px; }
.sow-upsell__selected .sow-item-row { margin-bottom: 8px; }

.sow-upsell__none {
    color:      var(--sow-text-dim);
    font-size:  13px;
    font-style: italic;
}

.sow-upsell__subtotal {
    margin-top:  12px;
    padding-top: 12px;
    border-top:  1px solid var(--sow-border);
    font-size:   14px;
    text-align:  right;
    color:       var(--sow-text-dim);
}

.sow-upsell__subtotal strong { color: var(--sow-accent); }

.sow-upsell__actions { margin-top: 20px; }

.sow-upsell__done { width: 100%; justify-content: center; }

/* Upsell subtotal rows */
.sow-upsell__subtotal-rows {
    margin-top:  14px;
    border-top:  1px solid var(--sow-border);
    padding-top: 10px;
}

.sow-upsell__subtotal-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         4px 0;
    font-size:       13px;
    color:           var(--sow-text-dim);
}

.sow-upsell__subtotal-row--total {
    margin-top:  8px;
    padding-top: 8px;
    border-top:  1px solid var(--sow-border);
    color:       var(--sow-text);
    font-size:   14px;
}

.sow-upsell__subtotal-row--total strong { color: var(--sow-accent); font-family: var(--sow-font-head); font-size: 16px; }

/* Inline close confirmation */
.sow-upsell-confirm {
    position:      absolute;
    inset:         0;
    background:    var(--sow-surface);
    border-radius: 8px;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    justify-content: center;
    padding:       32px 24px;
    gap:           20px;
    z-index:       10;
}

.sow-upsell-confirm__msg {
    font-size:   15px;
    text-align:  center;
    color:       var(--sow-text);
    line-height: 1.5;
    margin:      0;
}

.sow-upsell-confirm__btns {
    display: flex;
    gap:     12px;
    width:   100%;
}

.sow-upsell-confirm__btns .sow-upsell__btn { flex: 1; }

/* ── Step 5 Total ─────────────────────────────────────── */
.sow-step5-total-wrap {
    display:     flex;
    align-items: baseline;
    gap:         12px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--sow-border);
}

.sow-step5-total-label {
    font-family:    var(--sow-font-head);
    font-size:      14px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--sow-text-dim);
}

.sow-step5-total-price {
    font-family:    var(--sow-font-head);
    font-size:      36px;
    font-weight:    700;
    color:          var(--sow-accent);
    letter-spacing: -0.02em;
    line-height:    1;
}

/* ── Loading Overlay ───────────────────────────────────── */
#sow-loading-overlay {
    position:        fixed;
    inset:           0;
    background:      rgba(0,0,0,.75);
    z-index:         999999;
    display:         none;
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
    gap:             20px;
}

#sow-loading-overlay[style*="flex"] {
    display: flex !important;
}

.sow-loading-box {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
}

.sow-spinner {
    width:        52px;
    height:       52px;
    border:       4px solid rgba(232,255,0,.2);
    border-top:   4px solid var(--sow-accent);
    border-radius: 50%;
    animation:    sow-spin 0.75s linear infinite;
}

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

.sow-loading-msg {
    font-family:    var(--sow-font-head);
    font-size:      16px;
    font-weight:    600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color:          var(--sow-accent);
    margin:         0;
}

/* ── Cart Preview Image ───────────────────────────────── */
/* Injected via woocommerce_after_cart_item_name hook */
.sow-cart-preview {
    margin-top: 8px;
}
.sow-cart-preview__img {
    max-width:    60px;
    height:       auto;
    border-radius: 4px;
    display:      block;
    background:   transparent;
}

/* ── Misc ──────────────────────────────────────────────── */
.sow-empty {
    color:      var(--sow-text-dim);
    font-size:  13px;
    font-style: italic;
}

/* ── Step 3 Pricing ───────────────────────────────────── */
/* .sow-step3-subheader moved into step header as .sow-step__subtitle */
.sow-step3-items {
    margin-top:    16px;
    border:        1px solid var(--sow-border);
    border-radius: var(--sow-radius);
    overflow:      hidden;
}

.sow-step3-item-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         13px 18px;
    font-size:       15px;
    border-bottom:   1px solid var(--sow-border);
    color:           var(--sow-text);
    transition:      background var(--sow-transition);
}

.sow-step3-item-row:last-of-type { border-bottom: none; }
.sow-step3-item-row:hover        { background: rgba(255,255,255,.02); }

.sow-step3-item-name {
    flex:        1;
    font-family: var(--sow-font-head);
    font-size:   16px;
    letter-spacing: 0.02em;
}

.sow-step3-item-price {
    color:          var(--sow-accent);
    font-family:    var(--sow-font-head);
    font-size:      22px;
    font-weight:    700;
    letter-spacing: -0.01em;
}

.sow-step3-total {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    padding:         14px 18px;
    background:      var(--sow-surface-2);
    border-top:      2px solid var(--sow-border);
    font-family:     var(--sow-font-head);
    font-size:       12px;
    font-weight:     700;
    letter-spacing:  0.1em;
    text-transform:  uppercase;
    color:           var(--sow-text-dim);
}

.sow-step3-total-price {
    color:          var(--sow-accent);
    font-size:      28px;
    font-weight:    700;
    letter-spacing: -0.02em;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 860px) {
    .sow-design-thumb { flex: 0 0 calc(33.333% - 8px); }
}

@media (max-width: 700px) {
    .sow-step2-layout { flex-direction: column; }
    .sow-color-col    { flex: 1 1 auto; width: 100%; }
    .sow-preview-col  { width: 100%; }
    .sow-step__body   { padding: 16px; }
}

@media (max-width: 600px) {
    .sow-design-thumb      { flex: 0 0 calc(50% - 6px); }
    .sow-carousel-arrow    { width: 36px; font-size: 24px; }
}

@media (max-width: 500px) {
    .sow-hub { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}