/* ═══════════════════════════════════════════════════════════
   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); }

/* Step 4 header live total (v2.10.0) — mirrors the price-in-header pattern
   used by the Decal Sheet Builder once a color option is picked. */
.sow-step__header-total {
    margin-left:    auto;
    font-family:    var(--sow-font-head);
    font-size:      20px;
    font-weight:    700;
    color:          var(--sow-accent);
    letter-spacing: -0.01em;
    text-transform: none;
}

.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 / Item Picker (shared) ─────────────
   v2.10.2 — the Step 1 item picker was converted from a native <select> to
   this same custom display+panel pattern so its options could show a
   name-left/price-right layout (native <option> elements can't be styled
   that way in any browser). Distinct row classes (.sow-item-option vs
   .sow-set-option) even though the row styling is identical/combined below —
   applyColorSet() re-marks .sow-set-option--selected across every element
   with that class, and sharing it would have wiped the item picker's
   selected state every time a color set was chosen. */
.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,
.sow-item-option {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    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, .sow-item-option:last-child { border-bottom: none; }
.sow-set-option:hover,      .sow-item-option:hover       { background: rgba(232,255,0,.08); }
.sow-set-option--selected,  .sow-item-option--selected   { background: rgba(232,255,0,.14); color: var(--sow-accent); }
.sow-item-option--empty { cursor: default; color: var(--sow-text-dim); font-style: italic; }
.sow-item-option--empty:hover { background: none; }

/* Name-left / bold-price-right layout inside each option row (v2.10.2) —
   matches the Decal Sheet Builder's dropdown styling. */
.sow-dd-name  { flex: 1; }
.sow-dd-price {
    flex-shrink: 0;
    color:       var(--sow-accent);
    font-weight: 700;
}

/* ── 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; }

/* v2.11.0 — upcharge amount shown both in the closed dropdown's selected
   name (.sow-cp-name) and in each option row (.sow-cp-option) */
.sow-cp-upcharge {
    color:       var(--sow-accent);
    font-size:   11px;
    font-family: var(--sow-font-head);
    font-weight: 600;
}

.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);
}

/* ── Item Row (shared with the upsell popup's item list) ─── */
.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;
}

/* v2.11.0 — per-line color upcharge note in the upsell popup's item rows */
.sow-item-row__upcharge {
    font-size:  11px;
    color:      var(--sow-text-dim);
    margin-top: 3px;
}

.sow-item-row__upcharge-amt {
    color:       var(--sow-accent);
    font-weight: 600;
}

.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 Quantity (v2.10.1 — inline with Add to Cart) ─── */
.sow-step5-qty-inline {
    display:     flex;
    align-items: center;
    gap:         10px;
}

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

/* ── 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:    120px;
    height:       auto;
    border-radius: 4px;
    display:      block;
    background:   transparent;
}

/* Native WooCommerce thumbnail is hidden (empty) for every Wraps line item
   via woocommerce_cart_item_thumbnail — collapse the now-empty column so
   the row content shifts left instead of leaving a blank gap. */
.sow-wrap-item td.product-thumbnail {
    width:   0 !important;
    padding: 0 !important;
    border-right: none !important;
}

/* Tighter row spacing — the theme's default cell padding leaves a lot of
   dead vertical space on the plain per-item rows (name/qty/price only,
   no card). Baseline cut roughly in half, with a little extra room kept
   on the first/last row of a group so it doesn't feel cramped against
   neighboring unrelated products.

   NOTE: padding alone didn't shrink the "add-on" rows in testing — the
   space is most likely a fixed min-height (or a flex row sized to fit a
   full thumbnail image) set by the theme, independent of padding. The
   thumbnail column is hidden but its cell may still be reserving the
   theme's usual row height. Resetting min-height/height on the row and
   its cells, in addition to padding, covers that case. */
.sow-wrap-item,
.sow-wrap-item td {
    min-height: 0 !important;
    height:     auto !important;
}
.sow-wrap-item td {
    padding-top:    10px !important;
    padding-bottom: 10px !important;
}
.sow-grouped-item--first td {
    padding-top: 14px !important;
}
.sow-grouped-item--last td {
    padding-bottom: 14px !important;
}
.sow-grouped-item--child td {
    padding-top:    6px !important;
    padding-bottom: 6px !important;
}
/* v2.10.0 — sow-cart-rows.js inserts a .sow-row-header row directly above
   whichever row used to carry the preview/card content (see that file's
   header comment for the root cause). That row is now the visual "top" of
   the group, so the item row right after it should read like a middle row,
   not a first row — the extra top padding/border migrates to the header
   row instead of double-stacking on both. */
.sow-row-header + .sow-grouped-item--first td {
    padding-top: 6px !important;
}
/* Common inner wrappers some themes use to size the row (e.g. a flex
   container around product name/meta) — harmless no-ops if this theme
   doesn't use them, but covers the likely culprit if plain td padding
   isn't the actual source of the height. */
.sow-wrap-item .product-name,
.sow-wrap-item td.product-name > * {
    min-height: 0 !important;
}

/* Remove ("×") button sat flush against the table's edge — nudge it in. */
.sow-wrap-item td.product-remove {
    padding-right: 18px !important;
}
.sow-wrap-item td.product-remove a.remove {
    margin-right: 6px;
}

/* ── Row-header (v2.10.0) ─────────────────────────────────
   The synthetic row sow-cart-rows.js inserts to hold the preview image +
   detail/summary card, separated from the item's own name/price/qty row.
   Not a real cart-item row (no .sow-wrap-item class, no WooCommerce inputs
   inside it), so it needs its own baseline padding rather than inheriting
   the .sow-wrap-item td rules above. */
.sow-row-header td {
    padding:        14px 20px 6px;
    border-bottom:  none !important;
}
/* Standalone (non-grouped) items carry no sow-accent-N class on their
   header row, so this padding is all they need — no border/background
   change from the plain row below. */

/* ── Grouped cart/checkout rows ──────────────────────────
   Visually encloses items added together from the same design/upsell
   popup in one continuous bordered block, so it reads as a single
   group rather than a run of coincidentally-adjacent products.
   Structural shape only — color comes from the paired .sow-accent-N
   class below, so distinct co-present groups can be told apart even
   when they share the same design name (e.g. same design, different
   colorway added in a separate visit). */
.sow-grouped-item td {
    border-bottom: none !important;
}

/* (padding for --first / --last / --child is set once, earlier in this
   file, alongside the other .sow-wrap-item spacing rules) */

/* Per-group accent palette — index 0 is the brand yellow (default, matches
   a cart with only one group); additional co-present groups cycle through
   the rest. Keep in sync with SOW_Cart::PALETTE in class-sow-cart.php.
   The top border that used to sit on .sow-grouped-item--first now sits on
   .sow-row-header instead (v2.10.0) — that row is the true visual top of
   the group now that the card has its own row. */
.sow-accent-0 { background: rgba(232,255,0,0.03); border-left: 3px solid #e8ff00; border-right: 1px solid rgba(232,255,0,0.25); }
.sow-row-header.sow-accent-0                { border-top: 1px solid rgba(232,255,0,0.35); }
.sow-accent-0.sow-grouped-item--last        { border-bottom: 1px solid rgba(232,255,0,0.35) !important; }

.sow-accent-1 { background: rgba(0,229,255,0.05); border-left: 3px solid #00e5ff; border-right: 1px solid rgba(0,229,255,0.3); }
.sow-row-header.sow-accent-1                { border-top: 1px solid rgba(0,229,255,0.4); }
.sow-accent-1.sow-grouped-item--last        { border-bottom: 1px solid rgba(0,229,255,0.4) !important; }

.sow-accent-2 { background: rgba(255,79,216,0.05); border-left: 3px solid #ff4fd8; border-right: 1px solid rgba(255,79,216,0.3); }
.sow-row-header.sow-accent-2                { border-top: 1px solid rgba(255,79,216,0.4); }
.sow-accent-2.sow-grouped-item--last        { border-bottom: 1px solid rgba(255,79,216,0.4) !important; }

.sow-accent-3 { background: rgba(255,159,64,0.05); border-left: 3px solid #ff9f40; border-right: 1px solid rgba(255,159,64,0.3); }
.sow-row-header.sow-accent-3                { border-top: 1px solid rgba(255,159,64,0.4); }
.sow-accent-3.sow-grouped-item--last        { border-bottom: 1px solid rgba(255,159,64,0.4) !important; }

.sow-accent-4 { background: rgba(125,255,151,0.05); border-left: 3px solid #7dff97; border-right: 1px solid rgba(125,255,151,0.3); }
.sow-row-header.sow-accent-4                { border-top: 1px solid rgba(125,255,151,0.4); }
.sow-accent-4.sow-grouped-item--last        { border-bottom: 1px solid rgba(125,255,151,0.4) !important; }

.sow-accent-5 { background: rgba(199,146,255,0.05); border-left: 3px solid #c792ff; border-right: 1px solid rgba(199,146,255,0.3); }
.sow-row-header.sow-accent-5                { border-top: 1px solid rgba(199,146,255,0.4); }
.sow-accent-5.sow-grouped-item--last        { border-bottom: 1px solid rgba(199,146,255,0.4) !important; }

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

/* ── 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)); }
}